Carrier Dashboard

CTools components ..

Workshop - Carrier Dashboard Components

Interactive dashboard components are the bridge between raw data and actionable business insights, transforming static visualizations into dynamic analytical applications that respond to user interactions, drive exploration through drill-down capabilities, and enable self-service analytics through intuitive filtering and parameter controls.

In this comprehensive workshop, you'll master the Components perspective of Community Dashboard Editor, learning how to configure sophisticated table components with trend arrows and data bars, create multiple chart types with custom styling and extension points, implement parameter-driven interactivity through listeners and selectors, enable click-based navigation that cascades changes across related visualizations, and provide powerful export capabilities that deliver data and chart images in multiple formats. Building upon the Wireless Carrier dashboard layout and CDA queries from previous workshops, you'll transform a static dashboard skeleton into a fully interactive analytical application that empowers business users to explore telecommunications traffic patterns, filter data across multiple dimensions, and export insights for reporting and presentation.

In this hands-on workshop, you'll experience the complete component configuration lifecycle, starting with basic table creation and progressing through advanced property configuration, pre-execution scripting for custom data formatting, chart component implementation with CCC (Community Chart Components) framework, parameter and listener setup for cross-component communication, selector configuration for user-driven filtering, click action implementation for interactive drill-down, and export functionality for data and visualization sharing. You'll learn how to work with CDE's extensive component property system, configuring both standard properties for basic behavior and advanced properties that unlock sophisticated features including dynamic parameter passing, custom JavaScript functions for complex calculations, cross-component communication through PostExecution functions, and parameterized queries using variables and JavaScript expressions.

As you work through the exercises, you'll master critical techniques including table column type configuration with data bars and trend arrows that provide visual analytics, sprintf formatting functions for number presentation, sort configuration for optimal data display, CCC chart property configuration including colors, legends, and compatibility versions, extension points that enable fine-grained control over chart rendering including slice radius, line width, and axis styling, and the creation of custom resources like bulletLegend that enhance visual communication through color-coded indicators.

What You'll Accomplish:

Table Component Configuration - Groups all table setup, data types, formatting, and sorting
Chart Types - Combines pie, line, and bar chart creation fundamentals
Extension Points - Consolidates all advanced chart customization techniques
Custom Resources - Covers bulletLegend and programmatic styling
Parameters & Listeners - Unifies the core interactivity architecture
Interactive Selectors - Groups all filter component configuration
Click Actions - Combines clickable charts and drill-down behavior
Export Capabilities - Merges all export functionality (buttons, popups, formats)
Expandable Rows - Consolidates the advanced table expansion feature
Integration - Brings everything together into cohesive dashboard experience

By the end of this workshop, you'll have transformed the Wireless Carrier dashboard from a static display into a sophisticated, fully interactive analytical application that demonstrates production-ready CTools component development.

You'll understand how to architect component relationships through parameters and listeners, implement user-driven exploration through selectors and click actions, apply advanced styling through extension points and custom resources, and provide comprehensive export capabilities that serve diverse reporting needs.

Prerequisites: Completion of Carrier Dashboard Layout and CDA workshops, Pentaho Business Analytics Server with CTools and CDA plugins installed, baseline_demo database with Wireless Carrier schema configured, familiarity with JavaScript for pre-execution and click action functions Estimated Time: 60 minutes

Let's start by adding the Table components to the dashboard.

Browse to: /Public/CTools Dashboard/Carrier-Dashboard-CDA/Layout
Click Edit under File Actions.

Click the Components Panel icon.
From the Components list, expand Standard, and then click Table Component.
Name this table component, in the Properties pane:

• Click in the Value for the Name property.

• Enter: mainTable.

• Press Tab or Enter.

Specify the data source, in the Properties pane:

• Click in the Value for the Datasource property.

• On the keyboard, press the down arrow.

• Select: tableQuery.

Specify the HTML object, in the Properties pane:

• Click in the Value for the HtmlObject property.

• On the keyboard, press the down arrow.

• Select: mainTableObj.

Save & Preview the dashboard.

The table doesn’t look exactly like the one in the sample dashboard. In the next several steps we will specify some of the display options, set the page length, add trend arrows and data bars, and format the columns.

Advanced Properties

Advanced Properties extend the functionality of the component with features, such as:

• dynamic parameter passing between components

• custom JavaScript functions for complex calculations

• cross-component communication through PostExecution functions

• parameterized queries using variables and JavaScript expressions

To view the advanced properties, in the Properties pane, click Advanced Properties.

Change or set the following properties:

Property

Value

Show Filter

False

Info Filter

False

Page Length

Length Change

False

Pagination Type

Simple

Specify the data types for the columns:

• In the Properties pane, click in the Value column for the Column Types property.

• In the new window, click the Add button seven times.

• In the Value columns, enter the following:

When entering the values just type the first few letters ..

Save & Preview the dashboard.

The data bar and trend arrow columns do not show the data values. We must add pre-execution code to display these values.

Add pre-execution code to display the data values next to the data bars:

• In the Properties pane, click the ellipsis icon to the right of the Pre-Execution property.

• In the Javascript Wizard window, enter the following code, and then click OK:

function f() {

    this.setAddInOptions("colType","trendArrow",   
    {
        includeValue: true,
        good: true
    });
    
    this.setAddInOptions("colType","dataBar",   
    {
        includeValue: true,
        width: 80,
        startColor: "#414344",
        endColor: "#414344" 
    });
}

Save & Preview the dashboard.

Great .. the data is now displayed .. however, it does need to be formatted.

Also take a look at Africa .. may wish to address unknown values.

Specify the column formats using sprintf functions:

• In the Properties pane, click in the Value column for the Column Formats property.

• In the new window, click the Add button seven times.

• In the text fields, enter the following:

Specify the sort order:

• In the Properties pane, click in the Value column for the Sort by property.

• In the Index and Order fields, type the following, and then click OK:

Save & Preview the dashboard.

Time for some Charts ..

• connections tested

• the layout has been confirmed

• chart content & types agreed

• dashboard functions included - export graphs & tables, buttons, downloads, etc ..

Let's start with the Pie Chart.

From the Components list, expand Charts, and then click CCC Pie Chart.
To name the pie chart, in the Properties pane:

• Click in the Value for the Name property.

• Type pieChart.

• Press Tab or Enter.

To specify the data source, in the Properties pane:

• Click in the Value for the Datasource property.

• On the keyboard, press the down arrow.

• Select pieChartQuery.

To specify the HTML object, in the Properties pane:

• Click in the Value for the HtmlObject property.

• On the keyboard, press the down arrow.

• Select pieChartObj.

To specify the width and height for the pie chart, in the Properties pane:

• Click in the Value for the Width property.

• Type 140 and press Enter.

• Click in the Value for the Height property.

• Type 140 and press Enter.

Specify the CCC version, in the Properties pane:

• Click in the Value for the Compatibility version property.

• Type 2.

• Press Tab or Enter.

The Compatibility version must be set because the latest version of CCC includes a different set of default properties.

Click on Advanced Properties
To specify the colors for the pie chart:

• In the Properties pane, click in the Value column for the colors property.

• In the new window, click the Add button two times.

• In the text fields, type the following and then click OK:

#176ad6
#de3700
#191b1e

To hide the values, in the Properties pane:

• Click in the Value for the valuesVisible property.

• On the keyboard, press the down arrow.

• Click False.

Extension Points

Extension points in Pentaho CTools are predefined locations in the CTools framework where developers can add custom functionality without modifying the core code. They act as hooks that allow you to extend and customize dashboards and components.

The main types of extension points in CTools include:

Component Extension Points: Allow you to extend existing components or create new components. These let you add custom properties, modify behavior, or create entirely new visualization types.
Dashboard Layout Extension Points: Enable modifications to the dashboard structure and layout system. You can add custom layout types or modify how components are arranged.
Lifecycle Extension Points: Hook into different phases of the dashboard lifecycle, such as initialization, refresh, or cleanup. These are particularly useful for adding custom logic that needs to run at specific times.

Customize the line chart with extension points:

• In the Properties pane, click in the Value column for the Extension Points property.

• In the new window, click the Add button.

• Complete the Arg and Value columns with the following, and then click OK:

Property

Value

slice_innerRadiusEx

30%

Resources

Finally we need to add a script that picks up the chart colors and adds them before the Legend.

To add a bulletLegend script, click Resources.
In the Properties pane, enter: bulletLegend.
Copy & paste the following script.
Save & Reload the dashboard.

 require([
    'cdf/AddIn',
    'cdf/Logger',
    'cdf/Dashboard.Clean',
    'cdf/lib/jquery',
], function(AddIn,Logger, Dashboard, $) {
    var bulletLegend = {
        name:"bulletLegend",
        label:"Bullet Legend",
        defaults: {
            /* default colors, replace in preExecution */
            colors: ["#F00", "#0F0", "#00F"] 
        },
        implementation: function(tgt,st,opt){
            
            Logger.log("Starting addin");
            
            var color = opt.colors[ st.rowIdx % opt.colors.length ],
                container = $('<div/>').addClass('bulletContainer'),
                bullet = $('<div/>').addClass('bullet').css('background-color' , color),
                //text = opt.textFormat.call(this, st.value, st, opt);
                text = st.value;
                container.append(bullet).append(text);
                $(tgt).empty().append(container);            
                        
        }
                
    };    
    Dashboard.registerGlobalAddIn("Table", "colType", new AddIn(bulletLegend));
});

The function calls inbuilt CDF libraries to add the bulletLegend in a <div> container. If you have changed the default table colors then you will need to update

Preview the dashboard.

From the Components list, expand Charts, and then click CCC Line Chart.
Name the line chart, in the Properties pane:

• Click in the Value for the Name property.

• Enter: lineChart.

• Press Tab or Enter.

Specify the data source, in the Properties pane:

• Click in the Value for the Datasource property.

• On the keyboard, press the down arrow.

• Select: lineChartQuery.

Specify the HTML object, in the Properties pane:

• Click in the Value for the HtmlObject property.

• On the keyboard, press the down arrow.

• Select: lineChartObj.

Specify the height for the line chart, in the Properties pane:

• Click in the Value for the Height property.

• Type 220 and press Enter.

Delete the width for the line chart, in the Properties pane:

• Click in the Value for the Width property.

• Delete the value and press Enter.

Deleting the width does not affect the chart on the dashboard, but it does affect other renderings of it.

Specify the CCC version, in the Properties pane:

• Click in the Value for the Compatibility version property.

• Type 2 and press Tab or Enter.

Save & Preview the dashboard.

Click on Advanced Properties.
Specify the colors for the line chart:

• In the Properties pane, click in the Value column for the colors property.

• In the new window, click the Add button.

• In the text fields, type the following and then click OK:

#176ad6
#191b1e

Change or set the following advanced properties:

Property

Value

dotsVisible

True

legend

True

legendAlign

Right

legendPosition

Top

plotFrameVisible

False

Save & Preview the dashboard.

Extension Point

The main types of extension points in CTools include:

Component Extension Points: Allow you to extend existing components or create new components. These let you add custom properties, modify behavior, or create entirely new visualization types.
Dashboard Layout Extension Points: Enable modifications to the dashboard structure and layout system. You can add custom layout types or modify how components are arranged.
Lifecycle Extension Points: Hook into different phases of the dashboard lifecycle, such as initialization, refresh, or cleanup. These are particularly useful for adding custom logic that needs to run at specific times.

Customize the line chart with extension points:

• In the Properties pane, click in the Value column for the Extension Points property.

• In the new window, click the Add button six times.

• Complete the Arg and Value columns with the following, and then click OK:

Arg

Value

dot_fillStyle

#fff

dot_shapeRadius

xAxisLabel_text

see code block below ..

line_lineWidth

dot_lineWidth

yAxisRule_strokeStyle

rgba(0,0,0,0)

xAxisRule_strokeStyle

rgba(0,0,0,0)

function(d) {
    var fin = pv.Format.date('%y-%m-%d'), 
        fout = pv.Format.date('%d');
    
    return fout.format( fin.parse(d.vars.tick.value) );
}

Save & Preview the dashboard.

Our dashboard is a bit static ..

Users need to be able to perform drill-downs, select parameter-driven filters, and perform real-time data updates.

Let's say we have a list of Regions that when selected updates the table data based on the Region selected. In CDF language, a parameter which holds the Region values is passed to a Component listener - in this case for a Table Component - which is then

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 components that listen to it are updated.

So we're going to:

• Add parameter components to a dashboard.

• Specify the parameters and listeners for dashboard components.

• Add select (filter) components to a dashboard.

Let's add some parameters to: pieChartQuery datasource.

Click on the Datasources Panel perspective.
Expand the MDX Queries group & select: pieChartQuery.

View the parameters used in the pieChartQuery, in the Properties pane:

• Click in the Value for the Parameters property.

• Take note of the three parameters.

• Click OK.

Add the sourceCallParameter:

• From the Components list, expand Parameters.

• Click: Custom Parameter.

To set the default value, in the Properties pane:

• Click in the JavaScript for the Property value property.

• Type: [“[Call Source.Source Geography].[All]”].

["[Call Source.Source Geography].[All]"]

• Press Tab or Enter.

Add the destinationCallParameter and monthParameter, repeat the previous steps using the following values:

destinationCallParameter

["[Call Destination.Destination Geography].[All]"]

monthParameter

["[Time.Standard Time].[2011].[Q1 2011].[January]"]

Listener

Set the parameters and listeners for the pieChart component ..

In the Components pane, click to expand the Charts group
Click: pieChart.

To specify the parameters for the pieChart:

• In the Properties pane, click in the Value column for the Parameters property.

• In the new window, click the Add button twice.

• In the first Arg columns, enter: monthParameter.

• Enter the first few letters to select monthParameter.

• Repeat the steps to add the destinationCallParameter and sourceCallParameter, and then click OK.

Specify the listeners for the pieChart:

• In the Properties pane, click in the Value column for the Listeners property.

• Click the drop-down arrow.

• Click to select the Select All checkbox.

• Click OK.

CTools selectors are interactive UI components that allow users to filter and manipulate dashboard data dynamically. They act as user input controls (like dropdown menus, checkboxes, or radio buttons) that can be connected to other dashboard components through parameter bindings.

When a user interacts with a selector, it triggers updates in connected charts, tables, or other visualizations based on the selected values. This provides a way to create interactive, drill-down capable dashboards where users can explore data through different dimensions and filters.

A selector can be a simple textbox where a user type free text, or more elaborated as a select list, a radio button or a date picker.

Add the sourceSelector, from the Components list, expand Selects, and then click Filter Component.
Customize the Selector with the following Advanced Properties:

Property

Value

Name

sourceSelector

Title

Source Region:

Parameter

sourceCallParameter

Value as ID

False

Datasource

sourceSelectorQuery

Show Icons

False

Show "Only" Button

False

Show Search Filter

False

HtmlObject

sourceObj

Execute at Start

True

Pre Change

see code block below ..

sourceSelector

 function f(selectedItem) {
    // Get ".children" on MDX if member "All" is selected 
    if (selectedItem.toString() ===  "[Call Source.Source Geography].[All]")
        this.dashboard.setParameter('sourceChildren', '.Children');
    else
        this.dashboard.setParameter('sourceChildren', '');
}

destinationSelector

function f(selectedItem) {
    if (selectedItem.toString() === "[Call Destination.Destination Geography].[All]")
        this.dashboard.setParameter('destinationChildren', '.Children');
    else
        this.dashboard.setParameter('destinationChildren', '');
}

Month

Name

monthSelector

Title

Select Month:

Datasource

monthSelectorQuery

HtmlObject

monthObj

Save & Preview dashboard.

We're going to use the clickAction function on the pieChart to set the value of one parameter (planTypeParameter), to trigger the update of another component (lineChart).

From the Components list, expand the Generic group, and then click Simple Parameter.
Name the parameter, in the Properties panel:

• Click in the Value field for the Name property.

• Enter: planTypeParameter.

• Press Tab or Enter.

To set the default value, in the Properties panel:

• Click in the Value field for the Property value property.

• Type: All.

• Press Tab or Enter.

Save the dashboard.

Now we need to add the parameter - PlanTypeParameter - to the lineChartQuery.

In the Datasources pane, expand the MDX Queries group, and then click to select the lineChartQuery.
To change the MDX query:

• In the Properties pane, click the ellipsis icon to the right of the Query property.

• In the Sql Editor window, replace the existing text with the following MDX query, and then click Ok.

WITH 
 SET DAYS AS DESCENDANTS(${monthParameter}, 1) 
MEMBER [Calling Plan].[Selected Plan Type] as Aggregate( [Calling Plan].[${planTypeParameter}] )
SELECT
 DAYS ON 1,
 {[Measures].[Calls], [Measures].[Users]} ON 0
FROM 
 [Call Corridor]
WHERE 
(${sourceCallParameter}, ${destinationCallParameter}, [Calling Plan].[Selected Plan Type])

Last few steps:

Add the planTypeParameter to the datasource

Enable - True - Clickable in pieChart component

Add listener

Add the new parameter and specify its default value:

• In the Properties pane, click in the Value field for the Parameters property.

• In the new window, click the Add button once.

• In the Name column, enter: planTypeParameter.

• In the Value column, enter: All.

• Click Ok.

In the Components pane, expand the Charts group, and then click to select the pieChart component.
Enable the clickable functionality, in the Properties pane:

• Click in the Value field for the clickable property.

• On the keyboard, press the down arrow.

• Select True.

To specify the clickAction function that will trigger the update:

• Click the ellipsis icon to the right of the clickAction property.

• In the Javascript Wizard window, enter the following code, and then click OK:

function f(scene) {
    var vars = scene.vars;
    var c = vars.category.value;
    var v = vars.value.value;
    Logger.log("Clicked on Category '" + c + "' , which has a Value of: " + v);
    dashboard.fireChange('${p:planTypeParameter}', c);
}

Inside the clickAction function we call dashboard.fireChange (param, value) with the name of the parameter to change and the new value for that parameter.

When a user clicks on a mark (a slice of pie, in this case), the above function is triggered (which triggers the update of all the components that listen to that parameter).

In the Components pane, expand the Charts group, and then click to select the lineChart component.
Add the extra listener for the lineChart:

• In the Properties pane, click in the Value column for the Listeners property.

• Click the drop-down arrow.

• Click to select the planTypeParameter checkbox.

• Click OK.

Select the extra parameter for the lineChart:

• In the Properties pane, click in the Value for the Parameters property.

• In the new window, click the Add button once.

• In the Arg column, type planTypeParameter.

• Click the ellipsis, and then from the Choose Parameter window, click to select planTypeParameter.

• Click Ok.

Save & preview the dashboard.

The final part is to leverage CDE export functionality to export charts and the main table.

The data can be exported in several formats, like CSV, XLS, XML and JSON (through CDA API calls done in the background).

If we have CDE/CCC chart components on our dashboard, we can also export the charts as PNG and SVG files (through CGG).

There's two components to add:

• Export Button Component– use this when you only need to export the data in one specific format (CSV, XLS, XML or JSON).

• Export Popup Component – use this when you need to export chart images (PNG and/or SVG format) or when you want to export the data in more than one format (CSV, XLS, XML and/or JSON).

To add the exportTableButton, from the Components list, expand Standard.
Select: Export Button Component.

Name the export button, in the Properties pane:

• Click in the Value for the Name property.

• Enter: exportTableButton.

• Press Tab or Enter.

To set the label of the export button, in the Properties pane:

• Click in the Value for the Label property.

• Enter: Export.

• Press Tab or Enter.

To define from which component we want to export the data, in the Properties pane:

• Click in the Value for the Component Name property.

• Enter: mainTable.

• Press Tab or Enter.

To select the HTML object, in the Properties pane:

• Click in the Value for the HTML Object property.

• On the keyboard, press the down arrow.

• Select: exportTableButtonObj.

Save & preview the dashboard.

Export Popup

In the final part of this workshop we're going to add an ExportPopupComponent to export the Number of Calls vs Number of Users chart (lineChart) data in CSV and PNG.

To add the exportChartPopup, from the Components list, expand Standard.
Select: ExportPopupComponent.

To name the export button, in the Properties pane:

• Click in the Value for the Name property.

• Enter: exportChartPopup.

• Press Tab or Enter.

Set the label of the export button, in the Properties pane:

• Click in the Value for the Title property.

• Enter: Export.

• Press Tab or Enter.

Define from which chart component we want to export the image, in the Properties pane:

• Click in the Value for the Chart Component to Export property.

• Enter: lineChart.

• Press Tab or Enter.

Define from which component we want to export the data, in the Properties pane:

• Click in the Value for the Data Component to Export property.

• Enter: lineChart.

• Press Tab or Enter.

Select the HTML object, in the Properties pane:

• Click in the Value for the HTML Object property.

• On the keyboard, press the down arrow.

• Select exportChartButtonObj.

Save the dashboard.

To use the export popup, we must view the dashboard (not Preview).

Open the dashboard, from the Browse Files perspective - Carrier-Dashboard-Export

The Table is currently being exported as .xls. Let's change this to .csv

Change or set the following advanced properties:

Property

Value

Chart Export Label

Export PNG

Data Export Type

csv

Data Export Label

Export CSV

Name for Data Export attachment

NrofCallsVsUsers

Post Execution

see code block below

function f() {
  // Remove the arrow element
$('.popupComponent div.arrow').remove();
}

Save and open dashboard in Browser.

One of the neat features that can be added is .. expanding rows.

So if you click on a row in the mainTable, the record will expand and display a barChart - Calls by Platform.

The barChart has 3 parameters & listeners - monthParameter, tableSourceparameter, tableDestinationParameter.

To add a main row that will encapsulate the content to be displayed on the expanded row, in the Layout Structure panel:

• Select the layoutColumn column under the layoutRow row.

• Click in the Add Row icon.

Name the row, in the Properties panel:

• Click in the Value field for the Name property.

• Enter: expandedContent.

• Press Tab or Enter.

Assign CSS classes to the expandedContent row, in the Properties panel:

• Click in the Value field for the Css Class property.

• Enter: WDhidden expandedContent.

• Press Tab or Enter.

Add a column for the displayed bar chart, with the expandedContent row selected, click the Add Columns icon.
Name the column, in the Properties panel:

• Click in the Value field for the Name property.

• Enter: barChartObj.

• Press Tab or Enter.

Data Source

Need to create a barChartQuery to populate the barChart ..

Click the Datasources Panel icon.
Expand MDX Queries, and select: mdx over mondrianJndi.
Name this data source, in the Properties pane:

• Click in the Value for the Name property.

• Enter: barChartQuery.

• Press Tab or Enter.

Select the BaselineDemo jndi connection, in the Properties pane:

• Click in the Value for the Jndi property.

• On the keyboard, press the down arrow.

• Select: BaselineDemo connection.

Select the Wireless Carrier Mondrian schema, in the Properties pane:

• Click in the Value for the Mondrian schema property.

• On the keyboard, press the down arrow.

• Select: Wireless Carrier schema.

Enter the MDX query:

• In the Properties pane, click the ellipsis icon to the right of the Query property.

• In the MDX Editor window, enter the following MDX query, and then click Ok.

SELECT
	Measures.[Calls] on 0, 
	[Platform].[Platform].members on 1  
FROM [Call Corridor]
WHERE 
(
${monthParameter}, 
	[Call Source.Source Geography].[${tableSourceParameter}], 
	[Call Destination.Destination Geography].[${tableDestinationParameter}]
)

Save the dashboard.

Parameters

Finally we need to pass some parameters - filters - based on:

Source

Destination

Month

Add the parameters and specify default values:

• In the Properties pane, click in the Value column for the Parameters property.

• In the new window, click the Add button twice.

• In the Name and Value columns, type the following, and then click Ok.

Name

Value

tableSourceParameter

All

tableDestinationParameter

All

monthParameter

[Time.Standard Time]. [2011].[Q1 2011].[January]

From the Components list, expand Parameters, and then click Simple Parameter.

Name the parameter, in the Properties pane:

• Click in the Value for the Name property.

• Enter: tableSourceParameter.

• Press Tab or Enter.

Set the default value, in the Properties pane:

• Click in the Value for the Property value property.

• Enter: All.

• Press Tab or Enter.

Repeat the previous three steps to add: tableDestinationParameter and set the default value to All.
Save the dashboard.

Chart

Finally .. configure the Chart & Listener components.

Click the Components Panel icon.
From the Components list, expand Charts, and then click CCC Bar Chart.

Name the bar chart, in the Properties pane:

• Click in the Value for the Name property.

• Enter: barChart.

• Press Tab or Enter.

Add a title for the bar chart, in the Properties pane:

• Click in the Value for the Title property.

• Type Calls by Platform.

• Press Tab or Enter.

Specify the listeners for the barChart:

• In the Properties pane, click in the Value column for the Listeners property.

• Click the drop-down arrow.

• Click to select: monthParameter, tableSourceParameter, and tableDestinationParameter checkboxes.

• Click OK.

Specify the parameters for the barChart:

• In the Properties pane, click in the Value column for the Parameters property.

• In the new window, click the Add button twice.

• In the first Arg columns, type monthParameter.

• Enter the first few letters of monthParameter.

• Repeat the steps to add the tableSourceParameter and tableDestinationParameter, and then click OK.

Specify the data source, in the Properties pane:

• Click in the Value for the Datasource property.

• On the keyboard, press the down arrow.

• Select: barChartQuery.

Specify the width and height for the pie chart, in the Properties pane:

• Click in the Value for the Height property.

• Type: 200 and press Enter.

• Click in the Value for the Width property.

• Type: 500 and press Enter.

Specify the CCC version, in the Properties pane:

• Click in the Value for the Compatibility version property.

• Type: 2.

• Press Tab or Enter.

Specify the HTML object, in the Properties pane:

• Click in the Value for the HtmlObject property.

• On the keyboard, press the down arrow.

• Select: barChartObj.

Disable the legend, in the Properties pane:

• Click in the Value for the Legend property.

• On the keyboard, press the down arrow.

• Select: False.

Advanced Properties

Click Advanced Properties.
Set the execute at start flag, in the Properties pane:

• Click in the Value for the Execute at start property.

• On the keyboard, press the down arrow.

• Select: False.

When a dashboard is loaded all its components are instantiated. The Execute at start property determines for each component if it should be executed or not at that moment. If the Execute at start flag of a component is False, the component will not be rendered.

Save the dashboard.

Enable mainTable

Finally .. enable the Expand option in the mainTable.

From the Components list, expand Others, and then click the mainTable component.
In the Properties pane, click Advanced Properties.
Set the expand on click property, in the Properties pane:

• Click in the Value for the Expand on Click property.

• On the keyboard, press the down arrow.

• Select: True.

Specify the object that encapsulates the content on the expand row, in the Properties pane:

• Click in the Value for: Expand container Object property.

• Enter: expandedContent.

• Press Tab or Enter.

Specify the parameters that will carry the column values to be passed to the expanded content:

• In the Properties pane, click in the Value column for the Expand Parameters property.

• In the new window, click the Add button.

• In the first Arg column, type 0.

• Enter the first few letters to select: tableSourceParameter.

• In the second Arg column, type 1.

• Enter the first few letters to select: tableDestinationParameter.

• Click OK.

The Arg column contains the column index and the Value column refers to the name of the parameter that stores its values.

Save & Preview the dashboard.

PreviousComponents

NextCommunity Graphics Generator

Last updated 8 months ago

Was this helpful?