Create a Panel for Smart Devices using a template

In order to create a Panel for Smart Devices based on an SmartDevicesPlus template, you should follow the steps below:

  1. Create a Panel for Smart Devices

    Select the option to create a new Panel for Smart Devices:
    CreateAPanelForSmartDevicesImg01
     
  2. Select Theme

    The first time that you use SmartDevicesPlus in a KB and you create a Smart Devices object, it will require that you select a Theme from the available ones (if you haven't done this with the option 'Import SmartDevicesPlus Theme'. Then it will always use the same theme to the other objects, so that you mantain a standarized look & feel through the different objects of your application.

    More information about this step: 'Import an SmartDevicesPlus Theme'

  3. Select Template

    You have to select one template from the available ones of that Theme, depending on what information you want to display and the layout needed.

    The templates are divided in categories (each Theme will have a set of category templates and the developers can create new categories and new templates of a Theme). These categories will group templates by the purpose of the Panel.

    For example,  FlatBlue template contains the following template categories and templates:

    CreateAPanelForSmartDevicesImg02

    In this dialog you can filter the templates by selecting any template category and also, you can select the category Recent , which will show you the last 6 used templates.

    e.g.
    CreateAPanelForSmartDevicesImg03

    In this dialog you can also filter the displayed templates by specific platform. e.g. if you select the Filter Android checkbox the wizard will only show templates that have a layout compatible with the Android platform. When both iOS and Android filters are selected, the wizard will only show templates that work in both platforms and when none is selected, all templates will be display, regardless of their available layouts.
    CreateAPanelForSmartDevicesImg04

    For example, you select  the template named 'Image with title and subtitle' from category List and press 'Select':

    CreateAPanelForSmartDevicesImg05

    Then, you will have to fullfil the information required by the selected template:

    CreateAPanelForSmartDevicesImg06

    Options:

    Enable Floating Actions:

    Specifies whether the panel will have floating actions.

    CreateAPanelForSmartDevicesImg12

    DataGrid:

    Based on: 

    Specifies whether the grid will be based on attributes or SDT.

    Content:

    Image: 

    Specifies the image that will be displayed for each record in the list.

    Title: 

    Specifies the title that will be displayed for each record of the list.

    Subtitle: 

    Specifies the subtitle that will be displayed for each record of the list.

  4. The Panel for Smart Devices has been created

    CreateAPanelForSmartDevicesImg07

    After you create the SD Panel based on the selected SmartDevicesPlus template you can modify the SD Panel directly in the layout or you can change the mapping between the SmartDevicesPlus template and the attributes/controls selected by clicking in the option 'Edit SmartDevicesPlus template properties':

    CreateAPanelForSmartDevicesImg08

    It shows a message warning you that if you select 'Accept' you will lose the changes that you made manually to the layouts:

    CreateAPanelForSmartDevicesImg09

    If you press accept it will open the window for changing it in the wizard window:

    CreateAPanelForSmartDevicesImg10

    In this window you also have the option to change the SmartDevicesPlus template selected (in the image above is the SmartDevicesPlus named 'Image with title and subtitle'.
     

Also, you have the following actions available within an SD Panel based on an SmartDevicesPlus template:??????

CreateAPanelForSmartDevicesImg11