Controls
FAB Controls
Fiori App Builder comes packaged with a set of common SAP UI5 controls that can be easily added to your application without any additional coding. These components are in reality SAP UI5 controls but Fiori App Builder has wrapped these so that they can be used directly from within the FAB Workbench. Controls can be added to the application by right clicking on a node in the Form Structure and selecting the control. It forms a nested tree structure when the ctrl key is pressed while dragging and dropping a child control onto a parent control. To interact with these controls in a more advanced manner, the API documentation for each control can be viewed from the links below where properties and events will be displayed that can be manipulated through JavaScript code.
Useful Links
Fiori Design Guidelines: https://experience.sap.com/fiori-design-web/
SAP UI5 Controls (Samples and API Reference): https://sapui5.hana.ondemand.com/#/controls
Control List
Container Controls
Control | FAB Workbench Documentation | SAP Documentation |
---|---|---|
Page | ||
Page (Expert) |
|
Layout Controls
Control | FAB Workbench Documentation | SAP Documentation |
---|---|---|
HBox | ||
VBox | ||
Vertical Layout | ||
Horizontal Layout |
| |
Grid Layout | ||
Panel | ||
Chart Container |
| |
Chart Container Content |
| |
Dynamic Page |
| |
Flexible Column Layout |
| |
Object Page Layout | ||
Block Layout | ||
Dynamic Side Content | ||
Splitter | ||
Shell | ||
Div | Standard HTML Div |
Form Controls
Control | FAB Workbench Documentation | SAP Documentation |
---|---|---|
Form | ||
Form Container | ||
Form Element | ||
Simple Form |
|
Input Controls
Control | FAB Workbench Documentation | SAP Documentation |
---|---|---|
Input | ||
Slider |
| |
Date Picker | ||
Date Time Picker | ||
Select | ||
Radio Button Group | ||
Radio Button | ||
Checkbox | ||
Text Area | ||
Search Field |
Text/Output Controls
Control | FAB Workbench Documentation | SAP Documentation |
---|---|---|
Text | ||
Label | ||
Title |
| |
Formatted Text |
| |
Object Attribute |
| |
Object Identifier | ||
Object Number |
| |
Object Status |
| |
Icon | ||
Image | ||
HTML | ||
Link |
| |
Breadcrumbs |
| |