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

  For more information, refer Configuring a Column Template.
  
  

• 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.colIndex }}"
  		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>
  <!-- cssClass, colIndex, rowIndex, COL_ID, COL_NAME, and VALUE are the dynamic variables provided by Canvas. -->

  For more information, refer Configuring a Row Template.
  
  

• Full or View Template: It is a template for the full widget and can render dynamic data from the template.
  
  The following dynamic variables are available in Canvas to configure a View template:
  - ALL_RECORDS: All records of the corresponding widget.
  - ROWS_CONFIG: Consists of row details along with column details (COLS_CONFIG) and index of the row (ROW_INDEX).
  - COLS_CONFIG: Consists of details for each cell of a column.
  - ROW_INDEX: Identification number of the row. For example, 1, 2, 3 and so on.
  - TOTAL_COUNT: Count of the records.
  
  A sample screen shot is shown here for reference:
  
  
  The following code snippet is the view template configuration for the Account Summary widget with the dynamic variable:

  {{ #each ALL_RECORDS }}
  	ACCOUNT_NAME : {{ ACCOUNT_NAME }} <br/>
  	ACCOUNT_NO : {{ ACCOUNT_NO }}
  	<hr>
  {{ /each }}
  <!-- ALL_RECORDS is the dynamic variable provided by Canvas for View Template. -->

• Static Template: The data is rendered as it is in the template in a static form.