Creating Templates

The Template component is a feature within Canvas that enables you to configure templates for apps (widgets). Canvas platform provides dynamic variables to avoid the repetition in writing codes when configuring templates. These dynamic variables can be reused with just a change in the input values.

The templates that can be configured in Canvas platform are as follows:

• Column Template: It is a template for a particular column in a widget (grid).
  
  For the column template the dynamic variable that is available is tplData. This variable is used to get the current cell value from the associated record.
  A sample screen shot is shown here for reference:
  
  
  The following code snippet is the Column Template configuration for the Beneficiary Details widget with the dynamic variable:

  {{ #if tplData }}
  	<input
  		data-input = 'true'
  		type = 'text'
  		value = {{ tplData }}
  		data-column-id = 'BENE_ID'
  		data-single-click = 'true'
  	>
  {{ /if }}
  
  <!-- tplData is the dynamic variable provided by Canvas for Column Template. -->
  <!-- BENE_ID is the Reference Number column's ID in the Beneficiary Details widget -->

• Row Template: It is a template for a row in a widget (grid) and applies to all the other rows in a widget.
  
  The following dynamic variables are available in Canvas to configure a row template:
  - COL_ID: ID for the column.
  - COL_NAME: Display name of the column.
  - VALUE: Cell value of the column ID.
  - VISIBLE_IND: This must be ‘Y’ for the column. Else, the column is hidden and can only be accessed by expanding the row.
  - colIndex: Identification number of the column. For example, 1, 2, 3 and so on.
  - cssClass: The class specifies whether the column is hidden or visible and the styles that are applied. For examples, integers are aligned to the right and string to the left.
  - key: Same as row index.
  - rowIndex: Identification number of the row. For example, 1, 2, 3 and so on.
  - totalRecords: Total number of records that are to be displayed.
  
  A sample screen shot is shown here for reference:
  
  
  The following code snippet is the row template configuration for the Deposit Summary widget. The configuration uses some of the dynamic variables that are available in Canvas:

  <div
  	class = 'col-lg-6'
  	style = 'border: 1px solid #ccc;'
  >
  	<input
  		type = 'checkbox'
  		data-input = "true">
  
      {{ #each record }}
      
      <div
  		class = "{{ this.cssClass }} text-center"
  		data-item-id = "ct-tpl-record"
  		data-item-data = "{{ this.COL_INDEX }}"
  		data-row-index = "{{ this.rowIndex }}"
  		data-single-click = 'true'
  		data-column-id = '{{ this.COL_ID }}'
  		data-context-click = 'true'>
  
         <b> {{{ this.COL_NAME }}}:  {{{ this.VALUE }}} </b>
  
      </div>
  	
      {{ /each }}
  
  </div>

• Full or View Template: It is a template for the full widget and can render dynamic data from the template.
• Static Template: The data is rendered as it is in the template in a static form.