Add localization support for custom Toolbar tabs

Customizing the Toolbar

by Flexmonster Pivot Table

HTML

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

<div>
  <h2>How to add localization support for custom Toolbar tabs</h2>
  <p>To localize a custom Toolbar tab, we suggest following this steps:</p>
  <ol>
    <li>
      Add a new Toolbar tab using the
      <a
        href="https://www.flexmonster.com/api/beforetoolbarcreated/"
        target="_blank"
        >beforetoolbarcreated</a
      >
      event. We've added a tab that opens the number formatting dialog (lines
      20-28 in the JavaScript box).
    </li>
    <li>
      In the report, define the <code>localization</code> object with a
      localized label for your custom tab (lines 9-13).
    </li>
    <li>Set the label from step 2 for your custom tab (lines 29-32).</li>
  </ol>
  <p>
    <a
      href="https://www.flexmonster.com/doc/localizing-component/"
      target="_blank"
      >Visit our docs to learn more about localizing the component</a
    >.
  </p>
</div>

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

CSS

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

JavaScript

const pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  report: {
    dataSource: {
      filename: "data/data.csv",
    },
    localization: {
      toolbar: {
        formatNumbers: "Formato"
      }
    }
  },
  beforetoolbarcreated: customizeToolbar
});

function customizeToolbar(toolbar) {
  let tabs = toolbar.getTabs();
  toolbar.getTabs = function() {
    tabs.unshift({
      id: "fm-tab-format-cells",
      title: this.Labels.formatNumbers,
      handler: this.formatCellsHandler,
      icon: this.icons.format_number
    });
    return tabs;
  }
  toolbar.updateLabels = function(labels) {
    FlexmonsterToolbar.prototype.updateLabels.call(this, labels);
    this.setText(document.querySelector("#fm-tab-format-cells > a > span"), this.Labels.formatNumbers);
  }
}