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

Layout Controls

Form Controls

Input Controls

Text/Output Controls

https://sapui5.hana.ondemand.com/#/api/sap.m.Text

Button Controls

Table Controls

List Controls

Dialog Controls

Chart Controls

Process Flow Controls

Toolbar Controls

Other Controls

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

• Page:
  2.2.5 Add UI elements to the App
• Page:
  2.2.5.1 Add UI elements outside of a Form Element
• Page:
  2.7 Using Tables in FAB
• Page:
  3.1 Form Wizard
• Page:
  3.2 SAP Screen Wizard
• Page:
  3.3 BDC Recording