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

Message Strip

 

sap.m.MessageStrip

Button Controls

Control

FAB Workbench Documentation 

SAP Documentation

Control

FAB Workbench Documentation 

SAP Documentation

Button

Button

sap.m.Button

Toggle Button

Toggle Button

sap.m.ToggleButton

Segmented Button

 

sap.m.SegmentedButton

Table Controls

Control

FAB Workbench Documentation 

SAP Documentation

Control

FAB Workbench Documentation 

SAP Documentation

Table

Table

sap.m.Table

Grid Table

Grid Table

sap.ui.table.Table

Tree Table

Tree Table

sap.ui.table.TreeTable

List Controls

Control

FAB Workbench Documentation 

SAP Documentation

Control

FAB Workbench Documentation 

SAP Documentation

List

List

sap.m.List

Tree

List Tree

sap.m.Tree

Dialog Controls

Control

FAB Workbench Documentation 

SAP Documentation

Control

FAB Workbench Documentation 

SAP Documentation

Dialog

Dialog

sap.m.Dialog

Popover

Popover

sap.m.Popover

Select Dialog

 

sap.m.SelectDialog

View Settings Dialog

 

sap.m.ViewSettingsDialog

Chart Controls

Control

FAB Workbench Documentation 

SAP Documentation

Control

FAB Workbench Documentation 

SAP Documentation

Pie / Donut Chart

Pie/Donut Chart

FAB Control to display Pie / Donut Chart

Column / Bar Chart

Column/Bar Chart

FAB Control to display Column / Bar Chart

VizFrame Chart

 

sap.viz.ui5.controls.VizFrame

Chart Container

 

sap.suite.ui.commons.ChartContainer

Process Flow Controls

Control

FAB Workbench Documentation 

SAP Documentation

Control

FAB Workbench Documentation 

SAP Documentation

FAB Process Flow

FAB Process Flow

 

FAB Error Log

FAB Error Log

 

Generic Process Flow

Generic Process Flow

sap.suite.ui.commons.ProcessFlow

Toolbar Controls

Control

FAB Workbench Documentation 

SAP Documentation

Control

FAB Workbench Documentation 

SAP Documentation

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

Control

FAB Workbench Documentation 

SAP Documentation

Tab Bar

Tab Bar

sap.m.IconTabBar

Object Header

Object Header

sap.m.ObjectHeader

Tile Container

Tile Container

sap.m.GenericTile

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

 

 

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