2.2.5 Add UI elements to the App

Owned by Elzette Olivier (Deactivated)
Last updated: Mar 14, 2018 by Andre Reforma (Deactivated)
4 min read

As soon as an App has been created, you are presented with a blank Project.

Define what type of Form Element you want by right clicking on the 2.2.4 Form Element.


How to Add an Input field:

  1. Select the Form Element where you want to add an Input field and right click.
  2.  Select Add Input. Click on Input to access it's properties.

  3. The mandatory property that must be entered for the Input is the “Bound Field”.
    This is the field where the Input data is stored when the Form is submitted.
    Simply name the field as required. In this example, the Bound Field name is ‘Expenditure Amount”.
    Type in “ExpenditureAmount” in the Bound Field property and press enter.
     
    Notice that a the field “ExpenditureAmount” automatically appears on the right hand “Fields” section.

  4. The Fields section eventually contains all the fields for the Form. It is essentially the ‘data dictionary’ of the Form.
     
    In certain cases, it may be necessary to flag a field as being of a particular type (Boolean, Date, Integer or Float), depending on the use of the field (for example fields bound to CheckBoxes should be Boolean). But by default most fields can be just String (ie no specific type).
     
    Press Save and see the result.

  5. Now change the “Label” of the Input field to say “Expenditure Amount”.
    To do this, select the Form Element above the Input in the tree and change the Label property.

  6. Press Save.



Form Element (values supplied by system)

Some form elements can be defined and have the system pre-fill the relevant data.
 
You can define a form element and bind the form element data to FAB supplied data.
 
For example, the 'Requested by' name can be determined and pre-filled by binding the field to 'SubmittedByEname'.

The result is a system populated text field.

Several other defaults are available and can be seen by using the search option on the Bound Field.
 
System Field                                    Source
SubmittedByEname                         user_addr
SubmittedByOrgUnit
SubmittedByOrgeh
SubmittedByPernr                   
SubmittedByPlans
SubmittedByPosition
SubmittedDate
SubmissionStage
 
AdministratorFl
ApprovalRequiredFl
CurrentApprovalLevel
CurrentLevelAction
CurrentLevelApprovedFl
CurrentStatus
NextApproverVisible
NextApproversList


Other Element Types

Below are some of the other Element Types that you can add.

You can add Text and multiple input fields in the same Form Element.

Use the GridData tab to manipulate the display of every item you added to the Form Element.

You can add a Date Picker. Manipulate the Input and the display by using the Properties. Please Note that the Bound Field is mandatory.

You can add Radio Buttons by first adding a Radio Button Group and then the Radio Buttons.


To view the App and changes to the form click on Save at any time.


The App will be displayed in the right hand column.

Note: Zoom in on the Form by holding down Ctrl key while turning mouse wheel, or manually zoom in using pinch action on touch screen, or by whatever means the zooming action is carried out on your computer.

Every App consists of four different components namely Page, Form, Form Container and Form Element. The properties of a component can be accessed by clicking on the component.

Follow the steps below to change the Title of a Page.

Step-by-step guide

  1. Click on the Page component.

  2. Change the Title to the title of your form.

  3. Click on Save.