Developing reusable Coach Views

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

1. In the toolkit or process application, perform 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.
   The New Coach View wizard opens.
2. Use the New Coach View wizard to create the Coach View.
   Restriction: The name of the Coach View must be a valid JavaScript identifier 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.
   After you click Finish, the editor opens the new Coach View.
3. On the Overview page, provide information about the Coach View, such as how the Coach View might be used and which icon represents the Coach View on the palette and in the layout during design time.
   • 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 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");

   • If the Coach View has a UI that is a result of HTML or JavaScript code and not other Coach Views, provide a preview image.
   • If you selected Supports a Label, you can set the location of the label during design time using 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 files from the library using Included Scripts. Typically, these files are reusable .js and .css files. For .css files, you can specify whether to include or exclude styles for Microsoft Internet Explorer or for the media type.
   • Add local custom styles to the Coach View using Inline CSS.
   • Define common variables and functions for the event handlers of the Coach View using Inline JavaScript.
   • If your Coach View requires modules that are written in the AMD (Asynchronous Module Definition) style, register the aliases for the dependent modules using AMD dependencies. Script functions can then use these aliases to refer to the modules.
   • To insert code like <meta> tags into the header of the Coach View, use Header HTML.
   • If necessary, define the functions used by the Coach View in the appropriate event handlers. For more information, 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, bind it to a business object using Business Data. 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.
   • To provide users with ways to tune Coach View instances, add Configuration Options. Coaches and Coach Views that use your Coach View display these options when the user selects it in the Layout page and then selects the Configuration page in the Properties section.

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

   • To provide translations for the text of your Coach View, add resource bundles 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 on 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.
      Tip: You can also drop business objects or data types onto the layout. If there is a Coach View associated with that data type, the layout displays that Coach View. For example, if you drop a String onto the layout, you can see a text stock control that is bound the String. If the business object is complex and there is a Coach View associated with it, you can see that Coach View. If the complex business object does not have an associated Coach View, you can see a placeholder message.
   2. For each item that you dropped onto the layout page, define its properties. For example, for Coach View items you can perform the following actions:
      • Change their labels to more appropriate text.
      • Bind them to a business object. If the type of the business object does not match the type of the data binding defined for the Coach View, you see a warning. For information, see Binding views with data
      • Add HTML attributes and classes to them to override existing values. For example, you have a .css file that you have added as an included script file (see step 4). The file contains the following code:

        .widerTextBox .dijitTextBox {
        	width: 365px;
        }

        In this .css file, you have 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 specified by the class and not the default width.
      • If they have configuration options, configure them.
      • 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.
      Each item that you drop in the layout is a separate instance and changing its properties does not affect the properties of other instances. For example, you could drop two instances of Button. 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 and 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 the Inspector or the Designer, click the button.