Pivot Table Component Configuration via FlashVars

Flexmonster Pivot Table configuration is possible to be set via FlashVars. (Alternative way - via XML)

Pivot uses SWFObject library for inserting in HTML, so all FlashVars examples use it's syntax.

Flashvars configuration is responsible for the following Pivot table aspects:

1. Data Source Configuration
   1. CSV
   2. OLAP
2. Predefined Report Configuration (Default Data Slice)
3. UI Configuration
   1. CSS
   2. UI Elements Enabling/Disabling
   3. Values Formatting

Flexmonster Pivot Table supports different data sources, such as: CSV files, OLAP, XML from custom web services.

One of this blocks is required to run Flexmonster Pivot Table.

CSV

To configure CSV data source for Pivot Table you should:

1. Set the data source type:

   so.addVariable("dataSourceType", "CSV");

2. Set the path to CSV file:

   so.addVariable("dataSourceType", "CSV");
   so.addVariable("filename", "data/data.csv");

3. Optional: set data delimiter in CSV file (default is comma)

   so.addVariable("dataSourceType", "CSV");
   so.addVariable("filename", "data/data.csv");
   so.addVariable("fieldSeparator", ",");

OLAP

To configure OLAP data source for Pivot Table you should:

1. Set the data source type:

   so.addVariable("dataSourceType", "OLAP");

2. Define Microsoft Analysis Services info:

   so.addVariable("dataSourceType", "OLAP");
   so.addVariable("dataSource", "Provider=MSOLAP; Data Source=extranet;");

3. Define the catalog name from the dataSource:

   so.addVariable("dataSourceType", "OLAP");
   so.addVariable("dataSource", "Provider=MSOLAP; Data Source=extranet;");
   so.addVariable("catalog", "Adventure Works DW Standard Edition");
   

4. Define the cube name from the given catalog:

   so.addVariable("dataSourceType", "OLAP");
   so.addVariable("dataSource", "Provider=MSOLAP; Data Source=extranet;");
   so.addVariable("catalog", "Adventure Works DW Standard Edition");
   so.addVariable("cube", "Adventure Works");

5. Define the proxyURL — the URL to msmdpump.dll:

   so.addVariable("dataSourceType", "OLAP");
   so.addVariable("dataSource", "Provider=MSOLAP; Data Source=extranet;");
   so.addVariable("catalog", "Adventure Works DW Standard Edition");
   so.addVariable("cube", "Adventure Works");
   so.addVariable("proxyUrl", "http://10.14.2.102/olap/msmdpump.dll");
   

You can create a predefined report via FlashVars; define columns, rows, values to get exact data you need immediately after the Pivot Table is opened. Reports configuration is the same for both CSV and OLAP data sources. To configure predefined report for Pivot Table you should:

1. Define field(s) for rows (comma separated, if more than one):

   so.addVariable("rows", "[Business Type].[Business Type], [Color].[Color]");

2. Define field(s) for columns (comma separated, if more than one):

   so.addVariable("rows", "[Business Type].[Business Type], [Color].[Color]");
   so.addVariable("columns", "[Country].[Country]");
   

3. Define field(s) for measures (comma separated, if more than one):

   so.addVariable("rows", "[Business Type].[Business Type], [Color].[Color]");
   so.addVariable("columns", "[Country].[Country]");
   so.addVariable("measures", "[Measures].[Price], [Measures].[Discount]");

4. Define field(s) for Report Filter (comma separated, if more than one):

   so.addVariable("rows", "[Business Type].[Business Type], [Color].[Color]");
   so.addVariable("columns", "[Country].[Country]");
   so.addVariable("measures", "[Measures].[Price], [Measures].[Discount]");
   so.addVariable("pages", "[Destination].[Destination]");

Predefined report requires rows, columns, and measures. Pages are optional.

UI Configuration

UI configuration block of XML configuration consists of the following 3 parts:

1. CSS file
2. UI elements enabling/disabling
3. Values formatting

CSS

Skins and visual appearance can be controlled with easy-to-edit CSS and images. To define the path to CSS file, styleSheetName FlashVar is used:

so.addVariable("styleSheetName", "original.css");

To get more information on Pivot Table CSS please read CSS for Pivot Table Skins and Visual Appearance.

UI Elements Enabling/Disabling

You can easily configure UI, define which UI elements are needed and which ones should be turned off.

You can enable or disable via FlashVars the following set of visual elements:

• "Fields List" configurator. - Is used to rearrange fields and configure any report on UI with drag-and-drop. FlashVars description:

  configuratorEnabled – if true, configurator is enable to edit;, default: true
  configuratorActive – if true, configurator is open after start; default: true

  Example:

  so.addVariable("configuratorEnabled", true);
  so.addVariable("configuratorActive", true);

• Pivot Charts. - Pivot Charts can be opened or closed. It is closed by default. FlashVars description:

  chartsEnabled – if true, charts are enable to view; default: true
  chartsActive – if true, charts are active after start; default: false

  Example:

  so.addVariable("chartsEnabled", true);
  so.addVariable("chartsActive", false);

• Print Tool. - Tool for printing a table report or a charts report.

  so.addVariable("printEnabled", false);

• Full Screen Tool. It is used to enable full screen mode.

  so.addVariable("fullScreenEnabled", false);

  Note: To use Full-screen mode, flash player should be allowed to use it. More detales in Flash player documentation.

• Zoom Tool. It is used to scale the grid and a Pivot Table report on it.

  so.addVariable("zoomEnabled", false);

• Styles Selector Tool. ComboBox with list of styles for Pivot.

  so.addVariable("stylesEnabled", false);

• Expand/Collapse All. Expand/collapse headers.

  so.addVariable("expandAll", false);

• Excel Like Header Property.

  so.addVariable("excelLikeHeader", false);

• Auto Collapse Tool. Auto collapse headers after start or update.

  so.addVariable("autoCollapse", false);

For example, Pivot Table component will have "Fields List" configurator opened, ability to switch to Pivot Charts, ability to print Pivot Table and Pivot Charts, enabled full screen tool, disabled zoom tool, no styles combobox, Expand/Collapse All button, no Excel like headers, and headers auto collapsed if FlashVars configuration will have the following parameters:

so.addVariable("configuratorEnabled", true);
so.addVariable("configuratorActive", true);
so.addVariable("chartsEnabled", true);
so.addVariable("chartsActive", false);
so.addVariable("printEnabled", false);
so.addVariable("fullScreenEnabled", true);
so.addVariable("zoomEnabled", false);
so.addVariable("stylesEnabled", false);
so.addVariable("expandAll", false);
so.addVariable("excelLikeHeader", false);
so.addVariable("autoCollapse", true);

Values Formatting

The following parameters of values formatting can be set:

• thousandsSeparator - thousands separator.
• decimalSeparator - decimal separator.
• decimalPlaces - by default it is -1, which means "no formatting"
• maxSymbols - max number of symbols in cell. By default it is 10.
• currencySymbol - if you want format numbers as currency.
• currencySymbolAlign - left or right / by default it is left.

Example with default values:

so.addVariable("thousandsSeparator", " ");
so.addVariable("decimalSeparator", ".");
so.addVariable("decimalPlaces", "-1");
so.addVariable("maxSymbols", "12");
so.addVariable("currencySymbol", "");
so.addVariable("currencySymbolAlign", "left");