Data Templates

Data templates transforms the data model into text or HTML content. Templates are used in many areas in emakin like form controls or mail templates etc.

Templates basically consist on xpath queries within {{ and }} qualifiers.

Assume you have a field named as "username" in data model. Basic temple example is:

Hello {{ username }}!

This template generates the following content if username field is set to "Madonna"

Hello Madonna!

Because all xml values are string by default no formatting performed while generating the output. If you need to perform formatting for number or date values you have to convert data type or use format function.

Culture Support

Data templates are culture sensitive and all formatting rules are derived from culture being used. Culture information automatically derived from user preferences or you can explicitly specify. If no culture specified invariant culture is used.

Selecting culture in scripting environment

var myNode = $Xml.Parse("<Customer><Name>John</Name><BirthDate>2014-01-31T09:00:00+02:00</BirthDate></Customer");
var result = myNode.Format('<p>{{Customer/BirthDate}}</p>', {
  Culture : 'tr-TR'
});
// result : <p>31.1.2014 09:00:00 +02:00</p>

Data Type Formatting

Text Formatting

All text or string types are exactly transformed without any format performed.

Number formatting

Functions like "Sum" or "Count" already return number values therefore there is no need for number conversions but incase necessary number() function should be used. Ex: number(MyNumberField) 

All number values are by default formatted with decimal rules.

Examples:

Date formatting

Template system does automatically detects the xml date types in formatted with "YYYY-MM-DD-THH:MM:SSTZ". Emakin always use this format in data model for date values.

Date time values in other formats are interpreted as a text value.

Examples:

Assume data model has an MyDate field with 2014-01-31T09:00:00+02:00 value.

Scripting example

var myNode = $Xml.Parse("<Customer><Name>John</Name><BirthDate>2014-01-31T09:00:00+02:00</BirthDate></Customer");
var result = myNode.Format('<p>Birth date : {{Customer/BirthDate}}</p>');

// result : <p>Birth date : 01/31/2014 09:00:00 +02:00</p>

Conditional Formatting

If conditional rendering needed format below can be used;

if XPathConditon then Template
if XPathConditon then Template else Template

Examples:

{{ if Customer/Type = 'A' then <div>Important !</div> }}>

{{ if Customer/Type = 'A' then <div>Important !</div> else <div>{{Customer/Name}}</div> }}>

Repeating Template

If you need to apply template for multiple nodes in a data model you can use repeating template expression like following syntax:

ItemXPath => Template

This format applies same template for every matched element by ItemXPath.

{{ SAMPLE REPORT
   <h1>{{Customer/Name}}</h1>
   <table>
   {{ Rows/Row => 
     <tr><td>{{Date}}</td><td>{{Description}}</td></tr> }}
   </table> }}

Generates the following output:

SAMPLE REPORT
<h1>John</h1>
<table>
  <tr><td>2010-01-01</td><td>description</td></tr>
  <tr><td>2015-01-01</td><td>other description</td></tr>
</table>

Repeating with attribute

While generating HTML content some tags ( like table tag ) may become corrupted if {{ x => y}} template is used. As an alternative method format function supports the x-repeat attribute to perform repeating content. 

{{ SAMPLE REPORT
   <table>
     <tr x-repeat="Rows/Row">
       <td>{{Date}}</td><td>{{Description}}</td>
     </tr>
   </table> }}

This attribute can be used with any element. For example can be used with "li" tag also.

{{ <ul>
     <li x-repeat="Rows/Row">
       <span>{{Date}}</span>
     </li>
  </ul> }}

Recursive Repeating Template

If recursive repeating templates needed format below can be used;

ItemXPath =>> Template

For each item at specified in ItemXPath sub template is generated and also same template is repeated again for Template content recursively.

{{ <h1>SAMPLE REPORT</h1>
   {{ Sections/Section =>> 
      <h2>{{Name}}</h2>
      <p>{{Body}}</p>  }}
}}

result:

<h1>SAMPLE REPORT</h1>
<h2>My Section</h2>
<p>Section content</p>
<h2>Sub Section</h2>
<p>Child section content</p>