How to build HTML Template components

Highlights

Component HTML Template
Overview An HTML template component lets you create a custom Klip using any combination of HTML, JavaScript and CSS.
Key Features To create HTML based Klips, you can use:
  • Standard HTML
  • Custom and 3rd party JavaScript
  • Inline CSS Styling
  • HTML Template language

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

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:
Object Model Array Model
${data[0].Series1}-> 123
${data[1].Series2}-> "def"
${Series1} -> 123,456,789
${Series2[1]} -> "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:
Object Model Array Model
{{html data[0].Series3}} -> The dog jumped. {{html Series3[0]}} -> 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:
Object Model Array Model
<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
<table>
{{each Series1}}
<tr>
<td>${$value}</td>
<td>&nbsp;&nbsp;</td>
<td>${Series2[$index]}</td>
</tr>
{{/each}}
<table>
returns:
123 abc
456 def
789 ghi

{{if fieldNameOrExpression}}...{{else fieldNameOrExpression}}...{{/if}}

  • Use this tag to create conditional sections.
  • fieldNameorExpression: The name of a field on the current data item, or JavaScript function or expression to be evaluated.
  • Example:
Object Model Array Model
{{if data[0].Series1 < 100}}
<div>Less than 100</div>
{{else data[0].Series1 > 100}}
<div>Greater than 100</div>
{{else}}
<div>Equal to 100</div>
{{/if}}
returns:
Greater than 100
{{if Series1[0] < 100}}
<div>Less than 100</div>
{{else Series1[0] > 100}}
<div>Greater than 100</div>
{{else}}
<div>Equal to 100</div>
{{/if}}
returns:
Greater than 100

Here is an example of Wordcloud using HTML Template language:

To add this Klip to your Dashboard account click this link. Example Klip - Word Cloud

Learn more:

Now that you know more about the HTML template component, check out this tutorial:

Important concepts

These articles provide an overview of important concepts for building Klips: