Menu
Download Free Trial
  1. API reference
  2. Welcome
    1. Getting started
    2. Quickstart
    3. System requirements
    4. Typical errors
    5. Installation troubleshooting
  3. Connecting to Data Source
    1. JSON
      1. JSON data source
      2. Data types in JSON
    2. CSV
      1. CSV data source
      2. Data types in CSV
    3. SQL database
      1. Connecting to SQL database
      2. Connecting to database with .NET
      3. Connecting to database with .NET Core
      4. Connecting to database with Java
      5. Connecting to database with PHP
    4. Microsoft Analysis Services
      1. Connecting to Microsoft Analysis Services
      2. Getting started with Accelerator
      3. Installing Accelerator as a Windows Service
      4. Configuring username/password protection
      5. Configuring secure HTTPS connection
      6. Troubleshooting
    5. Pentaho Mondrian
      1. Connecting to Pentaho Mondrian
      2. Getting started with Accelerator
      3. Configuring Mondrian roles
      4. Сonfiguring username/password protection
      5. Сonfiguring secure HTTPS connection
      6. Troubleshooting
    6. icCube
  4. Configuring report
    1. Configuring report
    2. Data source
    3. Slice
    4. Options
    5. Number formatting
    6. Conditional formatting
    7. Set report to the component
    8. Get report from the component
    9. Calculated values
    10. Custom sorting
    11. Date and time formatting
    12. Configuring global options
  5. Integration with frameworks
    1. Integration with frameworks
    2. Integration with AngularJS
    3. Integration with Angular 2
    4. Integration with Angular 4
    5. Integration with React
    6. Integration with RequireJS
    7. Integration with TypeScript
    8. Integration with ASP.NET
    9. Integration with JSP
    10. Integration with PhoneGap
  6. Integration with charts
    1. Integration with charts
    2. Integration with Highcharts
    3. Integration with FusionCharts
    4. Integration with Google Charts
    5. Integration with any charting library
  7. Customizing
    1. Customizing toolbar
    2. Customizing appearance
    3. Localizing component
  8. Export and print
  9. Updating to the latest version
    1. Updating to the latest version
    2. Release notes
    3. Migration guide from 2.3 to 2.4
    4. Migration guide from 2.2 to 2.3
  10. Managing license keys
  11. Older Versions
    1. Documentation 2.3
    2. Documentation 2.2
    3. API reference - Flex
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,
            icon: this.icons.open
        });
        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.
  • icon – String. HTML tag containing your custom icon for this new tab. You can choose one of our vector icons defined in flexmonster.toolbar.js file.

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.