Pentaho CDE: How to create a custom component

Pentaho is a great suite for business intelligence tasks. It is composed of different tools that allow us to do data mining, file transformation (ETL), and business reports. And like other tools, there is an Enterprise version and a Community version.

Within the Business Analytics platform, there is the Community Dashboard Editor (CDE) which is a great tool for creating business reports. And it will be about this tool that we will see an example. We will rely on the creation of our own dateTimePicker to see several details. beyond the basic creation of components.

As we have said, CDE will allow us to create reports easily, dividing it into three main sections well-differentiated:

Layout Panel: Allows us to generate the HTML structure of our report. And it is mainly based on Boostrap.
Components Panel: Allows to associate components predefined by Pentaho to the structure created in the previous point. From input fields to different kinds of graphics.
Datasource Panel: Allows you to create data sources from many different sources: SQL, NoSQL, XPath, Javascript, Mondrian, etc.

Something that we will see in this example that at least the CE version, has many predefined components. But there are certain things, apparently basic, that can’t be done easily. And there’s not much information either, hence the creation of this post.

Our example will be based on the fact that we want to create two input fields that allow us to indicate a range of dates. If we only want dates, we can use the Date Range Input Component predefined. But if we want to be able to select both date and time, we’ll have our first problem. Since the component only allows us to choose dates.

What can we do then? We can create two input fields where we check the format of the date with the time to select. Or we can create our own component with other javascript libraries. In our case, we will use this datatimepicker. The creation will be divided by an HTML code and a JavaScript code include in a component.

We’ll start with the Layout Panel. Here we can create rows and columns. We can customize them by indicating a style, width, height, and several other details. And on top of the columns, we can add HTML elements or add images.

In the component we can add the following code:

The next step will be to add the JavaScript code. This could have been added in the HTML component, but for clarity’s sake, we’ll add it through a Function component in the Components Panel.

The code is the one that already comes with the example of the datatimepicker page itself. But if we want it to work then we need to be aware that the dashboards use RequireJS to load the JavaScript modules. So in order to use our library correctly, we’ll need to include it through the requireJS configuration.

Just like that, and in two simple steps, we will have our own component.