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

Control	FAB Workbench Documentation	SAP Documentation
Text	Text	https://sapui5.hana.ondemand.com/#/entity/sap.m.Text
Label	Label	https://sapui5.hana.ondemand.com/#/entity/sap.m.Label
Text Area	Text Area	https://sapui5.hana.ondemand.com/#/entity/sap.m.TextArea
Object Identifier	Object Identifier	https://sapui5.hana.ondemand.com/#/entity/sap.m.ObjectIdentifier
Select	Select	https://sapui5.hana.ondemand.com/#/entity/sap.m.Select
Icon	Icon	https://sapui5.hana.ondemand.com/#/entity/sap.ui.core.Icon
Image	Image	https://sapui5.hana.ondemand.com/#/entity/sap.m.Image
Button	Button	https://sapui5.hana.ondemand.com/#/entity/sap.m.Button
Toggle Button	Toggle Button	https://sapui5.hana.ondemand.com/#/entity/sap.m.ToggleButton
HBox	HBox	https://sapui5.hana.ondemand.com/#/api/sap.m.HBox
VBox	VBox	https://sapui5.hana.ondemand.com/#/api/sap.m.VBox
Vertical Layout	Vertical Layout	https://sapui5.hana.ondemand.com/#/api/sap.ui.layout.VerticalLayout
Div	Div	Standard HTML Div
Table	Table	https://sapui5.hana.ondemand.com/#/api/sap.m.Table
Grid Table	Grid Table	https://sapui5.hana.ondemand.com/#/api/sap.ui.table.Table
Tree Table	Tree Table	https://sapui5.hana.ondemand.com/#/api/sap.ui.table.TreeTable
HTML	HTML	Standard HTML Block
Excel Drop	Excel Drop	FAB Control to allow uploading of Excel files
Upload Collection	Upload Collection - for File Attachments	https://sapui5.hana.ondemand.com/#/api/sap.m.UploadCollection
Toolbar	Toolbar	https://sapui5.hana.ondemand.com/#/api/sap.m.Toolbar/
Map	Map	Google Maps Image. Requires Google Map API
Custom XML	Custom XML	Provides ability to insert any SAP UI5 control through XML declaration
Custom Node	Custom Node	Provides ability to insert custom XML nodes
Input	Input	https://sapui5.hana.ondemand.com/#/api/sap.m.Input
Date Picker	Date Picker	https://sapui5.hana.ondemand.com/#/api/sap.m.DatePicker
Date Time Input	Date Time Input	https://sapui5.hana.ondemand.com/#/api/sap.m.DateTimeInput
Radio Button Group and Radio Button	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	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	Shell	https://sapui5.hana.ondemand.com/#/api/sap.m.Shell
Grid Layout	Grid Layout	https://sapui5.hana.ondemand.com/#/api/sap.ui.layout.Grid
Overflow Toolbar		https://sapui5.hana.ondemand.com/#/api/sap.m.OverflowToolbar
Dynamic Page		https://sapui5.hana.ondemand.com/#/api/sap.f.DynamicPage
Flexible Column Layout		https://sapui5.hana.ondemand.com/#/api/sap.f.FlexibleColumnLayout
Avatar		https://sapui5.hana.ondemand.com/#/api/sap.f.Avatar
Slider		https://sapui5.hana.ondemand.com/#/api/sap.m.Slider
Message Strip		https://sapui5.hana.ondemand.com/#/api/sap.m.MessageStrip
Segmented Button		https://sapui5.hana.ondemand.com/#/api/sap.m.SegmentedButton
Object Number		https://sapui5.hana.ondemand.com/#/api/sap.m.ObjectNumber
Link		https://sapui5.hana.ondemand.com/#/api/sap.m.Link
Breadcrumbs		https://sapui5.hana.ondemand.com/#/api/sap.m.Breadcrumbs
Chart Container		https://sapui5.hana.ondemand.com/#/api/sap.suite.ui.commons.ChartContainer
Viz Frame		https://sapui5.hana.ondemand.com/#/api/sap.viz.ui5.controls.VizFrame

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.