Retrieve a list of elements from a subset

The objective is to create and then to show in your Canvas a list of elements from TM1 that you can use for your reports. Below is a simple table that you will be able to create after going through this tutorial:

The Canvas directive to create a list is tm1-ui-element-list. This list can be driven by a subset or an MDX statement. The example below will create and retrieve a list of elements and store it on an object called “page.list1”. This list is driven by the subset “Default” of the Region dimension:

<tm1-ui-element-list      tm1-instance="dev"      tm1-dimension="Region"      tm1-subset="Default"      ng-model="page.list1"></tm1-ui-element-list> 

Once the list has been retrieved, you will normally want to display those to the users. For this case, we will use a table to show it. We’re going to write an HTML Table for it:

<table></table>

The HTML table is split into 2 parts, first we need to create the table header and then the table body. On our example, let us create 2 columns in the table header (key and alias):

<thead>  <tr>     <th>key</th>     <th>alias</th>                       </tr></thead>

In the table body, we’re going to use the ng-repeat directive which allows us to iterate over the elements retrieved and stored in the object “page.list1”.

Looking at the HTML code below, the ng-repeat will duplicate the HTML element where it is placed (the tr on this case) and make a variable called “item” accessible on this duplicated tr. Each element item that was generated by tm1-ui-element-list contains properties which can then be accessed through dot or bracket notation. 

On the list of element objects returned by our Canvas directive, two of the properties that we would like to show are the element’s principal name and the alias that was defined on that subset. And to access those, write them as <object>.<property> or <object>[<property>]. On this example, we would like to access the properties named key (via {{item.key}}) and alias (via {{item.alias}}) exposed:

<tbody>    <tr ng-repeat="item in page.list1">            <td>{{item.key}}</td>            <td>{{item.alias}}</td>    </tr></tbody>

The list has been created, just have a look on Canvas and you’ll see a very basic list!

Now we’re going to use Bootstrap to quickly add a better look and feel to our table. This can be done by simply adding a class attribute into our HTML Table named “table table-hover” like below:

<table class="table table-hover">

This is how it will look like:

In order to add a filtering feature, we need to add a text box where the user can type into. We will then use the text from this text box to filter the list we had created. So first, create an HTML Input as per below:

<input class="form-control"        type="text"        ng-model="page.search1"        placeholder="Search...">

Now we need to link the filter “page.search1” to the table, you just need to add “| filter:page.search1” to the ng-repeat we have created previously:

<tr ng-repeat="item in page.list1 | filter:page.search1">

This is it, now you can type a text and it will automatically filter the list:

If you want to retrieve attributes other than “key” and “alias”, you will need to add a new parameter named tm1-attributes in the tm1-ui-element-list directive, which will contain the list of attributes you want to show. In the example below we’re going to use attributes “Description” and “Extra Long Name” from the Region dimension:

<tm1-ui-element-list      tm1-instance="dev"      tm1-dimension="Region"      tm1-subset="Default"      tm1-attributes="Description,Extra Long Name"     ng-model="page.list1"></tm1-ui-element-list> 

Then in the body section we’re going to use {{item.Description}} and {{item[‘Extra Long Name’]}} to display the attribute values for the specific “item”.

<tr ng-repeat="item in page.list2 | filter:page.search2">     <td>{{item.key}}</td>     <td>{{item.Description}}</td>     <td>{{item['Extra Long Name']}}</td></tr>

The output will be: