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.
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.
To replace a widget by another one and keep the current configuration, use the Switch option:
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.
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
.
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.
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.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).
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.
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:
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.