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.