Defining the contents of coach views

You can define what a coach view displays to users at runtime.

Add coach views and other palette and library items to the coach view in its Layout page.

1. Set the type of device you are creating the layout for. For information, see Responsive settings for coach views.
2. On the layout, drop items from the palette or from the library. These items can include stock controls, variables, and other coach views. Use horizontal sections and vertical sections to arrange the items.
   Tip: You can nest the sections. For example, to create a two-column arrangement, drop two vertical sections in a horizontal section. For information about dropping variables and the data binding that occurs, see Data binding for coach views. 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.

   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.
3. For each item that you dropped onto the layout page, define its properties. 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.
   1. Define the general properties of the coach view instance, including setting the following properties:
      • Change its label to more appropriate text.
      • Bind it to data such as a business object or one of its parameters by selecting the data from the list. The list contains the variables that you defined in the Variables page that have the same type as the type of the data binding that is defined for the coach view. 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 it uses. If you choose to select an existing view definition, the list contains the view definitions with a data type that matches the type that is defined for the data binding.
      For information about these properties, see Coach view general properties.
   2. Configure the coach view instance by specifying or setting a value for each option or by assigning a variable if that choice is available.
      To set a configuration property to a variable, click . Click Select and then select the variable from the list. The list contains the variables with a data type that matches the type that is defined for the configuration option.

      Important: The designer handles strings that are directly set in a configuration property differently from strings that are set through a variable. If you are setting the string by entering it directly into a configuration property, do not surround the string with quotation marks. If you are setting the string through a variable, surround the string 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. The Text stock control has the Validation field. In this field, you enter, as a string, the regular expression to use to evaluate the contents of the Text stock control. If you enter the validation string, type \d{5}. If you assign the validation to a variable, the variable is a string with a value of "\\d{5}".

      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 data binding that matches what is defined in the selected coach view. To expose a configuration property, click its button.

   3. Set the height and width of the coach view instance and set how much padding you want around it by setting its style properties. For information, see Positioning options for coach view instances
   4. Set how the parent coach or coach view displays the coach view instance. For information, see Setting the visibility of coach views. For information about the visibility values, see Coach view general properties.
   5. Optional: To override existing styles on the instance, add HTML attributes and classes to it. For information and an example of adding a class to change the position of a text box label, see Coach view general properties.