Versions Compared

Version Old Version 2 New Version Current
Changes made by

Vaishnavi Sridhar

Ravikumar Babu CTOO

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  1. In Canvas Studio, click Create -> Template.
    Image Removed
    Image Added

  2. In the Create New Template form, provide the following information:
    Image Removed
    Image Added

Screen ItemWhat to provide
Template IDProvide a unique ID for the Template.
Template DescriptionSmall description about the Template.
Channel

Indicates for which channel the template is applicable for. The options available are:

Do you wish to configure a common template for all channels?

Yes: This template is applicable to all the following channels.

  • Desktop
  • Mobile
  • Tablet

No:Appropriate channel must be selected for the template. 

Info

Channel can be selected for each Template Config within the same Template ID.


Template Config

Provide You can directly enter the HTML DOM (codes) of this Template or paste the template in this field. Alternatively, define the HTML/CTTPL file of the Template template in the WAR folder (e.g. ctmodelhouse/templates) and provide the path to the template in this field.

Example for HTML DOM:

Code Block
languagejsxml
{{#each ALL_RECORDS}}
ACCOUNT_NAME : {{ACCOUNT_NAME}} <br/>
ACCOUNT_NO : {{ACCOUNT_NO}}
<hr>
{{/each}}

Example for template path:

Code Block
languagebash
templates/row_template/card_template.cttpl

For your reference, the contents of the card_template.cttpl is as follows and the following screen shot highlights the sections of the template code with the visuals:

Code Block
languagexml
<div class="col-sm-6 col-md-6 col-lg-3" 
	 data-item-id="ct-tpl-record" 
     data-row-index="{{this.record.0.rowIndex}}" 
     data-grid-rowIndex="{{this.record.0.rowIndex}}" 
     data-context-click="true" 
     data-row_click="true">
		
		<div class="card_layout">
			<div class="img_fav">
				<img src="images/loan_summary/{{{this.record.5.VALUE}}}" alt="">
				<span> </span>
			</div>
			<div class="card_details">
				<h1>{{{this.record.2.VALUE}}}</h1>
				<div class="Loan Number">
					<p>Loan Number</p>
					<h2>{{{this.record.1.VALUE}}}</h2>
				</div>
				
				<div class="pull-left">
					<p>Payment Due Date</p>
					<h3>{{{this.record.4.VALUE}}}</h3>
				</div>
				
				<div class="pull-right text-right">
					<p>Next Payment</p>
					<h3>{{{this.record.3.VALUE}}}</h3>
				</div>				
				<button type="button" class="pull-right btn btn-success">Pay Now</button>
			</div>
		</div>	
</div>

Image Added

SubmitSubmit the configuration of Template.

...