You are on page 1of 52

Bonita Open Solution

Version 5.4

Introduction Tutorial

Bonita Open Solution 5.4 Introduction Tutorial


Bonita Open Solution Version 5.4

Introduction Tutorial
Contents
Change Notice ......................................................................................................................................... 4
Welcome to Bonita Open Solution! ........................................................................................................ 5
Part 1. Download, install, and launch Bonita Open Solution 5.4 ........................................................... 5
Part 2. Bonita Open Solution Overview ................................................................................................. 5
2.1 Bonita Open Solution Overview .................................................................................................... 6
2.1.1
Bonita Studio ................................................................................................................... 6
2.1.2
Bonita Studio Form Builder ............................................................................................. 7
2.1.3
Bonita User Experience (User XP) ................................................................................... 8
Part 3. Create a Process ......................................................................................................................... 9
3.1
Prepare to Design a Process Graphically in Bonita Studio ...................................................... 9
3.2
Launch Bonita Studio .............................................................................................................. 9
3.3
Draw Tasks and Transitions .................................................................................................. 10
3.4
Create an Iteration and add an XOR gate ............................................................................. 17
3.5
Add Global and Local Variables............................................................................................. 18
3.6
Add Conditions to Transitions ............................................................................................... 22
3.7
Define Actor Selectors .......................................................................................................... 25
Part 4 Run a Process............................................................................................................................. 29
Part 5 Consult Bonita User Experience ................................................................................................ 32
Part 6 Customize Forms ....................................................................................................................... 36
6.1
Add a case start Form ........................................................................................................... 36
6.2
Reorder widgets in Form....................................................................................................... 39
6.3
Customize widgets in Form ................................................................................................... 40
6.4
Add Forms for Tasks (Steps) .................................................................................................. 43
Part 7. Summary................................................................................................................................... 52
Part 8. Feedback, Questions, and More Information .......................................................................... 52

Figures
Figure 1. Welcome to Bonita Studio ...................................................................................................... 5
Figure 2. Bonita Studio ready to design a new Process ......................................................................... 6
Figure 3. Bonita Studio Form Builder ..................................................................................................... 7
Figure 4. Bonita User Experience User View ....................................................................................... 8
Figure 5. Bonita User Experience Administration View ...................................................................... 8
Figure 6. Completed Web Purchase Process ......................................................................................... 9
Figure 7. Begin a new Process with a Start and a Step ........................................................................ 10
Figure 8. Enter General Details for Sales Review ................................................................................. 10
Figure 9. Use the Context Palette to draw new elements on the Whiteboard ................................... 11
Figure 10. Name a new Task and enter its General Details ................................................................. 11
Figure 11. Three views of the Bonita Studio Palette............................................................................ 12
Figure 12. Add Reject and define its General Details ........................................................................... 13
Figure 13. Add More Info Task and define its General Details ............................................................ 13

page 2

www.bonitasoft.com | BonitaSoft S.A.

BOS 5.4 Introduction Tutorial, 27 Jan 2011

Bonita Open Solution 5.4 Introduction Tutorial


Figure 14.
Figure 15.
Figure 16.
Figure 17.
Figure 18.
Figure 19.
Figure 20.
Figure 21.
Figure 22.
Figure 23.
Figure 24.
Figure 25.
Figure 26.
Figure 27.
Figure 28.
Figure 29.
Figure 30.
Figure 31.
Figure 32.
Figure 33.
Figure 34.
Figure 35.
Figure 36.
Figure 37.
Figure 38.
Figure 39.
Figure 40.
Figure 41.
Figure 42.
Figure 43.
Figure 44.
Figure 45.
Figure 46.
Figure 47.
Figure 48.
Figure 49.
Figure 50.
Figure 51.
Figure 52.
Figure 53.
Figure 54.
Figure 55.
Figure 56.
Figure 57.
Figure 58.
Figure 59.
Figure 60.
Figure 61.
Figure 62.
Figure 63.
Figure 64.

Rename the Pool ................................................................................................................. 14


Rename this Process Diagram ............................................................................................. 14
Add Express Delivery Task and define its General Details .................................................. 15
Add Archive and define its General Details......................................................................... 16
Add an End event ................................................................................................................ 16
Rearrange the Process elements on the Whiteboard......................................................... 17
Add an XOR Gate ................................................................................................................. 17
Add global variable for Web Purchase Process ................................................................... 18
Define a global List of Options variable .............................................................................. 19
Newly created global variables ........................................................................................... 19
Add local variable to More Info.......................................................................................... 20
Newly created variable shows up in Data for this Task ...................................................... 20
Newly created variables for this Task ................................................................................. 21
Define a variable List of Options for Sales Review .............................................................. 22
Newly created variable for this Task ................................................................................... 23
Define Conditions for Transitions ....................................................................................... 23
Transition Conditions appear on Whiteboard .................................................................... 23
Change label on Transitions ................................................................................................ 24
Transition Names appear on Whiteboard .......................................................................... 24
Add a Boolean Condition (true) to a Transition .................................................................. 24
Add a Boolean (false) Condition to a Transition ................................................................. 25
Transition Names appear on Process.................................................................................. 25
Create a new Actor Selector for this Process ...................................................................... 26
This Actor Selector is used to enter Actor names manually ............................................... 26
Name the Actor Selector ..................................................................................................... 27
Define the Actors in this Group........................................................................................... 27
The newly created Actor Selector shows up in the Group list for the Process ................... 28
Sales Employees is now the only set of Actors for this Task ............................................... 28
Web Purchase Process Case initial Form (customer order form) ....................................... 29
Fill in Web Purchase Process customer order Form to start a Case ................................... 29
Choose a Decision at Sales Review...................................................................................... 30
Fill in Form presented at More Info .................................................................................... 30
Fill in Form presented (again, after iteration) at Sales Review ........................................... 31
Fill in Form presented at Pay .............................................................................................. 31
Web Purchase Case completed........................................................................................... 32
Completed initial Case shows up in archived Cases............................................................ 32
Bonita User Experience with completed Web Purchase Process test Case........................ 33
A completed Step in the Web Purchase Process test Case................................................. 33
Start another Case for the Web Purchase Process ............................................................. 34
Fill in web purchase process customer order Form to start a new case ............................ 34
Open Cases with steps to perform show up in the Inbox ................................................... 35
Define a Form to initiate the Process.................................................................................. 36
Select Data to appear in new Form..................................................................................... 37
Details panel for Web Purchase Form ................................................................................ 37
Close Details and Overview panels to see the entire Form ................................................ 38
initial Web Purchase Form ready to customize .................................................................. 38
Add a blank widget to the top of the Form ......................................................................... 39
Reorder the widgets in the Form ........................................................................................ 39
Remove the extra widget .................................................................................................... 40
Customize General details for widget ................................................................................. 40
Indicate that the Customer Name field must be completed in the Form .......................... 41

BOS 5.4 Introduction Tutorial, 27 Jan 2011

www.bonitasoft.com | BonitaSoft S.A.

page 3

Bonita Open Solution 5.4 Introduction Tutorial


Figure 65. Add a Validator.................................................................................................................... 41
Figure 66. Customize Details for another widget ................................................................................ 41
Figure 67. Create a drop-down list for a list of choices ....................................................................... 42
Figure 68. Customized Form ................................................................................................................ 42
Figure 69. Preview customized Form (to initiate Process) .................................................................. 43
Figure 70. Select widgets to show in new Form .................................................................................. 43
Figure 71. Arrange widgets in order .................................................................................................... 44
Figure 72. Change widget from Text field (live) to Text (read only) .................................................... 45
Figure 73. Add a new Text widget ........................................................................................................ 46
Figure 74. Rename new widget ........................................................................................................... 46
Figure 75. Select data value for Products text field ............................................................................. 47
Figure 76. Choose Radio buttons as the Field Type for decision ......................................................... 47
Figure 77. Customized widgets in Sales Review Form ......................................................................... 48
Figure 78. Preview customized Form (for Sales Review) ..................................................................... 48
Figure 79. Create a Form for the Pay Task ........................................................................................... 49
Figure 80 Select Edit Expression to create an Expression in Groovy ................................................... 50
Figure 81. Enter a Groovy expression to be evaluated and presented in the Message ...................... 50
Figure 82. Preview customized Form (for Pay Task) ............................................................................ 51
Figure 83. Customized Form (fields) presented in Bonita Open Solution default web Form .............. 51
Change Notice
BOS 5.4 contains news functions and presents a new user interface in both Bonita Studio and Bonita
User Experience. This Introduction tutorial shows the updated interfaces.
For an overview of where to find functionalities in Bonita Studio, Form Builder, and Bonita User
Experience, see the Bonita Open Solution QuickStart Guide.
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.

page 4

www.bonitasoft.com | BonitaSoft S.A.

BOS 5.4 Introduction Tutorial, 27 Jan 2011

Bonita Open Solution 5.4 Introduction Tutorial


Welcome to Bonita Open Solution!
Use this Introduction Tutorial to get started with Bonita Open Solution and become familiar
with designing a process with its graphic tools.
Part 1. Download, install, and launch Bonita Open Solution 5.4
Download Bonita Open Solution 5.4: www.bonitasoft.com/products/downloads.php
When the zipped folder has been downloaded, extract all files. To launch Bonita Open
Solution and begin designing a process:

open the unzipped BOS 5.4 folder


launch the BonitaStudio application file for your operating system.

Part 2. Bonita Open Solution Overview


The Overview shows you the principal screens in Bonita Open Solution. After the Overview
is a Tutorial that will take you through creating, running, and managing a Process step by
step.

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.4 Introduction Tutorial, 27 Jan 2011

www.bonitasoft.com | BonitaSoft S.A.

page 5

Bonita Open Solution 5.4 Introduction Tutorial


2.1 Bonita Open Solution Overview

2.1.1

Bonita Studio
When you enter Bonita Studio, the Whiteboard is ready to begin:
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

See the Overview of the


whole Process
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

Note: You can hide the Overview or Detail Panels by clicking on the X in the tab; restore all
panels by Selecting View -> Reset View from the Menu Bar.

page 6

www.bonitasoft.com | BonitaSoft S.A.

BOS 5.4 Introduction Tutorial, 27 Jan 2011

Bonita Open Solution 5.4 Introduction Tutorial


2.1.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


Use the Details Panel to customize the entire Form, individual
Form pages, individual fields, and more
Figure 3. Bonita Studio Form Builder

BOS 5.4 Introduction Tutorial, 27 Jan 2011

www.bonitasoft.com | BonitaSoft S.A.

page 7

Bonita Open Solution 5.4 Introduction Tutorial


2.1.3

Bonita User Experience (User XP)


The Bonita User Experience portal provides information about Process Cases as they run.
There are 2 different default views in Bonita User XP: simple User View, and
Administration View.

logged User

User (admin)
identified
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


Use the Control panel to change the list view,
to define Users & privileges,
to monitor, and to modify User View features

Figure 5. Bonita User Experience Administration View

page 8

www.bonitasoft.com | BonitaSoft S.A.

BOS 5.4 Introduction Tutorial, 27 Jan 2011

Bonita Open Solution 5.4 Introduction Tutorial


Part 3. Create a Process
Follow the Introduction tutorial to:

3.1

Design a complete Process graphically in Bonita Studio, as you


o Draw Tasks and Transitions using the graphic tools in the Bonita Studio
Palette
o Create an iteration and add a Gate
o Add Conditions to Transitions
o Add Details to the Process (global variables)and to Individual Tasks (local
variables)
Run the Process you create
Complete a Process Case and interact with the manual Steps
See 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

Prepare to Design a Process Graphically in Bonita Studio

Design a simple process, Web Purchase:


1. A customer orders an item from a web store.
2. A company sales employee processes the request manually (approves it, rejects it,
or adds more information to the order).
3. If/when the customers order is approved, he/she pays for the order.
4. The customer chooses whether to have the item shipped by Express Delivery.
5. The transaction is archived.
The Process will look like this when completed:

Figure 6. Completed Web Purchase Process

(It might be helpful to keep this handy as you design the Process.)
3.2

Launch Bonita Studio

Launch Bonita Studio and Select New to create a new Process. Bonita Studio will appear
with a Start and a first Step (Task).

BOS 5.4 Introduction Tutorial, 27 Jan 2011

www.bonitasoft.com | BonitaSoft S.A.

page 9

Bonita Open Solution 5.4 Introduction Tutorial


3.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 tutorial,
youll define the customer order after defining the process to handle it.)
Click the initial Task (Step1), if necessary, to highlight it. Note that its Context Palette is
highlighted.

Figure 7. Begin a new Process with a Start and a Step

Go to the Details panel, click General if necessary to highlight it, and enter:

Enter
Name
Description

Sales Review
Sales employee
receives order for
processing

Activity Type Human


Priority
Normal
Figure 8. Enter 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; OR
2) reject the request; OR
3) enter more information relevant to the customers order.
Accordingly, next add 3 Tasks, all connected to Sales Review, as detailed below.
Sales Review should still be highlighted. (If not, click it.) The Context Palette to the right of
the Task is highlighted too.

page 10

www.bonitasoft.com | BonitaSoft S.A.

BOS 5.4 Introduction Tutorial, 27 Jan 2011

Bonita Open Solution 5.4 Introduction Tutorial

Click on the Step tool (circled) and drag a new Step onto the Whiteboard
Figure 9. Use the Context Palette to draw new elements on the Whiteboard

Be sure that the new Task is highlighted. Go to the Details panel and click General to name
it:

Enter
Name
Pay
Description Customer completes
credit card payment form

Activity type Human


Priority
Normal

Figure 10. Name a new Task and enter its General Details

Note that there is a red warning in the upper right corner of the Task. Hover your mouse
over it to see: The task has no group or user. Youll add this required information later.
Now add the other 2 Tasks connected to Sales Review. First, Reject.
This time use the Palette to add a Task.
You can select the Palette that you prefer. The first version shows element icons only; the
second, a simple list of element types (which you can further define after placing on the
Whiteboard), and the third, a full list of all elements.

BOS 5.4 Introduction Tutorial, 27 Jan 2011

www.bonitasoft.com | BonitaSoft S.A.

page 11

Bonita Open Solution 5.4 Introduction Tutorial

Figure 11. Three views of the Bonita Studio Palette

Click and drag a Task into place. To connect it with a Transition, use the Context Palette of
Sales Review, or click and drag from the Palette. (See the figure above for the Transition
icons, circled.) Note that when you use the Context Palette to add a Task, a Transition is
added automatically.

page 12

www.bonitasoft.com | BonitaSoft S.A.

BOS 5.4 Introduction Tutorial, 27 Jan 2011

Bonita Open Solution 5.4 Introduction Tutorial


In General ->General:

Enter
Name
Reject
Description Request is rejected
Activity type Automatic
Figure 12. Add Reject and define its General Details

Then, add the Task More Info. In its General -> General:

Enter in General
Name
More Info
Description Sales employee
enters
additional
information
Activity type Human
Priority
Normal
Figure 13. Add More Info Task and define its General Details

Again the red X appears to indicate that this Human -performed Task has no Actor defined
yet.

BOS 5.4 Introduction Tutorial, 27 Jan 2011

www.bonitasoft.com | BonitaSoft S.A.

page 13

Bonita Open Solution 5.4 Introduction Tutorial


At this point, rename the Pool and the Process Diagram.
First, rename the Pool from MyProcess1 to Web Purchase. Click anywhere in the Pool
to deselect all elements. Click on General -> Pool:

Enter
Name
Version
Description

Web Purchase
1.5
Simple item purchase
from Web site
tutorial example

Figure 14. Rename the Pool

Now rename the Process Diagram from MyProcessDiagram to Web Purchase


Diagram. Click anywhere outside the Pool to deselect all elements. Click on General ->
Diagram:

Enter
Name
Version
Description

Web Purchase Diagram


1.5
Simple item purchase
from Web site
tutorial example

Figure 15. Rename this Process Diagram

page 14

www.bonitasoft.com | BonitaSoft S.A.

BOS 5.4 Introduction Tutorial, 27 Jan 2011

Bonita Open Solution 5.4 Introduction Tutorial


Save the Diagram. The Whiteboard tab is now labeled Web Purchase Diagram
(1.5) and the Pool is now labeled Web Purchase. Note that the red warnings have
disappeared also. Continue the Process definition.
As the customer completes the Pay Task, he/she will choose whether the item is to be sent
express. Click Pay and use the Context Palette to add a new Task. Name it Express
Delivery.

Enter
Name
Description

Express Delivery
Send item via 3day delivery

Activity type: Automatic


Figure 16. Add Express Delivery Task and define its General Details

The last step in the Process is to archive the interaction. Add a Task after Express Delivery,
go to General -> General, and name it Archive.

BOS 5.4 Introduction Tutorial, 27 Jan 2011

www.bonitasoft.com | BonitaSoft S.A.

page 15

Bonita Open Solution 5.4 Introduction Tutorial

Enter
Name
Description

Archive
System archives
record of
transaction

Activity type

Automatic

Figure 17. Add Archive and define its General Details

Now that all the Tasks have been defined, add the remaining Transitions to connect them.
As no-express-delivery requests will also be archived, add a Transition between Pay and
Archive. Select Pay to highlight its Context Palette and drag the Transition arrow to Archive.
As rejected requests will also be archived, add a Transition between Reject and Archive.
End the process highlight Archive and add an End. Drag the Event into place, and select
the red End event to create an End.

Figure 18. Add an End event

Click and drag the individual elements in your Process to rearrange them if you wish.

page 16

www.bonitasoft.com | BonitaSoft S.A.

BOS 5.4 Introduction Tutorial, 27 Jan 2011

Bonita Open Solution 5.4 Introduction Tutorial

Figure 19. Rearrange the Process elements on the Whiteboard

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

Create an Iteration and add an XOR gate

Note that More Info has an input but no output. In this simple tutorial example Process, the
output will be returned to the sales employee so he/she can add information and complete
the approval.
However, Sales Review will then have two inputs. A Gate will define how these inputs
should be treated. Sales Review can proceed with either input, so an XOR Gate is needed.
Make room to add the Gate between the Start and Sales Review. To move a group of
elements on the Whiteboard, click the Pool, move the mouse horizontally to open the
capture function, and capture the group to drag it to the right.

Delete Transition Start - Sales Review (with a right click or


with Delete on the keyboard)
Select Gate from Palette and place it on the Whiteboard.
Draw new Transition Start - Gate.
Draw new Transition Gate - Sales Review.
Draw Transition between More Info and Gate.
(Select from the Palette, click More Info and drag the
arrow to Gate.)
Change Gate Type to XOR.

Figure 20. Add an XOR Gate

Note: If there is no XOR gate to resolve multiple inputs, Bonita Open Solution treats them as
XOR by default. The Task will take the first to arrive and proceed.

BOS 5.4 Introduction Tutorial, 27 Jan 2011

www.bonitasoft.com | BonitaSoft S.A.

page 17

Bonita Open Solution 5.4 Introduction Tutorial


3.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, go to the Web Purchase Details Panel, General -> Data, then Add.

Enter
Name
Description
Data type
Multiplicity:

customerName
Customers full name

Text
Single

Figure 21. Add global variable for Web Purchase Process

Continue, and Add customerPhone and customerEmail as simple global Text


variables with no default values.

page 18

www.bonitasoft.com | BonitaSoft S.A.

BOS 5.4 Introduction Tutorial, 27 Jan 2011

Bonita Open Solution 5.4 Introduction Tutorial


For the last variable, add a List of options.

Enter
Name
products
Description Available
products

Select
Data type
Name
Description

List of options
Promotional
Products
Special prices
online

Add
TV
mobile phone
laptop

Select
Default value TV
Figure 22. Define a global List of Options variable

Note that Web Purchase -> Generals -> Data now contains 4 global variables.

Figure 23. Newly created global variables

BOS 5.4 Introduction Tutorial, 27 Jan 2011

www.bonitasoft.com | BonitaSoft S.A.

page 19

Bonita Open Solution 5.4 Introduction Tutorial


Now add local variables for the More Info and Pay Tasks.
Go to More Info -> General -> Data and select Add.

Enter
Name
comment
Description Additional information
supplied by sales
employee

Data type Text


Multiplicity Single

Figure 24. Add local variable to More Info

The new variable now shows in Details.

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

page 20

www.bonitasoft.com | BonitaSoft S.A.

BOS 5.4 Introduction Tutorial, 27 Jan 2011

Bonita Open Solution 5.4 Introduction Tutorial


Go to Pay -> General -> Data and select Add.
Add 1 text variable, 1 date variable, and 1 Boolean variable:
Add a text variable:

Name: creditCardNumber

Description:
Customer's Credit Card

Data type:
Text
Add a date variable:

Name: expirationDate
Description:
Card valid until
Data type:
Date
Default value: Now

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

Name: chooseExpressDelivery
Description:
If yes - send express; if no - send regular
post
Data type:
Boolean
Default value: true

Figure 26. Newly created variables for this Task

BOS 5.4 Introduction Tutorial, 27 Jan 2011

www.bonitasoft.com | BonitaSoft S.A.

page 21

Bonita Open Solution 5.4 Introduction Tutorial


3.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 and in General, Add Data:

Enter
Name
decision
Description Multiple options require a
decision

Select
Data type
List of options
Name
(list): Approval
Description: Decision to approve, reject, or

Add

add more info


Approve, Reject, and More Info

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

page 22

www.bonitasoft.com | BonitaSoft S.A.

BOS 5.4 Introduction Tutorial, 27 Jan 2011

Bonita Open Solution 5.4 Introduction Tutorial


The list variable now shows in Sales Review, General -> Data.

Figure 28. Newly created variable for this Task

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

Sales Review - Pay:


Name
if approved
Conditions decision == Approve

Sales Review Reject:


Name:
if not approved
Conditions: decision == Reject

Sales Review - More Info:


Name:
add a comment
Conditions decision == More Info
Figure 29. Define Conditions for Transitions

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

Figure 30. Transition Conditions appear on Whiteboard

BOS 5.4 Introduction Tutorial, 27 Jan 2011

www.bonitasoft.com | BonitaSoft S.A.

page 23

Bonita Open Solution 5.4 Introduction Tutorial


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

Figure 31. Change label on Transitions

The Transition names now appear on the Whiteboard.

Figure 32. Transition Names appear on Whiteboard

Note that Pay has two outputs, too. Define the conditions for the two output paths.
Add true-false Conditions to the 2 Transitions.
Select the Transition between Pay and Express Delivery. Name the Transition if yes. In the
Conditions field, enter chooseExpressDelivery. This Groovy expression evaluates to
chooseExpressDelivery=true.

Enter
Name:
If yes
Conditions: chooseExpressDelivery
Figure 33. Add a Boolean Condition (true) to a Transition

page 24

www.bonitasoft.com | BonitaSoft S.A.

BOS 5.4 Introduction Tutorial, 27 Jan 2011

Bonita Open Solution 5.4 Introduction Tutorial


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.

Enter
Name:
If yes
Conditions: !chooseExpressDelivery
Figure 34. 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, Gate 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.

Figure 35. Transition Names appear on Process


3.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 Tutorial, youll 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 that 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 -> Groups. Note that Process Initiator is
already defined, so add an Actor Selector for Sales Employees.
BOS 5.4 Introduction Tutorial, 27 Jan 2011

www.bonitasoft.com | BonitaSoft S.A.

page 25

Bonita Open Solution 5.4 Introduction Tutorial

Select
Group and Create
Figure 36. Create a new Actor Selector for this Process

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

Select
Bonita and User List

Figure 37. This Actor Selector is used to enter Actor names manually

Enter the name for this Actor Selector: Sales Employees.

page 26

www.bonitasoft.com | BonitaSoft S.A.

BOS 5.4 Introduction Tutorial, 27 Jan 2011

Bonita Open Solution 5.4 Introduction Tutorial

Enter
Name
Sales Employees
Description Employees
authorized to
handle web sales

Figure 38. Name the Actor Selector

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
Users

admin,john,james,jack

Figure 39. 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.4 Introduction Tutorial, 27 Jan 2011

www.bonitasoft.com | BonitaSoft S.A.

page 27

Bonita Open Solution 5.4 Introduction Tutorial

Figure 40. 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 41. 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.
The Process is now complete and ready to deploy/run. Save your Diagram.

page 28

www.bonitasoft.com | BonitaSoft S.A.

BOS 5.4 Introduction Tutorial, 27 Jan 2011

Bonita Open Solution 5.4 Introduction Tutorial


Part 4 Run a Process
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).

Default customer order form begins the Web Purchase Process Case
Figure 42. Web Purchase Process Case initial Form (customer order form)

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 order form


and Submit
Figure 43. Fill in Web Purchase Process customer order Form to start a Case

BOS 5.4 Introduction Tutorial, 27 Jan 2011

www.bonitasoft.com | BonitaSoft S.A.

page 29

Bonita Open Solution 5.4 Introduction Tutorial


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 Submit
Figure 44. Choose a Decision at Sales Review

As Sales Employee: enter additional


information and Submit
Figure 45. Fill in Form presented at More Info

page 30

www.bonitasoft.com | BonitaSoft S.A.

BOS 5.4 Introduction Tutorial, 27 Jan 2011

Bonita Open Solution 5.4 Introduction Tutorial

As Sales Employee: select Approve


and Submit
Figure 46. Fill in Form presented (again, after iteration) at Sales Review

As Customer: Fill in Credit Card Number and Expiration


Date, select Express Delivery and Submit
Figure 47. Fill in Form presented at Pay

Note that 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.

BOS 5.4 Introduction Tutorial, 27 Jan 2011

www.bonitasoft.com | BonitaSoft S.A.

page 31

Bonita Open Solution 5.4 Introduction Tutorial

Process completed. Go to User Experience


Figure 48. Web Purchase Case completed

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


Part 5 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.
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 49. Completed initial Case shows up in archived Cases

page 32

www.bonitasoft.com | BonitaSoft S.A.

BOS 5.4 Introduction Tutorial, 27 Jan 2011

Bonita Open Solution 5.4 Introduction Tutorial

Click on Web Purchase in the Case list to expand it


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

The Case Overview shows the Steps executed in your test Case
Figure 51. A completed Step in the Web Purchase Process test Case

To run this Process again, return to the Inbox, go to Start a Case and select Web Purchase:

BOS 5.4 Introduction Tutorial, 27 Jan 2011

www.bonitasoft.com | BonitaSoft S.A.

page 33

Bonita Open Solution 5.4 Introduction Tutorial

Click the Case Web Purchase under Start a case to run another Case

Figure 52. 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 53. Fill in web purchase process customer order Form to start a new case

Fill data in the order form presented, and Submit.


Return to the Inbox to see the open Case.

page 34

www.bonitasoft.com | BonitaSoft S.A.

BOS 5.4 Introduction Tutorial, 27 Jan 2011

Bonita Open Solution 5.4 Introduction Tutorial

Figure 54. Open Cases with steps to perform show up in the Inbox

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

BOS 5.4 Introduction Tutorial, 27 Jan 2011

www.bonitasoft.com | BonitaSoft S.A.

page 35

Bonita Open Solution 5.4 Introduction Tutorial


Part 6 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.
6.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 55. 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. In this tutorial, youll design singlepage Forms.
Select Add. A wizard appears with all of the Data variables available for this Form.

page 36

www.bonitasoft.com | BonitaSoft S.A.

BOS 5.4 Introduction Tutorial, 27 Jan 2011

Bonita Open Solution 5.4 Introduction Tutorial

Figure 56. Select Data to appear in new Form

For this example, leave all choices checked and Finish to continue. A default version of the
Form will appear, along with the Details panel for the Form.

Figure 57. Details panel for Web Purchase Form

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).

BOS 5.4 Introduction Tutorial, 27 Jan 2011

www.bonitasoft.com | BonitaSoft S.A.

page 37

Bonita Open Solution 5.4 Introduction Tutorial

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

Figure 59. 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.

page 38

www.bonitasoft.com | BonitaSoft S.A.

BOS 5.4 Introduction Tutorial, 27 Jan 2011

Bonita Open Solution 5.4 Introduction Tutorial


6.2

Reorder 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 add a row symbol
at the top left:

Figure 60. 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 61. Reorder the widgets in the Form

BOS 5.4 Introduction Tutorial, 27 Jan 2011

www.bonitasoft.com | BonitaSoft S.A.

page 39

Bonita Open Solution 5.4 Introduction Tutorial


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

Figure 62. Remove the extra widget

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


6.3

at the bottom left.

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.)

Enter
Show label: Full Name
Tool tip:
please enter first then last name
Field type Text Box
Figure 63. Customize General details for widget

Go to Options and select Is mandatory.

page 40

www.bonitasoft.com | BonitaSoft S.A.

BOS 5.4 Introduction Tutorial, 27 Jan 2011

Bonita Open Solution 5.4 Introduction Tutorial

Figure 64. 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.

Choose
Validator type: Mail

Enter
Error message this does not appear to
be a valid email address
Figure 65. Add a Validator

There are no changes to Data, Grid, or Appearance for this widget. Continue to the next
widget, customerPhone. In General, add a label and a tooltip.

Enter
Show label: Phone number
Tool tip:
please enter a number where we
can reach you during working
hours
Field type Text Box
Figure 66. Customize Details for another widget

BOS 5.4 Introduction Tutorial, 27 Jan 2011

www.bonitasoft.com | BonitaSoft S.A.

page 41

Bonita Open Solution 5.4 Introduction Tutorial


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:

Enter
Show label: Promotional products available
Field type Select
Figure 67. 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 68. Customized Form

page 42

www.bonitasoft.com | BonitaSoft S.A.

BOS 5.4 Introduction Tutorial, 27 Jan 2011

Bonita Open Solution 5.4 Introduction Tutorial

Preview the Form you have created by selecting Preview

from the Task Bar.

Figure 69. Preview customized Form (to initiate Process)

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

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 70. 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.4 Introduction Tutorial, 27 Jan 2011

www.bonitasoft.com | BonitaSoft S.A.

page 43

Bonita Open Solution 5.4 Introduction Tutorial

Figure 71. 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).

page 44

www.bonitasoft.com | BonitaSoft S.A.

BOS 5.4 Introduction Tutorial, 27 Jan 2011

Bonita Open Solution 5.4 Introduction Tutorial

Enter
Show label: Customer Name
Field type change to Text
Figure 72. Change widget from Text field (live) to Text (read only)

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


To change products to a read-only text field, you will need to redefine a widget.
Delete the old products widget.
Use the
to insert a new widget. Click and drag a Text widget from the Palette into the
new space.

BOS 5.4 Introduction Tutorial, 27 Jan 2011

www.bonitasoft.com | BonitaSoft S.A.

page 45

Bonita Open Solution 5.4 Introduction Tutorial

Figure 73. Add a new Text widget

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

Enter
Name:
products
Show label Products selected
Figure 74. Rename new widget

page 46

www.bonitasoft.com | BonitaSoft S.A.

BOS 5.4 Introduction Tutorial, 27 Jan 2011

Bonita Open Solution 5.4 Introduction Tutorial


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

Figure 75. 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 76. Choose Radio buttons as the Field Type for decision

BOS 5.4 Introduction Tutorial, 27 Jan 2011

www.bonitasoft.com | BonitaSoft S.A.

page 47

Bonita Open Solution 5.4 Introduction Tutorial

Figure 77. Customized widgets in Sales Review Form

Preview the Form you have customized.

Figure 78. Preview customized Form (for Sales Review)

page 48

www.bonitasoft.com | BonitaSoft S.A.

BOS 5.4 Introduction Tutorial, 27 Jan 2011

Bonita Open Solution 5.4 Introduction Tutorial


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 again be presented to the Initiator (customer), so you can add a widget
to summarize the customers order.
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 79. Create a Form for the Pay Task

Go to General and change the following widget labels:

creditCardNumber:
Credit Card Number
expirationDate: Expiration Date
chooseExpressDelivery: Do you want express delivery?
yes:

Check if

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.

BOS 5.4 Introduction Tutorial, 27 Jan 2011

www.bonitasoft.com | BonitaSoft S.A.

page 49

Bonita Open Solution 5.4 Introduction Tutorial

Figure 80 Select Edit Expression to create an Expression in Groovy

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

Preview the Form you have customized.

page 50

www.bonitasoft.com | BonitaSoft S.A.

BOS 5.4 Introduction Tutorial, 27 Jan 2011

Bonita Open Solution 5.4 Introduction Tutorial

Figure 82. 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 83. Customized Form (fields) presented in Bonita Open Solution default web Form

BOS 5.4 Introduction Tutorial, 27 Jan 2011

www.bonitasoft.com | BonitaSoft S.A.

page 51

Bonita Open Solution 5.4 Introduction Tutorial


Part 7. 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 Gate 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; and
defining Conditions on Transitions to manage multiple output choices from a Task.
The default Forms interface of Bonita User Experience:
to Run a completed Process and enter information into the interactive forms created
from your variables.
The e-mail like interface of Bonita User Experience:
to see the completed Case Steps;
to consult the Case history; and
to Run an additional Case (or two, or several) of your Process.
The Form Builder customization feature of Bonita Studio:
to select which data fields to present in a Form
to 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.
Part 8. Feedback, Questions, and More Information
For an expanded explanation of the functionalities in Bonita Open Solution, see the Bonita Open
Solution User and Reference Guide.
We welcome your feedback. Use the BonitaSoft Forum to let us have it!
(www.bonitasoft.org/forum)
The BonitaSoft Forum is the place for your questions too. And check out our Bug Tracker, Source
Code, and more.
(www.bonitasoft.org/index.php)
Join the BonitaSoft Community and get our Newsletter, access to advance information, and more.
(www.bonitasoft.com/community/join.php)
For more information, contact us at BonitaSoft.
(www.bonitasoft.com/company/contact.php)
Have fun with Bonita!

page 52

www.bonitasoft.com | BonitaSoft S.A.

BOS 5.4 Introduction Tutorial, 27 Jan 2011