IT Lesson

In this post, we will see how to customize date input control for default value & for its format.

Thank you Sam Kumar( A community guy) for asking me to explore this and hope this solution might be useful in your project.

Though, there is a direct property of setting format for date in Date selector , that will not work when you set a default value for date type parameter.

Scenario : 

 Lets say  you have given "yesterday" as default value for date parameter and in Date selector if you give "dd-M-yy" format then you can able to see the selected date in that format BUT for the first time you will not find anything in Date selector because your default parameter value is "yesterday"

Software Setup : 

Problem statement : 

Default values like "today", "yesterday", "One week ago", "One month ago" should take 5-Feb-15, 4-Feb-15 and etc format in Date selector when dashboard loads ...

Step by Step Screenshot solution :

1)  Design the lay out for Date label & for Date selector (i.e., Html Objects for label & selector  - lets assume these html objects are Col1 & Col2).

2) Creating Date parameter : parameter name = date_param
    Go to components -> Click on Generic from left side -> Click on Date parameter
   Give default value as "yesterday" ( or today or other from the drop down).

3) Creating Date selector for Date parameter created in Step 2 : Date selector name = date_picker
  *    Components section -> selections -> Date input component
  *    Give parameter(date_param) for listeners & parameter section.
  *    Give html object for this (i.e., Col2 )

4) Test -1 : Default view

5) Now, Converting the format
  * Go to Advanced properties of Date selector (date_picker)
  * Write below code in Post Execution section 


function f(){
       var date1 = Dashboards.getParameterValue("date_param").toString();

    testdate = $.datepicker.formatDate("d-M-y",new Date(date1));

 //alert(testdate);

 document.getElementById(render_date_picker).value=testdate;

}

6) Save the dashboard and test it : Test -2

parameter default value is : yesterday

Thats it... We are done

Download Example here :  Click Me

NOTES :

1) From the stack overflow link below , as the CDE is already integrated with jQuery technology we have to use formatDate function for formatting the date. 
2) The code should go in Post Execution section. 
3) render_date_picker ----> render_ is the keyword for which we attach Date input component name. 
4) Code is independent for specific date control as it is going into Date input components own Post Execution section. 
for example : I have taken another date component and tested..

  5) Find jQuery supported formats using this link https://jqueryui.com/resources/demos/datepicker/date-formats.html

 References : 
1) http://stackoverflow.com/questions/3552461/how-to-format-javascript-date 
2) https://jqueryui.com/resources/demos/datepicker/date-formats.html

R&D links from Sam :-)
3)
http://stackoverflow.com/questions/3552461/how-to-format-javascript-date
4)
http://api.jqueryui.com/datepicker/#option-dateFormat
:-) Sadhakar Pochampalli :-) BI developer :-)

Sales Dashboard Demo in Pentaho CDE :


Drill down functionality on 2nd Chart (State wise individual details) which is a tabular display of data


Features:
1. Superb Layout (Back ground color, rows, columns structured based one)
2.Charts
      a. Pie Chart ( 1st row 1st 2 charts -SQL based charts & 3rd one is MDX based)

• Pie charts are converted to circulared
• Percentage values, actual values(featured any one of them we can remove)
• Drill down from 2nd pie chart to another dashboard(tabular display of data) - passing field value from one dashboard to another dashboard.

Export Functionality :
Provide "Button Component" in one of the columns in Lay out section as shown in figure.
Write below code in Expression
function f() { window.print() }

NOTE :
Currently it is exporting XPS .. i.e, the window will be exported..
If you have pdf installed for your printer , you can save your file in the PDF format.

Source code : Click this link
 NOTE: 
1) You need to change database connection details .
2) For 5.0.1 CE, you need to use the Import/Export(Upload/Download) facility to fetch the .zip file as project in the server.
3) For 4.8 CE, you need place the folder of the source code(not zip file) in pentaho-solutions folder.
4) Note that this example may not work with older C-Tools. It was developed on 13.06. If you deploy it in older versions you might get comparability issues.

References:
1. On drill down
i) http://forums.pentaho.com/archive/index.php/t-84586.html
ii) forums.pentaho.com/showthread.php?95413-confused-about-drilldowns-on-cde




Sadakar
BI developer

I believe in "Learning Never Exhausts The Mind" 

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

Hi Guys,
We can export the tabular display of data to excel or csv using Button component available in pentaho CDE.

Example:
1) Lay out section
Design your lay out as per your requirement.
For example find the image below.

2) Components Section 
 i) Select "Export Button" from the list of "Others"
ii) In the properties
Name : Component Name (ExportExcel)
Lable : Name that appear on your button (Eg : ExportExcel_
Component Name: your table component Name(Eg: tableData)
HtmlObject : the column name where you are placing this button (Eg :ExportExcel or Panel1)


NOTE :
Currently(23rd dec 2013 is the post written date) "Export button supports " Excel , CSV formats but not pdf.
In future pentaho may provide the functionality to export.

Formats Tested :
Excel:
xls ->Worked
xlsx -> Not worked
csv -> Worked

Need to figure out the following
1) Exporting to multiple pages
2) Pagination
3) Bulk data exporting  to Excel

Hi Guys,

A small tip on how to change/override  the default tool tip color and text in it.

Open your dashboard using Mozilla browser & make use of firebug tool as shown in below figure.

In the image just changed the css code.. for your particular dashboard you have to override the the css code by adding Resource(Either code snippet or External css file - you need to name the file if you take code snippet OR you need to locate the .css file if you take External file) ...

i.e., in Code snippet you have to write.


In the same way one can change/override the css code for your input controls and for other components(like table component)

:-) :-)

Future update in the same post : Need to find :
Dynamic tooltip back ground & border and text color
i.e., You can find tool tip of HTML5-Charts .. If you hover the mouse on green colored bar or slice of a chart the tooltip border has to come in the same color along with text included in the tooltip..

If anyone knows this tip already feel free to share your tip in the comment boxes...


Thank you.

Sadakar
BI developer.