Custom Node

Owned by Charles Evans
Jul 03, 2020
3 min read


Custom Nodes allow any type of valid UI5 XML to be added to the App. These can be used in cases where a specific Control has not been provided in the FAB menu, or when a more advanced usage of a particular control is required. This allows the App to include new controls released by SAP but not yet included in FAB. It also enables the setting of any attribute of the control, even if a properties/attribute dialog has not been created for the Control in FAB.

Because of the structure, Custom Nodes are easier to understand and to edit compared with Custom XML.

Properties of Custom Node

  1. Id - unique identifier of the control
  2. Type - defines the type of SAPUI5 element it is (e.g .adding a Custom Node of type ‘Text’ will add a sap.m.Text control to the App)

    When using a Custom Node, there is no need to specify the <> brackets, and the end-tag is automatically added to the XML. Use "Show XML" from the context menu of the Custom Node to see the XML generated (e.g. <Text></Text>)
  3. Attributes - allows all of the attributes of the Control set in the Type property to be defined in a free-form manner.

    The sample above will result to an XML of  "<Text text="Hello"></Text>"
  4. Content - whenever required, a content can be inserted between the start and end tags of XML generated by the Custom Node

    The sample above will result to an XML of "<html:p>this is the content of the paragraph</html:p>"

Step-by-step guide

How to add a Custom Node

  1. Custom Nodes can be added to almost all Nodes in the FAB Tree by using the right-click context menu of Tree in FAB.

  2. A Custom Node control has been added
  3. Nodes can be nested to create complex Control structures.