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 Form Element.
How to Add an Input field:
...
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.
...
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.
...
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.
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
Click on the Page component.
Change the Title to the title of your form.
- Click on Save.
The Form Structure panel of the developer workbench is a visual representation of the controls that make up your application's user interface. The Project node is the root node under which multiple pages, scripts and models can be added. In new applications, a Page is automatically added along with a Form, Form Container and Form Element.
| Info |
|---|
You can check out the Fiori Design Guidelines for Forms here or the UI5 SDK here for more information on the form structure. |
If you plan to use a Form in your application you can start adding new UI elements directly to the existing Form by right-clicking a node in the Form Structure and selecting from one of the provided options. Depending on the selected node, the right click menu may provide you with different options of what controls can be added. This is due to the fact that some controls have restrictions on the parent control in which they are placed. e.g. You may not add an Input control directly under a Form or Form Container, you can only add it under the Form Element.
Take a look at the video below which shows how to setup a basic form from a newly created application.
The video also shows how to bind various controls to your data model using the Bound Field property. When adding a new control that accepts user input, the Bound Field property informs the application which field in the Data Model to use for storage. You can use the search help to find an existing field in the data model to bind the control to, or you can type in a new field name which will automatically add that field to your data model.
Once you have added a new control to your form structure, the next step is to configure that control through the Properties section. After clicking on the control in the Form Structure section, the available properties for that control will appear in the Properties grid. As shown in the video, changing the text of a Form Element is as simple as changing the value of the Label property.
A useful property exposed by some controls is GridData(LMS). Behind the scenes this is creating a sap.ui.layout.GridData element which will control the size of the control based on the device (Desktop, Tablet, Phone) on which the app is being displayed. Fiori applications use a 12 column layout and each of the controls can be configured to take up a certain number of these columns based on the size of the device.
e.g. Setting L4M6S12 for the GridData(LMS) property is instructing the app to use 4 columns when the viewing size is Large, 6 columns when Medium and the full 12 columns when Small.
| Info |
|---|
For more information on the available controls and their associated properties, please visit the Control Reference page. |
Related articles
| Filter by label (Content by label) | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
...