We’re starting a series of articles about Excel-like functions in Canvas. These articles will show you that if you have ever authored a TM1 reporting or planning application in Excel, you will quickly and easily be able to build these assets in Canvas.

Similar to TM1 and Excel, Canvas has adopted a cell-based approach to application design.  This means each cell in Canvas has its own formula. This article will show how easy it is to link these cells together.

The first topic is about creating SUBNMs that are dependent on each other. First being able to select a consolidated element such as a category of products, and then being able to pick only products from this category:

In a TM1 spreadsheet, we need 2 selections, the first selection will enable users to pick the category and the second selection will enable users to pick a specific product from the category they chose.

For the Category selection, we’re going to use a SUBNM function to get the list of Category from the subset “All Category”: 

• SUBNM(“Canvas_Sample:Product”,”All Category”,”Accessories”).

For the Product selection, we’re going to use another SUBNM based on the subset they chose in the category selection: 

• SUBNM(“Canvas_Sample:Product”,D16,1).

D16 is the cell where the SUBNM for the Category is defined.

That’s pretty much it, if users pick for example the category Accessories, they’ll be able to pick only  products from the Accessories category: 

To do it with Canvas, it is as straightforward as it is with TM1. For every TM1 function, there is an equivalent Canvas directive. For the SUBNM, the equivalent Canvas directive is tm1-ui-subnm.

Similar to the SUBNM, in the tm1-ui-subnm we need to specify the instance name, dimension name, subset name and the default element.

<tm1-ui-subnm               tm1-instance="dev"               tm1-dimension="Product"               tm1-subset="All Category"               tm1-default-element="1"               ng-model="page.category"></tm1-ui-subnm>

The second selection is based on the first one. To link two Canvas components, we’ll need first to store the value of the first selection into a variable. To store the selection we use the parameter ng-model=”<variable name>”. ng-model stores the value of the selection into the variable called page.category.

In the second SUBNM, instead of hard-coding the subset name, the subset name will be the value inside the variable page.category. To get the value of a variable, you need to enclose the variable name with {{ and }}.

<tm1-ui-subnm               tm1-instance="dev"               tm1-dimension="Product"               tm1-subset={{page.category}}               tm1-default-element="1"               ng-model="page.product"></tm1-ui-subnm>

That’s it, similar to TM1, we linked two SUBNMs together, if you change the Category, the Product selection will be automatically updated: