Pentaho Tools :

Pentaho C-Tools(CDE,CDF,CDA),Pentaho CE & EE Server,OLAP-Cubes,Analysis using Pivot4J, Saiku Analytics, Saiku Reporting, Ad-hoc Reporting using Interactive Reporting Tool,Dashboards,Reports using PRD, PDD,Data Integration using Kettle ETL,Data Mining usign WEKA,Integration of Servers with Databases,Mobile/iPad compatible Dashboards using Bootstrap Css,Drilldown dashboards,Interactive Dashboards

Tuesday 5 August 2014

New Features in 14.06.18 & 14.07.29 - Quick Introduction of Bootstrap Column Properties & Bootstrap Panlel in LayOut section of Pentaho CDE

Hi Guys,

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

I don't 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 it's 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 it'll 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 :


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

No comments:

Post a Comment