2.2.10 Control Reference

2.2.10 Control Reference

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

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