Widget templates

FinalBoard core is based on AngularJS and widgets uses AngularJS templates and their syntax.

Variable binding

You can bind variables to template using simple {{ data.my_var }} syntax.

Data provided by data_url response is “injected” into template as data object.

For example if your data_url URL returns following JSON data:

{
  "x": 123
}

To show x value in template use following HTML markup:

My variable is: <strong>{{ data.x }}</strong>

Lists/Array iteration

If you have arrays in your data you can easilly iterate/loop through them using AngularJS ng-repeat directive

JSON Data:

{
  "items": [
    { "name": "A", "count": 1 },
    { "name": "B", "count": 2 },
    { "name": "C", "count": 3 },
  ]
}

HTML markup:

<table class="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Count</th>
    </tr>
  </thead>

  <tr data-ng-repeat="item in data.items">
      <td>{{ item.name }}</td>
      <td>{{ item.count }}</td>
  </tr>
</table>

Template filters

You can use any AngularJS template filters, to change variable formats etc.

For example using number filter, large number like this: 10000 will be changed to 10,000

{{ 10000 | number }}

Some most common ones: number, date, currency.