Help

Use the UI Designer to create or edit web artifacts: application pages composing business applications, process forms linked to process instantiation or human tasks execution, as well as application layouts, applied to all pages of a business application.

Artifact creation:

  • Create an application page directly in the UI Designer
  • Start creating a process form in Bonita Studio: from the appropriate pool or human task, create a contract and launch the UI Designer. It will auto-generate a dedicated form to edit.
  • Start creating an application layout by importing the default layout, available in the Bonita Portal resources, and edit it.

An artifact designed with the UI Designer can be exported to be shared with teammates (import in the UI Designer) or used in business applications (import in Bonita Portal).

There is a set of default widgets for displaying information to and for gathering information from the end users. You can also create custom widgets.

Create a fragment to reuse the same group of widgets with the same behavior in several pages or forms.

The UI Designer generates standard html application code, based on AngularJS. Export pages if you want to further customize them in a different favorite web development environment.

To use a page in a business application, export it from the UI Designer, import it into Bonita Portal resources, and from the relevant application, add it to the list of pages and to a navigation menu.

To use a form in a process, map it in the studio to the relevant process or human task. It will be automatically packaged in the .bar archive ready to deploy in the portal.

To update a form during production, export the form from the UI Designer, import it into the relevant process in the portal, and then map it to the relevant task or process start event.

To use a layout in a business application, export it from the UI Designer, import it into the portal as a resource and map it as the layout of the relevant application.

Bonita 2023.2
Handle 401 and 503 errors on Bonita REST API requests

A pop-up will be displayed to inform users in case of session timeout or running maintenance for all Bonita REST API requests made from UI-Designer pages

Bonita 2023.1
Accessibility

The following improvements have been made so that digitally accessible applications could be developed natively with Bonita UI Designer with less custom code:

  • An attribute lang is now available. The attribute is based on the BOS_locale cookies at page initialization and will automatically get filled without any user action.
  • Table and Data table widget have a new caption property available for adding a title
  • The default widgets in the palette that contain a html input tag have now an associated label, which will facilitate the use of computer tools (screen readers for example)
  • To be more accessible for speech synthesizers, screen readers or some other tools, the internal html template of checklist and radio buttons widget has been updated.
  The changes will automatically be available when changing a page in Bonita UI Designer <2023.1> developed with a previous Bonita UI Designer version. Custom styling could be impacted so take this fact into account in your development estimates.
Bonita resources

You can manually declare the Bonita REST API resources which you're using in your artifact when the automatic detection fails to found them.

The automatic detection allows you to see explicitly which REST API resources is needed in your artifact from the newest Bonita Resource panel.

JSON Source model

We have reorganized the order of the fields contained in the json file in order to facilitate the file comparison.

  When using a version control system, like git for example, migrating to this last version may cause reorder changes in json models that must be pushed.
Bonita 2022.2
AngularJs 1.8

Frontend has been migrated to AngularJS 1.8. Note: artefacts are still generated with AngularJS 1.3. Stay tuned for further updates.

Currency input widget

A new widget is now available to display our data with currency

Interpret HTML default properties

To avoid some HTML injection in your page/form, we put for Interpret HTML property the default value to false for all widgets. If you already put this property to true, nothing change for you.

Bonita 2021.2
Improvements on the widget switch

The switch widget feature has been improved to guide the user efficiently to avoid incompatible properties mapping that may lead to inconsistent states of widgets.

Tab widget: Possibility to define the selected tab

It is now possible to define the tab that will be selected by default in the tab group with the new "Selected" field on the tabs.

API Variables response Metadata usage

It is now possible to easily bind the metadata of an API variable response (header, status code, and response value) to other variables

Bonita 7.12
Migration enhancements

Upgrade between maintenance versions without migration. When a migration is required, get help from the UI Designer (warning icon, confirmation dialog, migration report)

Community edition features

Get all the advanced features such as fragments and localization in the community edition.

UI Designer version: {{ctrl.getUidVersion()}} - Model version: {{ctrl.getModelVersion()}}