Hide or show search in the Field List

Mapping configuration

by Flexmonster Pivot Table

HTML

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

<div class="switch-container compact">
  <label class="switch">
    <input type="checkbox" onclick="toggleControls()" checked/>
    <span class="slider round"></span>
  </label>
  <span class="text">Show search in the Field List</span>
</div>

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

CSS

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

JavaScript

let pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  width: "100%",
  height: 400,
  report: {
    dataSource: {
    	type: "json",
      filename: "data/data.json",
    },
    options: {
      showFieldListSearch: true,
      configuratorActive: true
    },
}
});

function toggleControls() {
  const options = pivot.getOptions();
  const newValue = options.showFieldListSearch === true ? false : true;
  options.showFieldListSearch = newValue;
  pivot.setOptions(options);
  pivot.refresh();
}