WorkWithPlus for Native Mobile Design System Wizard

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

ImportAndSmartDevicesPlusThemeImg01

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

Quick Start

Once the "Design system wizard" launches, a "Quick Start" dialog will be available.

In this dialog, the user will be able to create an application, based on one of our designs, un 3 easy steps:

  1. Select the Design
  2. Enter basic application information, like the application's name
  3. Click the "Create App" button

ImportAndSmartDevicesPlusThemeImg02

Each time the user selects a design, a couple of short videos will be displayed, showing the main look and feel for the selected design.

These videos support seeking and can be paused at any given time.

ImportAndSmartDevicesPlusThemeImg11

Although the application information can be changed manually after the application is created, we strongly recommend you enter the required information:

  • Application title
  • Connectivity
  • Security
  • Color palette
  • Application icon

Customize your design

If you want to change any of the predefined designs, or simply want to know the exact configuration it will import, you can select the "Customize" option.

This will display a list of categories and for each category, you will be able to see or change the associated parameters.

You can move between categories any time you want, and once you are satisfied with your customizations, just click "Create App".

App Info:

In this step, you will be able to modify basic application information, like object name, application title, color palette, font, icons, etc.

ImportAndSmartDevicesPlusThemeImg15

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 Knowledge Base.
  • App title: specify the title of your application. This setting defines the following GeneXus property: ApplicationTitle
  • App identifier: specify the app identifier 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 Knowledge 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 a specific color for it and so create customized 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.

Home and Menu:

In this step, you will be able to modify the menu and home designs, including the use of tabs, onboarding, etc.

NativeMobile_DSWizard_Custom_HomeMenu

Menu design:

You can select the design for your application's menu. When you click on 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 on 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, WorkWithPlus for Native Mobile will create a sample onboarding panel, which the 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 the home panel:

Always visible

Start invisible

No bar

The application bar is always visible. The application bar starts invisible, but as the user scrolls, it becomes visible. 

The application bar will not be displayed.

Wizard_Step_3_Appbar_always Wizard_Step_3_Appbar_start Wizard_Step_3_Appbar_nobar

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 using 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 on this field you can visualize a preview of the possible layouts and select the one that satisfies your requirements.

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", WorkWithPlus for Native Mobile 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 on this field you can visualize a preview of the possible layouts and the one that satisfies your requirements.

Data Sections

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 field's layout that your application will have by default. When you click on this field you can visualize a preview of the possible designs and select one.

Data section boxing:

In this category, you can define how the 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

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.

Once the importing process is finished, you can start applying WorkWithPlus for Native Mobile in your Transactions and Smart Devices Panels.   

WorkWithPlus for Native Mobile will import a set of templates, panels, data providers, procedures, and APIs under the NativeMobile module. It is recommended that these objects are not modified, or you could lose your changes on future upgrades.

NativeMobile_Imported_Module

Meanwhile, all the panels, data providers, and procedures that are generated specifically for your application will be generated inside the "Root Module", in a folder with the chosen 'application name' 

NativeMobile_Generated_MainFolder