Help

Use the palette on the left to drag and drop containers and widgets in the whiteboard.

Once you select an element, edit its properties in the properties panel on the right.

Create variables in the Variables panel at the bottom, and use them to edit the widget properties.

Add images, CSS or JavaScript resources to your pages in the Assets panel at the bottom.

The whiteboard is organized in rows that you can move up and down, or delete.

  • Drag and drop widgets or containers in rows
  • When you delete a row, the following rows move up
  • Within a row, when you delete a widget or a container, the following elements move to the left

Use widgets from the palette on the left to display information to and gather information from the end users.

Configure widgets using the properties panel on the right.

You can also create custom widgets, from existing widgets by "saving as" or from scratch in the home page.

View
To view the code of a standard widget, use the View menu option close to the widget name in the properties panel. From there, to use the standard widget as a basis for a custom widget, click on Save as, find a name for the custom widget, and make it your own.
Edit
To edit a custom widget, use the Edit menu option close to the widget name in the properties panel.
Switch

To replace a widget by another one and keep the current configuration, use the Switch option:

  • Either select the widget to switch and click on .
  • Or use the Switch menu option close to the widget name in the properties panel.

In the Switch wizard, select or type the widget to switch to, then click Show properties.
Whenever possible, properties in the source widgets are mapped with similar properties in the target widget. You can edit that or map more, then click on Switch.

When the switch is completed, chances are you will still have properties to fill out, in the properties panel.

Containers cannot be switched.

You can group widgets into a container to define the arrangement of widgets in a form or a page. A container can contain other containers.

Each type or container has specific behaviors

  • Repeat content for the plain container
  • Multiple content for tabs container
  • Access to $form capabilities for form container

You can save the content of a plain container as a reusable fragment.

In the scope of a page, form, or layout, a variable can be used to handle business data, or can contain structural information that determines how page elements behave.

Create a variable in the bottom panel. Using a variable in a widget property depends on the property value type, described in the next section.

In the fragment editor, you can set the scope of a variable to specific to this fragment or to exposed to the page.

You can format data with filters when data is used in widget property fields that allow interpolation or that are bound to a variable .

All angularJS filters are available. Usage requires the use of | ("pipe"). E.g. myVariable|lowercase.

Date filter

For date format specifically, the UI Designer comes with a uiDate filter to easily display dates retrieved from the BDM or any other REST API.

You can apply it to the following variable value types:

  • ISO 8601 formatted String variables
  • Date object
  • Milliseconds since Epoch (number or string variable)

Two use cases :

  • dateVariable|uiDate applies a default format. For an ISO 8601 string with a time, the default format is 'medium'. Otherwise, it is 'mediumDate'.
  • dateVariable|uiDate:format if you need to be more specific in which format, it can be specified exactly the same way as with angularJS date filter.
    E.g. dateVariable|uiDate:'short' or dateVariable|uiDate:'dd/MM/yyyy'

Date formats are localized by default. Localized formats can be edited in localization.json (refer to the localization section).

Lazy reference filter

For business objects, the UI Designer comes with a lazyRef filter to easily retrieve target url to use in an external API data.

E.g. Given a variable employee of type External API that fetch the task context ../{{context.employee_ref.link}}. To retrive all the addresses of employee that are lazy in the BDM, you can create another variable employee_addresses of type External API with an url parameter like employee | lazyRef : 'addresses'

The UI Designer is displayed in the language of your Bonita Studio.

To support multi-languages for end-users, it includes a mechanism to translate the UI artifacts (pages, forms, layouts) created.

You can translate all the text displayed on a UI artifact: labels, placeholders, available values of a list. Even the Date format of the Date Picker widget can be localized.

In the preview and at runtime, the displayed text will adapt automatically to the selected language.

In production, if the user is logged into Bonita Portal, UI artifacts are displayed in the Portal language selected by the user or in the browser locale.

Each artifact contains a localization.json asset, with keys and translations for all strings and all supported languages (by default french and spanish). Each language has its section and is identified by the ISO 639 language attribute (for example, fr-FR, es-ES). To add new languages, keys and/or translations, export the default localization.json, edit it, and upload it with the same file name. For more information on installing new languages, go to the documentation web site (keywords: "add new language").

By convention, in localization.json, the language used for translation keys is English. This means that in the editor whiteboard, any widget default text is currently in English. However, to ease maintenance and update of the UI artifacts in English, you can change the keys into code names and add an en-US section in the localization.json asset file.

Note about the Date Picker and Date Time Picker widgets: the Placeholder property translations must match the Technical format property values (order and number of letters). However, the Placeholder key should be different from the Technical format key to avoid translations mismatches.

Example: use the key button.submit.name on the Label property of a submit button. Use the key date.format on the Date format property and date.placeholder on the Placeholder property on a Date Picker widget. Then, change the localization.json asset to add the button.submit.name, date.format in English, date.placeholder translations.

 {
  "en-US": {
    ...
    "button.submit.name": "Submit",
    "date.format": "MM/dd/yyyy",
    "date.placeholder": "Enter a date (mm/dd/yyyy)",
    ...
  },
  "fr-FR": {
    ...
    "button.submit.name": "Soumettre",
    "date.format": "dd/MM/yyyy",
    "date.placeholder": "Entrer une date (jj/mm/aaaa)",
  "es-ES": {
    ...
  },
    ...
    "button.submit.name": "Enviar",
    "date.format": "dd/MM/yyyy",
    "date.placeholder": "Introducir una fecha (dd/mm/aaaa)",
    ...
  }
}

You can optimize the UI designer responsiveness behavior for various screen sizes by configuring a different value for the width property for each device type. This uses the Bootstrap CSS grid mechanism.

Four device types are available:

  • {{'mobile screens (screenSize < 768px)'| translate}}
  • {{'tablet screens (768px ≤ screenSize < 992px)'| translate}}
  • {{'laptop screens (992px ≤ screenSize < 1200px)'| translate}}
  • {{'desktop screens (1200px ≤ screenSize)'| translate}}

Select the device type icon in the top bar, then specify the width property for each widget in the page or form. Each configuration is independent. To specify the width property for a widget for all device types, set the value for each device type separately, or leave the default value.