Menu
Download Free Trial
  1. Getting started
    1. Quickstart
    2. System requirements
    3. Managing license keys
    4. Updating to the latest version
    5. Typical errors
    6. Migration guide from 2.3 to 2.4
    7. Migration guide from 2.2 to 2.3
    8. Installation troubleshooting
  2. JSON data source
    1. Data types in JSON
  3. CSV data source
    1. Data types in CSV
  4. Connecting to SQL database
    1. Connecting to database with .NET
    2. Connecting to database with .NET Core
    3. Connecting to database with Java
    4. Connecting to database with PHP
  5. Connecting to Microsoft Analysis Services
    1. Getting started with Accelerator
    2. Installing Accelerator as a Windows Service
    3. Configuring username/password protection
    4. Configuring secure HTTPS connection
    5. Troubleshooting
  6. Connecting to Pentaho Mondrian
    1. Getting started with Accelerator
    2. Configuring Mondrian roles
    3. Сonfiguring username/password protection
    4. Сonfiguring secure HTTPS connection
    5. Troubleshooting
  7. Connecting to icCube
  8. Configuring report
    1. Data source
    2. Slice
    3. Options
    4. Number formatting
    5. Conditional formatting
    6. Set report to the component
    7. Get report from the component
    8. Date and time formatting
    9. Calculated values
    10. Custom sorting
  9. Integration
    1. Integration with AngularJS
    2. Integration with Angular 2
    3. Integration with Angular 4
    4. Integration with React
    5. Integration with RequireJS
    6. Integration with TypeScript
    7. Integration with ASP.NET
    8. Integration with JSP
    9. Integration with PhoneGap
  10. Integration with charts
    1. Integration with Highcharts
    2. Integration with FusionCharts
    3. Integration with Google Charts
    4. Integration with any charting library
  11. Customizing toolbar
  12. Customizing appearance
  13. Localizing component
  14. Global Object
  15. Export and print
  16. API reference - JavaScript
  17. Documentation 2.3
  18. Documentation 2.2
  19. API reference - Flex
  20. getReportFilters
Table of contents

Customizing toolbar

About Toolbar

Toolbar is an extra HTML/JS addition to Flexmonster Pivot Component. It uses standard API and provides easy access to the most used features. Toolbar is free and provided “as is”.

toolbar

Toolbar is available since version 2.0. Enabling toolbar is very easy, just set the appropriate parameter in new Flexmonster() function to true.

new Flexmonster({
    container:String, 
    componentFolder:String, 
    global:Object, 
    width:Number, 
    height:Number, 
    report:Object, 
    toolbar:Boolean, 
    licenseKey:String})

Please verify that your flexmonster/ folder includes toolbar/ folder and it’s not empty.

Customizing

Toolbar can be customized via beforetoolbarcreated event. Tabs and buttons can be removed from it and new ones can be added easily.

Removing tab from Toolbar

Subscribe to beforetoolbarcreated. Get all tabs using getTabs() method that returns an Array of Objects, each of them describes a tab. To remove a tab you should just delete corresponding Object from the Array. The following example will remove the first tab:

new Flexmonster({
    container: "pivotContainer",
    toolbar: true,
    licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX",
    beforetoolbarcreated: customizeToolbar
});

function customizeToolbar(toolbar) {
    // get all tabs
    var tabs = toolbar.getTabs();
    toolbar.getTabs = function () {
        // delete the first tab
        delete tabs[0];
        return tabs;
    }
}

Open the example on JSFiddle.

Adding new tab to Toolbar

The following code will add a new tab:

new Flexmonster({
    container: "pivotContainer",
    toolbar: true,
    licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX",
    beforetoolbarcreated: customizeToolbar
});

function customizeToolbar(toolbar) {
    // get all tabs
    var tabs = toolbar.getTabs(); 
    toolbar.getTabs = function () {
        // add new tab
        tabs.unshift({
            id: "fm-tab-newtab",
            title: "New Tab",
            handler: newtabHandler
        });
        return tabs;
    }

    var newtabHandler = function() {
    	// add new functionality
    }  
}

where:

  • title – String. Label of the tab.
  • id – String. Id used in CSS styles.
  • handler – String. Name of the function that handles click on this tab.

Also there are another optional parameters:

  • args – Any. Argument to pass to handler.
  • menu – Array. Dropdown menu items.
  • mobile – Boolean. If false – doesn’t show on mobile devices.
  • ios – Boolean. If false – doesn’t show on iOS devices.
  • android – Boolean. If false – doesn’t show on Android devices.

Check out the example with new tab on JSFiddle.

Further customization

You can customize almost everything. To explore all the options we recommend investigation of the existing code. Look at the toolbar/ folder (you can find it in the [package]/flexmonster/). Open flexmonster.toolbar.js file. Find the Tab section (it starts with getTabs() method) to understand how it works.

To change appearance of Toolbar read Customizing appearance.