Report picker: a custom drop-down menu inside the Toolbar

Custom UI controls and views

by Flexmonster Pivot Table

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

<div>
  <h2>Creating a custom drop-down menu inside the Toolbar</h2>
  <p>
    This example shows how to extend the Toolbar with a custom drop-down menu
    that lets users quickly switch between predefined reports.
  </p>
  <p>
    <b>Step 1.</b> We use the <code>customizeToolbar()</code> function (lines
    67-127 in the JavaScript box) as the
    <a
      href="https://www.flexmonster.com/api/beforetoolbarcreated/"
      target="_blank"
    >beforetoolbarcreated</a> event's handler to add a drop-down menu that 
    switches reports to the Toolbar.
  </p>
  <p>
    <b>Step 2.</b> When a report is selected from the menu,
    <code>changeReport()</code> (lines 129-309) switches the slice and displays
    options based on the chosen value using
    <a href="https://www.flexmonster.com/api/runquery/" target="_blank"
    >runQuery()</a> and
    <a href="https://www.flexmonster.com/api/setoptions/" target="_blank"
    >setOptions()</a> methods.
  </p>
  <p>
    See another
    <a href="https://jsfiddle.net/flexmonster/gen79fd8/" target="_blank"
    >example of a custom report picker</a>.
  </p>
  <p>
    Learn more about
    <a
      href="https://www.flexmonster.com/doc/creating-a-custom-ui-control-or-view"
      target="_blank"
    >creating a custom UI control or view</a>.
  </p>
</div>

<div id="pivot-container"></div>

CSS

@import url(https://cdn.flexmonster.com/assets/jsfiddle-styles.css);

#select-tab-wrapper {
  padding: 20px 30px 30px 10px !important;
  display: inline-block;
}

#select-tab-wrapper span {
  margin-right: 10px !important;
}

#select-tab {
  width: 400px;
  padding: 5px !important;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  border: 1.3px solid #999;
  border-radius: 0.3rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

#select-tab option {
  padding: 40px !important;
}

.fm-charts-color-1 {
  fill: rgb(255, 99, 132) !important;
}

.fm-charts-color-2 {
  fill: rgb(255, 159, 64) !important;
}

.fm-charts-color-3 {
  fill: rgb(255, 205, 86) !important;
}

.fm-charts-color-4 {
  fill: rgb(75, 192, 192) !important;
}

.fm-charts-color-5 {
  fill: rgb(54, 162, 235) !important;
}

.fm-charts-color-6 {
  fill: rgb(153, 102, 255) !important;
}

.fm-charts-color-7 {
  fill: rgb(201, 203, 207) !important;
}

#fm-pivot-view .fm-bar,
#fm-pivot-view .fm-charts-view .fm-chart-legend ul li .fm-icon-display,
#fm-pivot-view .fm-line,
#fm-pivot-view .fm-arc path,
#fm-pivot-view .fm-bar-stack,
#fm-pivot-view .fm-scatter-point {
  opacity: 70% !important;
}

JavaScript

const pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
  beforetoolbarcreated: customizeToolbar,
  toolbar: true,
  height: 600,
  report: {
    dataSource: {
      filename: "data/sales.csv",
    },
    slice: {
      rows: [
        {
          uniqueName: "Category",
        },
      ],
      columns: [
        {
          uniqueName: "Payment Method",
        },
        {
          uniqueName: "[Measures]",
        },
      ],
      measures: [
        {
          uniqueName: "Unit Price",
          aggregation: "sum",
          format: "dollars",
        },
      ],
      drills: {
        rows: [
          {
            tuple: ["category.[breakfast cereals]"],
          },
          {
            tuple: ["category.[bakery]"],
          },
        ],
      },
    },
    options: {
      grid: {
        type: "classic",
      },
      configuratorButton: false,
    },
    formats: [
      {
        name: "dollars",
        currencySymbol: "$ ",
        maxDecimalPlaces: 2,
      },
      {
        name: "items",
        currencySymbol: " pcs.",
        positiveCurrencyFormat: "1$",
        negativeCurrencyFormat: "-1$",
      },
    ],
  },
  customizeCell: customizeCellFunction,
});

function customizeToolbar(toolbar) {
  let tabs = toolbar.getTabs();
  tabs.unshift({
    id: "select-tab",
  });
  tabs = tabs.filter(
    (tab) =>
      tab.id == "select-tab" ||
      tab.id == "fm-tab-fullscreen" ||
      tab.id == "fm-tab-format" ||
      tab.id == "fm-tab-options",
  );

  toolbar.getTabs = function () {
    return tabs;
  };

  let baseCreateTab = toolbar.createTab;
  toolbar.createTab = function (data, parent) {
    if (data.id == "select-tab") {
      let select = document.createElement("select");
     ...