Menu
Download Free Trial
  1. API reference
  2. Welcome
    1. Component overview
    2. Quickstart
    3. System requirements
    4. Troubleshooting
    5. Installation troubleshooting
    6. Managing license keys
  3. Connecting to Data Source
    1. JSON
      1. Connecting to JSON
      2. Data types in JSON
    2. CSV
      1. Connecting to CSV
      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. What is a 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. Date and time formatting
    10. Configuring global options
    11. Export and print
    12. Calculated values
    13. Custom sorting
  5. Integration with frameworks
    1. Available tutorials
    2. Integration with jQuery
    3. Integration with AngularJS
    4. Integration with Angular 2
    5. Integration with Angular 4
    6. Integration with React
    7. Integration with RequireJS
    8. Integration with TypeScript
    9. Integration with ASP.NET
    10. Integration with JSP
    11. Integration with PhoneGap
  6. Integration with charts
    1. Integration with Highcharts
    2. Integration with FusionCharts
    3. Integration with Google Charts
    4. Integration with any charting library
  7. Customizing
    1. Customizing toolbar
    2. Customizing appearance
    3. Localizing component
  8. 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
  9. 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.