Dear Community,
With the release of Bonita Open Solution 5 M5, I started a trilogy of posts about three “Killer Features” in Bonita Studio that will ultimately make your life easier. The first article was about the connector wizard - it gives you the power to develop a connector in few minutes. Now for the second killer feature: the Form Editor!
The Form Editor
When you've defined your process and connected it to the appropriate elements of your information system, Bonita Open Solution lets you run and test it with default Bonita Forms and the default Bonita Web Application. This is great for testing purposes, but not so much for an end user.So once your process works the way it should, you’ll want to customize its associated web application. The web app generated for a process is usually a form based application, so Bonita Studio includes a Form Editor.
With the Form Editor, you can define the specific web interface for each step of your process. The goal of this form editor is not to be a complete HTML editor; it is to let you quickly design each form you want and easily map the data between the web space and the process space.
Create your first customized form
When you are ready to create a form, a form wizard will ask which data you want your end user deal to interact with. Then, Bonita Studio will automatically generate an initial form. If this fits your needs, save and enjoy. But if you want to customize your form further, you can play with the grid to add, merge, delete cells. You can place a widget in any cell (drag and drop from the palette provided). For each widget, you can associate a variable input (to accept or to present data when the form is shown to the user) and output (into which variable the data will go after the user submits the form).And the most powerful feature of all: in each of these configuration steps, you can write groovy scripts to do exactly what you want, when you want.
Customize the look-and-feel
We think that the best way to do a cool and good look and feel is to use the right web technology: Custom Style Sheets. In the Form Editor you can associate css classes to your widgets, your labels, your fields. If you prefer to directly write a css style for a widget, you can add css code right there. Cool isn't it?When you finish configuring your css in the Form Editor, you may ask, “where can I keep the images, css files, javascript files etc that I’ve used to customize the forms?” You can add these materials in the Application section of your process. Here, you will be able to upload all external resources dedicated to your web application, including your process’ global template, with all html components used in the forms.
With these 2 levels of look-and-feel customization, you can quickly design your user interface to your own specifications.