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

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

Container Controls

Control	FAB Workbench Documentation	SAP Documentation

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

Layout Controls

Control	FAB Workbench Documentation	SAP Documentation

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

Form Controls

Control	FAB Workbench Documentation	SAP Documentation

Control	FAB Workbench Documentation	SAP Documentation
Form	Form	sap.ui.layout.form.Form
Form Container	Form Container	sap.ui.layout.form.FormContainer
Form Element	Form Element	sap.ui.layout.form.FormElement
Simple Form		sap.ui.layout.form.SimpleForm

Input Controls

Control	FAB Workbench Documentation	SAP Documentation

Control	FAB Workbench Documentation	SAP Documentation
Input	Input	sap.m.Input
Slider		sap.m.Slider
Date Picker	Date Picker	sap.m.DatePicker
Date Time Picker	Date Time Picker	sap.m.DateTimePicker
Select	Select	sap.m.Select
Radio Button Group	Radio Button Group and Radio Button	sap.m.RadioButtonGroup
Radio Button	Radio Button Group and Radio Button	sap.m.RadioButton
Checkbox	Checkbox	sap.m.CheckBox
Text Area	Text Area	sap.m.TextArea
Search Field	Search Field	sap.m.SearchField

Text/Output Controls

Control	FAB Workbench Documentation	SAP Documentation

Control	FAB Workbench Documentation	SAP Documentation
Text	Text	sap.m.Text
Label	Label	sap.m.Label
Title		sap.m.Title
Formatted Text		sap.m.FormattedText
Object Attribute		sap.m.ObjectAttribute
Object Identifier	Object Identifier	sap.m.ObjectIdentifier
Object Number		sap.m.ObjectNumber
Object Status		sap.m.ObjectStatus
Icon	Icon	sap.ui.core.Icon
Image	Image	sap.m.Image
HTML	HTML	sap.ui.core.HTML
Link		sap.m.Link
Breadcrumbs		sap.m.Breadcrumbs