2-08l-bpm855-taking the process mobile using client side ...€¦ · this will enable the mortgage...
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!