UI Overview

Visual approach to dashboard creation ..

Pentaho CTools Community Dashboard Editor (CDE) is a web-based dashboard design tool that's part of the Pentaho Business Intelligence suite's community tools. It enables users to create interactive, data-driven dashboards without requiring extensive programming knowledge, though some familiarity with web technologies (HTML, CSS, JavaScript) is beneficial.

CDE operates on a layout-components-datasources architecture. The layout defines the dashboard's structure and appearance using HTML and CSS. Components are the interactive elements like charts, tables, and filters that display data and enable user interaction. Datasources define how data is retrieved and processed, supporting various sources including SQL databases, MDX queries, Pentaho Data Integration transformations, and custom JavaScript functions.

What sets CDE apart is its flexibility and extensibility. Users can leverage pre-built components from the CTools family (including CCC charts, select components, and filter components) while also having the freedom to create custom components. The tool supports real-time dashboard updates, parameter passing between components, and complex data manipulations through its robust JavaScript API.

To create a New Dashboard

Log into Pentaho Server
In the Pentaho User Console (PUC) and select from the menu: File -> New -> CDE Dashboard.

Menu options include:

Menu

Description

New

Select to create a new CDE dashboard. When clicked, a blank dashboard appears.

Save

Select to save the CDE dashboard which you are currently editing. It is recommended that you continuously save your work while editing. If you have not previously saved this dashboard, the Save as dialog box displays. Choose the location to save your new dashboard and enter a file name for it.

Save as

Select to save the current CDE dashboard in a new location and/or rename it. You can also modify the title and the description. When clicked, the Save as dialog box displays. Choose the location to save your new dashboard and enter a file name for it. In addition, you can choose to save your work as a Dashboard or as a Widget. For now, it is recommended you keep the default option of Dashboard.

Reload

Select to refresh the CDE interface to the last saved state. This is useful when you make changes which are not immediately reflected after saving, or when you want to discard your most recent changes and return to the last saved state.

Settings

Select to define settings for your dashboard, such as metadata information, HTML templates, and dashboard type. You can do the following:

• Add or modify the Title and Description for your dashboard

• Set the Author for your dashboard.

• Select the Style (HTML template) which you want to apply to the dashboard. Clean is selected by default.

• Select the Dashboard Type. Bootstrap is selected by default.

• Click the RequireJS Support check box. By default, this check box is cleared.

The CDE Perspectives toolbar displays in the top-right of the window. Use this toolbar to switch between the Layout, Components, and Data Source perspectives, and to preview your dashboard.

Toolbar options include:

Icon

Name

Description

Layout

In the Layout perspective, you can design the layout of your dashboard from scratch or by using a CDE template. While defining the layout you can apply styles and add HTML elements as text or images.

Components

In the Components perspective, you add and set up the different components that make up your dashboard. These components are the central elements of a dashboard. They link the layout elements with the data sources.

Data Sources

In the Data Sources perspective you can find various types of data sources which you can employ in a dashboard. These allow you to access the data that you want to use in your dashboard.

Preview

Select to test the look and feel as well as the behavior of your dashboard as you are working. When selected, your dashboard opens in the Preview window.

Due to the inclusion of Bootstrap libraries, the configuration of the columns in the layout is simple. The columns in a row must occupy 12 spans, such that in a single row you could have the following sample configurations:

• Twelve columns of size 1 (12x1)

• Two columns of size 6 (2x6)

• Three columns of size 4 (3x4)

• One column of size 8 and one column of size 4 (8+4)

Whatever your configuration, the spans must add up to 12 for Bootstrap. Other CSS libraries may have different rules. For instance, in the case of the Blueprint library, the total number of spans in a column is 24.

You can assign the width of a column across multiple devices where you will draw the components through the properties:

Visual and Data Components

Components are displayed in your dashboard, including text boxes, tables, charts (such as pie, bar, and line), selectors (such as radio buttons and date pickers), OLAP views, and reports.

Parameters

Parameters represent values which are shared by the components. These are essential for the various types of component interaction.

Scripts

Pieces of JavaScript code which let you customize the look and feel or behavior of other components.

Components simplify the building of dashboard objects. A component is a simple JavaScript object which encapsulates all the object properties and behaviors, allowing for a finer degree control of the dashboard's components. For example, a component can adjust its behavior when reacting to changes in dashboard parameters that affect it.

These adjustments in behavior can be defined before, during, and after the component's execution, which allows components to interact with each other.

Customizing components allows you to personalize the look and feel of the whole dashboard.

Property

Description

Type

This property assumes a variety of values such as ComponentsParameter, ComponentsSelect, and ComponentscccBarChart. You cannot edit this property through the CDE interface. It is set on the backend.

Name

This property is the identifier of the component. It is recommended you use camel case when entering a name for a component.

Parameter

For components such as the Select component, the Filter Component and others where user input is required, this field is where the input is stored for later use throughout the dashboard.

Listeners

This property is composed of the dashboard parameters which may trigger a component’s reaction. These parameters allow for interaction between components, allowing you to control when some components will execute and in which order. For example, you may have a component which will only be executed after a change to a parameter which the component is listening to. A component can have more than one parameter in the Listeners property, and a parameter can be listened by more than one component. Every time the parameter changes, all the components which listen to it are updated in the dashboard.

Parameters

On the case of xAction components, PRPT components, Query components, and others, some parameters may be passed by specifying the desired value in an array of arrays.

HtmlObject

This is the ID of the HTML object on which the component will be appended to. This ID corresponds to the name you attributed to the HTML column element onto which you want to place the component.

Priority

Use this property to control the order in which the dashboard elements are executed. By default a component’s priority is set to 5. The lower the number, the higher the priority the component has. Note that components with the same priority value may not be executed at the same time, so if order of execution is critical, assign priority.

Execute at Start

This property controls whether or not the component will execute when the dashboard loads itself. By default, this property is set to True. In the cases where this property is set to False, the component will only be executed when a change occurs in one of the parameters which the component is listening to.

Pre Execution/Post Execution

These functions are executed before/after the component is initialized, updated, or presented to the user. If the preExecution returns false, the component is not updated.

Pre Change/Post Change

These properties are for component selectors. Before/after the input value is updated, these functions are executed. This property is useful for validating user input.

Post Fetch

This function is involved if the update stage calls queries. Once the query is executed, the data returned is passed to the postFetch function. The component is rendered only after the execution of this function.

PreviousCommunity Dashboard Editor NextCarrier Dashboard

Last updated 8 months ago

Was this helpful?