Developing reusable coach views

To contain functions or user interface elements that another coach view or a coach can use, create a coach view.

About this task

You can create a coach view by using the Designer interface of IBM® Business Process Manager. The new coach view can be in a toolkit or in the process application. To reuse the coach view in multiple process applications, create the coach view in a toolkit. The benefit of this approach is that the coach view is available to all process applications that use that toolkit. The risk of this approach is that if someone edits that coach view, the changes apply to all instances of that coach view. These changes might have unintended consequences in other process applications. If you think the risk is too high, consider creating the coach view in the process application to limit the changes to that particular process application.

Important: Avoid mixing non-responsive and responsive coach views in the same coach view layout.

Creating a coach view can be an iterative process in which you do steps 3 - 6 in any order. You might start by following the instructions in the order that is listed in the procedure. Based on the results of your test, update the appropriate pages and retest. Continue the iterative process of updating and retesting until you are satisfied with the look and behavior of your coach view.

IBM Business Process Manager provides a set of basic controls that include standard user interface elements such as text fields, images, and so on. These controls are implemented as coach views that you can use to develop more complex coach views.

Procedure

In the library, click the plus sign next to User Interface and select Coach View from the list of components.
In the window that opens, type the name of the new coach view. Unless you are basing the new coach view on a template, start with a blank coach view.
Restriction: The name of the coach view must be a valid JavaScript ID with the following exceptions: it can have spaces and it cannot have underscores. That is, you can use names like My Coach View or MyCoachView, but you cannot use names like My_Coach_View or default; default is a reserved word in JavaScript. For information about JavaScript IDs, see Annotated ECMAScript 5.1.
After you click Finish, the editor opens the new coach view.
To enable your coach view to be used in applications that run on multiple devices, select Intended for use on multiple devices either on the New Coach View window when you are creating the coach view, or on the Overview tab of the coach view after it has been created.
On the Overview page, provide information about the coach view. For information about adding tags, documentation, and icon images, see Providing information about coach views.
On the Behavior page, define the behavior for the coach view. For information about adding behavior to your coach view, see Defining coach view behavior.
On the Variables page, define the variables that the coach view uses. For information about defining the data used by the coach view and defining how users can customize it, see the topics Adding variables to coach views and User-defined events.
Define what the coach view displays to users in the Layout page: For information about adding coach views and other palette and library items to the coach view, see Defining the contents of coach views.
To apply a custom styling to the coach view instances that your coach view displays, in the Layout page, add CSS classes and attributes as HTML properties to these instances. Define the CSS classes and attributes in a CSS file and upload that file as an included script on the Behavior page. As a temporary measure, you can use the inline CSS field to see the impact of the class and attribute definitions as you develop them.
Important: Ensure that the names of the CSS classes do not collide with the names of the coach views. A collision can lead to unpredictable styling at runtime because the coach view name is automatically added for scoping purposes to the class attribute of the coach view wrapper div.
Review the look of the coach view and how it functions. Based on the review, repeat steps 3 - 7 to make the appropriate adjustments to the coach view or the items it contains or refers to. Keep iterating through reviews and updates until you have the results that you want.
Test your coach view:
1. In a client-side human service or heritage human service, add the coach view to a coach.
2. Ensure that the coach is part of the service flow. That is, if you cannot trace from the start node to the coach, connect the coach to appropriate nodes in the flow.
3. Bind the variables that the coach view uses to appropriate data.
4. Review the configuration for the coach view and update it if necessary.
5. To play the client-side human service or heritage human service in Process Inspector or Process Designer, click .