Create the Page and Add the Introduction

To create the prototype page, follow these steps:

1. In the Bonita BPM Studio Welcome page, click the UI Designer icon. This opens the UI Designer in your browser (Figure 3-1).

   

   Figure 3-1. UI Designer home page

2. In the “New page” box, enter the name of the page you want to create, TahitiVacationManagement, and press Return. This opens the Page Editor with an empty whiteboard.
3. Drag a Container widget from the Widgets panel on the left side onto the whiteboard in the center of the screen. This will contain the page introduction, which is the name of the current user, the application title and logo, and some introductory text.
4. Drag a Text widget into the container. In the properties panel on the right of the whiteboard, change value of the Width property to 2 and change the Text property to IMAGE. This is a placeholder for a logo that you will add later.
5. Drag a Title widget into the container to the right of the IMAGE placeholder. Set the Width to 7. Set the Title level to Level 1. Set the Text to Tahiti Vacation Management.
6. Drag a Text widget into the container to the right of the title. Set the Text property to username.
7. Drag a Text widget into the container, below the title. This will create a new row. Set the Text property to a welcome message, something like this: Welcome to the Tahiti Vacation Management Tool. Here you can see how many days of vacation you have available, see the status of your vacation requests, and submit a new vacation request.
8. Drag another Text widget below the one that you just added. Set the Text property to a welcome message for managers, something like this: If you are a manager, you can see the vacation status for your team and review pending requests. Managers will see both welcome messages.
9. Click Save, and then click Preview. You will see something like Figure 3-2:

Figure 3-2. Preview of the Tahiti page prototype introduction

Add My Vacation Information

To add the information about the current user’s vacation, first you will need to create variables. Variables are used to define the initial values of widgets. Variables are also used to store information such as the vacation request selected by the user, or to implement some logic in order to hide or display widgets.

We use JSON variables in the prototype to match the data format that will be used later when we will switch to API calls to set variable initial values from real data. You can learn more about JSON on json.org.

1. Create a JSON variable for the number of days of vacation available to the user. Follow these steps:

   1. In the Variables tab below the whiteboard, click “Create a new variable.”
   2. Set the Name to myVacationAvailable.
   3. Set the Type to JSON.

   4. In the Value field, remove the braces that are added by default and enter the following:

      	[{"daysAvailableCounter": 8}]

2. Create a JSON variable called myVacation with the following content:

   [{
     "requesterId": "3",
     "startDate": "2015-08-21T00:00:00.000Z",
     "numberOfDays": 2,
     "returnDate": "2015-08-22T00:00:00.000Z",
     "status": "pending"
   }, {
     "requesterId": "3",
     "startDate": "2015-09-01T00:00:00.000Z",
     "numberOfDays": 4,
     "returnDate": "2015-09-07T00:00:00.000Z",
     "status": "approved"
   }, {
     "requesterId": "3",
     "startDate": "2015-12-21T00:00:00.000Z",
     "numberOfDays": 4,
     "returnDate": "2015-12-28T00:00:00.000Z",
     "status": "pending"
   }, {
     "requesterId": "3",
     "startDate": "2016-03-01T00:00:00.000Z",
     "numberOfDays": 4,
     "returnDate": "2016-03-04T00:00:00.000Z",
     "status": "approved"
   }, {
     "requesterId": "3",
     "startDate": "2016-07-13T00:00:00.000Z",
     "numberOfDays": 1,
     "returnDate": "2016-07-22T00:00:00.000Z",
     "status": "refused"
   }]
   

   This is an array of five vacation requests that you can use an as example in previews of the application page.

3. Add a JSON variable called selectedRow with an empty value (do not enter a value; just leave the proposed Value field as it is, with empty braces, {}). This variable will be used to store information about the selected vacation request. It is also used to initialize the copySelectedRow variable, which you will create next.

4. When a user edits a vacation request we need to be sure that the original request information is left unchanged in the table. To do this, we need to have a copy of the selected row information. We create this copy by adding a JavaScript expression variable called copySelectedRow with the following value:

   	if($data.selectedRow.original !== null) {
   	    $data.selectedRow.copy = 
   	  angular.copy($data.selectedRow.original);
   	    $data.selectedRow.original = null;
   	}

Now you can use the variables you have created in some page widgets:

1. Add a Container widget below the introduction container, to hold the information about the current user’s vacation.
2. In the container, add a Title widget with Title level set to Level 2 and Text set to My vacation.
3. Below the title (but still inside the container), add an Input widget. Check the radio button to make this field read-only. Set the Label to Vacation days available. Set the Label position to left. Set the Value to point to myVacationAvailable[0].daysAvailableCounter.myVacationAvailable is an array that contains a single object; this object has one attribute named daysAvailableCounter that stores the number of vacation days available for the current user. When you start typing, the matching variable names are displayed and you can select myVacationAvailableNumber from the list. Note that completion is not available for the attributes of variables.
4. In the same row as the Input widget, add a Link widget. Set the Style property to primary, which makes the link look like a button. Set the Width property to 4. Set the Text property to Create new vacation request. You can ignore the other properties, because in this prototype the link is not clickable. In the real application, the user will click this button to go to the form to create a new vacation request. 

5. Add a Table widget with the following properties:

   Property	Setting
   Headers	Start date, Number of days, Return date, Status
   Content	Bind (click fx button) to the variable myVacation
   Column keys	startDate | date, numberOfDays, returnDate | date, status
   Selected row	Bind to the variable selectedRow.original

6. Below the table, add two Date picker widgets, labeled Start date and Return date. Set the width for each to 4 so they are in the same row. Set the Value properties to selectedRow.copy.startDate and selectedRow.copy.returnDate, respectively. These widgets should be hidden if no row is selected, so set the Hidden property for each one. To do this, go to the property, click fx, and in the field that appears, enter this expression: !selectedRow.copy. This is called binding the property to the value of the expression.
7. Beside the Return date widget add an Input widget. Set the Label to Number of days. Set the Value to selectedRow.copy.numberOfDays and the Type to number. Bind the Hidden property to !selectedRow.copy.

8. On a new row add two Button widgets, labeled Cancel selected vacation and Modify selected vacation. Set the width for each to 6 so they are in the same row. Set the alignment of the Cancel button to right. These buttons are hidden unless a relevant vacation request is selected in the table, so you need to set conditions that control when to display the buttons, as follows:

   • For the “Modify selected vacation” button, bind the Hidden property to selectedRow.copy.status!=="pending". This means that if the status of the selected request is not pending, or if no request is selected, the button is hidden.

   • For the “Cancel selected vacation” button, bind the Hidden property to:

     !(selectedRow.copy && selectedRow.copy.status=="refused")

     This means that the button is hidden if no request is selected, or if the selected request was refused.

9. If you are using Bonita BPM 7.0.* or 7.1.*, you need to add a workaround to initialize the copySelectedRow variable. Add an Input widget and set the Value to copySelectedRow. Hide the widget by setting the CSS classes property to visibility: hidden.
10. Click Save, and then click Preview. The “Cancel selected vacation” and “Modify selected vacation” buttons are only displayed when a relevant vacation request is selected in the table. For example, if you select the first pending request, you will see something like Figure 3-3.

In the Preview, if you select an approved request, the “Cancel selected vacation” button is displayed, but the “Modify selected vacation” button is not because you cannot modify an approved request. If you select a request that was refused, no buttons are displayed.

Figure 3-3. Preview of the Tahiti page prototype introduction and My vacation

Add Team Vacation Information

Before you can add the vacation information about the current user’s team members you need to create two new variables:

• Create a JSON variable called managerTeamInfo with the following content:

  {
    "isManager": true,
    "employeesVacationRequests": [{
      "firstName": "April",
      "lastName": "Sanchez",
      "startDate": "2015-12-09T00:00:00.000Z",
      "returnDate": "2015-12-11T00:00:00.000Z",
      "numberOfDays": 2,
      "status": "approved",
      "taskId": "123"
    }, {
      "firstName": "April",
      "lastName": "Sanchez",
      "startDate": "2015-09-01T00:00:00.000Z",
      "returnDate": "2015-09-07T00:00:00.000Z",
      "numberOfDays": 4,
      "status": "pending",
      "taskId": "456"
    }, {
      "firstName": "Walter",
      "lastName": "Bates",
      "startDate": "2015-11-09T00:00:00.000Z",
      "returnDate": "2015-11-12T00:00:00.000Z",
      "numberOfDays": 2,
      "status": "pending",
      "taskId": "789"
    }],
    "employeesVacationAvailable": [{
      "firstName": "Walter",
      "lastName": "Bates",
      "daysAvailableCounter": 6
    }, {
      "firstName": "April",
      "lastName": "Sanchez",
      "daysAvailableCounter": 18
    }]
  }
  

  This is a complex JSON object that stores all the information about team vacation for a manager:

  • isManager indicates whether the current user is a manager based on organization information. This variable attribute will be used in conjunction with the Hidden property to determine whether to show or hide the information that is only relevant for managers. In the real application page, the value will be set by referencing information about the current user, but in the prototype, you will set the value to true or false as a shortcut.
  • employeesVacationRequests provides the list of vacation requests for employees managed by the current user.
  • employeesVacationAvailable provides the list of vacation available for the employees managed by the current user.
• Create a JSON variable called teamSelectedRow with no content (just empty {} braces).

Now you can use these variables you have created in some page widgets.

First, use the managerTeamInfo.isManager variable to set a condition on the manager welcome message that you have already created, by configuring the Hidden property. When managerTeamInfo.isManager is false, Hidden evaluates to true and the manager welcome message is not displayed. Follow these steps:

1. Select the manager welcome message widget and go to the Properties panel on the right of the whiteboard.

2. In the Hidden property, click the bind icon at the right of the field, then enter this value:

   managerTeamInfo.isManager==false
   

3. Check that the condition on the manager welcome message is defined correctly:

   1. Edit the managerTeamInfo variable by clicking the Edit icon in the Variables tab and setting the isManager attribute value to false.
   2. Save the page and preview it. The manager welcome message (You can also see...) should not be displayed.
   3. Edit the managerTeamInfo variable again and set the isManager attribute value back to true.

Now add new widgets to display the team vacation requests information:

1. At the bottom of the page add a Container widget. In the container properties, bind the Hidden property to the same value that you used for the manager welcome message:

   managerTeamInfo.isManager==false

   This means that the container will be displayed to users who are managers, but will be hidden otherwise.

2. Add a Title widget with Title level set to Level 2 and Text set to Team vacation.
3. Add a Tabs container inside the container. By default, two tabs are created. Click each tab in turn and change the Title property, so that the tabs are labeled Vacation available and Vacation requests.

4. Configure the Vacation available tab by adding a Table widget with the following properties:

   Property	Setting
   Headers	First name, Last name, Days available
   Content	Bind to the variable managerTeamInfo.employeesVacationAvailable
   Column keys	firstName, lastName, daysAvailableCounter

   Save and preview the page. The team vacation available information will look something like Figure 3-4.

   

   Figure 3-4. Preview of the Tahiti page prototype team vacation availability

5. Configure the Vacation requests tab by adding the following:

   • A Table widget with the following properties:

     Property	Setting
     Headers	First name, Last name, Start date, Number of days, Return date, Status
     Content	Bind to the variable managerTeamInfo.employeesVacationRequests
     Column keys	firstName, lastName, startDate | date, numberOfDays, returnDate | date, status
     Selected row	Bind to the variable teamSelectedRow

   • A Link widget with the following properties:

     Property	Setting
     Hidden	Bind to teamSelectedRow.status!=="pending”
     Text	Review selected vacation request
     Alignment	center
     Style	primary

     You can ignore the other properties because in the prototype page the button is not clickable.

6. Click Save, then click Preview. In the preview, you can switch to a tab by clicking the tab title. The team vacation requests information will look something like Figure 3-5:

   

   Figure 3-5. Preview of the Tahiti page prototype team pending vacation requests

7. Go to the Variables tab and temporarily change the value of the managerTeamInfo.isManager variable to false. Preview the page again and verify that the manager welcome message and the team vacation container are hidden.

When you have configured all the information in the page, the whiteboard view of the page in the Page Editor will look something like Figure 3-6.

You have now completed the prototype page for the Tahiti application. You can validate the design with Helen, then start work on the process diagrams.

Figure 3-6. Tahiti page prototype in the Page Editor whiteboard

Run the Process

At any time while you are developing a process diagram, you can run the process by clicking the Run icon on the top bar. You can run the process now to check for errors, even though at this early stage it does not display any useful forms or produce any results. It is a good idea to run the process after each change to make sure that no errors have been introduced.