Create a new Template

Owned by kiran.kumari@intellectdesign.com (Unlicensed)
Last updated: Aug 27, 2019 by Ravikumar Babu CTOO (Unlicensed)


  1. In Canvas Studio, click Create -> Template.



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



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. 

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

Template Config

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

Example for HTML DOM:

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

Example for template path:

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:

<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>

SubmitSubmit the configuration of Template.