ARTICLE :
 

Pentaho CDF BI CTOOLS: Community Data Editor(CDE) Demo with MySQL

by Yogaraj Khanal on October 26th, 2011

Introduction

This article demonstrates the use of CDE/CDA,the most important and core part of Pentaho BI CTOOLS .CDE/CDA allows you to build real time dashboards by their feature reach UI editor.

Background

Pentaho is the open source business intelligence development platform which has different components integrated with it. You have both open source and commercial version available to support your BI need. This article is scoped to help open source business intelligence developer use CDE/CDA out of CTOOLS from Pentaho BI platform.

Detail

I assume you are using CTOOLS installer to reach upto this point and setup sample databases in MySQL like FoodMart and Sakila for our demo purposes so that we are fully open source.If not please follow these articles to reach to this point:
http://codeissue.com/articles/a04e9f873bd492e/pentaho-cdf-bi-ctools-community-data-access-cda-demo-with-mysql


Fig I: Pentaho BI with CTOOLS

You just need first article to reach up to this stage but others I just pointed for your references if you are stuck reaching to this stage.

If you want to learn more about what is CDE and what features it has and how it can help your BI needs.
Visit this website:
http://cde.webdetails.org/

If you want to learn more about what is CDA and what features it has and how it can help your BI needs.
Visit this website:
http://cda.webdetails.org/
I am trying to use same query here SELECT * from Days as in our previous examples with Saiku and CDA from FoodMart database to keep things simple. After you follow the steps in CDA article you should be able to see CDA screen like this:


Figure II: Pentaho CDF with CDA implemented

There are three major components for creating any Dashboard using CTOOLS. First part is Data Source part that we completed with CDA.

Now let’s work on Layout part .To keep things simple I will just build a table component with title. So steps described are for Layout part.



Please see the yellow highlighted section which are important once you play around in those section you will figure it out if you are familiar with HTML/CSS/JS if not no big deal go to w3schools to get you started.


Figure IIIa: Layout

The above screen shot allows you to add external CSS resource that you can use for whole dashboard.


Figure IIIb: Layout

Once you give name it will ask you where do you want to save and you can point the project location where you are working as shown is screen shot.


Figure IIIc: Layout

The screen able lets you add HTML element to your dashboard where you can put title name.


Figure IIId: Layout

I have added the title using HTML element <h1>.. </h1> by clicking highlighted yellow button.

Now let’s add the space for our data table that we will connect from CDA.


Figure IIIe: Layout

It completes our layout part simple isn’t it? Let’s save and preview which is really important for debugging.


Figure IIIf: Layout

This is what we see and that’s right because we didn’t do anything interesting except adding title which is also important so that we see something.


Figure IIIg: Layout

I have clicked on the resource css file we added just to give red background to title. You can edit this file to give styles for different part of your component.


Figure IIIh: Layout

This is what we see after I do preview you can pad left right etc change font styles and colors the way you want using the CSS editor above. These concludes our Layout part just added two rows one for title one for table component and a CSS file to give some colors of life.


Figure III: CDE Component configuration

Please make sure you understand and implement all yellow part those are the touch points. All the three properties are required. Intellisense will detect the layout and data source if you have given names and saved it.

Now Save and Preview we are done.


Fig IV: Preview dashboard after we perform above step.

This is simple tutorial intended to connect CDE/CDA to build a simplest demo dashboard.CDE has lot of features and components which will enable you to build real high class dashboard and they have very good performance. I hope it gives you direction to explore more.


Fig IV: Final finished dashboard in PUC.

Conclusion

This article demonstrates how you can use Pentaho BI CTOOLS CDE/CDA with Pentaho CDF.Keep checking codeissue.com for my next article as I explore more in open source BI. Please free to send me your comments, suggestions and questions through this website.

References

http://cde.webdetails.org/
http://cda.webdetails.org/
http://ctools.webdetails.org/
http://type-exit.org/adventures-with-open-source-bi/2011/06/creating-dashboards-with-cde/

Author:

Profile Photo
Yogaraj Khanal
Date: October 26th, 2011

Comments:



Profile Photo
Commented by Vgv Cruz
on March 15th, 2012 at 15:59:08 EST
hello
Thanks for the tutorial, but I have a doubt as I can do to customize a specific cell for example I have my column but I want a Total cell in that column can tell you that if the value of that cell is greater than 35 paint the cell or green text.

I hope you can help

Saludos


Profile Photo
Commented by Yogaraj Khanal
on March 23rd, 2012 at 22:14:46 EST
I believe that you have to implement custom java script to achieve that.
If you want basic statistics to be implemented out of the box like sum,avg,total,min,max etc try Saiku reporting in the link below.

Profile Photo
on August 30th, 2014 at 17:38:03 EST
Thank you again.