Chapter 10. Building the Application

In the previous chapter, you updated the process definition for a new vacation request to add escalations. The Tahiti application definition does not yet meet all the requirements described in “Example Application: Vacation Management”, but it is complete enough that you can build and test a first version.

This chapter explains how to convert the Tahiti application page prototype into the real page that uses real data. Then you can build the Tahiti application with links from the application page to the relevant process tasks.

These are the stages in building the application:

  1. Deploy and run the related processes.
  2. Update the vacation statement page to use real business and organization data instead of the dummy variables that you defined in the prototype.
  3. Create the application definition.
  4. Test the application as a user and as a manager.

You will carry out these stages in the development environment and validate the application. 

Deploy and Run Processes

In the development environment, you deploy a process by running it from Bonita BPM Studio. You can check that the process is deployed and is operating correctly by running it from the Bonita BPM Portal. 

To deploy and check the Tahiti-NewVacationRequest process, follow these steps:

  1. Open the Tahiti-NewVacationRequest process. Select it and click Run. This deploys the process. You can ignore the form that is displayed.
  2. Open and run the Tahiti-InitiateVacationAvailable process. This initializes the data used in the application. Click the button in the form that is displayed to initialize the data. 
  3. Open the Bonita BPM Portal by clicking the Portal icon in the Studio menu bar. You will be logged in as the user defined in your Studio Preferences server settings. By default, this is Walter Bates.
  4. At the top-right of the Portal page, click the down arrow beside User and choose Administrator from the drop-down list. This sets the current profile to Administrator.
  5. Go to the BPM menu and choose Processes.  In the list of processes, you will see the Tahiti-NewVacationRequest and Tahiti-InitiateVacationAvailable processes that you have deployed.

The new vacation request process is now ready to be called from the application page.

Update the Vacation Statement

In “Create the Application Prototype” you created a prototype of the vacation statement application page. This section explains how to create the real application page. For now this will not include active buttons to modify or cancel a vacation request, because you have not yet defined the processes to handle those options.

Follow these steps:

  1. In the UI Designer, open the application page prototype, TahitiVacationManagement.
  2. Select the “Cancel selected vacation” button and set the Disabled property to yes. You have not yet created the process to handle cancellation of a vacation request.
  3. Disable the “Modify selected vacation” button in the same way.
  4. Add a new External API variable called session with the following value: ../API/system/session/1
  5. Select the username Text widget at the top-right of the page, and change the Text property to {{session.user_name}}.
  6. Add a new External API variable called processCreate with the following value:
    ../API/bpm/process?s=New Vacation Request&p=0&c=10&o=version&f=activationState=ENABLED.
  7. Add a new JavaScript expression variable called urlStartCreateProcess with the following value:

    // Return the URL to the new vacation request process
    // instantiation form
    if ($data.processCreate &&
        $data.processCreate.length > 0) {
      return "/bonita/portal/resource/process/" +
        $data.processCreate[$data.processCreate.length-1].name +
        "/"+$data.processCreate[$data.processCreate.length-1].version +
        "/content/?id=" +
        $data.processCreate[$data.processCreate.length-1].id;
    } else {
      return null;
    }
  8. Edit the definitions of the variables:
    • myVacation: change the type to External API and set the value to:
      ../API/bdm/businessData/com.company.model.VacationRequest?q=findByRequesterBonitaBPMId&p=0&c=100&f=requesterBonitaBPMId={{session.user_id}}
    • myVacationAvailable: change the type to External API, with the following value: ../API/bdm/businessData/com.company.model.VacationAvailable?q=findByBonitaBPMId&p=0&c=1&f=bonitaBPMId={{session.user_id}}
    • managerTeamInfo: change the type to External API, with the following value: ../API/extension/vacationRequest

    These variables are already used in the relevant widgets, so you do not need to change the widget Value properties.

    The selectedRow, teamSelectedRow, copySelectedRow, and hideCancel variables do not need to be changed.

    The managerTeamInfo variable contains a combination of business data and organization data, which is retrieved using the REST API extension that you have downloaded. The extension needs to be deployed, as described in the next section.

  9. Bind the Target URL property of the Create new vacation request Link widget to the variable urlStartCreateProcess: click the icon and type the variable name.

  10. In the Team vacation container, Vacation requests tab, bind the Target URL property of the Review selected vacation request Link widget to the following value: '/bonita/portal/form/taskInstance/' + teamSelectedRow.taskId

  11. Replace the placeholder Text widget that contains the text IMAGE with a real image, as follows:

    1. Go to the Assets panel below the whiteboard and click “Add a new asset.” This opens a popup.
    2. In the popup, set the Type to Image, Source to Local, and upload the file containing the image that you want to display. Then click Add.
    3. Delete the Text widget and add an Image widget in its place.
    4. Set the Width property to 2.
    5. Set the Source Type property to Asset.
    6. Set the Asset Name property to the name of the image file that you uploaded.
    7. Set the Alternate text property to the text to display if the image is not shown.
  12. Preview the TahitiVacationManagement page to check that there are no errors. You will see data in some of the widgets but not all. This is normal when the application processes are not running.

  13. Export the page using the Export button located next to the Save button. This will create a file called page-TahitiVacationManagement.zip.

Create the Application

An application consists of pages, navigation, and processes.

Before you begin, if you have not already done so, export the page from the UI Designer as you did in the previous section, and deploy the processes as you did earlier in the chapter. If you are creating an application for a deployment in a production system, you need to build the processes in Bonita BPM Studio and export them as a .bar file for deployment. In this chapter, however, you are creating a test application in development, so you can deploy the processes by running them from the Studio.

Warning

By default, when you exit from Bonita BPM Studio, the Bonita BPM database is reset and you lose any resource and application definitions. To avoid this, go to the Studio Preferences Database section and uncheck all the options. This only applies to the development environment when you start the Portal and the Bonita BPM platform from the Studio.

To create the Tahiti application, follow these steps:

  1. Log in to Bonita BPM Portal as a user with the Administrator profile.
  2. Deploy the application page:
    1. Go to the Resources screen.
    2. Click Add. This opens the Add resource popup.
    3. In the popup, specify the page-TahitiVacationManagement.zip file that you exported earlier, and then click Next.
    4. In the confirmation popup, click Confirm. The page will be imported.
    5. Check that the page is now in the Resources list. If the resource list is long, click Pages on the left to show only the page resources and hide the others.
  3. Deploy the Tahiti REST API extension that you downloaded (see “Downloads”), as follows:

    1. In the Resources screen, click Add. This opens the Add resource popup.
    2. In the popup, specify the tahiti_rest_api_extension.zip file, and then click Next.
    3. In the confirmation popup, click Confirm. The REST API extension will be imported.
  4. Go to the Applications screen.
  5. Click New to create a new application. This opens a dialog.
  6. Enter a Display name (for example, Tahiti Vacation Management). This is shown in the main menu bar of the application.
  7. Specify a URL. This will be used to access the application. All application URLs start with ../apps/, so you just need to specify the unique part, for example tahiti.
  8. Specify a Version number. This is useful when you are updating an application and need to track releases.
  9. Specify the Profile of a user who can access the application. For the Tahiti application, this is User.
  10. Optionally (but recommended), add a Description of the application.
  11. Click Create. The application is added to the Application list.
  12. Click the URL in the list to check it is created correctly. It should take you to a page with the display name in the top bar and some default content.

You have now created the Tahiti application. If you need to change any of this information, click the edit icon for the application in the application list then click More.

The next step after creating the application is to add the page. Follow these steps:

  1. In the application list, click the edit icon for the Tahiti application.
  2. In the Pages zone, click Add. The Add page popup opens.
  3. Click in the Page field to open the list of available pages. All the page names start custompage_.
  4. Choose custompage_TahitiVacationManagement.
  5. In the URL field, the start of the URL, ../apps/tahiti/, is already displayed. Enter a unique term to identify the page in the application. The Tahiti application only has this page so you can call it index.
  6. Click Add. The Tahiti page is now listed in the Pages zone.
  7. In the Tahiti index page row, point your mouse below the home page icon. A hidden control, “Set as Home page,” is displayed. Click this control to make the Tahiti page the home page for the application.
  8. Delete the default application home page by clicking the trashcan icon.
  9. There is only one page in the Tahiti application so you do not need to define any navigation.
  10. Click Back to go back to the application list. Click the URL of the Tahiti application. You will now see the Tahiti page.
  11. Bookmark the Tahiti application home page in your browser.

You have created the application and defined its content. The next section explains how to test it.

Test the Application

In the previous section, you created the Tahiti vacation management application. You have done some testing along the way to make sure that the individual components work, but now it’s time to test the whole application.  This section outlines a test scenario that will validate almost every aspect of the application and the processes it contains.

There are three users in this scenario:

  • Helen Kelly (helen.kelly), the Human Resources manager
  • April Sanchez (april.sanchez), a compensation specialist who reports to Helen
  • Walter Bates (walter.bates), an HR benefits specialist who also reports to Helen

April and Walter are not managers. All three users have the same password, bpm.

In this scenario, you need to use the Tahiti application as each user in turn, so you log in and log out several times using Bonita BPM Portal. In a production system, you would probably access the application from your corporate intranet, which would handle the login and you would not use Bonita BPM Portal.

The three users log in to the Portal with the User profile, and then access the Tahiti application using the browser bookmark that you created earlier. Each user has ten days of vacation available. To simplify checking, create all vacation requests for one day.

Follow these steps:

  1. From Bonita BPM Studio, run the Tahiti-InitiateVacationAvailable process and click the button to initialize the vacation data.
  2. Also in the Studio, open the Tahiti-NewVacationRequest process. Select it and click Run. This deploys the process. Ignore the form that is displayed.
  3. Open the Bonita BPM Portal by clicking the Portal icon in the Studio menu bar. This opens the Portal and logs you in as the default user. Click the arrow beside the user’s name and choose Logout.
  4. Log in to the Portal as April (april.sanchez/bpm) and then open the bookmarked Tahiti page in your browser.
  5. As April, create two vacation requests.
  6. Repeat the logout and login sequence to log in as Walter and then create two vacation requests.
  7. Finally, log in as Helen and then:
    1. Create a vacation request.
    2. View the list of pending requests from the team.
    3. Select one of April’s requests and refuse it, giving a reason.
    4. Select one of Walter’s requests and approve it.

At the end of these steps, Helen’s vacation statement should show that she has 9 days available with one pending request, April has 9 days available with one pending request, and Walter has 8 days available with one pending request.

Summary

You have created the Tahiti vacation management application for submitting and approving new vacation requests, and validated that it works correctly in the development environment. The next chapter explains how to create the processes for modifying and cancelling a request, and how to update the application to include these options.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
52.15.147.20