PivotTable Example

Introduction

Visual element that allows you to design interactive pivot tables in various formats, both tabular and graphic.
Based on the web component PivotTable. Can be used to create forms like this one:

Definition in the IDE

Firstly, in the project, a client library was created called Widget Pivot Table, and its properties, value lists, events, and methods were defined:

The Pivot Table component was added to the project, and it uses the customPivotTable custom directory, which contains all the JavaScript sources required for the Pivot Table widget to function.
By using an Instant Developer component to contain our Pivot Table object, we can then export it and use it in other projects.
Inside the Pivot Table component is the Test Pivot Table form, and you have to refer to it in your application, even by just creating an instance of it in a procedure, to make sure that Instant Developer creates all the JavaScript files required for the component to function.

Client-side wrapper class

The files required for the component to function were copied into the custom directory of the Pivot Table component. A JavaScript file, WidgetPivotTable.js, containing the code of our wrapper class was also created.
The resources required for the JavaScript component to function will be loaded into the WidgetPivotTable.Init function:

• pivot.css
• pivot.min.css
• export_renderers.min.js
• jquery.min.js
• jquery.ui.touch-punch.min.js
• jquery-ui.min.js
• pivot.min.js
• plotly_renderers.min.js
• plotly-basic-latest-min.js

In the dist directory we find the language localization files that are loaded when the language is selected using the local property or by the browser settings if not specified.
In the Realize function, the div is created that has to contain the component, and it is assigned an ID with a name that is automatically generated so that it can then be searched.

Operation of the component

The PivotTable component can be viewed directly in a form frame or in a panel label.
To be able to enable any scrollbars on the frame that contains the component, if using it inside a label, you can add a specific CSS class, as in this code, to be put in custom.css for the application.

.pvtContainer .frame-content-container {
  overflow: auto !important;
}

Then, the CSS class pvtContainer must be set to the label that contains the PivotTable component.

The properties of the component are:

• cols
  List of names of the data source columns to be included in the pivot table columns, separated by commas.
• rows
  List of names of the data source rows by which to group the pivot table, separated by commas.
• vals
  List of names of the data source columns to run through the aggregation functions, separated by commas. You can specify one or two columns depending on the aggregator selected.
• renderName
  Used to select the display type for the pivot table data.
• aggregatorName
  Used to select the data aggregation function for the pivot table.
• colOrder
  Specifies the column order.
• rowOrder
  Specifies the row order.
• showUI
  If set to false, only the pivot table is displayed, without the interactive portion.
• unusedAttrsVertical
  If set to true, the unused columns will always be listed vertically. If set to false, the unused columns will always be listed horizontally. Leave empty for automatic handling.
• hiddenFromAggregators
  List of names of the data source columns that should not be listed as input for the aggregation function.
• hiddenFromDragDrop
  List of data source columns that should not be available for drag&drop as columns or as rows of the pivot table.
• local
  Localization code for the table interface and formats (for example, it, fr, etc.). The browser language is used by default.

The component events are:

• restoreConfig
  Event fired every time the pivot table changes configuration.
• onCellClick
  Event fired when the user clicks in the data table (tabular view only).

The component methods are:

• restoreConfig
  Used to restore a configuration read previously using the onConfigChange event.
• addData
  Used to add a data row to pass to the component.

Notes

Integration of this JavaScript component has only been tested to function with the RD3 graphics engine.