IBM BPM, V8.0.1, All platforms > Create processes in IBM Process Designer > Create user interfaces for business processes

Developing reusable Coach Views

To contain functions or user interface elements that another Coach View or a Coach can use, create a Coach View.

You can create a Coach View in a toolkit or in the process application. To reuse the Coach View in multiple process applications and make it available to all process applications that use that toolkit, 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.

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.

If your Coach View is using Dojo, use Dojo 1.7.3 with AMD (Asynchronous Module Definition).


Procedure

  1. In the toolkit or process application, do one of the following actions:

    • Click the plus sign next to User Interface and select Coach View from the list of components.
    • Right-click a business object and select Create Coach View.

  2. Use the New Coach View wizard to create the Coach View.

    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.

    For example, 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.

  3. On the Overview page, provide information about the Coach View.

    • Add one or more tags to the Coach View. The Designer uses these tags to categorize the Coach View on the palette and within the library. If you do not specify a tag, you can find your Coach View in the No Tags category.

    • In the Documentation field, provide information about the Coach View that helps people who reuse your Coach View in their Coaches or Coach Views.

      For example, describe the boundary events that your Coach View fires.

    • If you select Can Fire a Boundary Event, the Coach View can use named boundary events to transition to the next step in the service flow. The human service diagram shows these boundary events as wires. This diagram also shows the control that fires the boundary event. The Coach View can also use a named boundary event to commit the changes that it contains to the server.

    • If you select Use as a Template, the view becomes selectable as a template in New Coach View wizard.

      Tip: Give the Coach View a content box so that Coach Views that are based on the template have an area in which users can drop content.

    • If you select Supports a label, the Coaches or Coach Views that contain this view display the name as a label at design time. To distinguish between instances of the Coach View in these containing Coaches and Coach Views, the editor appends a number to the name. To have the Coach View access the label value in the runtime environment, add the following JavaScript code to the behavior of the Coach View: 
      this.context.options._metadata.label.get("value");
    • Provide a palette icon image. If the Coach View has a UI that is a result of HTML or JavaScript code and not other Coach Views, provide a layout image.

    • If you selected Supports a Label, you can set the location of the label during design time by setting the preview label position.

    • If you selected Supports a Label and if you set the preview label position to Center, the preview image stretches to fit the label text. By default, the entire image is stretched. However, you can specify the parts of the image that you want to stretch in the pixel coordinates fields. If you enter values into these fields, the image stretches only between x1 and x2 and y1 and y2. Typically, you use the center label position for UI elements like buttons.

  4. On the Behavior page, define the behavior for the Coach View:

    • Add existing script and style sheet files from the library by using included scripts. Typically, these files are reusable .js and .css files.

      You can add these files to the library as individual web files or package them in a .zip file and add that file as a web file. Packaging the files in a .zip file means that they maintain their relative relationships.

      For example, if you package a .css file and include the images that it refers to using relative links, the system finds the images. However, the system does not find the images if you package a .css file in one .zip file and package the images that it refers to in a different .zip file. If you add .css files as individual web files, you can edit them in Process Designer.

      Restriction: You cannot edit .css files that are packaged in a .zip file in Process Designer. Instead, you must edit them externally, repackage them, and then replace the .zip web file with your updated .zip file.

    • Add local custom styles to the Coach View by using inline CSS. If you are pointing to an image file in a .zip file, use the following format for the URL: file.zip! path/ file. extension.
    • Define common variables and functions for the event handlers of the Coach View by using inline JavaScript. For information about accessing parts of the DOM, see Access a child Coach View.

    • If your Coach View requires modules that are written in the AMD style, register the aliases for the dependent modules by using AMD dependencies. Script functions can then use these aliases to refer to the modules. For information about registering AMD modules, see Adding custom AMD modules. For an example of using dependent modules, see Example: creating a Select control using custom HTML.

    • To insert code like <meta> tags into the header of the Coach View, use Header HTML.

    • If necessary, define the functions that the Coach View uses in the appropriate event handlers. See Event handlers for the view object and the load event handler code in Example: creating a Dojo button control and Example: creating a jQuery button control. If you selected Can Fire a Boundary Event in the Overview page, add code to fire the boundary events. To fire the event, code the JavaScript to call this.context.trigger(callback) at the appropriate time.

    For more information about adding behavior to your Coach View, see Defining Coach View behavior.

  5. On the Variables page, define the variables that the Coach View uses:

    • To associate the Coach View with data, use business data to bind the Coach View to data like a business object. An example of when you would not bind a Coach View to data is when you are using that Coach View to set the UI layout. A Coach View can have only one data binding.

    • To provide users with ways to customize Coach View instances, add configuration options. Coaches and Coach Views that contain your Coach View display these options as configuration properties when users select your Coach View in the layout and then select the Configuration page in the Properties section. The users can then configure the instance by using the options that you provided.

      For example, the Button stock control has the allowMultipleClicks configuration option. If you put a Button instance into a Coach View and then view its properties, you can see Allow multiple clicks. This configuration property is the label and UI implementation of the allowMultipleClicks configuration option.

      For service types, you must specify a default service to identify the signature of the service.

    • To provide translations for the text of your Coach View, add resource bundles by using localization resources. For an example, see Example: localizing a Coach View.

  6. Define what the Coach View displays to users in the Layout page:

    1. On the layout, drop items from the palette or from the library. Use horizontal sections and vertical sections to arrange the items.

      You can nest the sections.

      For example, to create a two-column arrangement, drop two vertical sections in a horizontal section. For information about sections and the stock controls in the Coaches toolkit, see Stock controls.

      For examples of how you can create your own controls as Coach Views, see Example: creating a Dojo button control and Example: creating a jQuery button control.

      You can also drop variables onto the layout. For information about dropping variables and the data binding that occurs, see Data binding for Coach Views.

      When you drop a Coach View onto the layout, Process Designer automatically selects it and shows its properties.

      Remember: Consider the effect of the various browsers when you are defining the layout and what you must do to handle their differences.

      For example, the Safari browser does not have scroll bars. Without scroll bars, it might not be obvious when, for example, table cells contain more content than their frame can hold.

    2. For each item that you dropped onto the layout page, define its properties.

      For example, for Coach View items you can do the following actions:

      • Change their labels to more appropriate text.
      • Bind them to data such as a business object or one of its parameters by selecting the data from the list. The list contains the parameters or data that you defined as a variable. The list is filtered. It contains only the parameters or data that have the same type as the type of the data binding that is defined for the Coach View. You can select to see all parameters or data. If the type of your selection and the type of Coach View data binding do not match, you see a warning.
      • Change the view definition that is used by the Coach View. If you choose to select an existing view definition, the list that you see contains only the view definitions with a data type that matches the type that is defined for the data binding. However, you can select to see all view definitions. If you do so, only the view definitions with matching types are in bold typeface.

      • Add HTML attributes and classes to them to override existing values.

        For example, you have a .css file that you added as an included script file (see step 4). The file contains the following code: 

        .widerTextBox .dijitTextBox {
	width: 365px;}
        In this .css file, you extended dijitTextBox by creating widerTextBox to override the default width of the stock text control. In the layout of the Coach View, you can then select a text control and add the widerTextBox class in the HTML Attributes. When you see the text control in a browser, it has the width that is specified by the class and not the default width.

        Important: Do not use the following names as CSS class names in your HTML source code because they are reserved names:

        • CoachView
        • ContentBox

      • If they have configuration properties, configure them by specifying or setting a value. For most configuration properties, you can instead set them to a variable. To set a configuration property to a variable, click

        . Click Select and then select the variable from the list. By default, the list contains only variables with a data type that matches the type that is defined for the configuration option. However, you can select to see all variables.

        If you do so, only the variables with matching types are in bold typeface. As an alternative, you can expose certain configuration properties to the Coach Views or Coaches that contain your Coach View.

        For example, in your Coach View, you add a check box as a set of radio buttons and expose its True Label and False Label configuration properties. Coaches or Coach Views that contain your Coach View can then set these labels to something appropriate for that Coach or Coach View. Exposing the configuration property automatically creates a configuration option as a variable in the current view. The configuration option has binding that matches what is defined in the selected Coach View. To expose a configuration property, click

        for the property.

        If the variable is a string that contains code, surround the code with quotation marks and use escape characters where necessary.

        For example, you have a Text stock control that you want to contain only five numbers. You can enter \d{5} into the Validation field or you can assign the validation to a variable. If the variable is a string, the string must have a value of "\\d{5}".

      • Set the visibility of the Coach View instance. If you assign a variable instead of selecting from the list, the variable must be a String with one of the following values: REQUIRED EDITABLE READONLY NONE DEFAULT.

        Important: Setting the visibility to REQUIRED does not validate whether a user has entered or set a value. You must provide code that does this checking by, for example, implementing a validation service for the Coach that contains the Coach View.

      Each item that you drop on the layout is a separate instance and changing its properties does not affect the properties of other instances.

      For example, you drop two instances of a Button stock control. Changing the name of one does not affect the other. However, if you double-click a Coach View instance in the layout, the Coach View opens in the editor. If you then edit the Coach View, you are changing the definition of the Coach View. These changes affect all existing and future instances of that Coach View.

  7. Review the look of the Coach View and how it functions. Based on the review, repeat steps 3 - 6 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.
  8. Test your Coach View:

    1. In a 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 human service in Process Inspector or Process Designer, click .

Create user interfaces for business processes


Related concepts:
Coaches
Difference between Coaches and Heritage Coaches
Coach Views
Defining Coach View behavior


Related tasks:
Building a Human service