Custom filter area outside of Flexmonster

Custom UI controls and views

by Flexmonster Pivot Table

HTML

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

<div>
  <h2>Creating a custom filter area outside of Flexmonster</h2>
  <p>
    This example shows how to create an area with custom buttons that open
    filters for fields selected in the slice.
  </p>
  <p>
    <b>Step 1.</b> First, we create the <code>showFilters()</code> function
    (lines 53-72 in the JavaScript box) that collects fields defined in the
    slice using
    <a href="https://www.flexmonster.com/api/getrows/" target="_blank"
    >getRows()</a>,
    <a href="https://www.flexmonster.com/api/getcolumns/" target="_blank"
    >getColumns()</a>, and
    <a href="https://www.flexmonster.com/api/getreportfilters/" target="_blank"
    >getReportFilters()</a>. Then, it filters out measures and renders a button 
    for each field with an
    <a href="https://www.flexmonster.com/api/openfilter/" target="_blank"
    >openFilter()</a> call on click.
  </p>
  <p>
    <b>Step 2.</b> In the
    <a href="https://www.flexmonster.com/api/reportcomplete/" target="_blank"
    >reportcomplete</a> and
    <a href="https://www.flexmonster.com/api/reportchange/" target="_blank"
    >reportchange</a> event handlers (lines 45-51), we call <code>showFilters()</code> 
    to update the list of buttons based on the current slice.
  </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="filtersArea"></div>
<div id="pivotContainer"></div>

CSS

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

#filtersArea {
  padding: 5px 7px;
  border: 1px solid #e5e5e5;
}

#filtersArea button {
  padding: 7px 15px 7px 10px;
  border: none;
  color: #111;
  background-color: #e9e9e9;
  font-size: 12px;
  font-family: Arial, sans-serif;
  font-weight: bold;
  margin: 5px;
}

#filtersArea button:hover {
  background-color: #dcdcdc;
  color: #111;
}

.fm-page-filter {
  display: none !important;
}

JavaScript

const pivot = new Flexmonster({
  container: "pivotContainer",
  componentFolder: "https://cdn.flexmonster.com/",
  report: {
    options: {
      showFilter: false,
    },
    dataSource: {
      filename: "data/data.csv",
    },
    slice: {
      rows: [
        {
          uniqueName: "Category",
        },
      ],
      columns: [
        {
          uniqueName: "Country",
        },
        {
          uniqueName: "[Measures]",
        },
      ],
      measures: [
        {
          uniqueName: "Price",
        },
        {
          uniqueName: "Quantity",
        },
      ],
      reportFilters: [
        {
          uniqueName: "Business Type",
        },
        {
          uniqueName: "Size",
        },
      ],
    },
  },
});

pivot.on("reportcomplete", () => {
  showFilters();
});

pivot.on("reportchange", () => {
  showFilters();
});

function showFilters() {
  const fieldsForFilters = [
    ...pivot.getReportFilters(),
    ...pivot.getRows(),
    ...pivot.getColumns(),
  ]
    .map((field) => field.uniqueName)
    .filter((field) => field !== "[Measures]");

  const filtersArea = document.getElementById("filtersArea");
  filtersArea.innerHTML = "";
  for (const field of fieldsForFilters) {
    const button = document.createElement("button");
    button.onclick = () => {
      pivot.openFilter(field);
    };
    button.textContent = field;
    filtersArea.appendChild(button);
  }
}