You are on page 1of 21

DRAW your processes

CONNECT to your systems
RUN in one clic

Graphical Application Development
with Bonita Studio
by Mickey Farrance
Technical Communications, BonitaSoft

Contents
1. Introduction 5. How Forms are Built in Bonita Open Solution
2. A Simple Process in Bonita Studio 6. Anatomy of a Form Presented in a Web App
3. Defining and Customizing the Fields of a Form 7. Defining the Global Page Template
4. Adding a Customized Confirmation When a 8. Defining the Template for the Web App
Form is Submitted 9. Conclusion

1. Introduction

Bonita Open Solution is a 3-in-1 suite composed of:

 Bonita Studio, an integrated process-based application builder based on BPMN2
modeling and drag-and-drop form customization,
 Bonita Execution Engine, a powerful and scalable BPM engine, and
 Bonita User Experience, a breakthrough end-user interface.

Bonita Studio is used to graphically model a business process with BPMN notation and
generate a process-based application designed to automate this process. Bonita Studio’s
Whiteboard allows the process designer to draw the process flow graphically, and apply
connectors to connect the process to external information systems such as database, email,
calendar, LDAP, ERP and so on. Various forms of data can be defined to be input, acted
upon, passed along, and output throughout the process.

In addition, “human” steps in a process require interaction with an end user. This
interaction generally takes place through a web application composed of a set of forms
presented in a web browser, allowing process actors to perform the required tasks to
complete process cases.

The Web Application Builder in Bonita Studio allows the designer to create customized
forms for the end user. This white paper describes an example of how this can be done.

The Web Application Builder allows the user to create the list of variables accessible from a
step, and specify how they can be updated.

Free download on www.bonitasoft.com ©BonitaSoft, 2010

DRAW your processes
CONNECT to your systems
RUN in one clic

2. A Simple Process in Bonita Studio

To illustrate how forms are built and customized, this paper will refer to a very simple
process example: New Employee Start.

Figure 1. A simple 2-step process to start a new employee

In this process, the initiator is a newly hired employee who is returning a signed employment
contract. Thus there is a form presented via a Web interface which is completed by this new
employee.

In the first step, Human Resources receives the information, and adds the start date. In the
next step, another HR agent receives this information and then sends a letter to the
employee to indicate when he/she should report for their first working day.

Thus there are 3 forms needed: an initial form, a form for the step Receive new employee
and a form for the step Send confirmation/welcome letter.

Before forms can be created, the data for the process must be defined. In this process there
are 7 global variables and one local variable. Each variable name is followed by its type
(Attachment, a List of Options titled Department, Text, Date, and Boolean.)

Figure 2. Global variables

Free download on www.bonitasoft.com ©BonitaSoft, 2010

3. The Web Application Builder in Bonita Studio provides a set of widget tools for this. a Human Step in Bonita Open Solution).com ©BonitaSoft. decide what variables are to be associated with those fields. < Figure 4. The following Figure shows that the designer can begin by choosing which data variables are to be given fields in the initial form. Create a New Form by selecting which field widgets to add Free download on www. The Web Application Builder then adds widgets based on the variables selected. Bonita Open Solution automatically creates a default Bonita Form with fields based on the data variables defined. DRAW your processes CONNECT to your systems RUN in one clic Figure 3. 2010 . and determine how the fields should be arranged. Defining and Customizing the Fields of a Form The arrangement of fields in a form is generated at the step level. The Process designer can then customize these forms. The first things to do when customizing a Form are to define which fields it will contain.bonitasoft.e. Local variable At each step in a process where a person is involved (i.

cells can be moved and merged. The field labels can be customized. Web Application Builder adds a Submit button at the bottom of the column. The data variables selected are presented first as a series of cells in a single vertical column. Rows and columns can be added and deleted. 2010 . Using the Web Application Builder The field cells can be re-arranged. Free download on www.bonitasoft. DRAW your processes CONNECT to your systems RUN in one clic The Web Application Builder allows the designer to manipulate fields in the form of cells in a grid.com ©BonitaSoft. Figure X. so the end user sees a descriptive label instead of the variable name.

2010 .com ©BonitaSoft. Form fields can be rearranged and given descriptive labels Forms can be previewed. shows which variables are defined for which fields (this is not seen in the final version – see the difference between this and Figure 18.) Figure 6. Initial form in preview Free download on www. DRAW your processes CONNECT to your systems RUN in one clic Figure 5. This initial form.bonitasoft. in Preview mode.

some of which are shown in the next figures. A validator added to a field restricts the type of input it will accept The designer can also apply the following. by applying a Groovy expression. defined with variables that will be filled at runtime. • Change the appearance of an individual cell. In this section. and • Change or remove the name of the form. • Change the field type – for example: o from one that is “live” to one that is “read-only” (Figure 9). 2010 .bonitasoft. Dynamic variables like the one applied in the title of the form (“Assign a start date to ${newEmployeeFirstName} + ${newEmployeeLastName}”) can also be applied in any of the form labels. These examples are from the second form in this process: • Add a tooltip on any field (Figure 8). the Form designer can: • Label a field (static labels are shown in Figures 5 and 6. label. or field (Figures 13-15). above). as shown in Figure 7 below). Labels can also be dynamic. including a dynamic variable if desired (see Figure 19). Free download on www. Figure 7. DRAW your processes CONNECT to your systems RUN in one clic Each field widget provides a Details section that allows the designer to refine the characteristics of form fields. o from a dropdown list to a set of radio buttons (Figure 10).com ©BonitaSoft. • Define the variable or data the field is to enter. process. and/or output (Figure 12). o from an upload (“live”) to a download (read-only) (Figure 11). • Restrict the type of data a field will accept by applying a validator.

bonitasoft. DRAW your processes CONNECT to your systems RUN in one clic Figure 8. Change a “live” field (text) to “read-only” field (TextArea) Figure 10. Change a dropdown list to a set of radio buttons Free download on www. 2010 . Add a tooltip to a field Figure 9.com ©BonitaSoft.

add an expression to manipulate data. and define output for the field Free download on www. 2010 . DRAW your processes CONNECT to your systems RUN in one clic Figure 11. Change an attachment upload to a download only Figure 12. The data management editor is used to define initial value.com ©BonitaSoft.bonitasoft.

apply operators. and most allow the From designer to specify what variables the field will accept. DRAW your processes CONNECT to your systems RUN in one clic Figure 13.bonitasoft. or output is a critical application of the Web Application Builder. The Figures above show an example of a text field that takes the variables newEmployeeFirstName and newEmployeeLastName. Each field widget presents options specific to each type of data field. process. concatenates them and saves the result as a new variable newEmployeeName. labels. (See Figure 19 and 20 which show two different examples of a dynamic label in a form as it is presented to an end user). and manipulate that data in an expression (ie concatenate. choose a default value. validate the type of input. validators. and more) to allow the use of dynamic expressions Defining the variable or data that each field in a Form is to enter. Free download on www. and so on).com ©BonitaSoft. The Groovy editor is available in form fields (and for variable definition. 2010 .

Change appearance of the field contents Free download on www. DRAW your processes CONNECT to your systems RUN in one clic Figure 14. labels. grids. and the appearance of cells. Figure 15.com ©BonitaSoft. Change the appearance of a date field Each field widget allows for some fine tuning the grids.bonitasoft. 2010 . Change appearance of field label Figure 16. and field contents.

More fields for any form can be added by drag-and-drop from the Web Application Builder Palette at the left.bonitasoft. < Figure 17. Initial form presented to process initiator Free download on www. DRAW your processes CONNECT to your systems RUN in one clic The designer can also upload an external Custom Style Sheet (CSS) for any of these.com ©BonitaSoft. Fields added in this way can be configured in the same way as just described. Drag-and-drop field widgets from the Web Application Builder palette into Web Application Builder Here’s a look at the 3 forms defined in this process: Figure 18. 2010 .

Form presented at first step (dynamic label circled) Figure 20. 2010 .com ©BonitaSoft. Form presented at second step (dynamic variable circled) Free download on www.bonitasoft. DRAW your processes CONNECT to your systems RUN in one clic Figure 19.

2010 . but it is also easy to create multi-page forms in a step. Last page of a multi-page form Free download on www. DRAW your processes CONNECT to your systems RUN in one clic Each of the above forms is a single page. Buttons can be re-named. there is a Next Page button.com ©BonitaSoft. The last page has the Submit button to complete the form. Figure 21.bonitasoft. Figure 22. but instead of Submit. The first page looks like Figure 19. The figure below shows a two page form in the step Receive New Employee. The first page of a multi-page form Each page of a multipage form has a Next Page and/or a Previous button.

after the last form for that user to complete – in a series of one or more steps – has been submitted. how the fields are labeled. (Its look-and-feel can be further customized as described in the following sections. This is described in Section 2. 2010 .bonitasoft. How forms are built in Bonita Open Solution The end user interface (form) can be designed and customized in the following ways: • Customize the fields and contents of a Form for a step (in what order the fields are presented. and/or by modifying or replacing the html template for the individual form. that is. • Further customize the layout of an step Form by modifying or replacing the Global Page Template. Confirmation page with customized message 5.) Figure 23. text. Adding a customized confirmation page A “confirmation page” is shown at the end of each user’s sequence of steps. The contents of this page can be easily modified. and so on). DRAW your processes CONNECT to your systems RUN in one clic 4. image. and/or • Change the overall Process Template (Web application) in which all Forms appear. Free download on www.com ©BonitaSoft. the characteristics of the fields such as read- only.

Figure 24.bonitasoft. default Bonita Open Solution Form (uncustomized form in default page and Process templates) At this stage. the default Bonita Form contains all variables in alphabetical order. DRAW your processes CONNECT to your systems RUN in one clic 6. the user form is not very useful! Some customization will result in a form with just the fields wanted with the appropriate options to complete or see them. More customization will result in a form with the look-and-feel desired. The Figure below shows the Process Template around the Global Page Template. presented in default Page and Process templates. Anatomy of a Form presented in a Web application generated with Bonita When a process is run with no Form customization. Each Form created for a Step has essentially 3 levels that define its look-and-feel. 2010 . Process (Web application) template Free download on www. The following illustrations show how those 3 levels come together. Process Template (Web application) Global Page Template goes here Figure 25.com ©BonitaSoft.

2010 . a default page template is generated by Bonita Open Solution and linked with an html file that directs how the Form is to be displayed inside the Global Page Template. the process name. the name of the user (admin). DRAW your processes CONNECT to your systems RUN in one clic Notice that the Process Template here has: • a black exterior frame with a link to open Bonita User Experience. the form data fields have been selected and customized as described in Section 2. and all of this is presented in the Process Template. Customizable Page template The following sections describe how it is possible to further customize these templates. Defining the Global Page Template When the fields of the Form(s) for a step are defined. In the next Figure.bonitasoft. 7.com ©BonitaSoft. a link to log out. Step level page template = Step Form + Global Page Template Figure 26. Free download on www. and a message at the bottom. This can be modified in Bonita Studio Web Application Builder. The Web Application Builder permits the download of the default Page Template – the designer can save the generated html file for modification and re-upload. the Bonita Global Page Template has been applied. and • a grey-and-white interior frame with the Bonita Open Solution name and logo.

according to how the fields have been defined in the Web Application Builder. The entire Form is displayed inside the Process level template where <element ID=”bonita_form”> </div> is located. Upload modified Global Page Template from here Free download on www.) Figure 28. (Validators. The designer can save the generated html file for modification and re-upload. if used. the html file contains a <div id> with its name as the “id”. also have <div id> with the data field name and “validator”. For each data field in the Form.bonitasoft. DRAW your processes CONNECT to your systems RUN in one clic Figure 27.) All of these must be included in any modified html code in order to display the form fields as desired. 2010 . A new Global Page Template can be created by re-uploading the modifed html file (in Applications.com ©BonitaSoft. Download form template generated by Bonita Open Solution Individual page Forms are generated with a unique bonita_form_container code.

bonitasoft. Free download on www. it’s easy to leave it as is and instead modify the Process Template. Each contains the bonita_form <div ID> which is filled with the appropriate form at runtime. Five built-in process templates are provided in Bonita Open Solution. Upload a built-in html template for all process Forms The default template chosen is “black. DRAW your processes CONNECT to your systems RUN in one clic Since the Global Page template is relatively simple (see Figure 26). Figure 29. 8. 2010 .com ©BonitaSoft. The designer can save the generated html file for modification and re-upload. Defining the Process Template for the Web Application The built-in.” The CSS and images it calls are located in Resources. The templates provided are located in Applications. default template in which all Forms are presented is an html file called at the Process level.

• a link to log out. and • the process name. The Process Template can be entirely customized by embedding the Global page template into another html file and uploading the resources it calls.com ©BonitaSoft. • the name of the user. DRAW your processes CONNECT to your systems RUN in one clic Figure X. its resources are uploaded automatically. The html code must contain <element ID=”bonita_form”> </div> Recall that in the Process Template example in Part 1. Choose a template for all forms presented in this Process When a built-in template is selected.bonitasoft. the following dynamic elements are shown: • a link to open Bonita User Experience. 2010 . Free download on www.

DRAW your processes CONNECT to your systems RUN in one clic The following table shows the element IDs for these items. ELEMENT ID Defines bonita_user_xp_link link to open Bonita User Experience bonita_username user’s name bonita_logout_box link to logout bonita_process_label process name Table 1.com ©BonitaSoft. 2010 . Figure 30: Change the look and feel of end user forms presented in a Web application Free download on www.bonitasoft. Some of the element IDs for forms defined at the Process level Here is an example of a process template slightly customized externally through the application of an html file (with a different CSS and image). The look-and-feel can be entirely changed with other CSS and image files.

com www. modified. The Web Application Builder provides a graphical means to define data fields. The HTML and CSS of both the Global Page Template and Process Template can be changed. This grid is then deployed into a Global Page Template. Created in 2009 by the founders of Bonita project. The Bonita solution has been downloaded more than 370.com | Partner inquiries : partners@bonitasoft.” Developers enjoy the benefit of Bonita Studio’s power and simplicity.com/blog twitter.000 times to date by companies and organizations worldwide. and lay them out in a grid.com/bonitasoft Free download on www. Conclusion Developers using Bonita Open Solution can customize all forms presented to end users using the widget tools and interfaces available in Bonita Studio. and the end user enjoys the benefit of easy-to-use interaction.com/bonitasoft youtube. or replaced from within Bonita Studio to change the look-and-feel of the forms and the frames in which they are presented externally. configure them. 2010 . Total customization of forms allows the process owner to run Bonita Open Solution “behind the scenes. Sales inquiries : sales@bonitasoft. The Global page template is in turn deployed into a Process Template (Web application). BonitaSoft democratize the use of BPM in companies of all sizes with an intuitive and powerful solution with an optimum cost.bonitasoft.com ©BonitaSoft.com bonitasoft. About BonitaSoft BonitaSoft is the leading provider of open source business process management (BPM) software. DRAW your processes CONNECT to your systems RUN in one clic 8.bonitasoft.