Versions Compared

Version Old Version 4 New Version Current
Changes made by

Ravikumar Babu CTOO

Ravikumar Babu CTOO

Saved on

Key

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

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.

Note

All of the following templates are supported by the following Web technologies:

  • Bootstrap (TBS)

  • jQuery Mobile (jQM)

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

  • Anchor
    CreatingTemplates_ColumnTemplate
    CreatingTemplates_ColumnTemplate
    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 -->

    For more information, refer Configuring a Column Template.

  • Anchor
    CreatingTemplates_RowTemplate
    CreatingTemplates_RowTemplate
    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:

    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_INDEXcolIndex }}"
		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.

  • Anchor
    CreatingTemplates_ViewTemplate
    CreatingTemplates_ViewTemplate
    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:

    Image Added
    The following code snippet is the view template configuration for the Account Summary widget with the dynamic variable:

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


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

...

All of these templates are supported by the following Web technologies:

...