Overview

The HTML Template component allows you to have full control as you customize your Klip. This article will show you visual examples of the HTML Template component, and specifics on the HTML Template language:

• Standard HTML
• Custom and 3rd party JavaScript
• Inline CSS Styling
• HTML Template language
  

  Standard HTML

  You can use standard HTML tags to create a Klip, including adding your own images. Here is an example:
  

Overflow Property

The Overflow Property allows you to choose either:

• Auto scrollbars - Show scrollbars if it overflows.
• No scrollbars - Never show scrollbars if it overflows.
  

Custom and 3rd party Java Script

Third party JavaScript libraries can be referenced by using this format:

require( ["https://cdnjs.cloudflare.com/ajax/libs/d3/3.0.8/d3.min.js"] , function(ok){...})

You can also implement your own JavaScript. Here is an example:

CSS

CSS is supported by using inline styles with the HTML component. Here is an example:

HTML Template Language

An HTML Template component lets you create a custom report using HTML, inline CSS, and one or more series of data in a Klip.
The HTML Template language can incorporate data from a data source. It uses a placeholder for data by defining one or more data series, and it allows you to choose which data model type you want to reference.

HTML Template language specifics

The HTML Template language specifics refer to an earlier version of a JQuery template library which uses ‘Template Tags’ to render the data. This JQuery library has been discontinued, but is still accessible within Klipfolio.

A template contains markup with binding expressions. The template is applied to data objects or arrays, and rendered into the HTML DOM.

Data Model Property

This option allows you to select what type of data model you want to use when referencing data in the HTML template. The Object model is useful if data is related, otherwise the Array model is simpler and provides a direct representation of the data.

Example

If data is Series 1= [123, 456, 789] and Series 2 is ["abc", "def", "ghi"], then:

Object Model Array Model {
data : [
{ Series1: 123, Series2: "abc"},
{ Series1: 456, Series2: "def"}
{ Series1: 789, Series2: "ghi"}

]

}

{
Series1: [123, 456, 789],
Series2: ["abc", "def", "ghi"]

}

Using a template language

Data can be displayed in HTML using the template language with the specific format.

This section will use the following examples:

Series 1= [123, 456, 789]
Series 2 = ["abc", "def", "ghi"]

Series3 = ["The <span style='font-weight:bold;'>dog</span> jumped."]

Note: Array are zero-based.

${fieldNameOrExpression}

• Use this tag to evaluate data fields and JavaScript expressions.
• fieldNameOrExpression: The name of a field on the current data item, or a JavaScript function or expression to be evaluated.
• Example:

${data[0].Series1}-> 123
 ${data[1].Series2}-> "def"

{{html fieldNameOrExpression}}

• Use this tag to insert markup obtained from the data.
• fieldNameOrExpression: The name of a field on the current data item, or a JavaScript function or expression, returning HTML markup.
• Example:

{{html data[0].Series3}} -> The dog jumped.

{{each(index, value) collection}}...{{/each}}

• Use this tag to iterate over data.
• index: String specifying a variable name for the iteration index (or key, in the case of an object). Defaults to "$index".
• value: String specifying a variable name for the current data item in the array (or property value, in case of an object) during the iteration. Defaults to "$value".
• collection: The JavaScript array (or object to iterate over).

Example:

<table>
{{each data}}
<tr>
<td>${$value.Series1}</td>
<td>&nbsp;&nbsp;</td>
<td>${$value.Series2}</td>
</tr>
{{/each}}
<table>
returns:
123 abc
456 def
789 ghi

Happy Coding:)