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.

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.

Step 4 - 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 Integration 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.