info

Canvas for TM1 at IBM Vision

This year at IBM Vision in Orlando, there will be two great examples of Canvas applications presented by Jabil Circuit and Apliqo C3.

Jabil Circuit

Jabil Circuit is building a refreshed web-based user interface for its 2,500+ Cognos TM1 users leveraging Canvas for TM1. Jabil will be presenting on stage, the session code is FPM-1205.

Apliqo C3

Apliqo C3 provides a pre-built Performance Management Solution with unified reporting, analysis and planning in ten different modules. They have chosen Canvas to rebuild their existing Cognos TM1 Web application into a whole new modern interface. The Apliqo team will be presenting on stage, the session code is FPM-1281.

Meet us at our booths 13 & 14

You can meet the Cubewise and the Apliqo team at their booths 13 & 14. Swing past our booths and get a selfie with Manny Perez, Cubewise CTO and the inventor of TM1!

Canvas examples

Responsive design with Canvas and Bootstrap

Excel vs HTML

The first thing you notice when you start building a web page is that the layout is not defined. You literally start from a blank page. First you have to create the containers before adding some contents. 

In Excel, when you create a new sheet, you can easily add some contents into the cells. The advantage is that you don't have to worry about defining the containers but the downside is that the layout is fixed. The size of the cells will always be the same no matter the screen-size. It is not responsive, on a small screen it is likely that you will have to use the scroll bar to see all the contents.

Building a webpage takes a bit more time at the beginning because you have to define the layout. The advantage is that it offers you the freedom to set your layout as you want. To help you to define a responsive design for your TM1 applications, Canvas includes the Bootstrap framework.

What is Bootstrap?

Bootstrap is a pretty nice HTML and CSS framework for developing responsive web applications. In other words it helps to create a layout which will adjust depending on the screen size.

The bootstrap grid system allows for up to 12 columns on the page. You can group multiple columns to create bigger containers:

For example if you want to show 4 columns of the same size in the same row, you will need to create 4 containers with a width of "col-md-3", you define a container by using div tag:

  <div class="row">
    <div class="col-md-3">
         Column 1
    </div>
    <div class="col-md-3">
         Column 2
    </div>
    <div class="col-md-3">
        Column 3
    </div>
    <div class="col-md-3">
        Column 4
    </div>
  </div>

This is what your page will look like, 4 columns with the same width:

If you work on a smaller device where the 12 columns cannot fit, instead of staying on the same row and use the scroll bar to see them, the columns will be pushed to the next rows:

Bootstrap allows you to manage the look and feel of your TM1 applications as you resize your web browser or switch from a tablet to a smart phone.

Dashboard with responsive design in Canvas

In the following video, you can see an example of dashboard with a responsive design:

With Canvas and Bootstrap you have the freedom to define the look and feel of your TM1 applications. You do not need to know Bootstrap or HTML before starting to build Canvas pages. Canvas comes with a complete set of samples which will give you plenty of ideas on how to build out your own TM1 applications, and if you want to go even further there are plenty of contents online such as forum and training courses.

TM1 Web vs Canvas - Timesheet application

Here's an example of how your TM1 application would like if you replaced TM1 Web with Canvas. For this example the TM1 Web and Canvas user interface have been built on top of the same TM1 cubes:

Moving to Canvas will give you many benefits such as:

  • Canvas is mobile ready: resize automatically to fit on any device.
  • Give your TM1 application WOW factor.
  • New kinds of applications that you didn’t think were possible: You can swap rows and columns in your table.
  • Columns are dynamic: hide/show as you like.

Is Canvas the best reporting tool for TM1?

TM1 has by far the most powerful calculation engine on the market, but it is also well known that it is missing a modern user interface. Lots of companies using TM1 for planning and reporting also use an extra Business Intelligence tool for management reporting.

Most of the BI tools on the market do not take full advantage of TM1. Even if it is possible to build beautiful dashboards on top of TM1 data, they are not built for TM1. The main issue is that they do not have direct access to TM1. Indeed, they require either an extra component to connect to TM1 or you'll have to extract TM1 data into flat files in order to process them. By adding an extra step between TM1 and your reports, you're losing the beauty of TM1 which is its speed.

CANVAS IS FAST

Canvas uses the TM1 REST API to connect to TM1 which means that it has a direct access to TM1 with no extra ETL required. Canvas optimizes access to TM1 further by batching queries and updates so that TM1 can process multiple requests in one go.

CANVAS LEVERAGES TM1

Canvas is built for TM1 by people who have worked with TM1. Canvas gives you access to all TM1 features:

  • Cell orientation
  • Read/Write
  • Attributes
  • Subsets
  • Hierarchy
  • Cell Reference
  • Numeric or String data

CANVAS IS MOBILE READY

Canvas includes responsive design libraries that enable you to support all types of devices. This modern web technology is smart enough to manage how it should appear on your browser. You have full control and can optimize your interface for mobile, tablets, the desktop or support all three:

SIMPLE CELL BASED DBR CONTROL TO RETRIEVE AND UPDATE TM1

Similar to TM1 and Excel, Canvas is a cell based application, each cells has its own DBR formula to retrieve and update TM1. If you're used to build TM1 reports in Excel, you will quickly learn how to build reports or data entry template in Canvas. 

Sophisticated planning application with Canvas

Building reports in Excel is a great way to build TM1 applications but you can easily reach the limits of Excel. Canvas will help you to extend the reach of your TM1 applications as you will now be able to easily build a modern and intuitive web front-end for your planning and reporting TM1 applications.

BUILD INTUITIVE DATA ENTRY TEMPLATE

There are many application features which can’t easily be authored in Excel, which business users want and need...such as search, sorting and filtering or table paging. All these features and more come as standard inclusions with Canvas.

IMMEDIATE WRITE BACK TO TM1

Canvas uses the same cell based logic as TM1 and Excel. Behind any value you'll find a DBR formula. When you input a value into Canvas, the value is immediately written back to the TM1 server using the TM1 REST API

DATE  PICKER

Inputting a date in TM1 has always been an issue. There are many different workarounds which are not user intuitive and can take the administrator a disproportionate time to implement and maintain. We can now easily avoid these issues by using a simple Date Picker in Canvas.

CELL VALIDATION

Canvas enables you to add a validation criteria to any input cell. When you input a value and it does not match the pre-defined criteria a validation error message will appear and the value will not be sent into the TM1 server.

AN EXAMPLE OF PLANNING WITH CANVAS:

The Salary Entry Template is an example of a planning input template and includes working examples of a Date Picker, Run TI, TM1 picklists, Data entry, dynamic show/ hide columns, search bar, Show additional rows and paging navigation:

Benefits of the Web over Excel

One of the main reason why TM1 is so successful is its Excel interface. If you're familiar with Excel, you will quickly be able to build advanced TM1 reports. Over the years many great TM1 applications have been implemented using Excel. Although Excel is great to build TM1 applications, it has its own limitations...

CITRIX IS REQUIRED FOR REMOTE ACCESS

It is a known issue that for TM1 Perspectives to work, you need to be located locally on the same local area network (LAN) as the TM1 server. The main advantage of the web over Excel is that it is very fast over a slow network. It does not matter where you are, with the Web you do not need to use Citrix or a Remote Desktop Protocol (RDP) to the TM1 server in order to access TM1. 

DISTRIBUTE YOUR APPLICATION TO MORE PEOPLE

With the Web, you can easily distribute your TM1 reports. It does not matter if a user has TM1 installed or not. You just need to send a link and then anyone can open it from any devices (computer, tablet or smartphone). 

DO NOT NEED TO WORRY ABOUT EXCEL VERSIONS

Managing an environment where users have multiple version of Excel can be difficult for both IT and TM1 Administrators. There are many versions of Excel (2007, 2010, 2013, Office365, etc.) and you can get it in 32 or 64 bit, Mac or Windows, etc. TM1 doesn't necessarily support all versions so you need to check for compatibility and possible issues on each.  

New web browsers like Internet Explorer (IE)/Edge, Safari, Chrome and Firefox support HTML standards enabling users and companies to decide on their browser of choice while receiving the same experience.

FREEDOM TO DO ANYTHING YOU WANT

Building reports in Excel is a great way to build TM1 applications but you can easily reach the limit of Excel. Active Forms and Excel can be limiting: 

  • Only a few charting options. 
  • The structured row/column is limiting and doesn't always reflect what a UI should look like.
  • The template (Images, fonts and color coding) is defined in each Excel spreadsheet. If the logo or color coding change you'll have to update all spreadsheets one by one.
  • Navigation in Excel is limited to Action buttons or hyperlinks.

 Once you have started using HTML, there is an infinity of libraries to chose from. Canvas for TM1 uses: angular-nvd3

With Canvas, you can allow the user to customise their own user interface:

You're free to set up a navigation menu as you like, for example create a dropdown list with a search button:

If you have reached the limit of Excel and you're looking for a modern web frontend to emphasis your TM1 application, Canvas for TM1 is the right tool for it.

Introduction to HTML with Canvas for TM1

WHAT IS HTML ?

HTML is a markup language used to describe the format of pages in a website. Behind every website, like this blog, you'll find HTML. If you want to learn it, there are lots of websites which explain the basics of HTML. A good starting point is w3schools. Learning HTML will provide you with a skill that will always be in fashion, the internet is not going to disappear anytime in the near future!!

Understanding HTML is one thing but if you want to add TM1 information to your web pages, it is easier said than done.

HTML AND TM1 REST API

Since version 10.2, IBM has released the TM1 REST API which is a new mechanism to access and to manage your TM1 application. The TM1 REST API is a very powerful way of accessing TM1, it is relatively easy to get information from TM1, especially compared to the old TM1 APIs. It is however designed to be a low-level mechanism for accessing TM1 which means you can do a lot of things with TM1 but some things that could be simple are hard to do. 

To bridge the gap between the low-level TM1 REST API and HTML, Cubewise created Canvas. Canvas is a web framework which enables you to focus on the HTML while Canvas deals with the complexities of the TM1 REST API.

You do not need to know HTML nor the REST API to start using Canvas. There are some pre-built examples which will show you how to extract information using functions that anyone familiar with TM1 would know, like DBR, DBRA, SUBNM, etc...

If you know how to write a rule or a TI, you will quickly learn how to use HTML with TM1.

CANVAS EXAMPLES:

DBR:

<tm1-ui-dbr 
    tm1-instance="dev" 
    tm1-cube="Regional Assumptions"
    tm1-elements="Actual,2012,Jan,13,Super Rate" >
</tm1-ui-dbr>

DBR (%):

<tm1-ui-dbr 
  tm1-instance="dev" 
  tm1-cube="Regional Assumptions" 
  tm1-elements="Actual,2012,Jan,13,Super Rate" 
  tm1-format-percentage="true">
</tm1-ui-dbr>

DBRA

<tm1-ui-dbra     
  tm1-instance="dev" 
  tm1-dimension="Account" 
  tm1-element="1110"
  tm1-attribute="Account Type">
</tm1-ui-dbra>

DBRA (READ ONLY)

<tm1-ui-dbra 
  tm1-instance="dev" 
  tm1-dimension="Account" 
  tm1-element="1110" 
  tm1-attribute="Account Type" 
  tm1-read-only="true">
</tm1-ui-dbra>

SUBNM (HIERARCHY):

<tm1-ui-subnm 
   tm1-instance="dev" 
   tm1-dimension="Account" 
   tm1-subset="Net Income" 
   ng-model="page.Selected2">
</tm1-ui-subnm>

SUBNM (RADIO BUTTON):

<tm1-ui-subnm 
  tm1-instance="dev" 
  tm1-dimension="Currency" 
  tm1-subset="Default" 
  tm1-radio-only="horizontal" 
  ng-model="page.Selected6">
</tm1-ui-subnm>

As you can see TM1 functions in HTML are very similar to TM1 functions in Excel.

Integrating TM1 Web into Canvas

Canvas for TM1 gives you the tools to quickly create a modern front end in HTML. We know a lot of effort has gone into building Excel reports and templates that can be published to TM1 Web so we have added support for including it in your Canvas application. 

Canvas uses the TM1 URL API to connect to TM1 Web, which means you can include any reports/templates published to your Applications folders. This includes TM1 Web sheets and any public cube views. It is important to point out that the experience will just be the same as though you had opened it in TM1 Web.

Canvas for TM1 gives you all the features of TM1 Web offered through TM1 URL API such as Data Spreading and Sandbox.

Leverage Canvas for TM1 to harness the power of TM1 Web and more. Show multiple TM1 Web components in the same web page! Show and interact with a cube view and a web sheet side by side.

Even better, you can link these TM1 Web components easily through Canvas for TM1.

For example, if you have a Year dimension defined in the titles of both components, you can simply update the display for both view and sheet through Canvas for TM1.

Why Canvas?

TM1 is famous for his speed, it has a world-class calculation engine. Over the years, its engine has been improved significantly with the introduction of the skipcheck algorithm, parallel processing and MTQ.

Building reports in Excel and then upload them into TM1 Web is a great way to build applications quickly with the existing skills of business users. There are limits however to how far you can take TM1 Web. Things like client side validation, dialog boxes and menu systems are difficult and sometimes impossible. 

The TM1 REST API was introduced in version 10.2 of TM1 enabling a developer friendly way of accessing all of the goodness in TM1 models. The REST API is however targeted at developers who have a programming/engineering background. 

Cubewise decided that we wanted to give traditional TM1 developers / system administrators the ability to build beautiful dashboards and planning applications using their existing knowledge. Canvas was born, a new way to build applications on top of TM1.

What is Canvas:

The Canvas platform is a combination of client side components and an application server that simplifies requests to TM1. Canvas has numerous components / controls that have been based on existing TM1 functionality, such as: DBR, DBRW, DBRA, SUBNM and Active Forms. The goal is to leverage the knowledge of TM1 and add to that mix technologies that are broadly supported in the web development world.

Canvas has its own simplified REST API that obfuscates the complexities that are present in the TM1 REST API. Examples:

  • Get a value from a cell: /api/dbr/<instance>/<cube>/<element1>,<element2>,...,<elementN>
  • Save a cell value: /api/dbs/<instance>/<value>/<cube>/<element1>,<element2>,...,<elementN>
  • Get the contents of a subset: /api/dimension/<instance>/<dimension>/<subset>

In 95% of cases you will never need access the API directly, instead you will use the Canvas client side components:

  • tm1-ui-chart: A flexible chart that uses a collection of TM1 cells as a datasource.  
  • tm1-ui-dbr: A TM1 cell value that can be displayed and updated (write-back) and supports pick lists and commentary.
  • tm1-ui-dbra: Display the attribute of the TM1 element.
  • tm1-ui-export: Export the contents of a HTML table to CSV.
  • tm1-ui-login: A component to allow a user to login to a TM1 server.
  • tm1-ui-process: Execute a TM1 process.
  • tm1-ui-repeat: Return a list of items either from a dimension, view or MDX statement that can be leveraged in other parts of the page.
  • tm1-ui-session: Display the session information for each TM1 instance/server.
  • tm1-ui-store: Store client-side settings in TM1 to allow users to customise their pages.
  • tm1-ui-subnm: Display a dimension or subset as a drop-down list or collection of radio buttons.
  • tm1-ui-web: Display TM1 Websheets or cube views within a Canvas page.