Allowing login to multiple instances

When using multiple IBM Planning Analytics instances with the same credentials in your Canvas application, you will now be able to authenticate to all your instances by entering the credentials only once.

A property named loginInstances has been added into an instance’s configuration via the instances.json file. This is an array containing a string of instance name for which this will try to log into. For example,

  “loginInstances”:[“dev2”, “dev3”]

For flexibility, the following broadcast events has also been added so you can check for when the other instances have logged in:

  • login.instance.start

  • login.instance.status

  • login.instance.success

  • login.instance.failure

And on each broadcast, the name of the instance is also included along with other information depending on the stage of the process.

Sending TM1 REST API calls directly into TM1

A new API has been added that will allow a consultant or developer to send REST API calls directly into TM1 while leveraging on Canvas session handling. These REST API calls can be called through /api/rest

The allowedRestPaths property has been added into the settings.json file which will contain the API calls allowed to pass through.

An example entry would be:


The path property is a Regex string that be matched against calls made into the /api/rest/<instance> calls.

And to get the configuration from TM1, your HTTP Request would be:

GET /api/rest/<instance>/Configuration

This API works by whitelisting TM1 API calls that you will use. Place into the list only those APIs that you will use. <instance> refers to the name as define in the instances.json file.

Using the Trace Calculation

Being able to trace calculation from any cell is a very popular IBM TM1 and Planning Analytics feature. This is now available in Canvas v3.2.0.

Prerequisites: TM1 should be at least PA 2.0.3 (TM1

To access the Trace calculation feature, clicks the context button from any cells containing a dbr function and you will find the Calculations option (as shown below):

A new window will pop-up showing the intersection of the cell. If the intersection contains a consolidation, you will be able to drilldown until the leaf levels to find the rule:

Disabling the Calculations button

A new parameter tm1-hide-trace-calculation has been added to the tm1-ui-dbr directive in order to hide the Trace Calculations option if required.

Trace caluations through the $tm1UI services

The Trace Calculation feature can also be accessible from the $tm1Ui services. The new service is called cellTraceCalculations(instance, cube, element1, element2, elementN, options). More information in your application Help page (http://<serverName>:<portNumber>/<applicationName>/#/help).

Using the Canvas subset editor

Like the cube viewer, the Canvas subset editor (introduced in v3.0.1), is built to generate MDX set expressions. Most of the functionality should be familiar to what you have experienced in Architect or Perspectives: all elements, filtering, ordering, etc.

Use the subset editor to your Canvas page

To use the subset editor in your Canvas page, you will need to use the new directive tm1-ui-subset-editor


This new directive contains as the minimum parameters - instance name and the dimension name. To open a specific subset, you will need to add the subset name using the parameter tm1-subset. The tm1-ui-subset-editor has lots of other options, more information can be found in the Help section <Canvas Application URL>/#/help.

Open the subset editor from the cube viewer

From any hierarchy either on rows, columns or titles of the cube view, you can open the cube viewer:

MDX record expression

There is no Record Expression option as the Arc subset editor is always recording the MDX expression. You can edit the MDX expression manually.

The subset editor tests the MDX expressions by executing a query against the }ElementAttributes cube of the dimension. This means that any dimension that you want to use the subset editor against must have at least one attribute. Arc will prompt you to create one if it doesn’t exist.

Using the Canvas cube viewer

Canvas v3.0.1 introduces a new cube viewer to explore your cubes. The new cube viewer supports both native and MDX views.

Native view vs MDX view

A native view is the name of the standard view you have been using in TM1 for many years. These views do not support the new multiple hierarchies and are essentially deprecated. Canvas supports reading native views but you cannot save a native view unless all dimensions are using a subset. This also applies to dimensions involving default hierarchies only. 

MDX views were added to TM1 to support multiple hierarchies where these views contain a single MDX statement. The cube viewer is based on MDX. Each time you drag/drop a hierarchy or select a set of elements, the MDX is updated and executed against the TM1 model.

You can save these MDX views through Canvas. These views can be viewed in the newer TM1 interfaces such as PAX and PAW.

Open an existing cubeview

To add a Cube Viewer into your HTML page, you just need to use the new directive, tm1-ui-cube-viewer:

                    tm1-cube="General Ledger">

Refresh your page and you should see the cube view:

Canvas cube viewer options

The Canvas Cube Viewer has lots of options, mainly to turn on/off features:

These options can be set by using the tm1-options parameter of the tm1-ui-cube-viewer directive. Motre information in the Help section of your application <Canvas  Application URL>/#/help.

Default member of a dimension

You do not need to drag and drop all dimensions in the view to be able to see data. You just need at least one dimension on row and one on column. For all other dimensions which are not part of the view definition, Canvas is going to use their default member. To learn how to define a default member for your dimensions, you should look at the following article:

Save/Save as view

If you are using Planning Analytics, saving a view will always create an MDX view. If you are using TM1 10.2 FP5, FP6 or FP7, you will have the option to save as a Native View:

When saving an MDX view, Canvas also saves the “view definition” as part of the view. If the MDX is updated outside of Canvas (or Arc), you will need to update / edit the MDX manually. Clear the MDX statement to revert to the drag/drop interface.

See the MDX

To access the MDX behind the view, just click the MDX button. Note that you cannot override manually the MDX. To update the MDX query, make some changes in the view and then click again to the MDX button to see the changes:

Using Sandbox with Canvas

A sandbox is your personal workspace where you can write data without interferring the base data. Canvas v3.0.1 introduces support to TM1 and Planning Analytics sandbox. All sandbox's operation are now available in Canvas such as Create, Publish, Discard or Delete:

Values in the sandbox but not published to the base data will be shown in blue:

Using Sandbox in DBR

The tm1-ui-dbr directive supports sandboxes. A new component has been added to the samples application to show you how to use sandboxes:

  • http://<CanvasServerName>:8080/samples/#/sample/component/dbr-sandbox

To use sandbox in dbr, you will need to use the parameter tm1-sandbox and specifies the sandbox name:

<tm1-ui-dbr tm1-instance="dev" 
            tm1-elements="Actual,2011/12,Local,England,{{item.key}},Standard Cost" 

Sandbox comparaison

To compare two sandboxes, you just need to compare two DBRs pointing to two different sandboxes.

Sandbox with $tm1Ui

Sandbox is also supported by the $tm1Ui services such as CellPut, CellGet, CellSetPut and CellSetGet. To use sandbox, you just need to add the sandbox name using the configuration parameter, more information in the Help section <Canvas Application URL>/#/help.

Transform your cell set into a structured format

Canvas comes with lots of directives which are ready to use. For example with tm1-ui-dbr you can quickly request a data from TM1 and display it in your page. With these directives you can already achieve a lot but in certain case where you want to do more customization, you can use Canvas services such as cubeExecuteMdx to request data from TM1 and then transform it into your controller:

  1. Request data to TM1 from a MDX query.
  2. TM1 will send you back an object with OData structure.
  3. Transform this object so it can match your HTML component structure.
  4. Finally display this object into your HTML page.

The tricky part in this process is the data transformation. Good thing Canvas comes with a service named resultsetTransform which takes your OData object and then restructure it and add more properties such as pagination which you can then use in your table.

An example of this service can be found in the samples application (/sample/component/mdx-chart). This article explains in details how this sample works.

1. Create MDX Statement

The first step to request data from TM1 server is to use an MDX statement. On this example we used the following query:

NON EMPTY {[Period].[Jan], [Period].[Feb], [Period].[Mar]} ON COLUMNS, 
NON EMPTY {[Account].AllMembers} ON ROWS 
FROM [General Ledger] 
WHERE([Version].[Actual], [General Ledger Measure].[Amount], [Currency].[Local], [Region].[1], [Department].[1], [Year].[2012])

This query will give us a set of data coming from the General Ledger cube with three columns (Jan, Feb and Mar) for all accounts ([Account].AllMembers) on rows.

2. Retrieve the value from TM1

To retrieve the cell set from TM1, we use the Canvas service cubeExecuteMdx, in the controller (mdx-chart.js), you can see the following code:

$tm1Ui.cubeExecuteMdx($scope.values.instance, $scope.mdxQuery).then(function(data){

The cell set coming back from TM1 is then stored in an object called data This data object follows the OData structure:

You do not have to know the OData structure to be able to use Canvas but if you are curious, you can find out more about OData in this article:

3. Restructure this object using resultsetTransform

from mdx to display data.png

Instead of manipulating this object, you can transform it using the Canvas service resultsetTransform into a new object and store it to let us say $scope.values.table:

This service transfoms a cell set from TM1 into an object which you can easily manipulate to create a table. You can find more information about all Canvas services into the Canvas Help page (application/#/help):


This new object $scope.values.table has much more properties than the previous data object and it is easier to access:

Now that our object is ready, we can now build the table in our HTML page.

4. Display these properties in the view

The new object created by the service resultsetTransfrom has been structure in a way that it is much easier to access the most important properties of a table such as headers and values:

Create the header row

The headers can be found in the elements property of any row, in this example we choose the first one (rows[0]):


The HTML code to display the row header is:

 <th ng-repeat="rowDimension in values.table.rows[0].elements" class="text-center">

Create the column headers

The column headers are in the key properties of every cells of a row.

Again in this example we pick the first row to get all column headers:

<th ng-repeat="cellHeader in values.table.rows[0].cells" class="text-center">
    {{cellHeader.key.split(',').join(' - ')}}

Get the element on rows

The elements on rows are in the elements properties, we use the alias property to show the alias value:

The HTML code to display the element on rows is:

<tr ng-repeat="row in values.table.rows">
    <td ng-repeat="rowDimension in row.elements" class="text-center">

Get the values

The values are stored in the cells property of the rows:

The HTML code is:

<tr ng-repeat="row in values.table.rows">
        <td ng-repeat="cellHeader in row.cells" class="text-right">
                {{cellHeader.value | formatNumber: 2}}

You are now ready to build your own table based on an MDX query!

How to build your own service

What is a service?

In AngularJS, a service is a function, or an object, that is available for, and limited to, your application. AngularJS has about 30 built-in services. If you are updating the URL in your application, it is likely that you have already used the $location service.

Differences between a service and a directive?

A service is mainly a way to communicate between controllers. A service does not contain any HTML components. Whereas a directive is used to build widgets, it can contain a view (HTML file) and a controller (JS file).

Why build your own service?

  • Avoid duplicating the same code on multiple pages.
  • Reduce the maintenance into one file.
  • Create a reusable function for all your future projects.
  • Build a function that you can share with the Canvas community.

Building a service is very easy, just follow these steps and you will be able to build your first service in 5 minutes.

Structure of a service

A service is a JS file the following structure:

app.service('serviceName', ['$tm1Ui', '$location', function($tm1Ui, $location) {
    //Do something

A service can use other services. To enable other services, you will need to add these services as arguments of your service. In the example above the new service called serviceName will be able to use the $tm1Ui and $location service.

How to build your first service?

Building a service is very easy, you just need to copy the code from your controller into a new file. First let's create this new file. Canvas is going to load all files from the JS folder so you can put it anywhere inside the JS folder. In this example we put it inside js/controllers folder.

For example, let's say in our controller we use the function to update the settings. Instead of using the same code in every controllers, we can copy this function:

$scope.updateSettings = function (parameter, options) {
    //Get user settings value from Settings cube

And paste it into a new file called globals.js and replace $scope. with this.:

app.service('globals', ['$tm1Ui', '$location', function($tm1Ui, $location) {
    this.updateSettings = function (values, defaults, selections, parameter, options) {
    //Get user settings value from Settings cube

When this function was in our controller, we were using $scope to get the values of the variables defaults and selections. To be able to use the defaults and selections variables inside our service, we need to pass them as argument of the function in the service.

You can download the all code here:

How to call your service from a controller?

To be able to use a service in a controller, you need first to declare it at the top of the controller:

Then you just need to prefix the function with the service name. In the example below, the function initializeVariables is going to call the function updateSettings from the service globals:

$scope.initializeVariables = function(){
            $scope.values.user = data;
            globals.updateSettings($scope.values, $scope.defaults, $scope.selections, "Year", {"tm1Dimension":"Year", "tm1Alias":"Financial Year"});
            globals.updateSettings($scope.values, $scope.defaults, $scope.selections, "Version", {"tm1Dimension":"Version", "tm1Alias":"Description"});

How to call your service from a view?

From the view (HTML page), you can access only functions which are defined in the controller. To call a function from a service, you will have to create a link between the controller and the service using:

$scope.globals = globals; 

By doing so all functions defined in the globals service are now available from the view by using globals.functionName. In our example we trigger the function globals.updateSettings from the SUBNM when the value change using tm1-change:

  tm1-change='globals.updateSettings(values, defaults, selections, "Version", {"tm1Dimension":"Version", "tm1Alias":"Description", "value":data})'>     </tm1-ui-subnm>

You can download the example here (it includes the view, the controller and the service):

How to build your own directive

Canvas for TM1 comes with 30 directives (tm1-ui-dbr, tm1-ui-subnm...) which will help you to build quickly a page. If you combine these Canvas directives with the AngularJS Directives such as ng-repeat and ng-if, you can already achieve a lot. By combining these existing directives, you can build more sophisticated components. When you start replicating the same component in different pages, this is where you need to start thinking about bulding your own directive.

What is a directive?

A directive can be anything, it could be just an HTML component or a part of it that you want to reuse in multiple pages.

Why building your own directive?

  • Avoid duplicating the same code on multiple pages.
  • Reduce the maintenance into one file.
  • Create a reusable component for all your future projects.
  • Build a component that you can share with the Canvas community.

Building a directive is very easy, just follow these steps and you will be able to build your first directive in 5 minutes.

Directive structure

A directive can just be a JS file or with an HTML file combined. In this example we are going to build a directive which is going to show all attributes of an element. For this directive we will need a view (an HTML file) and a controller (JS file) to where we will define our directive:

Create the HTML components

The HTML page used in the directives is very similar to an HTML page you use on your main page except that you do not need to specify a controller:

The link between the view (display-attributes.html) and the directive itself (display-attributes.js) will be defined in our JS file.

For our view, let us just start with a simple row from which we will then define the contents we want to show:

<div class="row">
    View contents

You can download the full example here:

Create the directive definition:

If this is your first directive, the structure will be slightly different at the beginning. The structure of the "controller" used in a directive is going to be slightly different than the one used for a main view:

You can download the code here:

The Canvas server is going to load all the files in the JS folder. So you just need to put your new directive (JS file) in the JS folder and you will be able to use your directive in your page.

How to use the directive in a new page

To use the directive, you just need to call the HTML tag with the name of your directive. If your directive is called myDirective, the HTML tag will be <my-directive></my-directive>, in our example, we use the following code to call our directive:

<display-attributes tm1-instance="dev" 

Display data from an Excel file and then send it to TM1 via REST API

With Canvas, you can upload an Excel file into your browser, validate the data and then send the data into TM1 using the REST API. A sample showcasing has been introduced in Canvas 2.0:

  • http://localhost:8080/samples/#/sample/sample-sheetjs

This article explains in details how this sample work.

Enable SheetJS library

The first step is to enable the optional libray sheet JS, the steps are described in the following article:

Upload Excel File

1. Create upload button in the view

To upload an Excel file into your browser, you need to create an upload button that will handle and help us process the Excel file, within the client's browser. To do that you just need to add and to utilize the js-xls directive as follows:

When you upload an Excel file, the read function is triggered and if there is an error, the error function is triggered.

2. Create 'read' function in the controller

You then need to define the read function. This function takes the processed workbook by SheetJS as an argument, initializes the variables. We will then call our parseWorksheet function which will help us extract the data from the Excel file and show it into our Canvas page:

3. Get values from the cells

The parseWorksheet function loops through all rows and associate the cell values, to an object we will name as record:

For example: for every row, we know that the product name is in Excel sheet's column A. To then access the name for each row (A1, A2, A3, etc.):

var product = sht["A" +(r + 1)].v;

SheetJS creates an object and make the cells accessible via properties. A cell in Excel has different properties such as: the formula used, the actual display value, etc. But where we are interested in is in the property named 'v', which contains the value. 

We will then associate all values for a row to a record. Each record will have one Boolean property indicating if it was selected, the product name on that row, one value for each month on that row and an error message.:

var record = {
      row: r - startRow + 1,
      selected: true,
      product: product,
      m01: m01,m02: m02,m03: m03,m04: m04,m05: m05,m06: m06,
      m07: m07,m08: m08,m09: m09,m10: m10,m11: m11,m12: m12,
      error: error

Each record will then gets pushed into an array stored within the lists.records object:


Near the end of this function, the lists.records should contain a list of record objects. Lastly, the validate function is then called to check these records for any errors or missing information.

4. Validate the set of records

The validate function loops through all the records we have created and check if the product is in the Product dimension. If it is not, it updates the error message and set its Boolean property to indicate selection, to false (this will make the record be not selected on the front end):


5. Display the data into the browser

To display the records in the view, we use the ng-repeat directive in a table and iterate through the list of records we have prepared previously:

Send data into TM1 via REST API

Now that we have displayed the data in the browser, the last step is to allow the users to send this data to the right intersection of the TM1 cube:

1. Store all information in an object

We create first an array of CellPut request objects with the following properties:

  • [{value:'Test', instance:'dev', cube:'System Info', cubeElements:['Server Time', 'String']}]

We need one request per month:

2. Use CellSetPut

Once the array is populated, we just need to use one of the available Canvas scripting service for sending data into TM1 - $tm1Ui's service cellsetPut:

This service should then send a batch of cells into TM1 for update. In the case above, this should batch and send the cells within the row all at the same time into TM1 for updating.

If you prefer to send data into TM1 line per cell, use cellPut instead of cellsetPut:

  • cellPut(value, instance, cube, element1, element2, elementN)

Alternate Hierarchies in Canvas

Probably the most exiting feature in IBM Planning Analytics is alternate hierarchies. Using alternate hierarchies will enable you to potentially reduce the number of dimensions in your cube and therefore improve cube size and performance.

For example you could merge the Year and the Month dimension into one Time dimension:

Enabling Alternate Hierarchies

Alternate hierarchies are available since IBM Planning Analytics. To turn on alternate hierarchy, you need to add the new parameter EnableNewHierarchyCreation=T into the tm1s.cfg file and restart the TM1 instance.


Support for alternate hierarchies has been added from Canvas 2.0 with tm1-ui-dbr. To get values using alternate hierarchies, you can now use the following syntax within the tm1-elements:

  • "Hierarchy1::Element1 && Hierarchy2::Element2"

For example, to get the value from 2009 Jan on the Time dimension, you will need to use the following when referring to the intersection of these hierarchies:

  • "Year::2009 && Month::Jan"

An example of DBR with alternate hierarchies can be found in the Components page of the samples application:

  • http://localhost:8080/samples/#/sample/component/dbr-hierarchy


Another way to get data using alternate hierarchies is to use an MDX query. To specify an element on another hierarchy within the same dimension, use the following format:

  • [Dimension].[Hierarchy].[Element]

For example to get the element All Months which is in the Month hierarchy of the Time dimension:

  • [Time].[Month].[All Months]

One of the ways to show data from an MDX query within Canvas is using a Named MDX. For more advance scripting, you can also create your own MDX query and pass it on one of the Canvas scripting service - cubeExecuteMdx(). Additional information on this and other available Canvas scripting services can be found on you application's Help pages. 

Different Sources for Bursting Reports

This article details the different bursting methodology you can use to send and to generate different PDFs and/or Emails.


To enable Report bursting on your reports, select the following option on your Report action:


An option to burst these reports is provided via the 3rd tab:


From which the following options is shown when you click the plus icon on the right side:


Most types of bursting methodology allows you to define a placeholder or variable, which you can then use on your Emails or the URLs of your attachments which will then generate the PDFs.

For example, if we have defined a dimension subset as follows:


This means that the elements of the subset 'Burst' in dimension 'Region' will be available for each 'burst'. If for example the Burst subset has the following elements:


When the task runs, it will generate Emails and PDFs depending on how many iterations is available on your burst tab. On this case, since there are only two elements on the Burst subset, it will run two times. These elements are available and can be accessed by typing the following:


For example, in the subject of your email you can type like:


The effect of this will then be, for each burst, the placeholder {{region}} will then be replaced with the iteration value - first is with 'Finland', second is with 'England'.

You can do this on the various parts of the email and also in the URLs if you have an attachment.

Here are the other source you can use for your report bursting:

Dimension Subset

Selecting this burst type means being able to utilize the elements in a subset, into your emails or reports. 

Dimension MDX

This option provides you the option to retrieve the elements by executing an MDX against a dimension.

Cube View


As you have noticed, there is no input for placeholder. What it actually uses as placeholders are the names of the dimensions on the row of your Cube View! And this is how the cube view looks like:


With this, you can manage the bursting even via Cube View.


Using comma separated values as a starting point can also be used. This method allows you to use adhoc data. You can start by uploading a CSV into the provided box or create your own table of information:


Similar to Cube View, the placeholder name will be the header of the CSV, or the first row.

CSV Path

Instead of starting with a CSV file, you can provide a CSV path accessible in the server which will then get parsed when the task runs. This allows you to update the file prior to running the actual task, or have a TI for example, to re-generate the file prior to running this Report action. Note that you can also schedule a TI to run as part of this task (the others being Chores, and Wait times).

This is the options you will be provided with:


The files in here should then be accessible within the current Canvas' applications file directory as defined in the Settings. These are further separated by the instance name. So in the case above, the location will be at:

 <Canvas Application>\files\<instance>

Or as an example for our samples application that is for example installed in drive C,


And that is it!

Lastly, also note that you can mix and merge different bursting sources!

Burst PDF reports with the Task Scheduler

From Canvas 2.0 and up, there is now a Task Scheduler which you can use to schedule tasks. These tasks can contain TM1 processes, TM1 chores or Canvas pages. This article describes the steps to follow to set up a new task which is going to send by email one dashboard per region.

SMTP Configuration

Before scheduling a task, you should check if the SMTP configuration has been configured correctly. Canvas allows you to send emails, which it does by accessing an SMTP server. For most corporate networks, the SMTP server can accept any requests to send an email from servers within the same network.

This is an example of settings with an Office 365 accounts, you can test your settings with the paper plane button at the top right:

For more information about SMTP configurations, you can check the following Help article: Email settings.

Open Task Scheduler

There is one Task Scheduler per application, you can access it from the admin section:

  • http://<server name>:8080/<application name>/admin#/task-scheduler

For example, to access the Task Manager of the samples application:

Create a new task

In this page you will see the list of tasks. Click the Add New Task button at the top right: 

Add name and instance settings:

The name is the task name which will appear in the main page. There is a status button which is active by default. You then need to add the login information of the TM1 instance that will be used on this task:

  • Instance: TM1 instance name defines in the instances.json
  • User Name: TM1 user
  • Password: TM1 Password
  • Use CAM: Yes if you are using CAM Security
  • CAM Namespace: CAM Namespace

Add Schedule (optional)

The next step is to schedule the task, add a name for the schedule and then click the schedule button:

A pop-up window will appear with different options to choose from for scheduling your task such as every month, week, day, etc.:

Click the Check Schedule button to see when its next runs. Finally click Apply Schedule.

Add an action

There are different action that you can add such as run TM1 process, TM1 Chore, add a wait and run a report. In this example we will add a Report:

Then click on the icon to update the information about the report:

Email information

For each report you need to specify the email information. The description is used only in the Task Scheduler. If you burst multiple reports, you can choose between sending one Email for all reports or one email per attachment:

Report information

Attachments are the URL path to the Canvas pages. Canvas uses the URL to create PDF reports. If you want to send the report with the filter region, you have to make sure that the filter is in the URL, if not it will always print the report with the default filters. To learn how to dynamically update the URL, you can check the following help article: Update the URL before printing.

In this example, the bursting will be based on the regions. In the attachment name and in the url we use {{region}} to get the value of the region we are bursting:

Burst information

There are different ways to drive your bursting. You can either drive the bursting based on a Dimension Subset, Dimension MDX, Cubeview, CSV file or a path to a CSV file. You can mix and match these. You can also use these in the three special markups. Combining these can potentially help you manage the recipients by Region for example.

In this example we drive the bursting based on the Default subset of the Region dimension:

Each type of burst item presents you a placeholder variable which you can then use in the Email or Report tab. The placeholder name is the name of the variable you can then use in either Report or Email tab.

Click Save button

The last step is to save the task:

Burst report 12.png

Tasks list

Once save you will than see the new task in the Task List, you can then disable or enable them from this page:


Just click the execute button if you want to test your new task. In this example we receive one email with one report per region in the Default substet:

To send one email per report, in the Email tab click An Email per Attachment Burst, in the email subject you can use {{region}} to add the region name:

You can even customize the email body with some information about the region such as attributes or key KPIs. To bring this information you can either use DBRA or DBR with the following syntax:

  • [[ dbr:<instance>:<cube>:<elements> ]]

    o   i.e. [[dbr : dev: Product :Actual, 2012, Local, Finland, All Products by Category, Standard Cost]]

  • [[ dbra:<instance>:<dimension>:<element>:<attribute> ]]

    o   i.e. [[dbra : dev: Region :Finland: Currency]]

  •  [[ rundate:<date format> ]]

    o   i.e. [[ rundate: yyyy.MM.dd]]

For example in the example below, the email body will contain the Currency attribute, the Standard Cost and List Price value:

Tasks folder

All Tasks can be found in the \CWAS\webapps\<application name>\WEB-INF\config\tasks folder:

For the samples application:

  • C:\CWAS\webapps\samples\WEB-INF\config\tasks

The Task ID is found in the URL when a task is opened in the Task Scheduler:

This should help you find the file within the config/tasks folder if it needs to be moved into a different server, or for backing up purposes. 

To learn more about the different sources for bursting reports you should check the following article:


Refresh DBRs by Groups

By default when you input a value in a cell containing DBRs in Canvas, all the DBRs will refresh. From Canvas 2.0 and up, you can now group the DBRs so that when you input a value, only the DBRs of the same group as that input will be refreshed. This could greatly improve the responsiveness of your page.

For example if the table contains data from two different cubes, you could split the DBRs into two groups.

To group DBRs, you will need to add to the tm1-ui-dbr directive, the new attribute tm1-refresh-group="<group name>". For example if you want to call the group Group 1, it will look like this:

  • tm1-refresh-group="Group 1"

An example of the tm1-refresh-group button can be found in the components of the samples application.

  • http://localhost:8080/samples/#/sample/component/dbr-group-update

This page contains the DBRs which get the same value in TM1, if you input a value in the first DBR, all DBRs will refresh:

The DBR in the No Group block does not have any group defined:

   tm1-cube="General Ledger"
   tm1-elements='Actual,2011/12,Mar,Local,England,Sales and Marketing,Employee Benefits,Amount'>

When you write a value to this DBR it will update every other DBRs, even the one which are in a specific group.

However if you input a value in the first group DBR, you will see that it will only update the DBRs within that panel (all the these were given the same group for sample purposes). And in connection to this, the DBRs in Group 2 panel will not refresh:

If we have a look at the code, we can see that both DBR are in different groups:

This grouping also applies to the other DBRs within that panel, per group.


This feature should allow you to localize your inputs and updates, giving you further control on how to update your page.

When you input a value to a DBR and if it is part of a group, only the DBRs within the same group will be refreshed. If the DBR is not part of any group, as per normal cases, then all DBRs will be refreshed even the ones which are parts of a group.

Synchronizing SUBNM and URL

This article describes how to make the SUBNM component to sync with the URL whenever it changes. This will also describe how the SUBNM's initialization works.

The problem

Let's take the following page which has one SUBNM, every time the SUBNM is updated, the URL is updated as well.

One common issue that you might have, is when you print the report in PDF, instead of showing the current value (England), the value in the SUBNM always shows the default value (Total Europe).

To understand why, when you refresh the page or when you print the page, the value displayed in the SUBNM is always the default value, we will go through the code of the HTML page.

Define the default value

In the controller there are two variables:

  • defaults.region: the default value is set to 1 (Total Europe).
  • selections.region: The variable which is going to be updated from the SUBNM.
    $scope.defaults = {
        region: '1'

    $scope.selections = {
        region: $scope.defaults.region


In the HTML page, we have a basic SUBNM driven by the Default subset of the Region dimension.

  • tm1-default-element enables us to set the default value of the SUBNM to the selections.region.
  • ng-model is used to store the value chosen by the SUBNM in the variable selections.region.
  • tm1-change is used to trigger an action each time the SUBNM value is updated. Every time the value of the SUBNM is updated, the function setRegion is triggered.

The function setRegion is defined in the controller. This function updates the selections.region variable and update the URL:

$scope.setRegion = function(region){
  $scope.selections.region = region;
  if(region != $scope.defaults.region){
    // Set the URL parameter
    $"region", region);
   else {
     // If the parameter equals the default value remove it from the URL
     $"region", null);

We use to get the value from the URL. If there is a value in the URL, when you refresh the page, the selections.region will be set to this value:

        $scope.selections.region = $;

SUBNM Deep Dive:

When you refresh the page, the SUBNM initializes following these two steps:

Step 1: The SUBNM retrieves the elements from the subset.

Step 2: It initializes the ng-model (ng-model="selections.region"). It means that it initializes the selections.region variable with the first element in the subset (Total Europe).

Even if the selections.region value was defined in the controller, this value is overwritten by the SUBNM.

Step 3: The SUBNM checks the value defined in tm1-default-element attribute, selections.region. At this stage the selections.region is currently equal to Total Europe.

Each time you refresh the page the selections.region variable is set back to Total Europe (the first element in the subset).

That is why the variable used for the tm1-default-element and the ng-model has to be different.

The solution:

To do that, replace the selections.region with a new variable values.urlRegion:

  • tm1-default-element="{{values.urlRegion}}"


This new variable will be used only to update the URL and set the SUBNM default value.

In the controller, the URL is now driven by this new variable values.urlRegion:

    $scope.values = {
        urlRegion: $scope.defaults.region,
        $scope.values.urlRegion = $;
    $scope.setRegion = function(region){
        $scope.values.urlRegion = region;
        if(region != $scope.defaults.region){
            // Set the URL parameter
            $"region", region);
        else {
            // If the parameter equals the default value remove it from the URL
            $"region", null);

Now when you print the report or if you refresh the page, the SUBNM value will match the URL value:

Repeat more than one row in your table

This article describes how to repeat two rows for one item using the angular directive, ng-repeat-start:

The easiest way to create a table in Canvas is to use the angular directive ng-repeat. In a table, ng-repeat is going to repeat one row or one column per items. If you do not have lots of space in your dashboard showing too much information in one row might look a bit too squashed:

To make some room in your table, instead of showing everything in one row, you could create two rows per product, one with the alias and a second row with the year and months values:

Create one row using ng-repeat

Instead of using ng-repeat="product in lists.products" which creates one row for each product with:

  • One column for Product description.
  • One column for Year value.
  • One column per months.
<tr ng-repeat="product in lists.products" ng-hide="selections.zeroSuppress && product.yearTotal=='0'">
    <td style="font-weight:bold">
    <td ng-repeat="period in lists.periods">

We are going to use the Angular directives ng-repeat-start and ng-repeat-end. This is how our HTML structure will look like:

<tr ng-repeat-start="product in lists.products">
<tr ng-repeat-end>


The ng-repeat-start directive works the same as ng-repeat, but will repeat all the HTML code (including the tag it's defined on) up to and including the ending HTML tag where ng-repeat-end is placed.

In our example we use ng-repeat-start to create a first row with the product description and a small chart.

We actually created only one data column <td>, and we made this column the same size as the 13 columns of our table by using a <td> attribute, colspan="13"

<tr ng-repeat-start="product in lists.products" ng-hide="selections.zeroSuppress && product.yearTotal=='0'">
    <td class="padding-left" colspan="13" style="background-color:#E5E5E5">
        <div class="pull-right" style="width:15%">
                tm1-data-decimal="0" tm1-hide-controls="true" tm1-height="20" tm1-margin="{top:2,bottom:2,left:2, right:2}"
                tm1-legend="none" tm1-color-scheme='["#05668D", "#028090" ,"#00A896"]' tm1-axis-label-y=""
                tm1-state="{{product.yearTotal}}" tm1-axis-label-x="">
                    ng-repeat="month2 in lists.periods" tm1-label="{{month2.alias}}" 
                    tm1-instance="dev" tm1-cube="Retail" 
        <div style="width:85%;font-weight:bold"> 

Even if {{product["Description"]}} is on the left of the chart, it is good practice to put the chart first, because the chart determine the height of that section. We use the Bootstrap class pull-right to push the chart to the right:


Now, we use ng-repeat-end to create the second row which shows the Year and the months values:

<tr ng-repeat-end ng-hide="selections.zeroSuppress && product.yearTotal=='0'" style="border-top:none!important;border-bottom:none!important">
    <td style="font-weight:bold">
    <td ng-repeat="period in lists.periods">

This is how your table will look like:

You can use the Angular directive ng-repeat-start with any HTML components, more information can be found in the AngularJS website.

Customize PDF export layout with CSS and Bootstrap

One of the great feature of Canvas is that the style of your dashboard can be different regardless of viewing it in a web browser or as PDF format.

For instance, your dashboard could have a grey background in the browser but when you print it, the background could change to white and the buttons could be replace with text:

You can achieve this outcome with just a few lines of CSS and one bootstrap class.

Update background when printing

Inside the internal style sheet (<style> </style>), first define the grey background (#EAEAEA) of the page (page-view) and then to change the background when printing you need to define a new page-view background color inside the @media print CSS query:

        #page-view {
            background-color: #EAEAEA;

        @media print {
            #page-view {
                background-color: #FFF;

All CSS defined inside the @media print CSS query will be applied only when the dashboard will be printed into PDF.

Replace buttons

To replace the buttons with their values, we need first to hide the buttons using CSS and then we use a Bootstrap class to show the filters value only when printing.

To hide buttons when printing, you just need to add the following code inside the @media print CSS class:

.btn {
      display: none;

Note that the above code will hide all buttons in the page.

If you want to hide only a specific button, you will need to add an id to the HTML component so you can specify that out later. Take for instance a filter:

<div  id="filter" >

Now we then add the CSS code to @media print query:

#filter {

CSS Selectors:

Take a note also that we now use '#' instead of '.' in front of the id, we have just created. There should be lot of articles discussing CSS Selectors. To help on this article, just remember:

  • '.' means selecting all HTML elements with that CSS class. 
  • '#' means selecting all HTML elements with that ID.  

For those other sections that you only want to show during printing, you can use the visible-print-block Bootstrap class. For example, if we want to show the values of the filters on the section we have hidden previously, we can create another section and add the class there:

<div class="col-md-6 visible-print-block"> 
    <h3> Filters: {{selections.version}} - {{selections.month}} {{selections.year}} - {{selections.region}} - {{selections.category}}

All HTML element inside the visible-print-block div will be shown only when report will be printed into PDF.

To learn more about how to customize your report depending on screen size or devices, you should check CSS Media Queries page on the w3school website.

Configuring SheetJS (Optional Library)

Beginning with Canvas version 1.2.2, optional libraries will be included within assets folder but will need to be enabled before it can be used. This will involve:

  • Adding the link to the JS/CSS file in the header
  • Pushing the Angular module of the library into your application

Enable SheetJS

SheetJS a library that helps working with spreadsheets on the web! Check their website for more info. 

To enable the functionality in Canvas, do the following steps:

    1. Update WEB-INF/pages/header.library.ftl file with the following:

<script src="assets/js/optional/libs.opt.sheetjs.js"></script>

    2. Update WEB-INF/pages/header.script.init.ftl file by adding below line of code:


It is now enabled!

Create upload button

To check it out, create a simple Canvas Blank page with the following HTML line of code:

<js-xls onread="read" onerror="error"></js-xls>

And on the page's corresponding controller:

$ = function (workbook) {
      /* DO SOMETHING WITH workbook HERE */
$scope.error = function (e) {

You should be able to see on your HTML page, something similar to:

Clicking the "Choose File", will open up a Windows dialog to select an Excel file example to load. You will get the following response in the console showing the contents of the file:

That is it!

Page break in PDF report

When printing a report using Canvas, you can customize as much as you like the PDF output. There are lots of CSS properties that you can use such as CSS Media Queries to update for instance the background color of the PDF. The PDF can be very different from the HTML page.

One thing to be careful about when you print your page is the page break. To avoid a table or a chart to be divided between two pages, you can define in your HTML page where you want the page break to appear.

If you do not specify any page break in the HTML page when printing, your report can break anywhere:

This article describes how the page break works in the sample print:

  • http://localhost:8080/samples/#/sample/print

Create a CSS class

At the top of the page, first you need to create a new CSS class. In the example below we create a new class called other-pages with the property page-break-before:always:

        page-break-before: always;

page-break-before always insert a page break before an HTML element it is assigned to. There are other CSS properties that you can use such as page-break-after which insert a page break after an HTML element it is assigned to.

Add the CSS class to an HTML element

In the print example, we assigned the new CSS class to a div but you can add this class to any HTML element where you want the page break to happen:

<div class="row other-pages"  >

This div has now the CSS property to always break the page before, if you print the page you will see the page break just before the chart:

To add a third page to your report you just need to add a new div with the other-pages property:

<div class="row other-pages"  >
        Add a third page

It is important to notice that the page break will appear only in the PDF, in the HTML page, it will be like a normal div:

After printing you will see a new page:

Override the default number format

Canvas includes the accounting.js library. With accounting.js you can do advance formatting for number, money and currency.

The default number format is:

  • Thousands separator: ","
  • Decimal separator: "."

There are two ways to update the default format.

1. Override the format for the all application

The default number format is defined by applications. To update the default format for the all application, you need to update the client.startup.js:

  • C:\CWAS\webapps\<application name>\js\client.startup.js

For example to show "." as thousands separator and "," as decimals, you will need to add the following lines:

    accounting.settings.currency.thousand = '.';
    accounting.settings.currency.decimal = ',';

It is going to update the format for all numbers:

2. Override the format for a specific DBR

To override the format for a specific DBR, you need to add to the DBR the attribute tm1-accounting-settings-override. For example to show a "," as thousands, "." as decimal and a precision of 2, you need to add:

  • tm1-accounting-settings-override="{currency:{thousand:',',decimal:'.',precision:'2'}} "

Save the file and refresh the page, now you should see the DBR with the new format:

The attribute tm1-accounting-settings-override overrides the attribute tm1-data-decimal. For example if you have tm1-data-decimal="2" and  tm1-accounting-settings-override="{currency:{thousand:',',decimal:'.'}} " in the same tm1-ui-dbr:

It will show a value with no decimal because the default precision of accounting.js is 0. To see a precision of 2 you need to add precision:'2' to tm1-accounting-settings-override: