Bonita Open Solution. Introduction Tutorial. Version 5.9. Bonita User Experience. Process Administrator view End User view

Transcription

1 Bonita Open Solution Version 5.9 Introduction Tutorial Bonita User Experience Process Administrator view End User view

2 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 Follow the steps of the process Customer places an order Sales confirms order Customer pays for order Sales checks case status The User view Control panel The Inbox Logged user Change user Start a case (Customer view) Bonita User Experience: Sales overview seen as a Sales employee...17 Part 4. Bonita User Experience Administration menus Processes See list of processes Install a process Open the design Cases Start a case Assign a case More actions Attachments View the attachments to a case Add an attachment to a case Organization View the users in an organization Reporting View the Dashboard Configuration Look n Feel...26 Part 5. For more tutorial examples Part 6. Feedback, Questions, and More Information page 2 BonitaSoft S.A. Bonita User Experience Bonita Open Solution 5.9 Introduction Tutorial

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

4 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. page 4 BonitaSoft S.A. Bonita User Experience Bonita Open Solution 5.9 Introduction Tutorial

5 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 Bonita Open Solution 5.9 Introduction Tutorial Bonita User Experience BonitaSoft S.A page 5

6 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. page 6 BonitaSoft S.A. Bonita User Experience Bonita Open Solution 5.9 Introduction Tutorial

7 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). Bonita Open Solution 5.9 Introduction Tutorial Bonita User Experience BonitaSoft S.A page 7

8 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. page 8 BonitaSoft S.A. Bonita User Experience Bonita Open Solution 5.9 Introduction Tutorial

9 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 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, 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) Bonita Open Solution 5.9 Introduction Tutorial Bonita User Experience BonitaSoft S.A page 9

10 After the completed form is submitted, a confirmation message is displayed. Log out. Figure 5. A confirmation message is displayed 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. page 10 BonitaSoft S.A. Bonita User Experience Bonita Open Solution 5.9 Introduction Tutorial

11 Tick the Order confirmed checkbox. Click on Submit. Figure 7. Confirm the order in the web browser The order will be sent on to the next person in the process. Now log out again 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. Bonita Open Solution 5.9 Introduction Tutorial Bonita User Experience BonitaSoft S.A page 11

12 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. page 12 BonitaSoft S.A. Bonita User Experience Bonita Open Solution 5.9 Introduction Tutorial

13 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. Bonita Open Solution 5.9 Introduction Tutorial Bonita User Experience BonitaSoft S.A page 13

14 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. Logged user Change user Inbox Control panel Figure 14. Bonita User Experience overview as a customer 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. page 14 BonitaSoft S.A. Bonita User Experience Bonita Open Solution 5.9 Introduction Tutorial

15 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 The Inbox Figure 16. No steps to perform 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 Logged user Figure 17. Inbox The Logged user is the external user (customer) and has the login admin by default. Bonita Open Solution 5.9 Introduction Tutorial Bonita User Experience BonitaSoft S.A page 15

16 Figure 18. Default login (admin) Change user Change user is where the user can change roles by logging in and out 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. page 16 BonitaSoft S.A. Bonita User Experience Bonita Open Solution 5.9 Introduction Tutorial

17 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 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. The order is displayed. Figure 22. Web purchase started Bonita Open Solution 5.9 Introduction Tutorial Bonita User Experience BonitaSoft S.A page 17

18 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 page 18 BonitaSoft S.A. Bonita User Experience Bonita Open Solution 5.9 Introduction Tutorial

19 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 o o o o o o o o Open a case See the list of cases Show open cases Show archived cases Start a case View the documents attached to a case Add an attachment to a case Assign cases 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 See list of processes Click on Processes in the Process menu to view the processes installed. Here we can see Deliver and Web purchase. Bonita Open Solution 5.9 Introduction Tutorial Bonita User Experience BonitaSoft S.A page 19

20 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: Name: Description: State: Web_Purchase Web_Purchase Version1.1 Enabled Figure 27. Details of a process Form application Use the internal or an external web application to render forms page 20 BonitaSoft S.A. Bonita User Experience Bonita Open Solution 5.9 Introduction Tutorial

21 Description Figure 28. Form application 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 Install a process Figure 30. Process details 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 Bonita Open Solution 5.9 Introduction Tutorial Bonita User Experience BonitaSoft S.A page 21

22 Browse Open the design Figure 32. Search for a process to install 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 page 22 BonitaSoft S.A. Bonita User Experience Bonita Open Solution 5.9 Introduction Tutorial

23 4.2 Cases Start a case Click on a case in the list. Figure 35. Click on a case 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 More actions Figure 36. Assign a case At the top or bottom of the screen, click on More actions. Figure 37. More actions Bonita Open Solution 5.9 Introduction Tutorial Bonita User Experience BonitaSoft S.A page 23

24 4.3 Attachments 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 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. Figure 39. View attachments page 24 BonitaSoft S.A. Bonita User Experience Bonita Open Solution 5.9 Introduction Tutorial

25 4.4 Organization 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 Bonita Open Solution 5.9 Introduction Tutorial Bonita User Experience BonitaSoft S.A page 25

26 4.5 Reporting 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 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. page 26 BonitaSoft S.A. Bonita User Experience Bonita Open Solution 5.9 Introduction Tutorial

27 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 Bonita Open Solution 5.9 Introduction Tutorial Bonita User Experience BonitaSoft S.A page 27

28 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. BonitaSoft Forum We welcome your feedback on the BonitaSoft Forum. Ask your questions too. Use the BonitaSoft Forum to let us have it! BonitaSoft Community Join the BonitaSoft Community and sign up for our Newsletter, access detailed information, and more. Bug Tracker, Source Code Check out our Bug Tracker, Source Code. Feedback on this tutorial, or on documentation in general Submit an issue on documentation feedback. More information For more information, contact us at Have fun with Bonita! BonitaSoft 13 November 2012 page 28 BonitaSoft S.A. Bonita User Experience Bonita Open Solution 5.9 Introduction Tutorial