Create or modify UI elements

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.

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:

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.

For more technical information about the forms, visit this dedicated documentation 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.

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.

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.

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.

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.

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 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.

To import an element from another UI Designer, go to the UI Designer home page and click the 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.

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.