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. 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:

Control	FAB Workbench Documentation	SAP Documentation
Text	2.2.10.1 Text	https://sapui5.hana.ondemand.com/#/entity/sap.m.Text
Label	2.2.10.2 Label	https://sapui5.hana.ondemand.com/#/entity/sap.m.Label
Text Area	2.2.10.3 Text Area	https://sapui5.hana.ondemand.com/#/entity/sap.m.TextArea
Object Identifier	2.2.10.4 Object Identifier	https://sapui5.hana.ondemand.com/#/entity/sap.m.ObjectIdentifier
Select	2.2.10.5 Select	https://sapui5.hana.ondemand.com/#/entity/sap.m.Select
Icon	2.2.10.6 Icon	https://sapui5.hana.ondemand.com/#/entity/sap.ui.core.Icon
Image	2.2.10.7 Image	https://sapui5.hana.ondemand.com/#/entity/sap.m.Image
Button	2.2.10.8 Button	https://sapui5.hana.ondemand.com/#/entity/sap.m.Button
Toggle Button	2.2.10.9 Toggle Button	https://sapui5.hana.ondemand.com/#/entity/sap.m.ToggleButton
HBox	2.2.10.10 HBox	https://sapui5.hana.ondemand.com/#/api/sap.m.HBox
VBox	2.2.10.11 VBox	https://sapui5.hana.ondemand.com/#/api/sap.m.VBox
Vertical Layout	2.2.10.12 Vertical Layout	https://sapui5.hana.ondemand.com/#/api/sap.ui.layout.VerticalLayout
Div	2.2.10.13 Div	Standard HTML Div
Table	2.2.10.14 Table	https://sapui5.hana.ondemand.com/#/api/sap.m.Table
Grid Table	2.2.10.15 Grid Table	https://sapui5.hana.ondemand.com/#/api/sap.ui.table.Table
Tree Table	2.2.10.16 Tree Table	https://sapui5.hana.ondemand.com/#/api/sap.ui.table.TreeTable
HTML	2.2.10.17 HTML	Standard HTML Block
Excel Drop	2.2.10.18 Excel Drop	FAB Control to allow uploading of Excel files
Upload Collection	2.2.10.19 Upload Collection - for File Attachments	https://sapui5.hana.ondemand.com/#/api/sap.m.UploadCollection
Toolbar	2.2.10.20 Toolbar	https://sapui5.hana.ondemand.com/#/api/sap.m.Toolbar/
Map	2.2.10.21 Map	Google Maps Image. Requires Google Map API
Custom XML	2.2.10.22 Custom XML	Provides ability to insert any SAP UI5 control through XML declaration
Custom Node	2.2.10.23 Custom Node	Provides ability to insert custom XML nodes
Input	2.2.10.24 Input	https://sapui5.hana.ondemand.com/#/api/sap.m.Input
Date Picker	2.2.10.25 Date Picker	https://sapui5.hana.ondemand.com/#/api/sap.m.DatePicker
Date Time Input	2.2.10.26 Date Time Input	https://sapui5.hana.ondemand.com/#/api/sap.m.DateTimeInput
Radio Button Group and Radio Button	2.2.10.27 Radio Button Group and Radio Button	https://sapui5.hana.ondemand.com/#/api/sap.m.RadioButtonGroup https://sapui5.hana.ondemand.com/#/api/sap.m.RadioButton
Checkbox	2.2.10.28 Checkbox	https://sapui5.hana.ondemand.com/#/api/sap.m.CheckBox
Panel	2.2.10.29 Panel	https://sapui5.hana.ondemand.com/#/api/sap.m.Panel
List	2.2.10.30 List	https://sapui5.hana.ondemand.com/#/api/sap.m.List
List - Tree	2.2.10.31 List Tree	https://sapui5.hana.ondemand.com/#/api/sap.m.Tree
Dialog	2.2.10.32 Dialog	https://sapui5.hana.ondemand.com/#/api/sap.m.Dialog
Popover	2.2.10.33 Popover	https://sapui5.hana.ondemand.com/#/api/sap.m.Popover
Splitter	2.2.10.34 Splitter	https://sapui5.hana.ondemand.com/#/api/sap.ui.layout.Splitter
Object Page Layout	2.2.10.35 Object Page Layout	https://sapui5.hana.ondemand.com/#/api/sap.uxap.ObjectPageLayout
Block Layout	2.2.10.36 Block Layout	https://sapui5.hana.ondemand.com/#/api/sap.ui.layout.BlockLayout
Dynamic Side Content	2.2.10.37 Dynamic Side Content	https://sapui5.hana.ondemand.com/#/api/sap.ui.layout.DynamicSideContent
Pie/Donut Chart	2.2.10.38 Pie/Donut Chart	FAB Control to display Pie/Donut Chart
Column/Bar Chart	2.2.10.39 Column/Bar Chart	FAB Control to display Column/Bar Chart
Tab Bar	2.2.10.40 Tab Bar	https://sapui5.hana.ondemand.com/#/api/sap.m.IconTabBar
Object Header	2.2.10.41 Object Header	https://sapui5.hana.ondemand.com/#/api/sap.m.ObjectHeader
Search Field	2.2.10.42 Search Field	https://sapui5.hana.ondemand.com/#/api/sap.m.SearchField
Tile Container	2.2.10.43 Tile Container	https://sapui5.hana.ondemand.com/#/api/sap.m.TileContainer
Wizard	2.2.10.44 Wizard	https://sapui5.hana.ondemand.com/#/api/sap.m.Wizard
Process Flow		https://sapui5.hana.ondemand.com/#/api/sap.suite.ui.commons.ProcessFlow
Shell	2.2.10.45 Shell	https://sapui5.hana.ondemand.com/#/api/sap.m.Shell
Grid Layout	2.2.10.46 Grid Layout	https://sapui5.hana.ondemand.com/#/api/sap.ui.layout.Grid

Setting Additional Properties:

For items that are not yet available in the properties section of the control, the "Advance" section can be used. This is where additional properties can be set.

Please see this page for details and example

Custom Controls:

For controls not supplied out of the box, the Custom XML node can be used that will allow standard SAP UI5 XML definitions to be used.

Please see this page for details and an example.

Related articles

Page:

2.2.5 Add UI elements to the App
Page:

2.2.5.1 Add UI elements outside of a Form Element
Page:

2.7 Using Tables in FAB
Page:

3.1 Form Wizard
Page:

3.2 SAP Screen Wizard
Page:

3.3 BDC Recording

Browser not supported