Create or modify UI elements
Guidance to create and modify User Interfaces elements with Bonita UI Designer.
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.
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:
An instantiation form is created from the pool Execution / Instatiation 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.
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.
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.
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 Bonita Studio coolbar, click on the UI Designer icon to open the UI Designer.
Click on the Create button
In the pop up, choose the element to create
Give it a name
Click on the Create button
In the page editor, drag and drop the widgets, fragments, or BDM objects to create the right user interface
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.
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.
From Bonita Studio, click on the Applications icon and select either the Administrator or Super Administrator application
Go to the Resources menu option
If needed, filter the type by Layout, and select Bonita Layout
Click on the Export button
From Bonita Studio, click on the UI Designer icon to open the UI Designer
Click on the Import button
Find the Bonita layout you have exported and load it
Edit it and save it with another name
Use the same sequence of steps than to create a page from scratch.
For more technical information about layouts, visit the dedicated documentation page.
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.
An element that has not been designed with the UI Designer cannot be imported into the UI Designer.
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.