2.2.10 Control Reference

Owned by Charles Evans (Unlicensed)
Last updated: Feb 25, 2019
2 min read

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:

ControlFAB Workbench Documentation SAP Documentation
Text2.2.10.1 Texthttps://sapui5.hana.ondemand.com/#/entity/sap.m.Text

Label

2.2.10.2 Labelhttps://sapui5.hana.ondemand.com/#/entity/sap.m.Label
Text Area2.2.10.3 Text Areahttps://sapui5.hana.ondemand.com/#/entity/sap.m.TextArea
Object Identifier2.2.10.4 Object Identifierhttps://sapui5.hana.ondemand.com/#/entity/sap.m.ObjectIdentifier
Select2.2.10.5 Selecthttps://sapui5.hana.ondemand.com/#/entity/sap.m.Select

Icon

2.2.10.6 Iconhttps://sapui5.hana.ondemand.com/#/entity/sap.ui.core.Icon
Image2.2.10.7 Imagehttps://sapui5.hana.ondemand.com/#/entity/sap.m.Image
Button2.2.10.8 Buttonhttps://sapui5.hana.ondemand.com/#/entity/sap.m.Button
Toggle Button2.2.10.9 Toggle Buttonhttps://sapui5.hana.ondemand.com/#/entity/sap.m.ToggleButton
HBox2.2.10.10 HBoxhttps://sapui5.hana.ondemand.com/#/api/sap.m.HBox
VBox2.2.10.11 VBoxhttps://sapui5.hana.ondemand.com/#/api/sap.m.VBox
Vertical Layout2.2.10.12 Vertical Layouthttps://sapui5.hana.ondemand.com/#/api/sap.ui.layout.VerticalLayout
Div2.2.10.13 DivStandard HTML Div
Table2.2.10.14 Tablehttps://sapui5.hana.ondemand.com/#/api/sap.m.Table
Grid Table2.2.10.15 Grid Tablehttps://sapui5.hana.ondemand.com/#/api/sap.ui.table.Table
Tree Table2.2.10.16 Tree Tablehttps://sapui5.hana.ondemand.com/#/api/sap.ui.table.TreeTable
HTML2.2.10.17 HTMLStandard HTML Block
Excel Drop2.2.10.18 Excel DropFAB Control to allow uploading of Excel files
Upload Collection2.2.10.19 Upload Collection - for File Attachmentshttps://sapui5.hana.ondemand.com/#/api/sap.m.UploadCollection
Toolbar2.2.10.20 Toolbarhttps://sapui5.hana.ondemand.com/#/api/sap.m.Toolbar/
Map2.2.10.21 MapGoogle Maps Image.  Requires Google Map API
Custom XML2.2.10.22 Custom XMLProvides ability to insert any SAP UI5 control through XML declaration
Custom Node2.2.10.23 Custom NodeProvides ability to insert custom XML nodes
Input2.2.10.24 Inputhttps://sapui5.hana.ondemand.com/#/api/sap.m.Input
Date Picker2.2.10.25 Date Pickerhttps://sapui5.hana.ondemand.com/#/api/sap.m.DatePicker
Date Time Input2.2.10.26 Date Time Inputhttps://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

Checkbox2.2.10.28 Checkbox

https://sapui5.hana.ondemand.com/#/api/sap.m.CheckBox

Panel2.2.10.29 Panelhttps://sapui5.hana.ondemand.com/#/api/sap.m.Panel
List2.2.10.30 Listhttps://sapui5.hana.ondemand.com/#/api/sap.m.List
List - Tree2.2.10.31 List Treehttps://sapui5.hana.ondemand.com/#/api/sap.m.Tree
Dialog2.2.10.32 Dialoghttps://sapui5.hana.ondemand.com/#/api/sap.m.Dialog
Popover2.2.10.33 Popoverhttps://sapui5.hana.ondemand.com/#/api/sap.m.Popover
Splitter2.2.10.34 Splitterhttps://sapui5.hana.ondemand.com/#/api/sap.ui.layout.Splitter
Object Page Layout2.2.10.35 Object Page Layout

https://sapui5.hana.ondemand.com/#/api/sap.uxap.ObjectPageLayout

Block Layout2.2.10.36 Block Layouthttps://sapui5.hana.ondemand.com/#/api/sap.ui.layout.BlockLayout
Dynamic Side Content2.2.10.37 Dynamic Side Contenthttps://sapui5.hana.ondemand.com/#/api/sap.ui.layout.DynamicSideContent
Pie/Donut Chart2.2.10.38 Pie/Donut ChartFAB Control to display Pie/Donut Chart
Column/Bar Chart2.2.10.39 Column/Bar ChartFAB Control to display Column/Bar Chart
Tab Bar2.2.10.40 Tab Barhttps://sapui5.hana.ondemand.com/#/api/sap.m.IconTabBar
Object Header2.2.10.41 Object Headerhttps://sapui5.hana.ondemand.com/#/api/sap.m.ObjectHeader
Search Field2.2.10.42 Search Fieldhttps://sapui5.hana.ondemand.com/#/api/sap.m.SearchField
Tile Container2.2.10.43 Tile Containerhttps://sapui5.hana.ondemand.com/#/api/sap.m.TileContainer
Wizard2.2.10.44 Wizardhttps://sapui5.hana.ondemand.com/#/api/sap.m.Wizard
Process Flow
https://sapui5.hana.ondemand.com/#/api/sap.suite.ui.commons.ProcessFlow
 Shell2.2.10.45 Shellhttps://sapui5.hana.ondemand.com/#/api/sap.m.Shell
 Grid Layout2.2.10.46 Grid Layouthttps://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.