Create custom Widgets

If you choose to create a new OpenUi5 Widget, you have to take a look at the constructor details in its API reference.

Here you can find the OpenUi5 API of all Widgets and a description when to use them.

Start

Let’s create a mobile version of a Panel. For starters search new sap.m.Panel in the API reference.
You will see the supported settings, in this case: Properties, Aggregations and Events.

Properties describe the different attributes of an element (e.g. width or height).
Aggregations describe which other elements the Widget could contain (e.g. a panel consists of a header & info toolbar and content).
Depending on the Control that is displayed in the API, you can use every or just specific Controls (e.g. sap.ui.core.Control vs sap.m.Toolbar)
Events describe the possible direct interactions for the user (e.g. expand the panel).

Step 1

For the first step name your Widget, write a short description and choose a category in the Widget tab.

In addition you’ve got now the possibility to add custom tags to the widget. You can search and filter for widget tags in the search field of the widget overview list and in the widget search field of the UI designer.

Step 2

Click on the OpenUI5 tab to fill out the specific parameters.
The Widget Type has to be the same as the UI5 control name. In this case: sap.m.Panel

API reference

Simplifier Widget Type

Step 3

Fill in the template for the Widget. It represents a blueprint of the Widget which can be used by the Simplifier.
The OpenUI5 templates are written in JSON with Mustache placeholder syntax.

The Simplifier supports three different types:

String: “{{&placeholderName}}”
Boolean: {{placeholderName}}
Aggregation: [{{#placeholderName}}”{{&}}”,{{/placeholderName}}]

The placeholderName will be used to declare properties, events, etc.. It is advisable to use the OpenUI5 names.
For SAP Controls (e.g. sap.m.BackgroundDesign) you can use the „String“ Data Type.

Step 4

All attributes that are declared with a mustache value in the template, have to be declared in the properties / events / etc. area below as well, so you can work with them in the UI Designer later in the process. You can use constant values instead of mustache e.g. if you don‘t want a property to be editable.

Properties:
Fill in the name (your template placeholderName), a description (optional), the default value and the data type (as written in the API reference). If a property should be translatable, you have to check it here.
Events:
Simply put the name (again the template placeholderName) on the list.
Aggregation:
Transfer your template placeholderName and the content type (API reference).
If your aggregation shall be able to contain more than just one control, check the “Multiple” checkbox.

Step 5

If all properties are listed, you can set the Default Binding-Property which is the prioritized widget property used in the edit mode of a user story (Process Designer).