Bonita Open Solution

Version 5.5

Introduction Tutorial

Bonita Open Solution 5.5 Introduction Tutorial

Bonita Open Solution Version 5.5

Introduction Tutorial
Change Notice
BOS 5.5 contains new functions and presents a new user interface in both Bonita Studio and Bonita
User Experience. This Introduction tutorial includes the updated interfaces and functions.
For an overview of where to find functionalities in Bonita Studio, Form Builder, and Bonita User
Experience, see the Bonita Open Solution QuickStart Guide 5.5
For more information about the new functions and for detailed information about Bonita Open
Solution functionality, see the Bonita Open Solution User and Reference Guide 5. 5

page 2

www.bonitasoft.com | BonitaSoft S.A.

BOS 5.5 Introduction Tutorial, 25 May 2011

Bonita Open Solution 5.5 Introduction Tutorial

Contents
Welcome to Bonita Open Solution! .............................................................................................. 7
Part 1. Download, install, and launch Bonita Open Solution 5.5 .................................................... 7
Part 2. Bonita Open Solution Overview ........................................................................................ 7
2.1. Bonita Studio ........................................................................................................................... 8
2.2. Bonita Studio Form Builder ..................................................................................................... 9
2.3. Bonita User Experience (User XP) ........................................................................................... 9
Part 3. Tutorial Process Overviews.............................................................................................. 11
Part 4. Design and run a simple Process ..................................................................................... 11
4.1
Launch Bonita Studio ............................................................................................................ 11
4.2
Draw Tasks and Transitions .................................................................................................. 12
4.3
Assign an Actor...................................................................................................................... 15
4.4
Improve process readability.................................................................................................. 17
4.4.1
Change the size of the Task bar .................................................................................... 17
4.4.2
Zoom in and out of a Pool ............................................................................................. 18
4.4.3
Select elements with the Marquee tool ....................................................................... 19
4.4.4
Align a selection of elements in a process .................................................................... 19
4.4.5
Add extra information................................................................................................... 20
4.4.6
Change the color of a Task ............................................................................................ 21
4.4.7.
Switch process overview ............................................................................................... 22
Part 5. Run MyProcess ............................................................................................................... 23
Part 6. Design another Process .................................................................................................. 25
6.1
Design a Process Web Purchase............................................................................................ 25
6.2
Create a new Process ............................................................................................................ 25
6.3
Draw Tasks and Transitions .................................................................................................. 25
6.4
Create an Iteration and add an XOR gateway....................................................................... 32
6.5
Add Global and Local Variables............................................................................................. 33
6.6
Add Conditions to Transitions ............................................................................................... 37
6.7
Define Actor Selectors .......................................................................................................... 42
Part 8 Run the Process 2 ............................................................................................................ 45
Part 8. Consult Bonita User Experience ...................................................................................... 48
Part 9. Customize Forms ............................................................................................................ 51
9.1
Add a case start Form ........................................................................................................... 51
9.2
Re-order widgets in Form ..................................................................................................... 54
9.3
Customize widgets in Form ................................................................................................... 55
9.4
Add Forms for Tasks (Steps) .................................................................................................. 59
Part 10. Summary ..................................................................................................................... 67
Part 11. Feedback, Questions, and More Information ................................................................. 68

BOS 5.5 Introduction Tutorial, 25 May 2011

www.bonitasoft.com | BonitaSoft S.A.

page 3

Bonita Open Solution 5.5 Introduction Tutorial

Figures
Figure 1. Welcome to Bonita Studio ................................................................................................................. 7
Figure 2. Bonita Studio ready to design a new Process .................................................................................... 8
Figure 3. Bonita Studio Form Builder ............................................................................................................... 9
Figure 4. Bonita User Experience User View ................................................................................................ 10
Figure 5. Bonita User Experience Administration View ............................................................................... 10
Figure 6. Finished process .............................................................................................................................. 11
Figure 7. New Process .................................................................................................................................... 12
Figure 8. My Process ..................................................................................................................................... 12
Figure 9. Drag and drop a new Task ............................................................................................................... 13
Figure 10. Tasks not connected ...................................................................................................................... 13
Figure 11. General Tab ................................................................................................................................... 13
Figure 12. General tab ................................................................................................................................... 13
Figure 13. Name field ..................................................................................................................................... 14
Figure 14. New steps ...................................................................................................................................... 14
Figure 15. Create a Transition ........................................................................................................................ 14
Figure 16. Transition created ........................................................................................................................ 15
Figure 17. Drag and drop an End Event. ......................................................................................................... 15
Figure 18. Add Terminate End Event .............................................................................................................. 15
Figure 19. Assign an actor .............................................................................................................................. 16
Figure 20. Actor selector wizard..................................................................................................................... 16
Figure 21. Choose an Actor ............................................................................................................................ 16
Figure 22. Initiator ......................................................................................................................................... 17
Figure 23. Error has disappeared from Send a Form Task............................................................................... 17
Figure 24. Change the size of the Task Bar (Coolbar) ...................................................................................... 17
Figure 25. Reset Overview ............................................................................................................................. 18
Figure 26. Zoom in tool .................................................................................................................................. 18
Figure 27. Zoom in ......................................................................................................................................... 18
Figure 28. Zoom out ....................................................................................................................................... 18
Figure 29. Marquee........................................................................................................................................ 19
Figure 30. Precision cursor ............................................................................................................................. 19
Figure 31. Normal curser ................................................................................................................................ 19
Figure 32. Marquee selection......................................................................................................................... 19
Figure 33. Horizontal align ............................................................................................................................. 20
Figure 34. Horizontal align result ................................................................................................................... 20
Figure 35. Text annotation box ...................................................................................................................... 20
Figure 36. Text annotation positioning .......................................................................................................... 20
Figure 37. Enter text in the Text annotation field ........................................................................................... 21
Figure 38. Process with annotated text .......................................................................................................... 21
Figure 39. Select Fill in a form to change the background color ..................................................................... 21
Figure 40. Appearance tab ............................................................................................................................. 21
Figure 41. Color palette ................................................................................................................................. 22
Figure 42. Task color changed ........................................................................................................................ 22
Figure 43. Overview switch views .................................................................................................................. 22
Figure 44. Graphic view ................................................................................................................................. 22
Figure 45. Collapsed Tree view ...................................................................................................................... 23
Figure 46. Expanded Tree view ...................................................................................................................... 23
Figure 47. Run MyProcess .............................................................................................................................. 23
Figure 48. Fill in a form .................................................................................................................................. 24
Figure 49. Send a form ................................................................................................................................... 24
Figure 50. Information submitted .................................................................................................................. 24
Figure 51. Completed Web Purchase Process................................................................................................. 25
Figure 52. Begin a new Process with a Start1 and a Step1 .............................................................................. 25
Figure 53. General Details for Sales Review ................................................................................................... 26
Figure 54. Drag a new step............................................................................................................................. 26

page 4

www.bonitasoft.com | BonitaSoft S.A.

BOS 5.5 Introduction Tutorial, 25 May 2011

Bonita Open Solution 5.5 Introduction Tutorial

Figure 55. Pay Task ........................................................................................................................................ 27
Figure 56. Name a new Task Pay .................................................................................................................... 27
Figure 57. Sales and Pay ................................................................................................................................. 27
Figure 58. Add Reject and define its general details ....................................................................................... 28
Figure 59. More Info ...................................................................................................................................... 28
Figure 60. Rename the Pool ........................................................................................................................... 29
Figure 61. Click on the Edit button ................................................................................................................. 29
Figure 62. Click on the Edit button ................................................................................................................. 29
Figure 63. Rename this Process WebPurchaseDiagram .................................................................................. 30
Figure 64. Express delivery............................................................................................................................. 30
Figure 65. Add Archive and give it a description............................................................................................. 31
Figure 66. Add a Terminate End event ........................................................................................................... 31
Figure 67. Rearrange the Process elements on the Whiteboard ..................................................................... 32
Figure 68. Select the XOR Gateway type ........................................................................................................ 33
Figure 69. Add an XOR Gateway .................................................................................................................... 33
Figure 70. Add global and local variables ....................................................................................................... 34
Figure 71. List of options ................................................................................................................................ 35
Figure 72. Add a List of options ..................................................................................................................... 35
Figure 73. Newly created global variables ...................................................................................................... 36
Figure 74. Newly created variable shows up in Data for this Task .................................................................. 36
Figure 75. Newly created variables for this Task ............................................................................................ 37
Figure 76. Define a variable List of Options for Sales Review ......................................................................... 38
Figure 77. Newly created variable for Sales Review ....................................................................................... 39
Figure 78. Define Conditions for Transitions .................................................................................................. 39
Figure 79. Transition Conditions appear on Whiteboard ............................................................................... 40
Figure 80. Change label on Transitions ........................................................................................................... 40
Figure 81. Transition Names appear on Whiteboard ...................................................................................... 40
Figure 82. Add a Boolean Condition (true) to a Transition ............................................................................. 41
Figure 83. Add a Boolean (false) Condition to a Transition ............................................................................. 41
Figure 84. Transition Names appear on Process ............................................................................................. 42
Figure 85. Create a new Actor Selector for this Process ................................................................................. 42
Figure 86. Name the Actor Selector ............................................................................................................... 43
Figure 87. Define the Actors in this Group ..................................................................................................... 43
Figure 88. The newly created Actor Selector shows up in the Group list for the Process ................................ 44
Figure 89. Sales Employees is now the only set of Actors for this Task ........................................................... 44
Figure 90. Web Purchase Process Case initial Form (customer order form) .................................................... 45
Figure 91. Fill in Web Purchase Process customer order Form to start a Case ................................................ 46
Figure 92. Choose a Decision at Sales Review ................................................................................................ 46
Figure 93. Fill in Form presented at More Info ............................................................................................... 47
Figure 94. Fill in Form presented (again, after iteration) at Sales Review ....................................................... 47
Figure 95. Fill in Form presented at Pay ......................................................................................................... 48
Figure 96. Web Purchase Case completed...................................................................................................... 48
Figure 97. Completed initial Case shows up in archived Cases ....................................................................... 49
Figure 98. Bonita User Experience with completed Web Purchase Process test Case ..................................... 49
Figure 99. A completed Step in the Web Purchase Process test Case ............................................................ 49
Figure 100. Start another Case for the Web Purchase Process ....................................................................... 50
Figure 101. Fill in web purchase process customer order Form to start a new case ....................................... 50
Figure 102. Define a Form to initiate the Process ........................................................................................... 51
Figure 103. Select Data to appear in new Form ............................................................................................. 52
Figure 104. Details panel for Web Purchase Form ......................................................................................... 52
Figure 105. Close Details and Overview panels to see the entire Form .......................................................... 53
Figure 106. Initial Web Purchase Form ready to customize ............................................................................ 53
Figure 107. Add a blank widget to the top of the Form .................................................................................. 54
Figure 108. Rearrange the widgets in the Form.............................................................................................. 54
Figure 109. Remove the extra widget ............................................................................................................ 55
Figure 110. Customize General details for widget .......................................................................................... 56
Figure 111. Indicate that the Customer Name field must be completed in the Form ..................................... 56
BOS 5.5 Introduction Tutorial, 25 May 2011

www.bonitasoft.com | BonitaSoft S.A.

page 5

Bonita Open Solution 5.5 Introduction Tutorial

Figure 112. Add a Validator ........................................................................................................................... 56
Figure 113. Customize Details for another widget ......................................................................................... 57
Figure 114. Create a drop-down list for a list of choices ................................................................................. 58
Figure 115. Customized Form ......................................................................................................................... 58
Figure 116. Preview customized Form (to initiate Process) ............................................................................ 59
Figure 117. Select widgets to show in new Form ........................................................................................... 59
Figure 118. Arrange widgets in order ............................................................................................................. 60
Figure 119. Change widget from Text field (live) to Text (read only) .............................................................. 60
Figure 120. Add a new Text widget ............................................................................................................... 61
Figure 121. Rename new widget .................................................................................................................... 62
Figure 122. Select data value for Products text field ..................................................................................... 62
Figure 123. Choose Radio buttons as the Field Type for decision .................................................................. 62
Figure 124. Customized widgets in Sales Review Form.................................................................................. 63
Figure 125. Preview customized Form (for Sales Review).............................................................................. 63
Figure 126. Create a Form for the Pay Task .................................................................................................... 64
Figure 127. Select Edit Expression to create an Expression in Groovy ............................................................ 65
Figure 128. Enter a Groovy expression to be evaluated and presented in the Message ................................ 65
Figure 129. Preview customized Form (for Pay Task) .................................................................................... 66
Figure 130. Customized Form (fields) presented in Bonita Open Solution default web Form ........................ 66

page 6

www.bonitasoft.com | BonitaSoft S.A.

BOS 5.5 Introduction Tutorial, 25 May 2011

Bonita Open Solution 5.5 Introduction Tutorial

Welcome to Bonita Open Solution!
Use this Introduction Tutorial to:
Download Bonita Open Solution.
Quickly get familiar with the Bonita Open Solution interface.
Design basic processes with the graphic tools and see the processes run.
Part 1. Download, install, and launch Bonita Open Solution 5.5
Bonita Open Solution contains an internal database, a web container to deploy web-based
forms, and by default it opens the User Experience in your default web browser.
To do a simple, local installation of Bonita Open Solution:

Download the platform-independent BOS-5.5.zip file (268 Mb) from

(http://www.bonitasoft.com/products/BPM_download_all.php)
Unzip to a target folder.
Launch the application for your operating system.

Part 2. Bonita Open Solution Overview

This section shows you the principal screens in Bonita Open Solution. It is followed by
instructions for creating, running, and managing 2 simple Processes, step by step.
The screen below is the first screen you will see when you launch Bonita Open Solution.

create a new Process Diagram

open an existing Process Diagram

import .bar files (created in BOS v5)

open some examples

Figure 1. Welcome to Bonita Studio

BOS 5.5 Introduction Tutorial, 25 May 2011

www.bonitasoft.com | BonitaSoft S.A.

page 7

Bonita Open Solution 5.5 Introduction Tutorial

2.1.

Bonita Studio

When you enter Bonita Studio, the Whiteboard is ready to begin with a pre-set Start1 and
Step 1. The Whiteboard is where you draw your processes.
Menu bar
Task bar

Draw a Diagram with one or more Processes

directly on the Whiteboard

Use the Palette to select design elements, offered in different views

Overview of the process and

the searchable Treeview

Use the Detail Panel to define and customize the entire Process,
individual Tasks, User Forms, Simulation, and more.

Figure 2. Bonita Studio ready to design a new Process

page 8

www.bonitasoft.com | BonitaSoft S.A.

BOS 5.5 Introduction Tutorial, 25 May 2011

Bonita Open Solution 5.5 Introduction Tutorial

2.2.

Bonita Studio Form Builder

Use the Bonita Studio Form Builder to create Forms for End Users.

Place the fields of the Form in a

grid (rows and columns)

Use the Palette to select the widgets that allow you to format each field

See the Overview of the Form

and searchable Tree view

Use the Details Panel to customize the entire Form, individual

Form pages, individual fields, and more

Figure 3. Bonita Studio Form Builder

2.3.

Bonita User Experience (User XP)

Bonita User Experience Inbox allows the End Users to interact with and manage Process
Cases as they run.
There are 2 different views in Bonita User Experience: User View and Administration View.

BOS 5.5 Introduction Tutorial, 25 May 2011

www.bonitasoft.com | BonitaSoft S.A.

page 9

Bonita Open Solution 5.5 Introduction Tutorial

logged User
choose
interface
language

change User
Preferences

change
UserXP
view

the Inbox lists Steps to be completed

Use the Control panel to change the Inbox view
or to Start new Cases of Processes
Use the Dashboard to see the status of open Cases

Figure 4. Bonita User Experience User View

logged User
change
UserXP
view
the List of All Cases shows all Steps

Find links to guides and

tutorials to help you.

Use the Control panel to change the list view,

to define Users & privileges,
to monitor, to modify User View features, view
reports, and change the configuration.

Figure 5. Bonita User Experience Administration View

page 10

www.bonitasoft.com | BonitaSoft S.A.

BOS 5.5 Introduction Tutorial, 25 May 2011

Bonita Open Solution 5.5 Introduction Tutorial

Part 3. Tutorial Process Overviews
Follow this tutorial to:

Create a simple process in Bonita Studio and run it, then see the result in Bonita
User Experience (see Design and run a simple Process)
o

Draw Tasks and Transitions on the Whiteboard using the graphic tools in the
Bonita Studio Palette.
o Assign an Actor to each Task.
o Run the process, and complete the steps in Bonita User Experience.
Create a slightly more complex process and run it
(see Design a Process "Web Purchase")
o
o
o
o
o
o
o
o
o

Draw Tasks and Transitions.

Assign Actors.
Create an iteration and add a Gateway.
Add Conditions to Transitions.
Add Details to the Process.
Run the Process.
Complete a Process Case and interact with the manual Steps.
View the Process, and the Cases you will create, in Bonita User Experience.
Return to the Process and design Forms using the Form Builder function of
Bonita Studio.

Part 4. Design and run a simple Process

The finished process MyProcess will look like the following:

Figure 6. Finished process

4.1

Launch Bonita Studio

On the Welcome screen, under the Design menu, click on New Process.

BOS 5.5 Introduction Tutorial, 25 May 2011

www.bonitasoft.com | BonitaSoft S.A.

page 11

Bonita Open Solution 5.5 Introduction Tutorial

Figure 7. New Process

This opens a Process Diagram called MyProcessDiagram (1.0), which contains a Pool called
My Process.
Start1 and Step1 are already set up by default on the Whiteboard.

Figure 8. My Process
4.2

page 12

Draw Tasks and Transitions

Click on the Pool called MyProcess containing Start1 and Step1.

Drag and drop a new Human Task from the Design Palette on the left, and place it
next to Step 1 on the Whiteboard to the right.

www.bonitasoft.com | BonitaSoft S.A.

BOS 5.5 Introduction Tutorial, 25 May 2011

Bonita Open Solution 5.5 Introduction Tutorial

Figure 9. Drag and drop a new Task

You can now see 2 Tasks, Step 1 and Step 2.

These Tasks are not yet connected by a Transition.

Figure 10. Tasks not connected

Next, rename Step 1 to Fill in a form.

Click on Step1 to select it.

Click on the General tab below.

Figure 11. General Tab

Click on General in the General tab.

Figure 12. General tab

Enter Fill in a form in the Name field.

BOS 5.5 Introduction Tutorial, 25 May 2011

www.bonitasoft.com | BonitaSoft S.A.

page 13

Bonita Open Solution 5.5 Introduction Tutorial

Figure 13. Name field

Rename Step 2 to Send a form in the same way as above

The steps will now look like this:

Figure 14. New steps

Send a form shows an error. Ignore this for the moment.

Now, create a Transition to connect the two Tasks

Click on Fill in a form.

Figure 15. Create a Transition

page 14

Click on the arrow in the Context Palette

An arrow curser appears.
This means the Transition can be created.

Drag the curser arrow from Fill in a form to Send a form.

www.bonitasoft.com | BonitaSoft S.A.

BOS 5.5 Introduction Tutorial, 25 May 2011

Bonita Open Solution 5.5 Introduction Tutorial

Once the Transition is created, the process will look like the following:

Figure 16. Transition created

Create an End event by clicking on Send a form to display its Context Palette.

Drag the blue circle End Event, out to the right of Send a form.

Drop the End Event into the required position at the end of the process.

Figure 17. Drag and drop an End Event.

Select the Terminate End Event1 icon

from the palette.

A Transition is automatically created and Terminate End Event1 is added to the end of
the process.

Figure 18. Add Terminate End Event

4.3

Assign an Actor

Note: An Actor must be assigned to a human Task; an error icon will be displayed if the
Actor is missing. The error looks like this
and is displayed in the corner of Send a form.
Hover your curser over the icon to reveal the error message:

BOS 5.5 Introduction Tutorial, 25 May 2011

www.bonitasoft.com | BonitaSoft S.A.

page 15

Bonita Open Solution 5.5 Introduction Tutorial

By default, the Actor Selector named Initiator is already assigned to Step1 when you start a
new process. Initiator assigns the person who launches the process as the Actor for a Task.

Click on Send a form to assign an Actor to it.

Figure 19. Assign an Actor

In the General tab, click on Actors.

Click on the Choose button.

Figure 20. Actor selector wizard

The Actor Selector wizard will appear as shown below.

Figure 21. Choose an Actor

page 16

www.bonitasoft.com | BonitaSoft S.A.

BOS 5.5 Introduction Tutorial, 25 May 2011

Bonita Open Solution 5.5 Introduction Tutorial

Click on Initiator to select it.

Click on Finish. The Actor Selector has been chosen, and the Process Initiator has
been assigned as the Actor for Send a form.

Click on either Task to check the Actor is Initiator.

Figure 22. Initiator

Now the error disappears from Send a form.

Figure 23. Error has disappeared from Send a Form Task

4.4

Improve process readability

Enlarge the Whiteboard, zoom in and out, select elements to move, realign Tasks, add Text
Annotations and change Task colors.
None of these items will affect execution of the process.
4.4.1

Change the size of the Task bar

Change the size of the Task Bar (Coolbar) to enlarge the Whiteboard.

Figure 24. Change the size of the Task Bar (Coolbar)

BOS 5.5 Introduction Tutorial, 25 May 2011

www.bonitasoft.com | BonitaSoft S.A.

page 17

Bonita Open Solution 5.5 Introduction Tutorial

Choose between 3 options: hidden, small and normal and see the Whiteboard
change size.

Restore all panels by selecting View -> Reset view from the Menu Bar.

Figure 25. Reset Overview

4.4.2

Zoom in and out of a Pool

Use the Zoom in tool to increase the size of the view of the Pool.

Click on the Zoom In tool.

Figure 26. Zoom in tool

Select a place on the Pool to zoom in on, and click to increase its size.

Figure 27. Zoom in

Click on the Zoom out tool (or

+ left click).

Figure 28. Zoom out

page 18

www.bonitasoft.com | BonitaSoft S.A.

BOS 5.5 Introduction Tutorial, 25 May 2011

Bonita Open Solution 5.5 Introduction Tutorial

4.4.3

Select elements with the Marquee tool

The Marquee tool is another way of selecting elements on the Pool to align or move
together.

Click on the Marquee tool to move elements in a Pool.

Figure 29. Marquee

A precision cursor appears.

This means the selection can now be made.

Click and hold down then drag out a selection over all the elements.

Figure 30. Precision cursor

Click on the normal cursor tool to return to the normal selection.

Figure 31. Normal curser

4.4.4

Move the selection using the normal selection cursor

Align a selection of elements in a process

Use the Alignment tool to align a selection in a process either vertically or horizontally.

Highlight all the Tasks and Transitions in a Pool to align.

Use the Marquee tool for example, to select all the steps.

Figure 32. Marquee selection

BOS 5.5 Introduction Tutorial, 25 May 2011

www.bonitasoft.com | BonitaSoft S.A.

page 19

Bonita Open Solution 5.5 Introduction Tutorial

Right-click to display the menu.

Choose Horizontal Align.

Figure 33. Horizontal align

The final result after horizontal alignment is shown below:

Figure 34. Horizontal align result

4.4.5

Add extra information

Add an annotated text box to add extra information.

Click on the Text annotation icon in the Context Palette.

Figure 35. Text annotation box

Click and drag the Text annotation icon to a place on your Pool close to the Task.

Figure 36. Text annotation positioning

page 20

Click on General -> General and enter your text in the field.

www.bonitasoft.com | BonitaSoft S.A.

BOS 5.5 Introduction Tutorial, 25 May 2011

Bonita Open Solution 5.5 Introduction Tutorial

Figure 37. Enter text in the Text annotation field

Figure 38. Process with annotated text

4.4.6

Change the color of a Task

To personalize the look of Processes, you can change the appearance of the Whiteboard and
the elements on it.
For example, to change the background color of a Task:
Click on Fill in a form.

Figure 39. Select Fill in a form to change the background color

Click on the Appearance tab to see Color & Font.

Figure 40. Appearance tab

BOS 5.5 Introduction Tutorial, 25 May 2011

www.bonitasoft.com | BonitaSoft S.A.

page 21

Bonita Open Solution 5.5 Introduction Tutorial

Click on the bucket icon

Select a color from the color palette, e.g. orange.

Figure 41. Color palette

The Task color has now changed to orange.

Figure 42. Task color changed

4.4.7. Switch process overview

Switch between a graphic zoomed out view and a tree view of the Process.

Click on the different icons to change between views.

Figure 43. Overview switch views

This is the graphic view:

Figure 44. Graphic view

page 22

www.bonitasoft.com | BonitaSoft S.A.

BOS 5.5 Introduction Tutorial, 25 May 2011

Bonita Open Solution 5.5 Introduction Tutorial

Click on the arrow to expand the default Tree view menu and display hidden
contents.

Figure 45. Collapsed Tree view

This is the Tree view:

Figure 46. Expanded Tree view

Part 5. Run MyProcess

Click on Run
in the Menu bar at the top of the page. The process MyProcess will
be deployed and a Form will be created in the default Bonita web application.

Figure 47. Run MyProcess

A form is displayed. This form has no fields because no data was defined for this process.

Click on the Submit button in the Form as shown below.

BOS 5.5 Introduction Tutorial, 25 May 2011

www.bonitasoft.com | BonitaSoft S.A.

page 23

Bonita Open Solution 5.5 Introduction Tutorial

Figure 48. Fill in a form

Click on the Submit button to finish the process as shown below.

Figure 49. Send a form

The final screen presented below confirms the information has been submitted.

Figure 50. Information submitted

page 24

Click on the icon at the top right of the window to go to your Bonita User Experience
inbox.

www.bonitasoft.com | BonitaSoft S.A.

BOS 5.5 Introduction Tutorial, 25 May 2011

Bonita Open Solution 5.5 Introduction Tutorial

Part 6. Design another Process
6.1

Design a Process Web Purchase

The completed Process will look like this:

Figure 51. Completed Web Purchase Process

6.2

Create a new Process

Select New
to create a new Process. Bonita Studio will appear with a Start1 and a
first Step1 (Task).
6.3

Draw Tasks and Transitions

Start by defining the Tasks to create a Web Purchase process.

The first step in this Process is to review and process a customers order.
In this section, youll define the customer order after defining the process to handle it.

Click the initial Task (Step1), if necessary, to highlight it.

Notice that its Context Palette is visible.

Figure 52. Begin a new Process with a Start1 and a Step1

Go to General -> General.

In the Name field enter Sales Review.

BOS 5.5 Introduction Tutorial, 25 May 2011

www.bonitasoft.com | BonitaSoft S.A.

page 25

Bonita Open Solution 5.5 Introduction Tutorial

In the Description field enter Sales employee receives order for

processing.

Figure 53. General Details for Sales Review

(Youll come back to this Task later to add additional details).

At this point in the process, the sales employee can choose to:
1. validate the request and the customer can pay
2. reject the request
3. or enter more information relevant to the customers order

Next add 3 Tasks, (Pay, Reject, More Info. All tasks will be connected to Sales
Review.

Sales Review should still be highlighted. The Context Palette to the right of the Task
should be highlighted too.

Click on the Task icon (circled) in the Context Palette and drag a new Task to the
right of Sales Review on the Whiteboard.

Figure 54. Drag a new step

page 26

A new Step1 appears next to Sales Review.

www.bonitasoft.com | BonitaSoft S.A.

BOS 5.5 Introduction Tutorial, 25 May 2011

Bonita Open Solution 5.5 Introduction Tutorial

Figure 55. Pay Task

Notice that when you use the Context Palette (tools attached to a Task), a Transition is
added automatically.

Make sure that the Step1 is highlighted.

Go to General -> General and in the Name field enter Pay.

Give a Description, Customer completes credit payment for.

In Task type, select Human to make it a Human Task.

Figure 56. Name a new Task Pay

You will now see these Tasks automatically linked together.

Figure 57. Sales and Pay

BOS 5.5 Introduction Tutorial, 25 May 2011

www.bonitasoft.com | BonitaSoft S.A.

page 27

Bonita Open Solution 5.5 Introduction Tutorial

Now add 2 more Tasks Reject and More info and connect them to Sales Review.

First, add Reject.

Go to General -> General and in the Name field enter Reject.

Give a description, Sales employee enters additional

information.

In the Activity type dropdown list, select Abstract.

Priority is Normal.

Figure 58. Add Reject and define its general details

Then, add More Info.

Go to General -> General and in the Name field enter More Info.

Give a description Sales employee enters additional information.

In the Activity type dropdown list, select Human.

Enter the Priority Normal.

Figure 59. More Info

Note: The red X appears to indicate that this Human Task has no Actor defined yet.

page 28

www.bonitasoft.com | BonitaSoft S.A.

BOS 5.5 Introduction Tutorial, 25 May 2011

Bonita Open Solution 5.5 Introduction Tutorial

At this point, rename the Pool and the Process Diagram.

First, rename the Pool MyProcess1 to Web Purchase.

In the Description field, enter Simple item purchase from Web site
tutorial example.

Click anywhere in the Pool to deselect all elements.

Click on General -> Pool.

Figure 60. Rename the Pool

Next, rename the Process Diagram from MyProcessDiagram to Web

Purchase Diagram.

Click anywhere outside the Pool to deselect all elements.

Click on General -> Diagram.

Figure 61. Click on the Edit button

Click on the Edit button.

Figure 62. Click on the Edit button

BOS 5.5 Introduction Tutorial, 25 May 2011

www.bonitasoft.com | BonitaSoft S.A.

page 29

Bonita Open Solution 5.5 Introduction Tutorial

In the Name field enter WebPurchaseDiagram.

In the Version field, enter 2.0.

Figure 63. Rename this Process WebPurchaseDiagram

Save the Diagram. The Whiteboard tab is now labeled Web Purchase Diagram (v2.0)
and the Pool is now labeled Web Purchase.

As the customer enters the details for Pay, he/she will choose whether the item is to be sent
by Express Delivery.

Click Pay and use the Context Palette to add a new Task.

Name it Express Delivery.

Give a description, Send item via 3-day delivery.

In the Activity type dropdown list, select Abstract.

Figure 64. Express delivery

The last step in the Process is to archive the interaction.

page 30

Add a new Task below Express Delivery called Archive.

Go to Pay and drag a Task to be placed below Express Delivery.

Go to General > General, and name it Archive.

Name it System archives record of transaction.

www.bonitasoft.com | BonitaSoft S.A.

BOS 5.5 Introduction Tutorial, 25 May 2011

Bonita Open Solution 5.5 Introduction Tutorial

In Task type, select Abstract.

Figure 65. Add Archive and give it a description

Now that all the Tasks have been defined, add the remaining Transitions to connect
them.

Drag the arrow between Tasks to create the Transitions manually.

As rejected requests will be archived, add a Transition between Reject and Archive.

End the Process highlight Archive and add a Terminate End event.

Drag the Event into place, and select the red Terminate End event to end the Process.

Figure 66. Add a Terminate End event

Click and drag the individual elements in your Process to re-arrange them if you
wish, or use the Marquee tool and right click + vertical / horizontal align.

BOS 5.5 Introduction Tutorial, 25 May 2011

www.bonitasoft.com | BonitaSoft S.A.

page 31

Bonita Open Solution 5.5 Introduction Tutorial

Figure 67. Rearrange the Process elements on the Whiteboard

The general sequence of the Process is nearly defined. Now add missing information to
complete it.
6.4

Create an Iteration and add an XOR gateway

More Info has an input but no output. In this simple Process, the output will be returned to
the sales employee, so they can add information and complete the approval.
However, Sales Review will then have two inputs. A Gateway will define how these inputs
should be treated. Sales Review can proceed with either input, so an XOR Gateway is
needed.
Now, make room to add a Gateway between the Start and Sales Review.
To move a group of elements on the Whiteboard, click on the Horizontal Spacing
tool

page 32

in the Palette.

Using the spacing cursor on the pool,

drag tasks to the right on the pool,
to make space between Start1 and Sales Review.

Delete the Transition between Start and Sales Review.

Click-right -> delete or select the Transition and press Delete on the keyboard.

Now, select Gateway from the Palette and place it on the Whiteboard.

Draw a new Transition between Start and Gateway.

(Select from the Palette, click Start and drag the arrow to Gateway.)

Draw a new Transition between Gateway and Sales Review.

www.bonitasoft.com | BonitaSoft S.A.

BOS 5.5 Introduction Tutorial, 25 May 2011

Bonita Open Solution 5.5 Introduction Tutorial

Draw a Transition between Gateway and More Info.

Change Gateway Type to XOR by clicking on Gateway1

In Gateway type select XOR

Figure 68. Select the XOR Gateway type

The gateway XOR is placed in position.

Figure 69. Add an XOR Gateway

Note: If there is no XOR gateway to resolve multiple inputs, (just Transitions between Tasks)
Bonita Open Solution treats the Transitions as XOR by default. The Task will take the first to
arrive and proceed.
6.5

Add Global and Local Variables

The next step to define this example Process is to add global and local variables.
Variables are used to define conditions on Transitions, and to capture and manipulate data
in end user Form fields (in this example, the form that the customer completes to begin the
process). Global data is accessible to all elements in the Process; while local data is available
only to the Task where it is defined and its output Transitions.

Add 4 global variables to this Process: 3 Text variables and one List of Options
variable.

Click on the Pool.

Click on the General tab -> Data.

BOS 5.5 Introduction Tutorial, 25 May 2011

www.bonitasoft.com | BonitaSoft S.A.

page 33

Bonita Open Solution 5.5 Introduction Tutorial

Click on Add.

In Name enter customerName.

In Description enter Customers full name.

Data type will display Text by default.

Multiplicity will display Single by default.

Figure 70. Add global and local variables

page 34

Continue, and Add customerPhone and customerEmail as simple global Text

variables with no default values.

For the last variable, add a List of options, containing TV, Mobile phone and Laptop.

Click on Add.

In Name enter Promotional Products.

In Description enter Special prices online.

The Data type will be List of options.

www.bonitasoft.com | BonitaSoft S.A.

BOS 5.5 Introduction Tutorial, 25 May 2011

Bonita Open Solution 5.5 Introduction Tutorial

Figure 71. List of options

A second edit window pops up automatically to create or edit a list.

In the Create or edit a list editor, enter TV in the Name field.

Multiplicity will be Single.

Click on Ok.

Figure 72. Add a List of options

Click on Add each time to add 2 more items to the same list of options, Mobile
phone and Laptop, with TV as the default value.

BOS 5.5 Introduction Tutorial, 25 May 2011

www.bonitasoft.com | BonitaSoft S.A.

page 35

Bonita Open Solution 5.5 Introduction Tutorial

Click on Finish

The Web Purchase -> General -> Data now contains 4 global variables.

Figure 73. Newly created global variables

Now add local variables for the More Info and Pay.

Go to More Info -> General -> Data and select Add.

In Name, enter comment.

In Description, enter Additional information supplied by sales

employee.

In Data type, choose Text.

In Multiplicity, choose Single.

The new text variable comment now shows up in the Data tab.

Figure 74. Newly created variable shows up in Data for this Task

page 36

Go to Pay -> General -> Data and select Add.

www.bonitasoft.com | BonitaSoft S.A.

BOS 5.5 Introduction Tutorial, 25 May 2011

Bonita Open Solution 5.5 Introduction Tutorial

Add 1 text variable, 1 date variable, and 1 Boolean variable.

Add a text variable:

In Name, enter creditCardNumber.

In Description, enter Customer's Credit Card.

In Data type, choose Text.

Add a date variable:

In Name, enter expirationDate.

In Description, enter Card valid until.

In Data type, enter Date.

In Default value, enter Now.

And add a Boolean yes/no for the choice of express delivery:

In Name, enter chooseExpressDelivery.

In Description, enter If yes - send express; if no - send regular

post.

In Data type, enter Boolean.

In Default value, enter True.

Figure 75. Newly created variables for this Task

6.6

Add Conditions to Transitions

Note that Sales Review has 3 outputs, and each implementation of the Process will follow
only one of them. One way to define how a Process will choose to follow which path is to
define Conditions for each Transition. Conditions can be defined using variables.

Select Sales Review .

BOS 5.5 Introduction Tutorial, 25 May 2011

www.bonitasoft.com | BonitaSoft S.A.

page 37

Bonita Open Solution 5.5 Introduction Tutorial

In General -> Data, click on Add.

In Name, enter decision.

In Description, enter Multiple options require a decision.

In Data type, enter List of options.

In Name, enter (list) Approval.

In Description, enter Decision to approve, reject, or add more

info.

Click on Add to add the items Approve, Reject, and More info.

Click on Ok.

Figure 76. Define a variable List of Options for Sales Review

Click on Finish.

The list variable now shows in Sales Review.

page 38

www.bonitasoft.com | BonitaSoft S.A.

BOS 5.5 Introduction Tutorial, 25 May 2011

Bonita Open Solution 5.5 Introduction Tutorial

Figure 77. Newly created variable for Sales Review

With this variable defined, you can associate each Transition output from Sales Review with
its associated decision Condition.
Select each Transition in turn and enter the details:

Sales Review -> Pay

In Name, enter if approved.

In Conditions, enter decision == Approve.

Sales Review ->Reject

In Name, enter if not approved.

In Conditions enter decision == Reject.

Sales Review ->More Info

In Name, enter add a comment

In Conditions, enter decision == More Info .

Figure 78. Define Conditions for Transitions

BOS 5.5 Introduction Tutorial, 25 May 2011

www.bonitasoft.com | BonitaSoft S.A.

page 39

Bonita Open Solution 5.5 Introduction Tutorial

The Condition for each Transition now shows on the Whiteboard. Note that a diamond
shape indicates a Condition has been defined.

Figure 79. Transition Conditions appear on Whiteboard

To change this label, select the Transition and go to Appearance -> Label.

Select Name Label.

Figure 80. Change label on Transitions

The Transition names now appear on the Whiteboard.

Figure 81. Transition Names appear on Whiteboard

Note that Pay has two outputs, too.

page 40

Define the Conditions for the two output paths.

Add true-false Conditions to the two Transitions.

www.bonitasoft.com | BonitaSoft S.A.

BOS 5.5 Introduction Tutorial, 25 May 2011

Bonita Open Solution 5.5 Introduction Tutorial

Select the Transition between Pay and Express Delivery. Name the Transition if
yes.

In Conditions, enter chooseExpressDelivery. This Groovy expression

evaluates to chooseExpressDelivery=true.

Figure 82. Add a Boolean Condition (true) to a Transition

Select the Transition between Pay and Archive. Name the Transition if no. In the
Conditions field, enter !chooseExpressDelivery. This Groovy expression
evaluates to chooseExpressDelivery=false.

Figure 83. Add a Boolean (false) Condition to a Transition

Go to Appearance and change the labels on these two Transitions from Condition
Label to Name Label.

Note that you can also remove the labels on the Start, Gateway and End elements by
unchecking display name in the Appearance table of the Details Panel.
The Name of each Transition now shows on the Process.

BOS 5.5 Introduction Tutorial, 25 May 2011

www.bonitasoft.com | BonitaSoft S.A.

page 41

Bonita Open Solution 5.5 Introduction Tutorial

Figure 84. Transition Names appear on Process

6.7

Define Actor Selectors

To finish the definition of this example, define who will take action in the Human Tasks - the
Actor(s). In this section, you will add a static list of Actors, which is appropriate only for
trying out a Process design. (In a real-world scenario, the Actors of a Task would be selected
dynamically, usually from an external list which requires configuration of an Actor Selector).
Note: When the Process is Run, the Actors become the End Users.
The Process requires 2 types of Actors: the Process Initiator and Sales Employees. Define
these two Actor Selectors at the Process level, then go to each Task and assign them as
appropriate.

Click anywhere in the Pool, then go to General -> Actor Selectors.

Note that Process Initiator is already defined, so add an Actor Selector for Sales Employees.

Figure 85. Create a new Actor Selector for this Process

page 42

Click on Create, and when the wizard appears, select Bonita connectors and User List
Enter individuals manually.

Click on Next.

Set the Name of the group as Sales Employees.

www.bonitasoft.com | BonitaSoft S.A.

BOS 5.5 Introduction Tutorial, 25 May 2011

Bonita Open Solution 5.5 Introduction Tutorial

Enter the Description Employees authorized to handle web sales.

Figure 86. Name the Actor Selector

This Actor Selector is used to enter Actor names manually

When you define Actors in this example Process, use the list of Actors for whom User access
has been pre-defined for Process development and testing (i.e, admin, john, james, and
jack.)
When you Run the completed process, Bonita User Experience opens for this admin by
default. Including admin in the manual list of Actors for all Human Tasks, ensures that youll
see those Tasks in the default User Experience inbox.

Enter the names of the users, separated by a comma

Figure 87. Define the Actors in this Group

Click Finish to complete.

This will now show in the list of Actor Selectors available in this Process.

BOS 5.5 Introduction Tutorial, 25 May 2011

www.bonitasoft.com | BonitaSoft S.A.

page 43

Bonita Open Solution 5.5 Introduction Tutorial

Figure 88. The newly created Actor Selector shows up in the Group list for the Process

You can now define the Actors in each of the Human Tasks in this Process.

Go to Sales Review -> General -> Actors. Initiator is already included by default. As
the Actor for this Task will be a Sales Employee, Select Initiator and Remove.

Note that removing Initiator from this Task does not remove it from the Process.

Then select Choose > Sales Employees, and Finish.

Sales Employees now shows as the Actor Selector for this Task.

Figure 89. Sales Employees is now the only set of Actors for this Task

Select More Info and do the same to define the Actor Selector as Sales Employees.

For Pay, choose Initiator, as it is the initiator of the Process Case (the purchaser)
who will complete this Task.

Save your Diagram.

The Process is now complete and ready to deploy/run.

page 44

www.bonitasoft.com | BonitaSoft S.A.

BOS 5.5 Introduction Tutorial, 25 May 2011

Bonita Open Solution 5.5 Introduction Tutorial

Part 8 Run the Process 2
To Run (deploy) your process, click the Run icon
Process from the Menu bar.

from the Task bar or select Run -> Run

After a few moments, Bonita Open Solution will present a series of status messages. The
deployment is successful.
Note that you are logged in as the User called admin.
The Process can now run Step by Step.
Recall that Tasks are called Steps in Bonita User Experience; Actors are End Users.
The forms are presented in the default Bonita Form and default Bonita Web Application,
which you have not customized (the fields are not presented in any specified order; they are
labeled with the variable name, and so on).
After you complete this Run a Process section, you can return to Bonita Studio and change
these forms (see Customize Forms).

Figure 90. Web Purchase Process Case initial Form (customer order form)

The default customer order form begins the Web Purchase.

At each Step, you can take action as the End User as you have defined it in the Process
design.
Note that you as admin, are testing the manual actions of the Customer (Initiator) at the
beginning of the Process and at Pay, and of the Sales Employee at Sales Review and More
Info.

As Customer, fill in the order form and click on Submit.

BOS 5.5 Introduction Tutorial, 25 May 2011

www.bonitasoft.com | BonitaSoft S.A.

page 45

Bonita Open Solution 5.5 Introduction Tutorial

Figure 91. Fill in Web Purchase Process customer order Form to start a Case

The information entered by the customer is presented for approval in Sales Review. You
can now Approve, Reject, or request to enter More Information.
Note that the Step Actor candidates include the individuals you have identified as Sales
Employees, including the admin.

As Sales Employee, select More Info and click on Submit.

Figure 92. Choose a Decision at Sales Review

page 46

As Sales Employee, enter additional information and click on Submit.

www.bonitasoft.com | BonitaSoft S.A.

BOS 5.5 Introduction Tutorial, 25 May 2011

Bonita Open Solution 5.5 Introduction Tutorial

Figure 93. Fill in Form presented at More Info

As Sales Employee, select Approve and click on Submit.

Figure 94. Fill in Form presented (again, after iteration) at Sales Review

As Customer, fill in Credit Card Number and Expiration Date, select Express
Delivery and click on Submit.

BOS 5.5 Introduction Tutorial, 25 May 2011

www.bonitasoft.com | BonitaSoft S.A.

page 47

Bonita Open Solution 5.5 Introduction Tutorial

Figure 95. Fill in Form presented at Pay

At this Step, the Form would be presented to the Initiator, but by default the admin has
access to activate it in this development activity.

The process is completed. Go to Bonita User Experience.

Figure 96. Web Purchase Case completed

Click on Bonita User Experience (circled in red) to open.

Part 8. Consult Bonita User Experience

Use Bonita User Experience to run multiple Cases of this Process. Note that you can also
open the User Experience by clicking on the User XP icon
Studio.

on the Task bar in Bonita

Your inbox now contains a record of all the actions you have been involved in. You can look
at these actions at any time.

page 48

www.bonitasoft.com | BonitaSoft S.A.

BOS 5.5 Introduction Tutorial, 25 May 2011

Bonita Open Solution 5.5 Introduction Tutorial

Since the Case you have just run has no open Steps it was completed it will show up in
Cases -> Show archived cases only.

Figure 97. Completed initial Case shows up in archived Cases

Now click on Web purchase to start a case.

Figure 98. Bonita User Experience with completed Web Purchase Process test Case

Click on Web Purchase in the Case list to expand it

Figure 99. A completed Step in the Web Purchase Process test Case

The Case Overview shows the Steps executed in your Case.

BOS 5.5 Introduction Tutorial, 25 May 2011

www.bonitasoft.com | BonitaSoft S.A.

page 49

Bonita Open Solution 5.5 Introduction Tutorial

To run this Process again, return to the Inbox, go to Start a Case and select Web
Purchase. Click the Web Purchase under Start a case to run another Case.

Figure 100. Start another Case for the Web Purchase Process

The Process starts again with a new Case. This time, youll see the Forms presented inside
the User Experience.

Figure 101. Fill in web purchase process customer order Form to start a new case

Fill data in the order form presented, and click on Submit.

Return to the Inbox to see the open Case.

Try running several Cases to try different choices at each Step.

page 50

www.bonitasoft.com | BonitaSoft S.A.

BOS 5.5 Introduction Tutorial, 25 May 2011

Bonita Open Solution 5.5 Introduction Tutorial

Part 9. Customize Forms
To customize the way information is presented to the end user in the four Bonita Open
Solution-generated forms in this tutorial example, return to Bonita Studio.
9.1

Add a case start Form

The first Form presented in this process, Case Start: Web Purchase is the one that begins
this process.

To customize it, click on the Pool Web Purchase.

Go to the Details Panel and select Application.

Figure 102. Define a Form to initiate the Process

Entry Pageflow allows you to define a series of Forms that allow data entry (i.e. interactive), and to
specify in what order the pages will be presented.

BOS 5.5 Introduction Tutorial, 25 May 2011

www.bonitasoft.com | BonitaSoft S.A.

page 51

Bonita Open Solution 5.5 Introduction Tutorial

In this section, youll design single-page Forms.

Select Add. A Form Wizard appears with all of the Data variables available for this
Form.

Figure 103. Select Data to appear in new Form

For this example, leave all choices checked and click Finish to continue.

A default version of the Form will appear, along with the Details panel for the Form.

Figure 104. Details panel for Web Purchase Form

page 52

To see the entire Form, close the Details and Overview Panels (click on the X in the
upper right corner of the Overview Panel, and on each tab in the Details Panel).

www.bonitasoft.com | BonitaSoft S.A.

BOS 5.5 Introduction Tutorial, 25 May 2011

Bonita Open Solution 5.5 Introduction Tutorial

Figure 105. Close Details and Overview panels to see the entire Form

Figure 106. Initial Web Purchase Form ready to customize

Each variable field in the Form is presented in a widget. You can customize the order and
presentation of each widget in the Form.

BOS 5.5 Introduction Tutorial, 25 May 2011

www.bonitasoft.com | BonitaSoft S.A.

page 53

Bonita Open Solution 5.5 Introduction Tutorial

9.2

Re-order widgets in Form

Its easier to move widgets when there is an empty space.

Add one to the top of the Form by clicking on the Insert a row symbol
top left:

at the

Figure 107. Add a blank widget to the top of the Form

Now you can click and drag the customerName widget to the first row of the
Form.

Figure 108. Rearrange the widgets in the Form

page 54

Click and drag the other widgets into the order you want.

www.bonitasoft.com | BonitaSoft S.A.

BOS 5.5 Introduction Tutorial, 25 May 2011

Bonita Open Solution 5.5 Introduction Tutorial

Figure 109. Remove the extra widget

9.3

To remove the extra widget, click on the Remove a row symbol

left.

at the bottom

Customize widgets in Form

Now you can customize the details for each widget.

Begin with customerName.

Click the widget and go to Details. You may need to restore the View to see the
Details panel again.

Go to the Menu bar and select View -> Reset view.

In Show label, enter Full Name.

In Tool tip enter Please enter first, then last name.

In Field Type enter Text field.

BOS 5.5 Introduction Tutorial, 25 May 2011

www.bonitasoft.com | BonitaSoft S.A.

page 55

Bonita Open Solution 5.5 Introduction Tutorial

Figure 110. Customize General details for widget

Go to Options and select Is mandatory.

Figure 111. Indicate that the Customer Name field must be completed in the Form

There are no changes to Data, Validators, or Appearance for this field.

Continue to the next widget, customerEmail.

Change the Show label to Email address.

Go to Details -> Validators -> Add.

Figure 112. Add a Validator

page 56

www.bonitasoft.com | BonitaSoft S.A.

BOS 5.5 Introduction Tutorial, 25 May 2011

Bonita Open Solution 5.5 Introduction Tutorial

In Validator Type, select Mail.

In Error Message, enter This does not appear to be a valid email

address.

There are no changes to Data, Grid, or Appearance for this widget.

Continue to the next widget, customerPhone.

In General, add a label Phone number.

In Tooltip, enter Please enter a number where we can reach you

during working hours.

In Field type, enter Text field.

Figure 113. Customize Details for another widget

There are no changes to Data, Validators, or Appearance for this widget.

Go to Options and select Is mandatory.

Continue to the next widget, products.

In General, add a label and change the field type.

In Show label, enter Promotional products available.

In Field type, enter Select.

BOS 5.5 Introduction Tutorial, 25 May 2011

www.bonitasoft.com | BonitaSoft S.A.

page 57

Bonita Open Solution 5.5 Introduction Tutorial

Figure 114. Create a drop-down list for a list of choices

For this Data variable, a drop-down list allows the user to select more than one item from a
Data list.

Change the label of the Submit button from Submit1 to Submit.

Figure 115. Customized Form

page 58

Preview the Form you have created by selecting Preview

www.bonitasoft.com | BonitaSoft S.A.

from the Task Bar.

BOS 5.5 Introduction Tutorial, 25 May 2011

Bonita Open Solution 5.5 Introduction Tutorial

Figure 116. Preview customized Form (to initiate Process)

9.4

Save and close the Form and save it by clicking on the X on its tab.

Add Forms for Tasks (Steps)

Unlike the live Form presented to the Initiator to start this Process, the Form at Sales
Review primarily serves to carry data forward for review. There is only one live field for
the Sales Employee, the Decision choice.
Here is one way to create a Form here to do this.

Go to the Details Panel for Sales Review and Add.

Again select all Data available here to carry into the Form.

Figure 117. Select widgets to show in new Form

Add a new space to the Form, re-arrange the other widgets (see Figure below) and
delete the resulting empty widget.

BOS 5.5 Introduction Tutorial, 25 May 2011

www.bonitasoft.com | BonitaSoft S.A.

page 59

Bonita Open Solution 5.5 Introduction Tutorial

Figure 118. Arrange widgets in order

Reformat the widgets for customerName, customerEmail, customerPhone, and

products to carry forward data already entered by the Initator.

To do this:

Click on the customerName widget to see its Details panel.

Here you can change its Field Type from TextBox (live) to Text (read only).

In Show field, enter customerName.

In Field type, select Text.

Figure 119. Change widget from Text field (live) to Text (read only)

page 60

Repeat this for customerEmail, and customerPhone. Change Submit1 to Submit.

www.bonitasoft.com | BonitaSoft S.A.

BOS 5.5 Introduction Tutorial, 25 May 2011

Bonita Open Solution 5.5 Introduction Tutorial

To change products to a read-only text field, you will need to redefine a widget.

Delete the old products widget.

Use the

Click and drag a Text widget from the Palette into the new space.

to insert a new widget.

Figure 120. Add a new Text widget

Click on the new widget, go to General and rename the widget and Label.

For Name, enter products.

For Show label, enter products selected.

BOS 5.5 Introduction Tutorial, 25 May 2011

www.bonitasoft.com | BonitaSoft S.A.

page 61

Bonita Open Solution 5.5 Introduction Tutorial

Figure 121. Rename new widget

In the new Products widget, go to General -> Data. Select ${products}.

Figure 122. Select data value for Products text field

Last, go to the decision widget. In General, choose Radio buttons as the Field Type.
Radio buttons allows only one choice from a Data list. This is the only live field in
this Form.

Figure 123. Choose Radio buttons as the Field Type for decision

page 62

www.bonitasoft.com | BonitaSoft S.A.

BOS 5.5 Introduction Tutorial, 25 May 2011

Bonita Open Solution 5.5 Introduction Tutorial

Figure 124. Customized widgets in Sales Review Form

Preview the Form you have customized.

Figure 125. Preview customized Form (for Sales Review)

Customize the Form in More Info in the same way. Change the field for comment (Add
comment) as a live Text area.
The Form for Pay will be presented to the Initiator again (customer), so you can add a widget
to summarize the customers order.

BOS 5.5 Introduction Tutorial, 25 May 2011

www.bonitasoft.com | BonitaSoft S.A.

page 63

Bonita Open Solution 5.5 Introduction Tutorial

Click on Pay and go to Entry pageflow -> Add.

When the Create a New Form wizard appears, select only chooseExpressDelivery,
creditCardNumber, and expirationDate.

Re-arrange the widgets as shown in the figure below. Add a new widget by clicking
and dragging the Message widget into the top spot.

Figure 126. Create a Form for the Pay Task

page 64

Go to General and change the widget labels.

In creditCardNumber, enter Credit Card Number.

In expirationDate, enter Expiration Date

In chooseExpressDelivery, enter Do you want express delivery?

Check if yes:

For the new Message widget, go to General -> Data. For Initial value, select Edit
Expression. Create a Groovy expression to present a message in the Form.

www.bonitasoft.com | BonitaSoft S.A.

BOS 5.5 Introduction Tutorial, 25 May 2011

Bonita Open Solution 5.5 Introduction Tutorial

Figure 127. Select Edit Expression to create an Expression in Groovy

This displays the Edit window.

Figure 128. Enter a Groovy expression to be evaluated and presented in the Message

Preview the Form you have customized.

BOS 5.5 Introduction Tutorial, 25 May 2011

www.bonitasoft.com | BonitaSoft S.A.

page 65

Bonita Open Solution 5.5 Introduction Tutorial

Figure 129. Preview customized Form (for Pay Task)

Close and Save the Form.

Save your Process as Web Purchase Diagram 1.5.

Run it.

You should now see the Forms you have designed presented in the default Bonita Open
Solution Web Form.

Figure 130. Customized Form (fields) presented in Bonita Open Solution default web Form

page 66

www.bonitasoft.com | BonitaSoft S.A.

BOS 5.5 Introduction Tutorial, 25 May 2011

Bonita Open Solution 5.5 Introduction Tutorial

Part 10. Summary
You have used only some of Bonita Open Solution's functions, specifically:
The graphical interfaces of Bonita Studio, to create a complete Process by
Defining Tasks and assigning Actors through Actor Selectors.
Defining a Gateway to manage multiple inputs to a Task in an iteration.
Adding global variables to the Process and local variables to Tasks, which in turn
have been used to create interactive forms.
o defining text, date, and list variables
o defining a Boolean variable
Defining Conditions on Transitions to manage multiple output choices from a Task.
The default Forms interface of Bonita User Experience:
Run a completed Process and enter information into the interactive forms created
from your variables.
The e-mail like interface of Bonita User Experience:
See the completed Case Steps.
Consult the Case history.
Run an additional Case (or two, or several) of your Process.
Download a report in .pdf format.
The Form Builder customization feature of Bonita Studio:
Select which data fields to present in a Form.
Configure how those data fields will be presented to the User.
If you explore a bit more in Bonita Open Solution, you will find other functionalities not
addressed in this Tutorial - for example, in the Details for a Task, you can define Connectors
to link to external databases and to messaging systems, and much more.

BOS 5.5 Introduction Tutorial, 25 May 2011

www.bonitasoft.com | BonitaSoft S.A.

page 67

Bonita Open Solution 5.5 Introduction Tutorial

Part 11. Feedback, Questions, and More Information
If you explore a bit more in Bonita Open Solution, you will find many more functionalities
not addressed in this Intro Tutorial.
Follow the links below:
More Functionalities
For further explanation of the functionalities in Bonita Open Solution, see the Bonita Open
Solution User and Reference Guide.
http://www.bonitasoft.com/products/BPM_download.php
BonitaSoft Forum
We welcome your feedback on the BonitaSoft Forum.
Ask your questions too. Use the BonitaSoft Forum to let us have it!
http://www.bonitasoft.org/forum/
BonitaSoft Community
Join the BonitaSoft Community and get our Newsletter, access detailed information, and
more.
http://www.bonitasoft.org/register.php
Bug Tracker, Source Code
Check out our Bug Tracker, Source Code.
http://www.bonitasoft.org/index.php
More information
For more information, contact us at www.bonitasoft.com
http://www.bonitasoft.com/company/contact.php.
Have fun with Bonita!

page 68

www.bonitasoft.com | BonitaSoft S.A.

BOS 5.5 Introduction Tutorial, 25 May 2011