Customizing the dropdown menus in the Conditional formatting pop-up window

Conditional formatting

by Flexmonster Pivot Table

HTML

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

<div>
  <h2>
    Customizing the dropdown menus in the Conditional formatting pop-up window
  </h2>
  <p>
    You can limit the list of available values in the dropdown menus by
    specifying only the needed values in the
    <code>toolbar.defaults.fontSizes</code>,
    <code>toolbar.defaults.fonts</code>, and
    <code>toolbar.defaults.conditions</code> arrays inside the
    <a
      href="https://www.flexmonster.com/api/beforetoolbarcreated/"
      target="_blank"
      >beforetoolbarcreated</a
    >
    handler.
  </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",
    },
    conditions: [
      {
        formula: "#value < 400000",
        format: {
          fontFamily: "Verdana",
          fontSize: "13px",
        },
      },
    ],
  },
  beforetoolbarcreated: function (toolbar) {
    toolbar.defaults.fonts = ["Verdana", "Courier New", "Palatino Linotype"];
    toolbar.defaults.fontSizes = ["13px", "14px"];
    toolbar.defaults.conditions = [
      {
        label: "less_than",
        value: "<",
      },

      {
        label: "greater_than",
        value: ">",
      },

      {
        label: "equal_to",
        value: "=",
      },
    ];
  },
  reportcomplete: function () {
    pivot.off("reportcomplete");
    pivot.toolbar.showConditionalFormattingDialog();
  },
})