Page Comparison

Live Search

spaceKey	@self
size	large

...

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. Controls can be added to the application by right clicking on a node in the Form Structure and selecting the control. It forms a nested tree structure when the ctrl key is pressed while dragging and dropping a child control onto a parent control. 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.

...

Control List

Container Controls

...

...
Control
FAB Workbench Documentation
SAP Documentation
Page
...
Page
sap.m.Page
Page (Expert)
Page - Expert
...
Control
FAB Workbench Documentation
SAP Documentation
Page
Page
sap.m.Page
Page (Expert)
Page - Expert

Layout Controls

Control	FAB Workbench Documentation	SAP Documentation
HBox	HBox	sap.m.HBox
VBox	VBox	sap.m.VBox
Vertical Layout	Vertical Layout	sap.ui.layout.VerticalLayout
Horizontal Layout		sap.ui.layout.HorizontalLayout
Grid Layout	Grid Layout	sap.ui.layout.Grid
Panel	Panel	sap.m.Panel
Chart Container		sap.suite.ui.commons.ChartContainer
Chart Container Content		sap.suite.ui.commons.ChartContainerContent
Dynamic Page		sap.f.DynamicPage
Flexible Column Layout		sap.f.FlexibleColumnLayout
Object Page Layout	Object Page Layout	sap.uxap.ObjectPageLayout
Block Layout	Block Layout	sap.ui.layout.BlockLayout
Dynamic Side Content	Dynamic Side Content	sap.ui.layout.DynamicSideContent
Splitter	Splitter	sap.ui.layout.Splitter
Shell	Shell	sap.m.Shell
Div	Div	Standard HTML Div

...

Control	FAB Workbench Documentation	SAP Documentation
FAB Process Flow
FAB Error Log
Generic Process Flow		sap.suite.ui.commons.ProcessFlow

...

Toolbar Controls

Control	FAB Workbench Documentation	SAP Documentation
Tab Bar	Tab Bar	sap.m.IconTabBar
Object Header	Object Header	sap.m.ObjectHeader
Tile Container	Tile Container	Toolbar	Toolbar	sap.m.Toolbar
Overflow Toolbar		sap.m.OverflowToolbar
Bar		sap.m.Bar
FAB Actions Bar
Tool Header		sap.tnt.ToolHeader

Other Controls

Control	FAB Workbench Documentation	SAP Documentation
Tab Bar	Tab Bar	sap.m.IconTabBar
Object Header	Object Header	sap.m.ObjectHeader
Tile Container	Tile Container
Avatar		sap.m.Avatar
Wizard	Wizard	sap.m.Wizard
Upload Collection	Upload Collection - for File Attachments	sap.m.UploadCollection
Upload Collection By Key	Upload Collection By Key
File Uploader		sap.ui.unified.FileUploader
File Uploader By Key	File Uploader By Key
Map		Google Maps Image. Requires Google Map API
Excel Drop	Excel Drop	FAB Control to allow uploading of Excel files
Spreadsheet (beta)
Custom Node	Custom Node	Provides ability to insert any SAP UI5 control through XML declaration
Custom XML	Custom XML	Provides ability to insert custom XML nodes
ABAP Subroutine		Provides ability to insert custom ABAP codes
Layout Data
Shareable Section
Shareable Section Reference
Widgets	Widgets