The HTML Template component provides advanced functionality for users who are familiar with HTML, JavaScript, and inline CSS. This component enables you to have full control as you customize your Klip. You can use the HTML template to make just about anything, for example, maps, tables, embedded images, or scatter plots.
This article includes some visual examples of how to use the HTML template component, and specifics on JQuery Template Language.
This article includes:
- Building an HTML template component
- Customizing your HTML component:
- Standard HTML
- Custom and 3rd party JavaScript
- Inline CSS Styling
- jQuery Template Language
How do I build an HTML template component?
The following procedure tells you how to build a basic HTML template. You can apply additional customization by exploring the options in the Properties panel. For a detailed look at some of the customization options available, including which coding languages can be used, see How do I customize an HTML component?.
To build an HTML component:
- From your dashboard, click + Add a Klip > Build a Custom Klip, or, from the Klips page, click Build a Custom Klip.
- Click and drag the HTML template component into your Klip preview workspace.
- In the Properties panel, under HTML Template, replace the default code with your own.
How do I customize an HTML template component?
There are many customization options available to you. Here are a few of them.
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 third-party JavaScript
To use JavaScript:
- From the Properties panel, at Script, click Use JavaScript with this HTML Template. A new text field will display.
- Enter JavaScript in the Script field.
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:
Inline CSS
Inline CSS is supported by using inline styles with the HTML component. Here is an example:
jQuery Template Language
An HTML Template component lets you create a custom Klip using HTML, inline CSS, and one or more series of data in a Klip.
The jQuery Template Language can access 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.
jQuery Template Language specifics
The jQuery 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. 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:
Example:
Object Model {
data : [
{ Series1: 123, Series2: "abc"},
{ Series1: 456, Series2: "def"}
{ Series1: 789, Series2: "ghi"}
]
}
Array Model
{
Series1: [123, 456, 789],
Series2: ["abc", "def", "ghi"]
}
Using jQuery 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"]
Note: Arrays are zero-based.
The ${} Template Tag
Use this tag to insert data values in the rendered template. It follows the format ${fieldNameOrExpression} where fieldNameOrExpression is the name of a field on the current data item or a JavaScript function or expression to be evaluated.
For example,
| As an object model... | As an array model... |
${data[0].Series1}-> 123${data[1].Series2}-> "def" |
${Series1} -> 123,456,789${Series2[1]} -> "def" |
The {{html}} Template Tag
Use this tag to insert HTML markup strings in the rendered template. It follows the format {{html fieldNameOrExpression}} where fieldNameOrExpression is the name of a field on the current data item or a JavaScript function or expression to be evaluated.
For example,
| As an object model... | As an array model... |
{{html data[0].Series3}} -> The dog jumped. |
{{html Series3[0]}} -> The dog jumped. |
The {{each}} Template Tag
Use this tag to iterate over a data array, and render the content between the opening and closing template tags once for each data item. It follows the format {{each(index, value) collection}}...{{/each}} which can be broken down as follows:
- 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).
For example,
| As an object model... | As an array model... |
| <table> {{each data}} <tr> <td>${$value.Series1}</td> <td> </td> <td>${$value.Series2}</td> </tr> {{/each}} <table> returns: 123 abc 456 def 789 ghi |
<table> {{each Series1}} <tr> <td>${$value}</td> <td> </td> <td>${Series2[$index]}</td> </tr> {{/each}} <table> returns: 123 abc 456 def 789 ghi |
The {{if}} template tag and the {{else}} template tag
The {{if}} template tag is used for conditional insertion of content. It renders the content between the opening and closing template tags only if the specified data item field, JavaScript function, or expression does not evaluate to false (or to zero, null, type "undefined", or the empty string ).
The {{else}} template tag is used in association with the {{if}}...{{/if}} tag to provide alternative content based on the values of one or more expressions. When applied together, they follow the format {{if fieldNameOrExpression}}...{{else fieldNameOrExpression}}...{{/if}} where fieldNameOrExpression is the name of a field on the current data item or a JavaScript function or expression to be evaluated.
The {{else}} tag can be used without a parameter, as in: {{if A}}...{{else}}...{{/if}}, or with a parameter, as in: {{if A}}...{{else B}}...{{/if}}.
For example,
| As an object model... | As an 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 |
Wordcloud jQuery Template Language example
To add this Klip to your dashboard account click this link. Example Klip - Word Cloud
