Creating a Coach View Template in IBM Process Designer

Introduction:

Templates are an ideal way to create a standardized look across multiple Coach Views. A template is a Coach View that someone marks as being usable as a template in its Overview page. Users can then select the template when they are creating Coach Views. The new Coach Views have the content of the template as base content to which the users can then add content. For example, you create a Coach View that has the company logo and name in a banner area and a content box as a placeholder for other content. When you use this Coach View as a template, you can then select it when you are creating another Coach View. The new Coach View has the banner area defined in the template along with an area for content. Other users can also use the template when they are creating Coach Views so that there is a consistent look across the new Coach Views. Because templates are Coach Views, you can also drop them onto Coaches. For example, if you have a template that has a common banner, you can drop it onto a Coach so that the Coach has the common banner.

Overview:

The template serves as a way to update multiple Coach Views simultaneously. Because the template is a reference to a Coach View and not a copy, if you change the template, all of the Coach Views based on that template are updated as well with those changes.

This article is shows how to create a Coach View that contains a simple header and footer and how to make the Coach View available as a template.

We are going to develop a Template with three areas: a header that contains standard text, a content area, and a footer that contains some more standard text. To separate the areas, Template uses <div> tags.

Implementation:

We will complete the following steps to create a Template using the coach view.

Ø  Create a Coach view.

Ø  Make a Template.

Ø  Create a Human Service.

Ø  Test the application.

Create a Coach view:

Before creating coach view, we need to create a process Application in IBM Process Designer.

Login IBM Process Designer V8.0 with username and password. Click on Create New Process App, enter name of the process app is ‘Coach View Application’ and acronym as CVA then click on finish.

Click the Add icon for User Interface and then select Coach View.

Give the Coach View name as ‘EAITemplate’ and then click on finish.

In the Layout page of the Coach View, drop a custom HTML item onto the layout canvas.

Select the properties of the custom HTML item, add the following HTML code as text that goes in the header:

<div id="header">

        <h1 id="header_text">Enterprise Application Integration by AMEER</h1>

</div>

<div id="content">

The above code defines the text that goes in the header division and opens the main content division.

Drop a content box below the custom HTML item for the content area. The content box is a placeholder for content that is defined by Coach Views and Coaches that users create based on the My Template Coach View. In this case, content placed in the content box fits between the header and footer in the EAITemplate Coach View.

Select the Layout page of the Coach View, drop a custom HTML item onto the layout canvas below the content box.

Select the properties of the second custom HTML item, add the following HTML code as text that goes in the footer.

</div>

<div id="footer">

        <h5 id="footer_text">Copyright © 2013 Enterprise Application Integration by AMEER</h5>

</div>

This code closes the content division and defines the text that goes in the footer division.

Now we will define the look of the EAITemplate Coach View by adding the following code as inline CSS in the Behavior page.

Select the Behavior page and click on inline CSS add the code in code section as shown below.

Normally, we would put the CSS code in a file and then use Included Scripts to refer to the file. To keep things simple, in this article we are using inline CSS.

Make a Template:

To make the EAITemplate Coach View into a template, select the Overview page and select the check box Use as a Template.

Save the changes.

To represent the EAITemplate Coach View on the palette, in the New Coach View wizard add a palette icon.

Take a screen capture of the EAITemplate Coach View in a browser, save it as a .png file, and use that file as the palette icon. Before setting the Palette and Layout Icons we need to upload the image which we had took screen shot.

Click the Add icon for Files and then select Web Files.

 

Browse the image screen shot file and click on Finish.

Open the EAITemplate Coach View; Select the Overview page browse the saved image file for Palette Icon and Layout Icon.

Save the EAITemplate Coach View.

Create a Human Service:

Before we can test this application, we need to make it use of Coach View template in any of the coach. So we need to create a Human service to implement a coach.

Click the Add icon for User Interface and then select Human Service. Give the name as EAIHome then click on finish.

Drag and drop a coach activity to Diagram Page in EAIHome human Service. Rename the Coach name as EAITemplate.

Take a wire activity and wire from start to EAITemplate as shown below.

Double click on EAITemplate in EAIHome Human Service, It will open Coaches Page, Select the EAITemplate and select the Template button and then select the template which we have developed earlier then click on Ok.

Now the Human Service Coaches page will look like below.

Test the application:

Now we have completed creation of Coach View template and usage of template. We need to test this application now.

Open the EAIHome human service Click on Run Button at the corner.

Now our application will be open in a browser with the template screen as shown below.

Conclusion:

We learnt how to create a coach view and making a coach view as template. The risk is that if someone edits that Coach View template, 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, you might want to create the Coach View in the process application to limit the changes to that particular process application.

Download:

File Name	Description	Size	Download
Coach_View_Application_V10.twx	Coach view Template Sample	785 KB	Download
Coach view Template.pdf	CV Template in IBM BPM Document	820 KB	Download