IT Lesson

Hi Guys,

Guys, who work on Pentaho C-Tools should be up to date yourself on its new releases. The latest stable version of C-Tools in this week is : 14.07.29. (blog written date : 4th Aug 2014)

I dont remember exactly, but Pedro somewhere on social networking has informed the community that the C-Tools are up-datable over the time for every 6 weeks.

This post will cover my sample work out on 14.06 & 14.07 releases especially about the column properties & built in bootstrap panel.

These new features will reduce writing Bootstrap html code in HTML section either for rows or columns & increase the development speed of project. 

We get information like below for columns with bootstrap latest releases..

Features Bootstrap 3 Grid System	Extra small devices Phones (<768px)	Small devices Tablets (≥768px)	Medium devices Desktops (≥992px)	Large devices Desktops (≥1200px)
Max container width	None (auto)	750px	970px	1170px
Class prefix	.col-xs-	.col-sm-	.col-md-	.col-lg-
Max column width	Auto	~62px	~81px	~97px
Gutter width	15px on each side of a column (i.e. 30px)

Bootstrap is of 12 columns based grid system ..and the above table implementation in CDE is similar to below
i.e.,
Large Devices =3
Medium Devices=6
Small Devices=9 or 12
Extra Small Devices=12
 

14.07 added bootstrap panel concept in its Layout section & it can be implemented as shown in below image.

Notes:
# Find Bootstrap Panel icon on the Layout Structure tool bar.
# Click on it (for a column) and itll be having 3 sections. They are Header, Body & Footer.
# Give all the properties(for instance, name, height, corners and etc).
# Similarly for the Body & Footer.
# You can remove any of the 3 sections for Bootstrap Panel.. highlight the section & click on X mark on the tool bar of Layout structure.

Sample Layout Design Download : Click Me
Deployment :
1) Your environment should be of 14.07.29 version of C-Tools or later before deploying this example.
2) Pentaho Server version : 5.x version.
3) Upload example using Uploader utility of server.

Sample output:
Extra Large Devices :

Medium & Small Devices:
 


References :

1) http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php

2) http://scotch.io/bar-talk/understanding-the-bootstrap-3-grid-system