Chapter 3. Creating and Customizing Web Forms

One of the highlights of Bonita Studio is the ability to design web forms in a simple and intuitive drag-and-drop interface. This takes care of most of the details while designing a web form. Also, in the description panel, we can easily define the data in the web form that we’re interested in. Let us now create a new process, which incorporates many web forms. We will aim at creating a series of web forms for booking flight tickets by an agent. Let us look at the elements that such an application would have:

• A welcome page, where the user will be allowed to make a selection between booking a ticket and submitting a report

• For booking a flight ticket, the user has to enter his travel dates and so on

• Then he will have to choose the flight he wants from a list of flights

• Finally, he will be redirected to the payment page

• A confirmation e-mail will be sent to him after the successful payment

• He will also be able to submit a report instead of booking a...

Input and output widgets in Bonita

To create input and output widgets, follow the given steps:

1. Navigate to Process | New and rename the pool to TicketPurchase.

2. Rename the workflow to TicketingWorkflow.

3. Next, rename Step1 to Welcome. This step will serve as the welcome page for the consumer. To create web forms for this step, click on the step and subsequently click on the Application tab in the properties panel.

4. Here, we have the ability to define the entry page form, which is the form that the user will see when he arrives at this step. The view pageform is how the user will access the history of the page. The confirmation page is the message that appears when the form has been submitted. We will now create a web form that the user would have to fill.

5. Click on the Add... button to add an entry pageflow. By default, the name of this page will be the name of the step.

6. Click on Finish and a blank web form opens up, along with the widget palette on the left-hand panel that contains all the widgets...

The Previous and Next buttons

We have a Next and a Previous buttons on each form, but we have yet to configure these buttons. The way we can achieve Next and Previous button behavior in the workflow is to have a pool variable called nextStep and every time the Next or Previous button is clicked, we can set the nextStep variable to the name of the step, and in the transitions from one step to another we can check for the value of nextStep.

1. In the form, first make a backward transition from all the steps that are the endpoints of the forward transition. The final pool should look like this :

   

   Figure 3.11: Workflow after adding backward transitions

2. Now, open the first form of the workflow, Welcome, and click on the BookTickets button.

3. In the Actions tab, add an action that sets the next step to the variable nextStep. The way to do this is by inputting BookTickets in the Groovy script in the expressions field and saving it to the variable nextStep.

4. Similarly, in the SubmitReport button, type SubmitReport...

Summary

We have learned how to create web forms in this chapter. We have used the different elements present in the palette to make web forms that suit our purpose. We have learned how to create pool and step variables and also how the action button works. In addition, we learned how to give conditions to transitions. In the following chapter, we will learn how to use connectors.