+ All Categories
Home > Documents > 2-08L-BPM855-Taking the Process Mobile using Client Side ...€¦ · This will enable the mortgage...

2-08L-BPM855-Taking the Process Mobile using Client Side ...€¦ · This will enable the mortgage...

Date post: 20-May-2018
Category:
Upload: leduong
View: 215 times
Download: 2 times
Share this document with a friend
49
IBM Software Lab 8 – Taking the Process Mobile using Client Side Human Services Page 1 Lab 8 Taking the Process Mobile using Client Side Human Services The Better Mortgage staff needs the ability to take mortgage applications at the point of sale, whether this is in a Better Mortgage office or at a potential customer’s preferred location. Therefore, in this lab we will extend the reach of the process to allow mortgage officers to capture mortgage applications from their mobile devices. To achieve this, you will be using IBM Worklight, which is a key component of IBM’s mobile offerings. Worklight provides the ability to create native applications as well as hybrid applications, which allow you to develop cross-platform applications with one common code base. The BPMWorklight sample application provided on the BPM Samples Exchange provides a sample project that exposes processes and tasks to a Worklight application and thus making them accessible from multiple devices. In this lab, you will use the new responsive Client Side Human Services (CSHS), which were introduced in BPM 8.5.5, to create a coach for the Enter Application Data that you will later run from IBM Worklight. This will enable the mortgage officer to use their iPad, iPhone, android, or desktop to complete new applications with customers and thereby the convenience of doing business with Better Mortgage. The new CSHS enables you to create mobile-optimized user interfaces that are responsive to the screen size using a new WYSIWYG web editor. The responsive settings of these CSHS can be tested manually from a browser by resizing the window manually or by using Firefox’s Responsive Web Design tool. Later in the lab, you will also run these CSHS from IBM Worklight. This lab uses a BPMWorklight sample available from the IBM BPM Community Wiki: http://wiki.bpmwiki.com/display/samples/Mobile+apps Specifically, in this lab, we will introduce you to the integration of IBM BPM and IBM Worklight, and in doing so will show you how to: Develop a Client Side Human Service Explore the web editor’s WYISWYG features Add responsive setting for large, medium and small screens Test responsive settings from a browser manually and using Firefox’s Responsive Web Design tool Add an additional Worklight environment (iPad) to an existing mobile project Deploy Worklight adapter and mobile app Test the IBM BPM responsive coaches from IBM Worklight
Transcript

IBM Software

Lab 8 – Taking the Process Mobile using Client Side Human Services Page 1

Lab 8 Taking the Process Mobile using Client Side Human Services

The Better Mortgage staff needs the ability to take mortgage applications at the point of sale, whether this is in a Better Mortgage office or at a potential customer’s preferred location. Therefore, in this lab we will extend the reach of the process to allow mortgage officers to capture mortgage applications from their mobile devices.

To achieve this, you will be using IBM Worklight, which is a key component of IBM’s mobile offerings. Worklight provides the ability to create native applications as well as hybrid applications, which allow you to develop cross-platform applications with one common code base. The BPMWorklight sample application provided on the BPM Samples Exchange provides a sample project that exposes processes and tasks to a Worklight application and thus making them accessible from multiple devices.

In this lab, you will use the new responsive Client Side Human Services (CSHS), which were introduced in BPM 8.5.5, to create a coach for the Enter Application Data that you will later run from IBM Worklight. This will enable the mortgage officer to use their iPad, iPhone, android, or desktop to complete new applications with customers and thereby the convenience of doing business with Better Mortgage.

The new CSHS enables you to create mobile-optimized user interfaces that are responsive to the screen size using a new WYSIWYG web editor. The responsive settings of these CSHS can be tested manually from a browser by resizing the window manually or by using Firefox’s Responsive Web Design tool. Later in the lab, you will also run these CSHS from IBM Worklight.

This lab uses a BPMWorklight sample available from the IBM BPM Community Wiki:

http://wiki.bpmwiki.com/display/samples/Mobile+apps

Specifically, in this lab, we will introduce you to the integration of IBM BPM and IBM Worklight, and in doing so will show you how to:

§ Develop a Client Side Human Service § Explore the web editor’s WYISWYG features § Add responsive setting for large, medium and small screens § Test responsive settings from a browser manually and using Firefox’s Responsive

Web Design tool § Add an additional Worklight environment (iPad) to an existing mobile project § Deploy Worklight adapter and mobile app § Test the IBM BPM responsive coaches from IBM Worklight

IBM Software

Lab 8 – Taking the Process Mobile using Client Side Human Services Page 2

8.1 Start Process Center and Process Designer

__1. Start Process Center

__2. Start Process Designer and login as admin/admin.

__3. In Process Designer, click on the Process Center icon at upper right

__4. Click on Import Process App at right. Then, Browse… and select C:\BPM-V8.5.5-PoT\Lab\Workbook\MOBILE\Mortgage_Application_Process_Mobile - V1_-_Initial.twx

__5. Click OK and then click Import to import the process app.

__6. Click Open in Designer next to Mortgage Application Process Mobile.

8.2 Developing Client Side Human Services

In this section, we will use the new responsive Client Side Human Services (CSHS) to create a coach for the Enter Application Data that will later run from IBM Worklight. This will enable the mortgage officer to use their iPad, iPhone, android, or desktop to complete new applications with customers. Let’s get started.

The new CSHS enables you to create mobile-optimized user interfaces that are responsive to different screen sizes. The CSHS are created using a new WYSIWYG web editor.

IBM Software

Lab 8 – Taking the Process Mobile using Client Side Human Services Page 3

8.2.1 Create a Client Side Human Service using web editor

__7. In Process Designer, on the navigator view to the left, click Processes, and then double-click to open Mortgage Approval Process.

__8. Right-click on Enter Application Data, to open the Activity Wizard

Ignore the errors (Name has to be unique – we will fix these in a minute). Note that you now have two options to select from when you want to develop human services:

1) Heritage human service – pre IBM BPM 8.5.5 coaches based on coach views

2) Client-side human service – introduced in IBM BPM 8.5.5 that allow you to use responsive coach views to allow your coach to conform to different form-factors / device sizes (small, medium, and large) and are executed client side; hence better performing.

IBM Software

Lab 8 – Taking the Process Mobile using Client Side Human Services Page 4

__9. Create a new CSHS with the following options:

__a. Activity Name: Enter Application Data CSHS

__b. For Activity Type Selection, keep the default

__c. Under Library Element Selection, select Create a client-side human service and name it Enter Application Data CSHS

__d. Click Next >

__10. At the Activity Wizard – Parameters, click Finish

__11. Save your changes (Ctrl+S). If you will note, your process diagram will now have the first activity named Enter Application Data CSHS.

IBM Software

Lab 8 – Taking the Process Mobile using Client Side Human Services Page 5

__12. Double-click Enter Application Data CSHS. This will launch the new web editor.

From this web editor, you will be able to build, debug and run your CSHS. Note that this web editor has a Designer view (modeling) view and an Inspector view that allows you to debug your CSHS:

IBM Software

Lab 8 – Taking the Process Mobile using Client Side Human Services Page 6

__13. Double-click Coach to start editing the coach

__a. At Select a Template, click OK leave the default selection (Start with a default coach)

By default, you are presented with a blank canvas and a button.

In the following sections, you will build this coach similarly as you did in the design the process lab.

__14. Right-click on OK and select Add Item Before…

__15. At the filter appearing on the right side of the canvas, start typing tabs or use the scroll-bar to scroll down until you see Tabs.

IBM Software

Lab 8 – Taking the Process Mobile using Client Side Human Services Page 7

__16. Click on Tabs. A tab control will now get inserted above OK.

Alternatively, from the right-side palette, you could have inserted the tabs by filtering the controls (type tabs) and then selecting Tabs and drag it onto the canvas as you did in the desktop process designer.

To remove a filter, click the eraser or delete the filtering text.

__17. Add the first tab to collect customer information:

__a. Within the canvas, click on to select the tab control

IBM Software

Lab 8 – Taking the Process Mobile using Client Side Human Services Page 8

__b. From the right-side palette, in filter start typing customer until you see the Customer View, then drag Customer View onto the blue section of the tab saying Drop additional content here. You will see a plus sign appear if you are dragging it into the right place.

__c. Verify that the new customer view was added to the tab:

IBM Software

Lab 8 – Taking the Process Mobile using Client Side Human Services Page 9

__d. Bind the view to the variable by clicking on Customer View on the canvas, then go to Properties à General and under Behavior à Binding, click Select… At the variable selection, expand Input à application then select customer

__e. Verify your binding of the customer view:

IBM Software

Lab 8 – Taking the Process Mobile using Client Side Human Services Page 10

__18. Repeat steps above to add tabs for Qualifying and Mortgage Information.

__a. To add a new tab, first click

__b. Use filtering from right-hand palette to add the Qualifying View as the second tab

__c. Bind the Qualifying view to the customer variable:

__d. Add the third tab for the Mortgage View and bind to mortgage variable:

IBM Software

Lab 8 – Taking the Process Mobile using Client Side Human Services Page 11

__19. Your tabs should look as follows:

__20. Save your work.

Now that you have created the Enter Application Data CSHS you can playback the coach from the same browser editor. These new CSHS use the web browser’s JavaScript engine to run these new coaches and only execute server-side calls, when needed. The advantage of this is that it reduces network traffic and is thus, typically, higher performing.

__21. From top right, click run

IBM Software

Lab 8 – Taking the Process Mobile using Client Side Human Services Page 12

__22. This will launch the coach and you can enter data as usual. When you are done, click OK and go ahead and close the browser after you see Service completed.

This section should have given you a quick preview of how to develop new CSHS levering some of the same skills you used as you completed the earlier lab Design the process.

8.2.2 Explore the web editor’s WYSIWYG features

The new CSHS enables you to create mobile-optimized user interfaces that are responsive to the screen size using a new WYSIWYG web editor that you used previously. This section will focus on adding responsive settings to a coach and using some of its WYISWYG features.

IBM Software

Lab 8 – Taking the Process Mobile using Client Side Human Services Page 13

The CSHS allows you to build coaches that support three screen sizes: small, medium, and large. The following table shows how each screen size width is defined.

Screen size setting Icon Width

Small 640 pixels or less

Medium 641 - 1024 pixels

Large (default) More than 1024 pixels

Preview the coach in large, medium and small screens.

__23. From the web editor, you can preview what the coach looks like in a large screen. Note the large

screen is the default screen. And to the left of large screen, you have the medium and small screen settings.

Any setting you set for a larger screen will become the default for the smaller sized screens. Therefore, if you override large screen settings, these will also apply to medium and small. If you then go ahead and override medium screen settings, these will be the default for small. Hence, you should start by configuring the settings for larger screens and then working your way down to small screens.

__24. Click on the medium sized screen to preview the coach in a medium screen – you probably didn’t see many changes. The reason for this is that these coaches are not very wide or tall. When the coach is showing you a preview without having to run it, this is illustrating WYISWYG features of the new web editor.

IBM Software

Lab 8 – Taking the Process Mobile using Client Side Human Services Page 14

__25. Similarly, click on small screen . You may see that a scroll-bar appears, so it might be better that when a small screen is used, the information in the right vertical section of customer would automatically wrap below the left vertical section. The new responsive settings allow you to do this.

Because these coaches are not very wide or long, we will use a more different coach as we add the responsive settings.

__26. Show the library by clicking Library

Notice that only a subset of elements is shown under the process library. The reason for this is because the web editor can only edit a subset of the process elements compared to the desktop editor.

__27. Open the CSHS coach Responsive Coach - Enter Application Data - START by clicking User Interface and then double-clicking Responsive Coach - Enter Application Data - START.

IBM Software

Lab 8 – Taking the Process Mobile using Client Side Human Services Page 15

__28. Hide the library, by clicking Library , so that you will have more real estate to work with.

__29. Double-click Coach to open the coach. As you can tell, even in large screen you at a minimum will need to scroll down to see all the information and as you go to smaller sizes, maybe need to collapse some sections for better layout of the coach.

__30. Click on medium screen – now both scroll bars appear.

IBM Software

Lab 8 – Taking the Process Mobile using Client Side Human Services Page 16

__31. Click on small screen and scroll down-to Loan Details and notice that Mortgage Request Details wraps under Qualifying information and at right you can see the screen size you are configuring.

Wouldn’t it be nice to have some sections automatically collapsed, automatically wrap, etc. for the different screen sizes? In the next section, we will improve the responsive settings of this coach.

IBM Software

Lab 8 – Taking the Process Mobile using Client Side Human Services Page 17

8.2.3 Add responsive settings for large, medium, small screens

In this section of the lab, you will add positioning (width, height, overflow, etc.) and configuration (collapsible, initially closed, automatically wrap, etc) to the coach.

__32. Click on large screen

__33. Make the Loan Application collapsible:

__a. Click Loan Application

__b. At the bottom properties, click Configuration

__c. Check Collapsible

__d. Click Loan Application – you should have seen it collapsed. Click Loan Application again; it should expand. This is what we mean by WYISWYG.

__e. Make the other sections (Customer Information, Loan Details, Customer Signature, Office Use Only) all collapsible.

__f. For medium and small screens, you will need to make each of these sections also collapsible.

__g. Save your changes

IBM Software

Lab 8 – Taking the Process Mobile using Client Side Human Services Page 18

__34. Make Office Use Only initially closed when the coach runs:

__a. Click Office Use Only

__b. At the bottom properties, click Configuration

__c. Check Initially Closed

__1. Save your work

Extra Credit

If this coach were also executed for customers, perhaps you would want to make this hidden. You could do this by using the Visibility setting tabs.

Extra credit steps are to configure Visibility setting for:

1) Have Office Use Only show up Hidden regardless of who runs it, and

2) Have Office Use Only visible only to Mortgage Officers.

IBM Software

Lab 8 – Taking the Process Mobile using Client Side Human Services Page 19

__2. Finish configuring the Loan Application by making Application ID and Applicant ID take up 50% of width each.

__a. Click large screen

__b. Click Application ID

__c. Click Positioning

__d. For Width, enter 50%

Note that you have other positioning elements you can also configure here: height, margin, padding, etc.

__e. Click anywhere other than Width for the changes to register. Application ID should have automatically resized, again WYSIWYG.

IBM Software

Lab 8 – Taking the Process Mobile using Client Side Human Services Page 20

__3. Repeat above steps to make Applicant ID’s width 50%

__4. Verify that the width settings for Application ID and Applicant ID carried over to medium and small screens.

__5. Save your work

Configure Customer Information

Customer Information contains a horizontal section and within the horizontal, two vertical sections: vertical section #1 has first name, last name and date of birth and vertical section #2 has address information. You will first configure the large screen, then medium, and last the small screen.

IBM Software

Lab 8 – Taking the Process Mobile using Client Side Human Services Page 21

__6. Configure left vertical section

__a. Click large screen

__b. Click on left vertical section so that you see blue container around last name, first name and date of birth:

__c. Set it’s width to 40% using previous steps

__d. Set Last Name to 50% width

__e. Set First Name to 50% width

__f. Click on Date of Birth, then click Configuration

Note that you have many configuration options to select from, such as, how the calendar is displayed, the calendar type, include time picker, etc.

IBM Software

Lab 8 – Taking the Process Mobile using Client Side Human Services Page 22

__g. Look at the options available to Show Calendar using the drop-down: On Click, Inline and Never. For the small screen, you may want the calendar to only show up as Inline.

For Calendar type you have three options: Gregorian (default), Hebrew and Islamic.

__h. For Calendar type, select Hebrew. Note the change in the calendar.

__i. For Calendar type, select Islamic. Note the change in the calendar.

__j. Change the calendar type back to Gregorian.

IBM Software

Lab 8 – Taking the Process Mobile using Client Side Human Services Page 23

__7. Configure address

__a. Click on Address so that you see blue container around it:

__b. Set address width to 60%

__c. Configure the following address details as follows:

Field Positioning Value

Street Address Width 100%

City Width 33%

State or Province Width 33%

Postal Code Width 33%

Email Width 100%

__d. Save your changes

IBM Software

Lab 8 – Taking the Process Mobile using Client Side Human Services Page 24

__e. Click on the medium sized screen . Note that scroll bars appear for all elements. Therefore, you probably want Address to automatically wrap below date of birth so that the other two scroll bars would go away and you could see last name and first name.

IBM Software

Lab 8 – Taking the Process Mobile using Client Side Human Services Page 25

__f. In order to make Address automatically wrap under the other customer information in the left vertical section, you need to click the horizontal container and under Configuration check Automatically Wrap

__g. Click Address and change the width to 100%. Notice that Address automatically wraps under the left vertical section.

IBM Software

Lab 8 – Taking the Process Mobile using Client Side Human Services Page 26

__h. Click on the left vertical section (above address with last name, first name and date of birth) and make it’s width 100%

__i. The medium screen preview of Customer Information should look as follows:

IBM Software

Lab 8 – Taking the Process Mobile using Client Side Human Services Page 27

__j. Similarly, click on small screen . Notice that Address is initially closed. If it is not, click on Address and under Configuration, check both Collapsible and Initially Closed.

__k. Also note above that Date of Birth is not expanded (doesn’t show a calendar). The reason is that you also have a configuration for calendar control to show it On Click instead of Inline. Verify these settings:

__8. Save your changes.

IBM Software

Lab 8 – Taking the Process Mobile using Client Side Human Services Page 28

In a similar fashion, you could configure Loan Details and Office Use Only to be collapsible and initially closed.

Configure buttons

To configure button sizes, in addition to widths you can set minimum width and minimum height for these for the various screen sizes.

__9. Click large screen

__10. Click on Request More Information. Note that in addition to width set to 30%, the minimum width was also set to 225px. You can use all these settings in additions to others not set here to achieve the look and feel you require.

__11. Click on the medium sized screen .It has the same settings as large screen.

__12. The small screen also has the same settings for Request More Information. If you were to set minimum width to 150px, the button would be cut off.

You can figure out the minimum width by setting these width and minimum width and if the button get’s cut off you can readjust.

__13. Repeat steps above to see the settings for the Approve Loan button.

__14. Save your settings

IBM Software

Lab 8 – Taking the Process Mobile using Client Side Human Services Page 29

8.2.4 Add mobile signature to coach

In this section, you will add a mobile toolkit to capture a customer’s signature along with their loan application. To add signature capabilities, this process application uses a Mobile Signature toolkit available from the BPM Community Wiki.

http://wiki.bpmwiki.com/display/samples/Mobile+apps

__15. Open Process Designer

__16. Click Process Center

__17. Click Toolkits

__18. On the far right, click Import Toolkit and then click Browse… to select the file C:\BPM-V8.5.5-PoT\LabWorkbook\MOBILEMobile_Signature - 3.0_(8.5)_-_upgraded_to_8.5.5.twx and then click OK

At the Import Toolkit, click Import.

__19. Switch back to the web editor

__20. Show the library by clicking Library

__21. Add the toolkit to the process app by clicking next to Toolkits and selecting the latest version of the Mobile Signature toolkit.

IBM Software

Lab 8 – Taking the Process Mobile using Client Side Human Services Page 30

__22. Confirm that the toolkit was added to the process application:

__23. Click large screen

__24. Collapse all sections

__25. Right-click on Office Use Only and select Add Item Before…, start typing vertical and select Vertical Selection. A new vertical section should appear above Office Use Only.

IBM Software

Lab 8 – Taking the Process Mobile using Client Side Human Services Page 31

__26. Rename the vertical section Customer Signature

__a. Click Vertical Section

__b. Click General, then for Label enter Customer Signature

__c. Make Customer Signature collapsible

__27. Add a mobile signature control to Customer Signature

__a. Enter mobile for filter

__b. Drag Mobile Signature into Customer Signature

__28. The Customer Signature should look as follows:

IBM Software

Lab 8 – Taking the Process Mobile using Client Side Human Services Page 32

__29. Click on the medium sized screen .The mobile signature should look similar.

__30. Similarly, click on small screen . Notice that a scroll bar appears and the full signature is not displayed full-screen.

__31. Click on mobile signature, then under Positioning use the Overflow Content drop-down and select Hide overflow content (hidden):

__32. The signature should now show up full-screen:

__33. Save your changes.

IBM Software

Lab 8 – Taking the Process Mobile using Client Side Human Services Page 33

8.3 Test responsive settings using a browser

In this section, you will test the responsive settings using a browser just by changing the browser size yourself and then you will use the Firefox Responsive Web Design tool to also test these settings.

__34. From top right, click run

__35. Maximize your browser screen size and see if there any additional changes that could be made for the entire coach to be displayed without scroll bars when using large screen.

__36. Test out the collapsible sections you configured by clicking on each section and see if they collapse. Un-collapse each.

__37. Reduce the browser size to about the size of an iPad (2/3 screen size) to see if Address wrapped below other Customer information. If it doesn’t wrap, keep reducing the screen size until it wraps below.

IBM Software

Lab 8 – Taking the Process Mobile using Client Side Human Services Page 34

__38. Reduce the browser size to about the width of a phone to see the Address collapse.

__39. Click on Date of Birth to verify that the calendar appears on click as was configured.

__40. Scroll down to the bottom (or, collapse sections) until you can see the customer signature. Sign your name.

__41. Maximize your browser

IBM Software

Lab 8 – Taking the Process Mobile using Client Side Human Services Page 35

Firefox has developer’s tools that can help you test for different screen sizes.

__42. Open Firefox’s Responsive Design View by selecting Tools à Web Developer à Responsive Design View or by using Ctrl+Shift+M

__43. Use the drop-down to select between different screen sizes.

__44. Close the browser.

Extra Credit

Continue tweaking the responsive settings until the coach fits well for large, medium and small screens.

IBM Software

Lab 8 – Taking the Process Mobile using Client Side Human Services Page 36

8.4 Configure and deploy IBM Worklight mobile application

In this section, you will start the Worklight server and Worklight Studio, add a new environment (iPad) to a hybrid application and then deploy the Worklight adapter and mobile app.

8.4.1 Start the Worklight Server

We will begin by bringing up the Worklight development server from within Worklight Studio.

__45. From the desktop, locate and open the Tools folder.

__46. Double-click Worklight Studio 6.2 to launch Worklight Studio. The tool has been configured to open up on the correct workspace.

__47. Select the workspace C:\workspaces\workspace-BPMWorklightV62-WL, then click OK.

Once the workspace finishes building (no progress bar on bottom right), start the Worklight server.

__48. From Servers, click on Worklight Development Server then click start

Once start completes, the Worklight Development Server should show up Started and Synchronized in the Servers view. You may also see it switch to the Console and you should see a message: The server worklight is ready to run a smarter planet.

IBM Software

Lab 8 – Taking the Process Mobile using Client Side Human Services Page 37

8.4.2 Add a new environment (iPad) to hybrid app

In this section, you are going to add an additional environment (iPad) to this hybrid application

__49. From Project Explorer, expand BPMWorklightV62 à apps à BPMWorklight

Note that this hybrid application currently supports (android, iphone and mobile web app). The common folder is where the common code for all platforms are stored, while the environment specific code is stored in an appropriately named folder such as: android, iphone, etc.

IBM Software

Lab 8 – Taking the Process Mobile using Client Side Human Services Page 38

__50. Click the drop-down next to Worklight Artifact , then select Worklight Environment

__51. At the New Worklight Environment, select the following to add iPad support:

__a. For Project name, select BPMWorklight62, if not already selected

__b. For Application/Component, select BPMWorklight to show the existing environments already selected. You should see iPhone, Android phones and tablets and mobile web app already selected.

__c. Check iPad, then click Finish

IBM Software

Lab 8 – Taking the Process Mobile using Client Side Human Services Page 39

From the Console, you can verify that the environment build finished:

8.4.3 Deploy the Worklight adapter and mobile app

In this section, you will deploy the Worklight adapter (BPMAdapter) and the mobile app (BPMWorklight). The Worklight adapter is designed to expose the REST API’s of IBM BPM to Worklight applications so that processes and tasks can be made accessible to the Worklight application.

__52. From Project Explorer, expand BPMWorklightV62 à adapters

__53. Right-click on BPMAdapter, then select Run As à 1 Deploy Worklight Adapter

IBM Software

Lab 8 – Taking the Process Mobile using Client Side Human Services Page 40

__54. You should see a line in the Console view at the bottom that says Adapter build and deploy finished.:

__55. Next, expand the apps folder and right-click BPMWorklight and select Run As à 1 Run on Worklight Development Server as shown:

Deployment should take approximately one minute or less.

IBM Software

Lab 8 – Taking the Process Mobile using Client Side Human Services Page 41

You should see a line in the Console view at the bottom that says Application 'BPMWorklight' deployed successfully with all environments:

You now have the sample Worklight application up and running in the Worklight server. Note if you don’t see this message, the console may have switched to a different console. Use the

console drop-down to the right of Console to select Worklight Console.

__56. Minimize Worklight Studio as we will not need to do any further tasks in this tool.

__57. Open Google Chrome by clicking the Windows Start button, and navigate to Google Chrome to launch the Chrome browser).

IBM Software

Lab 8 – Taking the Process Mobile using Client Side Human Services Page 42

__58. When it is open, enter the following URL. If you are prompted to login, enter admin/admin:

http://ibmbpm:10080/worklightconsole/index.html#BPMWorklightV62,catalog

You should see the BPWorklight application and the BPMAdapter in the Worklight Console. This is the Worklight application we deployed in earlier steps that will expose our process to mobile devices, including iPhone, iPad, and Android.

8.5 Test the IBM BPM responsive coaches from IBM Worklight

Now that you have created a new coach with responsive settings for different screen sizes, you can test it with our process. To do this, we will be using the BPM Sample Worklight application we deployed earlier. This Worklight application connects to IBM BPM via the BPMAdapter adapter, and implements a jQuery-based container for rendering the mobile coaches built in Process Designer, allowing tasks to be

IBM Software

Lab 8 – Taking the Process Mobile using Client Side Human Services Page 43

performed from multiple mobile devices. We will test with a simulated iPad since Better Mortgage has supplied their mortgage officers with iPads to take applications from customers in the Better Mortgage office or at customer’s own locations.

__59. To allow the person that starts a new Mortgage Approval Process to immediately get assigned the first task instead of having to go claim it, we are going to modify the user assignment of the first task. We will also switch the coach the process is pointing to from the tab implementation to new more complex coach we later started to use: Responsive Coach - Enter Application Data - START.

__60. Open Process Designer,

__61. Open Mortgage Approval Process

__62. Click on Enter Application Data CSHS, then go to Properties and under Assignments, set User Distribution to Last User.

This will allow the person to launch (start) a process to get this task since this is the first task of the process. Recall the process diagram has a Start activity followed by this activity. We want the same person to do both of these tasks.

__63. Still clicking on Enter Application Data CSHS, under Properties click Implementation, then click Select… to select Responsive Coach - Enter Application Data - START.

__64. Save your changes.

__65. Click on the orange Play button at upper right to start an instance of the process.

IBM Software

Lab 8 – Taking the Process Mobile using Client Side Human Services Page 44

__66. Switch to the Chrome browser opened previously, which should still show the BPM Mobile Portal application. Click on the eye icon next to the iPad, which will launch the application in the Mobile Browser Simulator.

IBM Software

Lab 8 – Taking the Process Mobile using Client Side Human Services Page 45

__67. You will see a simulated iPad screen appear in the Worklight Mobile Browser Simulator.

__a. If you see a yellow warning bar at the top of the browser about Java being out of date, you can click Run this time.

__b. We will be logging in as the mortgage officer role, but since all roles are accessible from the admin user we log in as admin/admin. Click Login to log in to the mobile app.

At the Security Information, uncheck Always trust content from this publisher then click Run.

IBM Software

Lab 8 – Taking the Process Mobile using Client Side Human Services Page 46

__68. You will see the iPad screen with active tasks listed, one of which is Enter Application Data CSHS similar to this screenshot (you may see additional tasks too – depending on other labs you may have done in the past – in that case, you should see the Enter Application Data CSHS task under Due Today).

__a. Click above middle of iPad to put the screen into landscape mode

__b. Click Enter Application Data CSHS to work on the task

__69. You may see a pop-up message appear on the right hand of the browser:

IBM Software

Lab 8 – Taking the Process Mobile using Client Side Human Services Page 47

__70. The yellow message may disappear from the browser’s address bar, but the pop-up icon will

remain . To allow the pop-up so that the coach can get displayed do the following:

__a. Click pop-up blocking

__b. Select Allways allow pop-ups from ibmbpm

__c. Click Done

You may need to click Enter Application Data CSHS again and enter your login information.

IBM Software

Lab 8 – Taking the Process Mobile using Client Side Human Services Page 48

__71. You will see the responsive coach with sections for Loan Application, Customer Information, Loan Details, Customer Signature Office and Use Only are now available for testing.

__a. Enter in the information for a new mortgage application

__b. Use the mouse to create a signature in the Signature section

__c. Test the responsive settings you set earlier including resizing the window.

__d. Click Request More Information when you are done.

NOTES: If you inadvertently clicked Approved Loan the task will not complete because it was not wired in the diagram. Extra credit: add a link from Approved Loan to another End event.

If you get prompted again for a password, it may be an issue with the Single-Sign on configuration between IBM BPM and IBM Worklight. Try re-signing in, if that doesn’t work, exit the application by clicking Menu in the top-right (see below), then select Log out and start again from the Google chrome console step.

IBM Software

Lab 8 – Taking the Process Mobile using Client Side Human Services Page 49

We have now submitted a new mortgage application as a Mortgage Officer from a mobile device, thus meeting Better Mortgage’s business goals to extend this process out to mobile devices and reach more potential customers.

Now let us continue the process as the Underwriter to complete the Assess Risk task. The process exposes this task to the underwriter via the Process Portal as before, and shows that BPM can expose tasks to both web-based and mobile users from the same process.

__72. Open a Firefox browser and click the Process Portal link. Log in as admin/admin.

__73. Under Due Today, you should see an Assess Risk task for the Underwriter role to complete.

__74. Feel free to complete this task and the remaining tasks to complete the process end-to-end.

Extra credit

__75. Run through the process end-to-end from Mobile Browser Simulator. Recall that next two screens for Assess Risk and Review for Approval are the Heritage Human Services – thus showing the adapter will work with new and old coaches.

__76. Try a different iPad flavor using Add Device menu in the Mobile Browser Simulator.

__77. Try to run it as an iPhone 5S. Remember to start from Worklight Console step in Chrome.

8.6 Summary

This lab has shown how processes and tasks can be extended and exposed to mobile devices. This was accomplished by using the new mobile controls available in the BPM Mobile Toolkit, and how mobile coach views can be rendered to mobile devices via the BPM Mobile Worklight Sample application. This approach makes it possible for users on multiple device types, including iOS, Android and others to be process participants on their device of choice. This approach effectively extends the reach and mobility of the processes you build with IBM Business Process Manager to more participants both inside and outside your organization.

Congratulations! This completes the BPM Mobile Lab!


Recommended