Training UI Elements - xAPPnow Low Code Platform

 

 

This training will familiarize you with the configuration possibilities of the most frequently used User Interface (UI) elements as well as the UI Layout elements. The training is recommended for users that already know about the basic features of the xAPPnow Low Code Platform.  After this training session the user will be able to implement moderate to complex UI pages.

 

Remark: We recommend that you do the Basic Training first before you start this training to get familiar with the general usage of the xAPPnow Low Code Platform.

 

 

 

For all training chapters we will use the Dynamic Frontend Service model type, which can be published and provides the test of the entire UI element in the xAPPnow User Portal.

 

 

 

First, we will explain the UI Layout elements of a UI Page, which consist of a Grid Layout. To structure a UI page we provide a UI Panel and a UI TAB element. Regarding reusability and maintainability we provide UI Templates and a so-called Referenced UI Panels.

 

Finally, you will understand responsive design, which is provided out-of-the-box and the possibilities for an individual responsive design configuration.

 

 

 

Each tutorial of a Basic or Advanced UI element has an identical structure and is divided in sections, where each section is implemented in a specific TAB of a UI TAB element.

 

 

 

The TAB "Element Properties" is used to explain the basic configuration of UI element properties like UI element "alignment" or "width".

 

 

 

 

 

The TAB "Data Mapping" demonstrates the attribute type related mapping of the UI element like "string" or "integer" etc.

 

Each UI element which displays or reads data has to be mapped with a corresponding attribute or business object. There are two variants for the data mappping of UI elements.

 

 

We will use Variant 2 in the following exercises to rapidly complete a UI page with the required UI elements.

 

 

 

 

 

 

 

The TAB "Data Valiation" demonstrates the attribute type related validation, default value and mandatory specification of the UI element based on the BO attribute configuration in SubTAB "Values and Validation".

 

 

 

 

 

 

In TAB "Events" you will get familiar with the event configuration like "onClick" or "onDoubleClick" of the UI element and the programming of "Action" and "Validation" scripts, which are executed when the event is fired.

 

Remark: In the UI element tutorial we use the event type "NO FLOW" or "CANCEL NO FLOW", which means that no external button flow is executed in the parent Frontend Service Model.

 

 

 

 

The TAB "Visibility" is used to explain the visibility configuration like "editable" or "read-only" of the UI element and the programming of "Visibility" scripts.

 

 

 

 

The training consists of the following training chapters