Modeling your business processes with IBM WebSphere Lombardi Edition, Part 5: Customize the user experience with Coaches

In Part 5 of this series, you'll learn how to use the advanced Coach features of WebSphere® Lombardi Edition V7.1, you'll learn about some Coach customization features, including dynamic data binding, customizing the display of Coach pages, and creating custom HTML controls. You'll also learn about the runtime rendering of Coaches.

Share:

Xiao Xing Liang, Software Engineer, IBM

Xiao Xing Liang photoXiaoxing Liang is a staff software engineer on the Business Performance and Service Optimization team within IBM Software Group. He is experienced in developing SOA, BPM and Web2.0 technology and solutions.



Chang Hua Sun, Staff Software Engineer, IBM

Chang Hua Sun photoChang Hua Sun is a staff software engineer on the Business Performance and Service Optimization team within the IBM Software Group, where he develops SOA and BPM technologies and solutions.



Xi Ning Wang, Advisory Software Engineer, IBM

Xi Ning Wang photoXi Ning Wang is an advisory software engineer on the IBM China Cloud Labs team in IBM Software Group, where he focuses on cloud computing related technologies development and customer solutions. He was designated an IBM developerWorks Contributing Author in 2009.



11 January 2012

Also available in Chinese

Overview

Part 1 of this series gave you an overview of the features and architecture of WebSphere Lombardi V7.1 (hereafter called Lombardi). In Part 2 you learned how to use the most common features of Lombardi, including business process definition (BPD), and integration, human and rule services, to model the sample process. In Part 3 you learned how to use some advanced features of Lombardi to enrich to meet more complex requirements, including nested processes, milestones, event mechanisms, exception handling and Lombardi web services exposure. Part 4 covered how to use Lombardi Coaches to build human services.

In Part 5, you'll learn about advanced Coach features, including dynamic data binding and the runtime rendering mechanism, as well as how to customize the Coach.


Binding dynamic data using an AJAX service

In Part 4, you learned that you can easily bind a Coach control, like input text, with a simple service variable. In this section, you'll learn how to populate a Coach control with dynamic data.

To build a drop-down list using a list variable, do the following:

  1. Select List variable for Based on in the Dynamic Data section of Presentation property.
  2. As shown in Figure 1, specify the Dynamic Binding in the Dynamic Data section to one variable which is list data type, e.g. tw.local.product[]. After that, it is needed to choose which property of the variable to be shown in the drop down list for Dynamic Binding Value, e.g.ID, and which property to be submitted to the back-end as the value of the drop down list for Dynamic Binding Display, e.g.Name.
    Figure 1. Build a drop-down list using a list variable
    Build a drop-down list using a list variable
  3. You can also build a drop-down list by selecting Ajax Service in the Dynamic Data section. The Ajax service needs to provide one input text control, Department, as shown in Figure 2.
    Figure 2. Build a drop-down list using an Ajax Service
    Build a drop-down list using an Ajax Service

Figure 3 shows the implementation of an Ajax service. In order to use the Ajax service to build the drop-down list, the output of the Ajax service should be a list of tw.object.NameValuePair objects, as shown. tw.local.inputVar is the input control for the Ajax Service and tw.local.teamList is the output for the Ajax service. Here we use the fixed value as example, you can use an Ajax service to pull data dynamically from a connected data source, such as a database.

Figure 3. Implementation of an Ajax service
Implementation of an Ajax service

Figure 4 illustrates the resulting drop-down list created using the Ajax service. Initially, the value of Department is empty and the Ajax service output is No Team Assigned. When you select a department, the Ajax service displays the corresponding teams.

Figure 4. Resulting AJAX service drop-down list
Resulting AJAX service drop-down list

Building a table control using a SQL query

In this section, you'll learn how to build a table control in the Coach using a SQL query. Figure 5 illustrates the Coach design. In the Date Retrieval area of the Presentation property, the default data source is jdbc/TeamWorksDB, which corresponds to the TW_PROC database in WebSphere Lombardi Express V7.1. You can access the TW_PROC database using the default username WSLE and the password Lombardi. You can also access the WebSphere Application Server administrative console in Lombardi Express with a username and password of tw_user to define a new data source.

The property names of the custom data structure (tw.local.product in Figure 5) must match the column names in the database table that you want to query. Otherwise, you would need to use column aliases in the SQL statement to perform the correct matching.

Figure 5. Build a table control using a SQL query
Build a table control using a SQL query

Figure 6 shows the resulting table control using SQL query.

Figure 6. Running a table control
Running a table control

Customizing Coaches

In this section, you'll learn about some of the ways you can customize Coaches. Before you customize Lombardi Coaches, you should have a good understanding of how the runtime rendering of the Coach works to ensure that your modifications produce the desired results. The runtime rendering involves the following key technologies, as shown in Figure 7.

Figure 7. The runtime rendering of a Coach
The runtime rendering of a Coach
  • HTML: The Web browser client renders the HTML that the Coach generates from its XML definition through XSLT processing. You should view the generated HTML result in your web browser.
  • CSS: The Cascading Style Sheet. The default Lombardi CSS file, coach_designer.css, instructs the client how to render the HTML output.
  • JavaScript®: JavaScript provides the methods and functions that implement runtime Coach features, such as dynamically adding rows to a table or governing the visibility of Coach controls. JavaScript is embedded in the XML definition of a Coach, and is evaluated by the runtime engine before it is rendered to HTML by the web browser client. Both client-side and server-side JavaScript are used to render Coaches.
  • XML: The design of a Coach is described in Extensible Markup Language (XML). As you drag sections and controls to a Coach, Lombardi automatically generates the XML definition of the Coach.

    You can view the XML while you're building a Coach by clicking the Code View icon in the toolbar.

  • XSLT: The Extensible Stylesheet Language Transformation (XSLT) transforms the XML definition to the runtime HTML form. The Extensible Stylesheet Language renders a server-side-scriptlet that is executed to generate the HTML.

Best practices for customizing Coaches

In general, you should customize Coaches using the mechanisms available in the Designer interface, such as using a custom CSS by overriding the CSS for a particular Coach or control. If the overrides available in the Designer don't meet your needs, and you are fairly comfortable with XML, you can use the cssStyleOverride attribute. In order to use a custom CSS for all Coaches, you need to access and edit the default Coach CSS located in the Lombardi installation directory.

If these CSS customization options aren't a viable solution to meet your design requirements, you can also edit the CoachDesigner.xsl transformation file to customize the rendered HTML. If you edit the CoachDesigner.xsl file and you notice that your changes are not being applied to the Coaches under development, open your Coach, click on the top section of the Coach (named Lombardi Coach by default), click the Coach option in the properties, and then click Transform Coach XML.

If you modify the XSLT or JavaScript files, you need to be aware of the following implications:

  • You should not attempt to use these methods unless you have a high comfort level with XSL and JavaScript.
  • The XSLT and JavaScript files are overwritten during the Lombardi upgrade process, without no opportunity to detect or merge possible customizations. If you make modifications to these files, you must manually merge your customizations after each upgrade.
  • You must make modifications in all Lombardi environments, including development, test, production, and any others to which you will install and run processes.

Customizing the display of Coach pages

In Part 4, you learned how to build a human service using Coaches and how to bind dynamic data. This section describes just a few of the ways you can customize Coaches.

  • You can change the way that columns are displayed on a Coach page using the Section properties. For example, you can change the number of columns and column width, as shown in Figure 8.
    Figure 8. Customize column display
    Customize column display
  • You can make an input field on a Coach page required, or specify whether to show it, by customizing the Visibility properties of the field. To do this, check Override Parent Visibility, then select the desired Default Visibility, such as Required (full access) for everyone, as shown in Figure 9. You can also use this property to hide some fields.
    Figure 9. Make input field required
    Make input field required

    Figure 10 shows the Coach page with the resulting required field.

    Figure 10. Required input field result
    Required input field result
  • Finally, you can override the default CSS styles for Coach controls by configuring the Customization properties of controls.

Customizing HTML controls

You can drag and drop a custom HTML control from the palette onto the design area of a Coach, then add any custom JavaScript, CSS and HTML code in the Presentation properties. It is very useful to render HTML content according to the runtime value of process or service variable. In addition, it is useful to edit the process or service variable in the Custom HTML block. This section shows you how to achieve this.

Suppose you define a String variable in our process or service named product. You can display its value in the Custom HTML block using <# = tw.local.product #>

You can also use <# #> to get the value of the process variable. The difference is that the result of <#= #> expression is put into the text, while the result of <# #> expression is not put into the text, but is computed dynamically. This is similar to the way that <%= %> and <% %> function in JSP.

If you want to edit the process variable in Custom HTML, you can use modify the following HTML element:

<INPUT name='tw#local#product value= '<#=tw.local.product#>'>

The trick is to realize that the Coach uses HTML forms to pass information back to Lombardi, and the name attribute of each form control is used to bind its value to a Lombardi variable. Set the name of the control to the Lombardi variable (replace "." with "#"), and the Lombardi variable will be updated when the form is submitted.

For list of simple variables, such as product is redefined as a list of type String. Then tw.local.product[0] can be represented as tw#local#product#0, as the name attribute of form element.

For a list of complex variables, tw.local.product[0].amount, for example, can be represented as tw#local#product#0#amount.

Performing advanced Coach customization

In general, you should customize Coaches using the mechanisms available in the Designer interface, such as using a custom CSS by overriding the CSS for a particular Coach or control. If the overrides available in the Designer do not meet your needs, you can use the cssStyleOverride attribute, which requires a moderate comfort level with Extensible Markup Language (XML). In order to use a custom CSS for all Coaches, you must access and edit the default Coach CSS located in the Lombardi installation directory.

If the CSS customization options are not a viable solution to meet your design requirements, you can edit the CoachDesigner.xsl transformation file to customize the rendered HTML. If you edit the CoachDesigner.xsl file and you notice that those changes are not being applied to the Coaches under development, open your Coach, click on the top-level section of the Coach (named Lombardi Coach by default), click the Coach option in the properties, and then click the Transform Coach XML button.

If you decide to modify the XSLT or JavaScript files, you need to be aware of the following implications:

  • You should not attempt to use these methods unless you have a high comfort level with Extensible Stylesheet Language (XSL) and JavaScript.
  • The XSL transformation (XSLT) and JavaScript files are overwritten during the Lombardi upgrade process, without opportunity to detect or merge possible customizations. If you have made modifications to these files, you must merge your customizations manually after each upgrade.
  • You must make modifications in all Lombardi environments, including development, test, production, and any others to which you will install and run processes.

Conclusion

In this article, you learned more about some Coach customization features, including dynamic data binding, customizing the display of Coach pages, and creating custom HTML controls. You also learned about the runtime rendering of Coaches. In Part 6, you'll learn how to us Lombardi KPIs and reports to do monitoring and performance analysis.

Resources

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into Business process management on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Business process management, WebSphere
ArticleID=784376
ArticleTitle=Modeling your business processes with IBM WebSphere Lombardi Edition, Part 5: Customize the user experience with Coaches
publish-date=01112012