Creating and using coach view templates

The following is the transcript for the viewlet "Creating and using coach view templates in IBM® Business Process Manager".

Table 1. Introduction
Step Audio Onscreen Action
 

Welcome to "Creating and using coach view templates in IBM® Business Process Manager".

 The welcome screen shows the title of the video, "Creating and using coach view templates in IBM® Business Process Manager Copyright 2013, IBM Corporation."
 

Coach view templates are reusable coach views that contain predefined content or predefined layouts that can be used as the basis for new coaches and coach views.

Coach view templates help you accomplish the following goals:
  • Create consistency across your application interfaces
  • Speed up interface development, and
  • In one step, make application-wide updates across all the interfaces that use the template.

The following onscreen text is displayed.

Coach view templates help you accomplish the following goals:
  • Create consistency across your application interfaces.
  • Speed up interface development.
  • In one step, make application-wide updates across all the interfaces that use the template.
 

In this video, you will learn how to create a coach view template that contains a company banner and a footer.

You will then learn how to create coaches and coach views by using this template as a starting point.

Finally, you will see how you can update your user interfaces in one step by updating your coach view template.

A simple coach view template is shown with a colored banner and footer.

A coach, called the Customer Order coach, appears beside it. This coach uses the coach view template.

A second and third coach open, showing the same coach view template that is used in the Customer Invoice and Delivery Details coaches.

The font is changed on the coach view template banner, and then the font of the same text is updated on the three coaches.

Table 2. Creating the coach view template
Step Audio Onscreen Action
  The coach view template that is created in this video contains a simple header and footer with a content area in the middle. The simple Coach View template shown in the introduction is displayed.
  First we'll create a coach view called My Company Template. Process Designer is shown. The user clicks User Interface > Coach View.

The New Coach View wizard opens.

The user types My Company Template as the name of the new coach view and clicks Finish.
  Because the header uses an image file, banner.gif, for the background, we need to upload the image as a web file so that we can use it in the template. The user clicks Files > Web File.

The New Web File wizard opens. The user browses to banner.gif and clicks Finish.
 

Let's go back to our coach view template and add some content.

The user navigates to the My Company Template coach view and clicks the Layout tab.
  The header and footer of our coach view template will be coded using HTML code that is in custom HTML elements.

First, we need to add the custom HTML element from the Advanced section of the palette.

The user expands the Advanced section of the palette, and then drags a custom HTML view onto the canvas.

 

Let's add the HTML code that defines the header.

We need to specify the text that goes in the header division and add a line that opens the main content division.

 In the Properties tab, the user enters the following code in the Text area: 
<div id="header">
		<h1 id="header_text"> My Company</h1>
</div>
<div id="content">

As the audio plays the words "header division", the first <div> section is highlighted.

As the audio plays the words "open the main content division", the second <div> section is highlighted.

 

Now we can create the content area where the content of future coaches and coach views that use this template will be added.

The user drags a content box from the Advanced section of the palette and drops it below the custom HTML element.
 

At the bottom of the coach view template, we need to add another custom HTML element to create the footer.

The user drags a custom HTML element onto the canvas and drops it below the content box.

 

Add the HTML code that closes the content division and creates the division for the footer and specifies the text that will be displayed.

In the Properties tab, the user enters the following code in the Text area: 
</div>
<div id="footer">
		<h1 id="footer_text"> My Company</h1>
</div>
 

Now we can define the appearance of the coach view template by adding cascading stylesheet (CSS)information in the Behavior tab.

This is where we can specify things like text placement, font size, and color and where we can reference the banner.gifbackground image file that we uploaded earlier.

The user clicks the Behavior tab and selects Inline CSS.
The user pastes in the following code: 
#header {
	text-align: center;
	padding: 10px 0 10px 0;
	height: 60px;
	background-image: url('banner.gif');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

#header_text {
	 color:black;
	 border:none;
	 font-size:40px;
}

#footer {
	padding: 5px 25px 5px 5px;
	text-align: right;
	background: #EAD6D1;
}

#footer_text {
	color:black;
	border:none;
	font-size:12px;
}

#content {
	background: #F8F8F8;
	padding: 20px;
}

As the audio plays, the relevant parts of the CSS code are highlighted.

 

Finally, so that our coach view can be available as a template to create other coaches and coach views, we need to go to the Overview tab and specify that our coach view can be used as a template.

The user clicks the Overview tab and selects Use as a Template.
 

To create an icon that represents your new coach view template at design time, select New and browse to the image file that you want to use.

The user clicks New next to Palette Icon and browses to an image called MyCompanyIcon.

Table 3. Reusing your template in a new Coach View
Step Audio Onscreen Actions
 

Now let's create a coach that uses the My Company coach view template.

First, we create a human service that will contain our new coach.

The user clicks User Interface > Human Service.

The New Human Service wizard opens.

The new human service is called Customer Billing.

 

Our new coach is an interface for creating customer invoices.

The user drags a coach from the palette on to the canvas, names the Coach Customer Invoice and connects the coach to the Start and End events.

 

Now let's define the content of our new coach.

The user clicks the Customer Invoice coach and the Select a Template wizard opens.
 

Our coach view template now shows up as an option for creating a coach. Notice that the icon image that we specified previously helps us quickly identify the My Company coach view template.

If we had created multiple coach view templates, they would all be listed as options here.

The user selects Select a template and then clicks Finish.
 

All the content that we defined in our My Company coach view template is automatically in our new coach view.

We can now add our coach-specific content to the Customer Invoice coach by dragging controls and other views onto the content box. We can also add additional elements, such as controls and other views.

All of the content that defined in the My Company coach view template is automatically in the new coach view.

The user drags a text box onto the canvas and drops it onto the content box. In the Properties view, the user changes the text box label to Customer Name.

The user drags a decimal control onto the canvas and drops it onto the content box. In the Properties view, the user changes the decimal control label to Amount Owing.

The user drags a button onto the canvas, drops it below the content box, and then changes the button label to OK.
  Let's run the human service to see the coach view at run time. The user clicks the playback button and the coach launches.
Table 4. Updating interfaces using Coach View templates
Step Audio Onscreen Actions
  One of the advantages of using a coach view template to create your user interfaces is that you can make a single update to the template and that update is propagated throughout all the coaches and coach views that use that template.

For example, if we update the style of the font in the header of our Coach View template to italic, our Customer Invoice coach, and any other coach that uses the template, is automatically updated.

The user returns to the My Company coach view template and clicks the Behavior tab. In the header_text section of the inline CSS, the user types font-style: italic; and then clicks Save.

The user returns to the Customer Billing human service and clicks the playback button to display the Customer Invoice coach with the updated header style.

    End of demonstration
Table 5. Conclusion
Step Audio Onscreen Actions
 
In this video, you learned how to accomplish the following goals:
  • Create a Coach View template,
  • Reuse a Coach View template in a Coach to speed up interface development, and
  • In one step, update the interfaces that use the template.

The following text is displayed.

In this video, you learned how to accomplish the following goals:
  • Create a coach view template.
  • Reuse a coach view template in a coach to speed up interface development.
  • In one step, update the interfaces that use the template.
  For more information about IBM Business Process Manager, browse our other YouTube videos or visit these other official resources.

The following text is displayed:

For more information about IBM Business Process Manager, browse our other YouTube videos or visit these other official resources:
  • WebSphere® Education YouTube channel
  • IBM Business Process Manager V8.5 documentation
  • IBM developerWorks® IBM Education Assistant
Parent topic: Providing information about Coach Views