Create web user interfaces (forms)

Generally, a user usually drives process execution using web interfaces. Bonita provides the UI Designer to easily create such interfaces.

The standard workflow would be to:

  • Create the Business Data Model

  • Add business variables to the process definition

  • Generate contracts based on business variables

  • Generate Bonita forms based on contracts

If you have been following this Getting Started tutorial, you have already done the first three steps. Now it’s time to create the forms.

Start with the process instantiation form:

  1. Select the process pool

  2. Go to Execution  Instantiation form

  3. Click on the pencil icon next to Target form. It will create a new form based on the contract (if the form does not already exist) and open the UI Designer in your web browser

  4. Rename the form from newForm to submitClaimForm

  5. Click on Save to save the form with its new name

    Create process instantiation form based on contract definition

Customize the form appearance. For example, you can switch from a one line text widget to a text area widget:

  1. Select the Description widget by clicking on it

  2. In the Widget properties, on the right hand side of the window, click on the …​ icon and select Switch…​

  3. In the drop down list select Text Area

  4. Click on Show properties

  5. Click on Switch

  6. Click on Save to save your modifications

    Switch to a different widget type

The switch menu option can be used to replace one widget with another one while keepiing the current configuration.

You can now go back to Bonita Studio and create the form for the Review and answer claim user task:

  1. Select the task

  2. Go to Execution  Form

  3. Click on the pencil icon next to Target form. It will create a new form based on the contract (if the form does not already exist) and open the UI Designer in your web browser

  4. Answer Yes to the question presented. This will add widgets to view all the attributes of the business variable in the form

  5. Rename the form from newForm to reviewAndAnswerForm

  6. Select the Satisfaction Level widget and use the delete key to remove it as you don’t want it in this form

  7. Click on Save to save your modifications

Do the same set of operations with the form for Read the answer and rate it task:

  1. Set the form name to readAnswerAndRateItForm

  2. Leave all widgets as is, as you want to display both the claim description and the answer, and allow the user to provide a satisfaction level

Execute this new process version and see that the form still offers the option to capture the data required by the contract, but now also displays the data provided at the process start and in previous steps.

In the next chapter you’ll assure that individual tasks can only be performed by appropriate users.

This Getting Started tutorial is using Bonita UI Designer, which is a development environment that will be phased out as we fully transition to Bonita UI Builder. Bonita UI Builder allows for designing all kind of interfaces, forms and pages, without distinction. Check out the dedicated document section to learn how to use Bonita UI Builder to make forms.