Versions Compared

Version Old Version 3 New Version 4
Changes made by

Ravikumar Babu CTOO

Ravikumar Babu CTOO

Saved on

Key

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

...

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:

    Code Block
    languagexml
    {{ #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:

    Image Added
    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:

    Code Block
    languagexml
    <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.

...