/
Controls

Controls

Search

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

Form Controls

Control

FAB Workbench Documentation 

SAP Documentation

Input Controls

Control

FAB Workbench Documentation 

SAP Documentation

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