SmartDevicesPlus Design System Wizard

In order to start using SmartDevicesPlus in your project, you should apply a SmartDevicesPlus Design to your application, you can do it by selecting: Tools -> SmartDevicesPlus -> Design System Wizard

ImportAndSmartDevicesPlusThemeImg01

The "Design System Wizard" will guide you through different steps where you will be able to customise the look&feel of the application and the features of it. In this way, for each project you will have a totally customised theme and features.

Step 1- Select a Design

In this step you can select what design do you want to use for your application. Once you select one of them, you have the possibility to change the primary color of it and visualize an illustration of its templates.

ImportAndSmartDevicesPlusThemeImg02

Step 2 - Application Information

In this step you define general settings of the Menu of your application.

ImportAndSmartDevicesPlusThemeImg11

App Properties:

  • Name: specify the name of the Main panel of your application. This panel will have the desired menu and the necessary code to load it. It will be set automatically as the Main Object of the Knwoledge Base.
  • App title: specify the title of you application. This setting defines the following GeneXus property: ApplicationTitle
  • App identifier: specify the app indentifier of the application. This setting defines the following GeneXus property: Apple Bundle Identifier.
  • Connectivity: specify if your application will be Online or Offline. This setting defines the following GeneXus property: Connectivity Support
  • Enable Notifications: specify if the Push Notifications will be enabled or not in the Knwoledge Base. 

Font:

In this category you can specify the desired font for the application texts.

Sample Icons Collection:

In this category you can select the collection of icons that your application will have. In this way, you will have ready to use icons that can be used for the Menu items or in any part of the app where you may need it.

If the collection "Material.io" is selected, you will be able to select an specific color for it and so create customised icons for your app:

ImportThemeImg01

Icon:

In this category you can specify the Icon of your application. This setting defines the following GeneXus properties: Android Application Icon and Apple Application Icon.

Splash Screen:

In this category you specify the Splash screen of your application. This setting defines the following GeneXus properties: Android Portrait Launch Image and Apple Launch Image.

Step 3 - Application menu and home

In this step you will define the look and feel of some of the application's parts.

ImportAndSmartDevicesPlusThemeImg15

Menu design:

In this category you can select the design for your application's menu. When you click in this field you can visualize a preview of the possible designs and select one.

Home panel design:

In this category you can select the design for your application's home panel. When you click in this field you can visualize a preview of the possible designs and select one.

If you select the "Use tabs un home panel" checkbox you will have tabs at the bottom of the Home layout defined previously.

Application Onboarding

If enabled, SmartDevicesPlus will create a sample onboarding panel, which user will later be able to modify.

The onboarding panel is a panel that is only displayed the first time the applications are opened. Once the user closes this panel, it will not appear again unless the developer changes behavior.

e.g.:

First time application is opened:

sdp_onboarding_behavior

Following times the application is opened:

sdp_onboarding_behavior_2

Application bar behavior

It allows the developer to define how the application bar will behave in home panel:

Always visible

Start invisible

No bar

Application bar is always visible. Application bar starts invisible, but as user scrolls it becomes visible. 

Application bar will not be displayed.

Wizard_Step_3_Appbar_always Wizard_Step_3_Appbar_start Wizard_Step_3_Appbar_nobar

Step 4 - Fields design

In this step you can define general Security customizations of your Knowledge Base.

ImportAndSmartDevicesPlusTheme_Step4_fieldsdesign

Detail fields design:

In this category, you can select the detail fields layout that your application will have by default. When you click in this field you can visualize a preview of the possible designs and select one.

Data section boxing:

In this category, you can define how to section data will be displayed. A data section is a group of one or more fields.

Data edit field boxing:

In this category, you can define how individual fields will be displayed in edit mode panels

Step 5 - Security

In this step, you can define general Security customizations of your Knowledge Base.

ImportAndSmartDevicesPlusThemeImg10

Security:

In this category you define the type of security that the app will have. We strongly suggest to use GAM in order to have a secure app. You can also select GAM type (authentication or authorization) 

Login Design:

In this category you can select the Login panel design that your application will have by default. When you click in this field you can visualize a preview of the possible layouts and select the one that satisfies your requirenments.

In addition, the property 'Enable Fingerprint Login' defines if this login will have the possibility to use the Fingerprint reader of the device. If you set this property to "True", SmartDevicesPlus will generate the necessary code into the login panel to use the Biometrics API automatically.

Register Design:

In this category you can select the Register User panel design that your application will have by default. When you click in this field you can visualize a preview of the possible layouts and the one that satisfies your requirenments.

Import Process:

When you select "Finish", the necessary objects (images, GeneXus theme, external objects etc.) will be imported into your Knowledge Base so all the settings that you have selected will be applied to your application.

ImportAndSmartDevicesPlusThemeImg09

Once the importing process is finished, you can start applying SmartDevicesPlus in your Transactions and Smart Devices Panels.