Pentaho CDE with BootStrap - A quick sample

Let's go BootStrap

The latest versions of CDE now have Bootstrap support. This was an initial submission by Marcello Pontes, from Brazilian partner Oncase, and improved by Harris Ward and team from Ivy Solutions.

Gotta love when it's the community dictating a product roadmap!

Diethard Steiner did a great blog post explaining how it work. And I'm going to do another one, because this is that big. I'll show how to adapt an existing dashboard to Bootstrap - it's very easy

Blueprint or Bootstrap?

Both blueprint and bootstrap are css grid frameworks, and that's the foundation of CDE. Blueprint is still incredibly useful and stable, but bootstrap offers two features that I'm very interested in:

• Adaptive Layout
• Responsive Layout

Basically, the ability to adapt, not only to smaller devices - having the contents stacking - but also to larger devices, like wide screen TVs.

Working with the blueprint framework requires some different concepts, but not many, as you'll see.

Converting a dashboard to bootstrap

I'll pick the sample dashboard that comes with CDE.

Let's follow this steps:

1. Save as a different name. Use the same directory since it references resources in that directory

2. In the Settings screen, change the Dashboard Type to Bootstrap. Since there's a lot of very specific CSS on the WDDocs style, change it also to Clean


3. One of the fundamental differences between blueprint and bootstrap is that the later uses a 12 grid layout instead of a 24 grid layout. Simply put - go through your columns and divide the span size by 2 :p

4.  If you preview it, you should be able to see almost the same thing you had before.

5. Not the difference is... Try to scale your browser like if it was a tablet or a phone. See the difference?

6. Now there's one more trick. Let's add a javascript component to the dashboard to make it fluid on very large screens. Add this code

7. And now you have it!

What's next?

I think this is great stuff. I'll let it mature a bit, but I see this, even in the short term, becoming the default. There are a couple of things I want to do though:

• Allowing the options on the layout tab to be pluggable. Currently most of the options are relevant to blueprint but not to to bootstrap. We need to add those options here
• Add the option to be fluid without a script
• Add support for Panels and other components
• Allow duplicating layout entries in CDE - a long requested feature...

More stuff soon!