Bos 5.9 Introtutorial Tour Admin Userview

Bonita Open Solution

Version 5.9

Introduction Tutorial

Bonita User Experience

Process Administrator view End User view

Bonita Open Solution 5.9 Introduction Tutorial

Bonita User Experience - Administration and User

page 2 www.bonitasoft.com | © BonitaSoft S.A. Bonita User Experience Bonita Open Solution 5.9 Introduction Tutorial

Contents

Introduction ...............................................................................................................................4

The aim of this Introduction tutorial ................................................................................................ 4 Who will use this Introduction tutorial? ........................................................................................... 4 Tutorial structure .............................................................................................................................. 4 Tutorial materials .............................................................................................................................. 4 Menus presented in Bonita User Experience ................................................................................... 5 Logging in and out............................................................................................................................. 5 Bonita Open Solution version ........................................................................................................... 6

Part 1. What you need to follow this tutorial ..............................................................................7 Part 2. Deploy the process from Bonita Studio ............................................................................8 Part 3. Changing roles and user views ..........................................................................................9

3.1 Follow the steps of the process .................................................................................................. 9 3.1.1 Customer places an order ..................................................................................................... 9 3.1.2 Sales confirms order ...........................................................................................................10 3.1.3 Customer pays for order .....................................................................................................11 3.1.4 Sales checks case status ......................................................................................................13

3.2 The User view ........................................................................................................................... 14 3.2.1 Control panel ......................................................................................................................14 3.2.2 The Inbox ............................................................................................................................15 3.2.3 Logged user .........................................................................................................................15 3.2.4 Change user ........................................................................................................................16 3.2.5 Start a case (Customer view) ..............................................................................................16 3.2.6 Bonita User Experience: Sales overview seen as a Sales employee ...................................17

Part 4. Bonita User Experience Administration menus ............................................................... 19 4.1 Processes .................................................................................................................................. 19

4.1.1 See list of processes ............................................................................................................19 4.1.3 Install a process ..................................................................................................................21 4.1.4 Open the design ..................................................................................................................22

4.2 Cases ......................................................................................................................................... 23 4.2.1 Start a case ..........................................................................................................................23 4.2.2 Assign a case .......................................................................................................................23 4.2.3 More actions .......................................................................................................................23

4.3 Attachments ............................................................................................................................. 24 4.3.1 View the attachments to a case..........................................................................................24 4.3.2 Add an attachment to a case ..............................................................................................24

4.4 Organization .............................................................................................................................. 25 4.4.1 View the users in an organization .......................................................................................25

4.5 Reporting .................................................................................................................................. 26 4.5.1 View the Dashboard............................................................................................................26

4.6 Configuration ............................................................................................................................ 26 4.6.1 Look’n’Feel ..........................................................................................................................26

Part 5. For more tutorial examples ........................................................................................... 28 Part 6. Feedback, Questions, and More Information.................................................................. 28



Bonita Open Solution 5.9 Introduction Tutorial Bonita User Experience www.bonitasoft.com | © BonitaSoft S.A page 3

Figures

Figure 1. Click on run in the cool bar .............................................................................................................. 8 Figure 2. Click on run in the menu bar ........................................................................................................... 8 Figure 3. Customer order ............................................................................................................................... 9 Figure 4. First form for customer (admin) ...................................................................................................... 9 Figure 5. A confirmation message is displayed ............................................................................................ 10 Figure 6. Log back in as James ..................................................................................................................... 10 Figure 7. Confirm the order in the web browser .......................................................................................... 11 Figure 8. Log back in as the customer .......................................................................................................... 11 Figure 9. Order confirmation in web browser .............................................................................................. 12 Figure 10. Pay form in the web browser ...................................................................................................... 12 Figure 11. Logging out ................................................................................................................................. 13 Figure 12. Log in again as an employee ........................................................................................................ 13 Figure 13. Order confirmation in Bonita User Experience ............................................................................ 14 Figure 14. Bonita User Experience overview as a customer ......................................................................... 14 Figure 15. My cases ..................................................................................................................................... 15 Figure 16. No steps to perform .................................................................................................................... 15 Figure 17. Inbox ........................................................................................................................................... 15 Figure 18. Default login (admin) .................................................................................................................. 16 Figure 19. Start a case as an external user ................................................................................................... 16 Figure 20. Return to web browser to start a new case ................................................................................. 17 Figure 21. Change the login and user ........................................................................................................... 17 Figure 22. Web purchase started ................................................................................................................. 17 Figure 23. John confirms order .................................................................................................................... 18 Figure 24. Order confirmed and submitted .................................................................................................. 18 Figure 25. Process menu .............................................................................................................................. 20 Figure 26. Click on a process in the list ........................................................................................................ 20 Figure 27. Details of a process ..................................................................................................................... 20 Figure 28. Form application ......................................................................................................................... 21 Figure 29. Description of a process .............................................................................................................. 21 Figure 30. Process details ............................................................................................................................ 21 Figure 31. Install a process ........................................................................................................................... 21 Figure 32. Search for a process to install ...................................................................................................... 22 Figure 33. Open the design .......................................................................................................................... 22 Figure 34. The process design is displayed in a pop-up window .................................................................. 22 Figure 35. Click on a case ............................................................................................................................. 23 Figure 36. Assign a case ............................................................................................................................... 23 Figure 37. More actions ............................................................................................................................... 23 Figure 38. Click on a case to view an attachment ......................................................................................... 24 Figure 39. View attachments ....................................................................................................................... 24 Figure 40. View the users ............................................................................................................................ 25 Figure 41. List of the users in the organization ............................................................................................ 25 Figure 42. View user's details ...................................................................................................................... 25 Figure 43. View the dashboard .................................................................................................................... 26 Figure 44. Click on Look'n'Feels ................................................................................................................... 26 Figure 45. Click on an applied look’n’feel..................................................................................................... 27 Figure 46. Look’n’feel detail ........................................................................................................................ 27




Introduction

The aim of this Introduction tutorial

This Introduction tutorial has been designed to:

Take you through a process executed from Bonita Studio and presented in Bonita User Experience

Help you become familiar with the screens and menus displayed in Bonita User Experience

Show you functions available in Bonita User Experience Administration view

Who will use this Introduction tutorial?

This tutorial is primarily targeted at a “process developer” in the development environment e.g. Business Analyst, Process Engineer or Application Developer.

Tutorial structure

Read Part 1 and check you have the prerequisites that you need to start the tutorial. Follow the instructions in Part 2 to deploy the process used as an example in the tutorial. Part 3 is a step-by-step guide to completing all the tasks in the example process. In Part 3, two user roles are explained:

An external user is the customer who will start the order and pay by entering credit card details Bonita User Experience. This user sees the forms presented in Bonita User Experience.

An internal user is the Sales employee who will validate the order and send the order back to the customer for their payment details. This user sees the forms presented in Bonita User Experience.

You will play the roles of an external and internal end user. To do this you will:

execute the process from within Bonita Studio using Run

fill in and submit the forms presented in the web browser

change roles assigned by the process developer, according to the task to be performed in the process

Part 4 presents all the Bonita User Experience features available to the administrator.

Tutorial materials

This tutorial uses the content of Bonita User Experience that results from running the tutorial process My Tutorial process diagram 1.2 developed in the 3 tutorials for Bonita Studio. See Part 1 of this tutorial for details of how to run the process.




Menus presented in Bonita User Experience

As you change roles and log in and out during the process, different menus in Bonita User Experience will be shown. Switch between a form in the web browser and Bonita User Experience to view menus and data visible for each role. This tutorial includes manipulation of the following menus of Bonita User Experience: User view: The user view is the inbox interface presented to the internal user, or Sales employee in the tutorial example.

Control panel o Inbox

My cases – finished and archived Start a case

Administration view: The administration view is the back-office view where settings and rights are modified, and process and cases can be installed or modified. An administrator is able to see the interaction of the external and internal users and during development can switch to “play” the various roles in the process.

Processes o See the list of processes o Install a process o More actions (enable, disable processes) o See the list of cases o Start a case o View the documents attached to a case o Add an attachment to a case

Organization o See the users in the organization

View login and password and other tabs

Reporting o View the dashboard

See the process design

View look’n’feel options For more detailed information about the menus briefly presented in this tutorial, see the Administration view or User view in the Bonita Open Solution online documentation.

Logging in and out

http://www.bonitasoft.com/resources/documentation/bos-58/application-developers

http://www.bonitasoft.com/resources/documentation/bos-58/application-developers

http://www.bonitasoft.com/resources/documentation/index.php




In this tutorial the admin will initiate the process and be considered by the system as the initiator. That is, the administrator is playing the role of the customer. The Bonita User Experience view changes according to the role of the user and their task to perform in the process. It will be necessary to log out and log back in using a different login and password, in order to simulate the switch between their respective views. Use the following user logins and passwords: * External user (customer): login: admin pw: bpm *Internal user (sales): login: james pw: bpm *Admin: login: admin pw: bpm *Note: These roles are defined as Actors in the tutorial process Web Purchase.

Bonita Open Solution version

This Introduction tutorial was originally developed using Bonita Open Solution 5.7 and has been updated for Bonita Open Solution 5.9.




Part 1. What you need to follow this tutorial

In order to follow this tutorial, you need the completed diagram MyTutorialProcessDiagram 1.2.

To get a completed diagram, you can do one of two things:

Complete the series of 3 Introduction tutorials below to create a completed diagram MyTutorialProcessDiagram--1.2.bar. 1. The Bonita Open Solution 5.9 IntroTutorial - Process Design 2. The Bonita Open Solution-5.9 IntroTutorial - Process Definition 3. The Bonita Open Solution-5.9 IntroTutorial - Application-Dev Tutorial

For more information about these Intro Tutorials, see here.

Download the completed diagram and import it into Bonita Studio.

o Download the completed diagram from the BonitaSoft Community Contributions (see TutorialProcessDiagramCompleted--1.2.bar).

http://www.bonitasoft.com/resources/documentation/sites/docs.bonitasoft.com/files/images_5_7/pdf_5-7/BOS-5.7-IntroTutorial-Application-Dev.pdf



http://www.bonitasoft.com/resources/documentation/bos-59/getting-started/introduction-tutorials

http://www.bonitasoft.org/exchange/extension_view.php?eid=293






Part 2. Deploy the process from Bonita Studio

Note: the diagram was created in 5.6. You must import it into Bonita Open Solution 5.9 in order to deploy it in 5.9 User Experience. With your completed diagram, you can now deploy (run) the process from Bonita Studio and then follow the process by launching various tasks and changing roles.

Run There are 2 ways to deploy (run) the process from Bonita Studio:

o Click on Run in the Cool bar

Figure 1. Click on run in the cool bar

o Click on Run in the Menu bar

Figure 2. Click on run in the menu bar

When you click on Run, Bonita Open Solution executes the process and launches the first form in the web browser. The forms and Bonita User Experience will be displayed in your default web browser.




Part 3. Changing roles and user views

3.1 Follow the steps of the process

Now that the process is deployed, follow the process by changing roles, filling in the forms, and submitting them.

3.1.1 Customer places an order

Because you have executed the process from Bonita Studio, you are logged in to Bonita User Experience by default as “admin”. Bonita Open Solution takes your ID as admin and now identifies you as the process initiator. When the process is deployed, the first form, Customer Order, appears in the web browser. Even though you are logged in as admin, you see the user view. Playing the role of the customer, fill in the fields with the appropriate information: Full name, Email address and Promotional products available.

Figure 3. Customer order

Next, click Submit to send the completed form to the next task in the process.

Figure 4. First form for customer (admin)




After the completed form is submitted, a confirmation message is displayed.

Figure 5. A confirmation message is displayed

Log out.

3.1.2 Sales confirms order Log in to Bonita User Experience as the Sales employee (James) to see the next task in the process, as seen by an internal user (Sales employee). Enter the Username and Password Login: james Password: bpm Then, click on the Login button.

Figure 6. Log back in as James

You are now playing the role of James, the Sales employee. In the web browser, you will see the form below. This displays the order sent by the customer.




Figure 7. Confirm the order in the web browser

Tick the Order confirmed checkbox. Click on Submit. The order will be sent on to the next person in the process. Now log out again.

3.1.3 Customer pays for order

Change roles again to play the role of the customer, logged in as admin: Login: admin Password: bpm

Figure 8. Log back in as the customer

After logging back in, the next task displayed in the web browser is Order Confirmation. Click on Continue to payment.




Figure 9. Order confirmation in web browser

The Pay form is displayed.

Fill in the details in the credit card number and expiration date fields, then click on Submit.

Figure 10. Pay form in the web browser

A message ‘Thank you for your payment’ confirms that the process has finished.




3.1.4 Sales checks case status

Change roles again to play the part of the Sales employee James:

Figure 11. Logging out

Click on Logout to log out again as the Customer (admin), as shown above, and then log back in as the Sales employee (James). Login: james Password: bpm

Figure 12. Log in again as an employee

This will automatically open the Inbox in Bonita User Experience. Now you can view the result of the process in Bonita user Experience, as an employee.




Figure 13. Order confirmation in Bonita User Experience

In the Inbox, because the case has finished, all tasks are performed, and all forms submitted, nothing is displayed. The Inbox is empty. Log out.

3.2 The User view

In this section, you will explore Bonita User Experience as viewed by a customer. Log back in as admin to play the role of the customer.

Login: admin Password: bpm The Bonita User Experience is screen is divided into different parts: the control panel, the inbox, the logged user, and change user. When you are logged in as admin, you can see both the user view and administration. This section deals with the user view.

Figure 14. Bonita User Experience overview as a customer

3.2.1 Control panel

The Control panel contains menus showing the state of cases to be started or already started.

Starred: starred cases (the user can add or remove a star from a case)

My cases: all cases which this user has started

At risk: all cases in which there are steps at risk of being overdue

Overdue: all cases in which there are steps overdue Click on My case in the Control panel.

Control panel

Inbox

Logged user Change user




Figure 15. My cases

Here we can see there is one case of Web purchase. The case is completed. This is indicated by “No steps to perform”.

Figure 16. No steps to perform

3.2.2 The Inbox

The inbox is the place where active cases are displayed (i.e. a case with steps to perform).

Inbox: all cases in which this user has a step to perform Click on the Inbox menu in the Control panel. When selected, the menu turns to red.

Figure 17. Inbox

3.2.3 Logged user

The Logged user is the external user (customer) and has the login admin by default.




Figure 18. Default login (admin)

3.2.4 Change user

Change user is where the user can change roles by logging in and out. 3.2.5 Start a case (Customer view)

The customer has the right to start a case. This can be done from the control panel. Click on the red triangle next to the Web purchase case to start a Web purchase case 1.2. You can fill in the form in the same way as in the web browser. Click on submit to send the form to the next user in the process. Note: In the real world, an external user would not be admin but just have an external user role (customer placing the order) with no administration rights.

Figure 19. Start a case as an external user

It is possible to return to the web browser and start a new process from the form.

Click on the icon . Click on Back to inbox to view the Inbox again.




Figure 20. Return to web browser to start a new case

Figure 21. Change the login and user

Each time a new task is reached in a process, the user can either view it in the web browser and complete the task from there, or switch to Bonita User Experience and complete the task from inside the Inbox.

3.2.6 Bonita User Experience: Sales overview seen as a Sales employee

In their Inbox, John, (or James) the Sales employee, can see that a Web purchase case has been started by an external user (the customer). Click on the case Web purchase #1 in the Inbox, to start it.

Figure 22. Web purchase started

The order is displayed.




Figure 23. John confirms order

At this point, John, (or James) the Sales employee, checks the checkbox to confirm the order. Now click on the Submit button. This means John will confirm the order.

Now switch back to the web browser view by clicking on the icon again.

This displays the same order has been submitted.

Figure 24. Order confirmed and submitted




Part 4. Bonita User Experience Administration menus

The administration menus can be accessed via the admin role. This is the login used by default. Login: admin Password: bpm Important note: In a non-testing environment, the external user (customer) would have a different login to the admin. In a test environment, the admin (back-office) and admin (customer) are the same. The administration features available include:

Processes o See the list of processes o Install a process o More actions (open design, delete all cases, enable/disable, archive, remove)

Cases o Open a case o See the list of cases o Show open cases o Show archived cases o Start a case o View the documents attached to a case o Add an attachment to a case o Assign cases o Prioritize cases

Organization o See the users in the organization o View login and password o View privileges

Reporting o View the dashboard o View the configuration of the case list

View Look’n’feels

Note: Some menus are hidden behind other menus i.e. they are submenus. For example, assign cases.

4.1 Processes

4.1.1 See list of processes

Click on Processes in the Process menu to view the processes installed. Here we can see Deliver and Web purchase.




Figure 25. Process menu

Click on a process in the list e.g. Web Purchase

Figure 26. Click on a process in the list

The details of a process are displayed, including:

Label: Web_Purchase Name: Web_Purchase Description: Version1.1 State: Enabled

Figure 27. Details of a process

Form application Use the internal or an external web application to render forms




Figure 28. Form application

Description

Figure 29. Description of a process

Customize the description of the cases deployed

process.name

case.indexNumber: refers to the case number automatically assigned at instantiation

case.initiator

case.startDate

case.currentState

List of categories Lists the categories automatically assigned to all cases of this process. You can apply a color and name.

Figure 30. Process details

4.1.3 Install a process

As an administrator, it is possible to install a process directly from Bonita User Experience. Click on Install and search for the process to install.

Figure 31. Install a process

A pop-up window is displayed to search for the process to install. Click on Browse




Figure 32. Search for a process to install

4.1.4 Open the design

This function is useful for comparing the original design in Bonita Studio with the task reached in the process. For example, when a form is opened in the web browser, the step corresponding to the form can be traced back to the process design in Bonita Studio. Click on Processes, then More actions.

Next, click on Open design in the dropdown menu.

Figure 33. Open the design

The process design is displayed in a pop-up window.

Figure 34. The process design is displayed in a pop-up window

Browse




4.2 Cases

4.2.1 Start a case

Click on a case in the list.

Figure 35. Click on a case

4.2.2 Assign a case

Click on a case in the list to see the case details. Click on the Assign to me dropdown menu and choose from the options displayed.

Figure 36. Assign a case

4.2.3 More actions

At the top or bottom of the screen, click on More actions.

Figure 37. More actions




4.3 Attachments

4.3.1 View the attachments to a case

Click on a case e.g. Web purchase

Figure 38. Click on a case to view an attachment

The new page shows the attachments attached to the case.

Figure 39. View attachments

4.3.2 Add an attachment to a case

Click on a case e.g. Web purchase. Enter a name. Click on enter a value. Click on search to search for a file. Click on install. Click on save.




4.4 Organization

4.4.1 View the users in an organization

In Organization, click on Users.

Figure 40. View the users

The list of users in the organization is displayed.

Figure 41. List of the users in the organization

Click on the name of a user to see their details, such as their login and password.

Figure 42. View user's details




4.5 Reporting

4.5.1 View the Dashboard

Click on Dashboard in the Reporting menu.

Figure 43. View the dashboard

Here you can see there is a graphical representation of the data Steps open, Active items and Finished cases.

4.6 Configuration

4.6.1 Look’n’Feel

View the applied and available Look’n’Feel options by clicking on Look’n’Feels.

Figure 44. Click on Look'n'Feels

To view the applied Look’n’Feel, click on Applied (in green) in the list.




Figure 45. Click on an applied look’n’feel

This will display the details of the applied Look’n’Feel with a screen preview.

Figure 46. Look’n’feel detail




Part 5. For more tutorial examples

More information about these features can be found in the Bonita Open Solution online documentation. The development of the example used in the tutorial is shown in the previous tutorials for Process Design and Process Definition.

Part 6. 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 Functions For further explanation of the features and functions in Bonita Open Solution, see the Bonita Open Solution online documentation. http://www.bonitasoft.com/resources/documentation/index.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 sign up for 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 Feedback on this tutorial, or on documentation in general Submit an issue on documentation feedback. http://www.bonitasoft.org/bugs/bug_report_advanced_page.php More information For more information, contact us at www.bonitasoft.com http://www.bonitasoft.com/company/contact.php.

Have fun with Bonita!

BonitaSoft © 13 November 2012





http://www.bonitasoft.org/forum/index.php

http://www.bonitasoft.org/forum/

http://www.bonitasoft.org/forum/

http://www.bonitasoft.org/register.php

http://www.bonitasoft.org/register.php

http://www.bonitasoft.org/index.php

http://www.bonitasoft.org/index.php

http://www.bonitasoft.org/bugs/bug_report_advanced_page.php

http://www.bonitasoft.org/bugs/bug_report_advanced_page.php

http://www.bonitasoft.com/company/contact.php

http://www.bonitasoft.com/company/contact.php.

Bos 5.9 Introtutorial Tour Admin Userview

Documents

Transcript of Bos 5.9 Introtutorial Tour Admin Userview