Versions Compared

Version Old Version 10 New Version Current
Changes made by

Lakshminarayanan1 S CTOO

Lakshminarayanan1 S CTOO

Saved on

Key

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

...

Screen ItemWhat to provide
Template IDProvide a unique ID for the Template. For example, ACCOUNT_ROW_TEMPLATE.
Template DescriptionSmall description about the Template. For example, ACCOUNT ROW TEMPLATE.
Channel Id

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. 

Info

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.

Note

If you apply the row template on a grid app (widget) and to use a checkbox for enabling the selection of all the rows present in the grid app, provide the following code in the Template Config field: 

Code Block
languagexml
<span 
   data-ct-input="rowselection-col">
<input 
     type="checkbox" 
     data-itemAll-checker="true"/>
</span>

If you apply the row template on a grid app (widget) and to use a checkbox for enabling individual row selection in the grid app, provide the following code in the Template Config field:

Tip

On enabling individual row selection, each and every row will have a checkbox, adjacent to its left side. 


Code Block
languagexml
<input 
    type="checkbox" 
    data-item-id="ct_rowSelector" 
    data-item-checker="true" />


Example for HTML DOM:

Code Block
languagexml
<TABLE 
      class="responsive">
      <span 
         data-ct-input="rowselection-col"> 
      <input 
          type="checkbox" 
          data-itemAll-checker="true"/> 
      </span>

      {{#each record}}

      <TR>
	  <TH colspan="8">
		
      <input 
          type="checkbox" 
          data-item-id="ct_rowSelector" 
          data-item-checker="true" /> 

       <U> rowIndex :{{inc rowIndex}} </U>
		  totalRecords:{{totalRecords}}
	   </TH>
       </TR>
       <TR>
       <TH>COL_ID </TH>
       <TD>{{COL_ID}} </TD>
       <TH>FLD_GROUPABLE_IND </TH>
       <TD>{{FLD_GROUPABLE_IND}} </TD>
       <TH>POSITION_FIXED </TH>
       <TD>{{POSITION_FIXED}} </TD>
       <TH>cssClass </TH>
       <TD>{{cssClass}} </TD>
       </TR>
       <TR>
       <TH>VALUE </TH>
       <TD>{{VALUE}}</TD>
       <TH>VISIBLE_IND </TH>
       <TD>{{VISIBLE_IND}} </TD>
       <TH>colIndex </TH>
       <TD>{{colIndex}} </TD>
       <TH>key </TH>
       <TD>{{key}} </TD>
       </TR>
       {{/each}}
</TABLE>

Example for template path:

Code Block
languagebash
templates/account_row_template_code.cttpl 
# The CTTPL file must contain the code given in the example for HTML DOM.


SubmitSubmit the configuration of Template.

Apply the Row Template to the Grid App (Widget)

Open the grid app (widget) in the App Designer and navigate to the row configuration and select the Row Template you want to apply as shown in the following screen shot (Row Template > Enable Row Template toggle > Select the Row Template):

...



Let's assume that the ACCOUNT SUMMARY DETAILS app is mapped to the ACCOUNT SUMMARY workspace. By clicking the checkbox, on the left side, beneath the app title, all the rows of the grid app will get selected. The following screen shot serves as a good illustration of the output in the functional application, Modelhouse: 

To define events and capture actions for the Row Template, refer Defining Events and Triggering Actions for Row Template.