Professional Documents
Culture Documents
BonitaSoft Graphical Application Development PDF
BonitaSoft Graphical Application Development PDF
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 Studios 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.
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.)
BonitaSoft, 2010
At each step in a process where a person is involved (i.e. a Human Step in Bonita Open Solution), Bonita Open Solution automatically creates a default Bonita Form with fields based on the data variables defined. The Process designer can then customize these forms.
The arrangement of fields in a form is generated at the step level. The first things to do when customizing a Form are to define which fields it will contain, decide what variables are to be associated with those fields, and determine how the fields should be arranged. The Web Application Builder in Bonita Studio provides a set of widget tools for this. The following Figure shows that the designer can begin by choosing which data variables are to be given fields in the initial form. The Web Application Builder then adds widgets based on the variables selected.
< Figure 4. Create a New Form by selecting which field widgets to add
BonitaSoft, 2010
The Web Application Builder allows the designer to manipulate fields in the form of cells in a grid. The data variables selected are presented first as a series of cells in a single vertical column. Web Application Builder adds a Submit button at the bottom of the column.
The field cells can be re-arranged. Rows and columns can be added and deleted; cells can be moved and merged. The field labels can be customized, so the end user sees a descriptive label instead of the variable name.
BonitaSoft, 2010
Forms can be previewed. This initial form, in Preview mode, shows which variables are defined for which fields (this is not seen in the final version see the difference between this and Figure 18.)
BonitaSoft, 2010
Figure 7. A validator added to a field restricts the type of input it will accept
The designer can also apply the following, some of which are shown in the next figures. These examples are from the second form in this process: Add a tooltip on any field (Figure 8); Change the field type for example: o from one that is live to one that is read-only (Figure 9); o from a dropdown list to a set of radio buttons (Figure 10); o from an upload (live) to a download (read-only) (Figure 11); Define the variable or data the field is to enter, process, and/or output (Figure 12); Change the appearance of an individual cell, label, or field (Figures 13-15); and Change or remove the name of the form, including a dynamic variable if desired (see Figure 19). 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.
BonitaSoft, 2010
BonitaSoft, 2010
Figure 12. The data management editor is used to define initial value, add an expression to manipulate data, and define output for the field
BonitaSoft, 2010
Figure 13. The Groovy editor is available in form fields (and for variable definition, labels, validators, and more) to allow the use of dynamic expressions
Defining the variable or data that each field in a Form is to enter, process, or output is a critical application of the Web Application Builder. Each field widget presents options specific to each type of data field, and most allow the From designer to specify what variables the field will accept, validate the type of input, choose a default value, and manipulate that data in an expression (ie concatenate, apply operators, and so on). The Figures above show an example of a text field that takes the variables newEmployeeFirstName and newEmployeeLastName, concatenates them and saves the result as a new variable newEmployeeName. (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).
BonitaSoft, 2010
Each field widget allows for some fine tuning the grids, and the appearance of cells, grids, labels, and field contents.
BonitaSoft, 2010
BonitaSoft, 2010
BonitaSoft, 2010
Each page of a multipage form has a Next Page and/or a Previous button. The last page has the Submit button to complete the form. Buttons can be re-named.
BonitaSoft, 2010
DRAW your processes CONNECT to your systems RUN in one clic 4. Adding a customized confirmation page
A confirmation page is shown at the end of each users sequence of steps, that is, after the last form for that user to complete in a series of one or more steps has been submitted. The contents of this page can be easily modified. (Its look-and-feel can be further customized as described in the following sections.)
BonitaSoft, 2010
DRAW your processes CONNECT to your systems RUN in one clic 6. Anatomy of a Form presented in a Web application generated with Bonita
When a process is run with no Form customization, the default Bonita Form contains all variables in alphabetical order, presented in default Page and Process templates.
Figure 24. default Bonita Open Solution Form (uncustomized form in default page and Process templates)
At this stage, 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. Each Form created for a Step has essentially 3 levels that define its look-and-feel. The following illustrations show how those 3 levels come together. The Figure below shows the Process Template around the Global Page Template.
Process Template (Web application)
BonitaSoft, 2010
Notice that the Process Template here has: a black exterior frame with a link to open Bonita User Experience; and a grey-and-white interior frame with the Bonita Open Solution name and logo, the name of the user (admin), a link to log out, the process name, and a message at the bottom.
In the next Figure, the form data fields have been selected and customized as described in Section 2, the Bonita Global Page Template has been applied, and all of this is presented in the Process Template.
The following sections describe how it is possible to further customize these templates.
BonitaSoft, 2010
Individual page Forms are generated with a unique bonita_form_container code, according to how the fields have been defined in the Web Application Builder. For each data field in the Form, the html file contains a <div id> with its name as the id. (Validators, if used, also have <div id> with the data field name and validator.) All of these must be included in any modified html code in order to display the form fields as desired. The entire Form is displayed inside the Process level template where <element ID=bonita_form> </div> is located. The designer can save the generated html file for modification and re-upload. A new Global Page Template can be created by re-uploading the modifed html file (in Applications.)
BonitaSoft, 2010
Figure 29. Upload a built-in html template for all process Forms
The default template chosen is black. The CSS and images it calls are located in Resources.
BonitaSoft, 2010
When a built-in template is selected, its resources are uploaded automatically. The Process Template can be entirely customized by embedding the Global page template into another html file and uploading the resources it calls. The html code must contain <element ID=bonita_form> </div> Recall that in the Process Template example in Part 1, the following dynamic elements are shown: a link to open Bonita User Experience; the name of the user; a link to log out; and the process name.
BonitaSoft, 2010
Defines link to open Bonita User Experience users name link to logout process name
Table 1. 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.
Figure 30: Change the look and feel of end user forms presented in a Web application
BonitaSoft, 2010
DRAW your processes CONNECT to your systems RUN in one clic 8. Conclusion
Developers using Bonita Open Solution can customize all forms presented to end users using the widget tools and interfaces available in Bonita Studio. The Web Application Builder provides a graphical means to define data fields, configure them, and lay them out in a grid. This grid is then deployed into a Global Page Template. The Global page template is in turn deployed into a Process Template (Web application). The HTML and CSS of both the Global Page Template and Process Template can be changed, modified, or replaced from within Bonita Studio to change the look-and-feel of the forms and the frames in which they are presented externally. Total customization of forms allows the process owner to run Bonita Open Solution behind the scenes. Developers enjoy the benefit of Bonita Studios power and simplicity, and the end user enjoys the benefit of easy-to-use interaction.
About BonitaSoft
BonitaSoft is the leading provider of open source business process management (BPM) software. Created in 2009 by the founders of Bonita project, BonitaSoft democratize the use of BPM in companies of all sizes with an intuitive and powerful solution with an optimum cost. The Bonita solution has been downloaded more than 370.000 times to date by companies and organizations worldwide. Sales inquiries : sales@bonitasoft.com | Partner inquiries : partners@bonitasoft.com www.bonitasoft.com bonitasoft.com/blog twitter.com/bonitasoft youtube.com/bonitasoft
BonitaSoft, 2010