Controls

Owned by Charles Evans (Unlicensed)
Feb 12, 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
TextTexthttps://sapui5.hana.ondemand.com/#/entity/sap.m.Text

Label

Labelhttps://sapui5.hana.ondemand.com/#/entity/sap.m.Label
Text AreaText Areahttps://sapui5.hana.ondemand.com/#/entity/sap.m.TextArea
Object IdentifierObject Identifierhttps://sapui5.hana.ondemand.com/#/entity/sap.m.ObjectIdentifier
SelectSelecthttps://sapui5.hana.ondemand.com/#/entity/sap.m.Select

Icon

Iconhttps://sapui5.hana.ondemand.com/#/entity/sap.ui.core.Icon
ImageImagehttps://sapui5.hana.ondemand.com/#/entity/sap.m.Image
ButtonButtonhttps://sapui5.hana.ondemand.com/#/entity/sap.m.Button
Toggle ButtonToggle Buttonhttps://sapui5.hana.ondemand.com/#/entity/sap.m.ToggleButton
HBoxHBoxhttps://sapui5.hana.ondemand.com/#/api/sap.m.HBox
VBoxVBoxhttps://sapui5.hana.ondemand.com/#/api/sap.m.VBox
Vertical LayoutVertical Layouthttps://sapui5.hana.ondemand.com/#/api/sap.ui.layout.VerticalLayout
DivDivStandard HTML Div
TableTablehttps://sapui5.hana.ondemand.com/#/api/sap.m.Table
Grid TableGrid Tablehttps://sapui5.hana.ondemand.com/#/api/sap.ui.table.Table
Tree TableTree Tablehttps://sapui5.hana.ondemand.com/#/api/sap.ui.table.TreeTable
HTMLHTMLStandard HTML Block
Excel DropExcel DropFAB Control to allow uploading of Excel files
Upload CollectionUpload Collection - for File Attachmentshttps://sapui5.hana.ondemand.com/#/api/sap.m.UploadCollection
ToolbarToolbarhttps://sapui5.hana.ondemand.com/#/api/sap.m.Toolbar/
MapMapGoogle Maps Image.  Requires Google Map API
Custom XMLCustom XMLProvides ability to insert any SAP UI5 control through XML declaration
Custom NodeCustom NodeProvides ability to insert custom XML nodes
InputInputhttps://sapui5.hana.ondemand.com/#/api/sap.m.Input
Date PickerDate Pickerhttps://sapui5.hana.ondemand.com/#/api/sap.m.DatePicker
Date Time InputDate Time Inputhttps://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

CheckboxCheckbox

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
 ShellShellhttps://sapui5.hana.ondemand.com/#/api/sap.m.Shell
 Grid LayoutGrid Layouthttps://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.



IQX Business Solutions - FAB 3.10