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">

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

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.