Create or modify UI elements

Guidance to create and modify User Interfaces elements with Bonita UI Designer.

User Interfaces development overview

Your automation project can use pages to display information and provide interaction controls to the end-users or administrators.
It most of the times uses forms to display and collect new or edited information.
Forms and pages are made of containers and widgets.
Some containers and widgets can be grouped in fragments, in order to be reused in several pages or forms.

The overall graphical structure of the application is handled by the layout.
The look and feel of the application, layout, forms, and pages is handled by the theme.

Forms are embedded in the processes, whereas pages, layouts, and themes are referred to in the application descriptor.

Bonita provides a default theme, available in Bonita Studio and Bonita Runtime.
Developers can create a custom theme using their favorite development environment, and then add it as an extension in the project.

Bonita UI Designer comes with a set of provided containers and widgets.
Custom widgets can also be created to make the palette richer.
Those are developped by professional developers, from scratch or from an existing project of the Community.

The following chapters give more information on how to develop all the others elements in the UI Designer.

Create a form

In a Bonita project architecture, forms are embedded in the pools. Their creation is very linked to the process step they "feed", in a way.
It is recommended to define the contract in its Execution / Contract property tab before to create the form, so the Studio will generate a form according to the contract.
Forms can be created at different level:

  • An instantiation form is created from the pool Execution / Instantiation form tab

  • A task form is created from the human task Execution / form tab

The Case overview (this page is technically considered as a form because of its strong link to the process) is created from the pool Execution / Overview page tab and does not need a contract to be created.

  1. From these tabs, click on the Edit icon at the right of the Target form field. This opens the UI Designer on a new form, with some widgets, containers, and variables already created to speed up the design process, using the contract inputs.

  2. Rename it

  3. Customize what needs to be displayed as well as the Target URL on success of the Submit button.

For more technical information about the forms, visit this dedicated documentation page.

Create a page

Pages are created independently from the processes. They are used to display business information that group several processes and several instances of the processes in an efficient view, a list of requests, for example.
The controls they embed (buttons, links) can call BPM APIs that will trigger the display of the process instantiation form, or the execution of a task.

From scratch

  1. From Bonita Studio coolbar, click on the UI Designer icon to open the UI Designer.

  2. Click on the Create button

  3. In the pop up, choose the element to create

  4. Give it a name

  5. Click on the Create button

  6. In the page editor, drag and drop the widgets, fragments, or BDM objects to create the right user interface

From an existing page

You can easily duplicate an exiting page just by saving it under a different name.

  1. From Bonita Studio coolbar, click on the UI Designer icon to open the UI Designer.

  2. Open the page you want to duplicate

  3. Click on the Save button and select Save as

  4. In the pop up, choose the element to create (new page or form)

  5. Give it a name

  6. Click on the Save button

From a Bonita provided page

Only Bonita pages created with the UI Designer can be customized in the UI Designer. Indeed, as Bonita applications have evolved in several phases, so did the frameworks in which their pages have been made.

To customize a page provided by Bonita:

  1. From Bonita Studio coolbar, click on the Applications icon, and open the Administrator Application

  2. Go to the Resources menu, find the page, and and check its description to make sure it is a page done with Bonita UI Designer

  3. Export the page

  4. From Bonita Studio coolbar, click on the UI Designer icon to open Bonita UI Designer

  5. Import the page in the UI Designer

Note that by doing so, if the page embed fragments and custom widgets, they are also imported and added to the UI Designer palette.

You can find the list of pages ready for customization in a dedicated documentation page.

For more technical information about the pages, visit the dedicated documentation page.

Create a layout

From the provided Bonita layout

If you have not installed any Bonita application in your project in Bonita Studio

  1. From Bonita Studio, click on the Applications icon and select either the Administrator or Super Administrator application

  2. Go to the Resources menu option

  3. If needed, filter the type by Layout, and select Bonita Layout

  4. Click on the Export button

  5. From Bonita Studio, click on the UI Designer icon to open the UI Designer

  6. Click on the Import button

  7. Find the Bonita layout you have exported and load it

  8. Edit it and save it with another name

If you have installed a Bonita application

  1. In Bonita Studio, go to the Project Explorer

  2. Open the project, and the Pages/Forms/Layouts section

  3. Double click on Bonita layout. This automatically opens the UI Designer with the layout ready to edit.

  4. Edit it and save it with another name

From scratch

Use the same sequence of steps than to create a page from scratch.

For more technical information about layouts, visit the dedicated documentation page.

Create a fragment

Use the same sequence of steps as to create a page. An example on how to use a Bonita fragment: How to customize the display of process execution monitoring.

Responsiveness

You can optimize the page or form design for a given device type by configuring device-specific values for the Width property for widgets. Use the a device types bar in the Page editor to choose the target device type. Device type selection

Modify an element

After a form, page, layout, or fragment is created, you can update it by just clicking on the Pencil icon to open it in the editor.
Update the element by deleting or dragging and dropping widgets, business objects or fragments from the palette to the whiteboard.
Edit widget properties in the widget properties panel, create data, and bind them to the widgets.

Preview an element

You can preview page, form and fragment rendering by clicking on the Preview button. Another browser window opens with the element as it will be displayed after deployment. If you update the page, form or fragment, the preview is automatically refreshed when you save.

You can display your page, layout, form or fragment with one of your theme application installed.

From the preview window, you can also expand the preview outside of current preview mechanism, with the Expand Preview in new window button. This allows you to set new URL parameters, play with dynamic browser sizing, and to reuse same url in another browser to see how your form or page behaves in your user default browser.

You can use the a device types bar on the preview screen to choose the target device type.
The preview displays the element as it would be displayed on the selected type of device.

Export an element

You can export a page or a layout to deploy it in Bonita Admin Application as a custom page.
You can export any element to import it into another UI Designer.

To export an element, click the Export button Export button on the Page editor or the UI Designer home page. A zip file is downloaded to your computer. It contains a Bonita custom page, which is also suitable for import into another UI Designer.

After export you can modify your page or layout code by directly editing the code located in resources folder. Be aware that such a modification to the code will work when the page or layout is deployed in the Bonita Runtime, but it may be broken if you import the page into another UI Designer.

To import elements in another Studio, you can export pages and forms in the process .bos file. In the list of elements to insert in the .bos file, forms are checked by default, but not pages. When you import this .bos file into another Bonita Studio, forms and pages that you have checked are available in the UI Designer of that Studio.

Import an element

To import an element from another UI Designer, go to the UI Designer home page and click the Import button Import button. When you import a page, layout, form or fragment, its dependencies (such as custom widgets and fragments used) are automatically be imported too.

An element that has not been designed with the UI Designer cannot be imported into the UI Designer.

Pages and forms in .bos/.bar file

When you generate the .bar file of a process, the mapped forms created with the UI Designer are embedded in the file.
Application pages are not embedded as they are independant from the process.
When the .bar file is deployed, forms are deployed too.

Applications and its elements must be deployed onto the target environment. This can be done manually from the Super Administrator or Administrator applications, in the Applications and Resources menu options. It can also be done automatically through the automation of the project builds and deployment.

For more information on Bonita Continuous Delivery tool (Subscription editions only], visit the dedicated documentation page.