Custom Options pop-up window

Custom UI controls and views

by Flexmonster Pivot Table

HTML

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

<div>
  <h2>Creating a custom Options pop-up window</h2>
  <p>
    This example describes how to create the Options pop-up window and extend it
    with custom controls for configuring Flexmonster.
  </p>
  <p>
    For more details, refer to our
    <a
      href="https://www.flexmonster.com/doc/creating-a-custom-ui-control-or-view/#creating-custom-options-pop-up-window"
      target="_blank"
    >step-by-step tutorial</a>.
  </p>
</div>

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

<div id="popupOverlay" class="hideCustomPopup"></div>
<div id="custom-options-popup" class="hideCustomPopup">
  <div id="custom-options-popup-title">Layout options</div>

  <h4>Grand totals</h4>
  <div class="select-container">
    <select id="custom-options-grand-totals-select">
      <option selected value="on">Show grand totals</option>
      <option value="rows">Show for rows</option>
      <option value="columns">Show for columns</option>
      <option value="off">Do not show grand totals</option>
    </select>
  </div>

  <h4>Subtotals</h4>
  <div class="select-container">
    <select id="custom-options-subtotals-select">
      <option selected value="on">Show subtotals</option>
      <option value="rows">Show for rows</option>
      <option value="columns">Show for columns</option>
      <option value="off">Do not show subtotals</option>
    </select>
  </div>

  <h4>View type</h4>
  <div class="select-container">
    <select id="custom-options-layout-select">
      <option value="flat">Flat form</option>
      <option value="classic">Classic form</option>
      <option value="compact" selected>Compact form</option>
    </select>
  </div>

  <div id="custom-options-popup-buttons-wrap">
    <button onclick="closeOptionsPopup()" class="close-btn">Close</button>
    <button onclick="submitOptions()" class="submit-btn">Apply</button>
  </div>
</div>

CSS

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

.hideCustomPopup {
  display: none !important;
}

#popupOverlay{
  z-index: 199;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.7);
}

#custom-options-popup {
  font-family: Arial, sans-serif;
  flex-flow: column;
  background-color: rgb(255, 255, 255);
  box-shadow: 0 0 20px rgb(0 0 0 / 10%);
  position: absolute;
  padding: 40px;
  width: 40%;
  height: min-content;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  top: 0;
  bottom: 0;
  margin-top: auto;
  margin-bottom: auto;
  z-index: 200;
}

#custom-options-popup-title {
  font-size: 24px;
  font-family: Arial, sans-serif;
  margin-bottom: 40px;
}

#custom-options-popup h4 {
  font-size: 16px;
  font-weight: 400;
  margin: 20px 0 5px 0;
  color: #888;
}

#custom-options-popup .select-container {
  margin-top: 5px;
}

#custom-options-popup-buttons-wrap {
  margin-top: 40px;
  display: flex;
  flex-direction: row;
  gap: 5px;
}

#custom-options-popup-buttons-wrap button {
  display: block;
  flex-grow: 1;
  padding: 10px 15px;
  color: #555;
  background-color: white;
  font-size: 18px;
  border: none;
  border-radius: 4px;
}

#custom-options-popup-buttons-wrap button:hover{
  cursor: pointer;
  background-color: #f7f7f7;
}

#custom-options-popup-buttons-wrap .submit-btn{
  color: white;
  background-color: #555;
}

#custom-options-popup-buttons-wrap .submit-btn:hover{
  background-color: #444;
}

#custom-options-popup-buttons-wrap .close-btn{
  color: #555;
  border: 1.5px solid #555;
}

JavaScript

const pivot = new Flexmonster({
  container: "#pivot-container",
  toolbar: true,
  componentFolder: "https://cdn.flexmonster.com/",
  beforetoolbarcreated: customizeToolbar,
  report: {
    dataSource: {
      filename: "data/data.json",
    },
    slice: {
      rows: [
        {
          uniqueName: "Category",
        },
        {
          uniqueName: "Country",
          filter: {
          	members: ["France", "Germany", "United Kingdom"]
          }
        },
      ],
      columns: [
        {
          uniqueName: "Business Type",
        },
        {
          uniqueName: "[Measures]",
        },
      ],
      measures: [
        {
          uniqueName: "Price",
          aggregation: "sum",
        },
      ],
      expands: {
      	rows: [
        	{
          	tuple: ["category.[accessories]"]
          }
        ]
      }
    },
  },
});

function customizeToolbar(toolbar) {
  let tabs = toolbar.getTabs();
  toolbar.getTabs = function () {
    tabs = tabs.filter((tab) => tab.id === "fm-tab-options");
    let optionsTab = tabs.find((tab) => tab.id == "fm-tab-options");
    if (!optionsTab) return tabs;
    optionsTab.rightGroup = false;
    optionsTab.handler = () => {
      showOptionsPopup();
    };
    return tabs;
  };
}

function showOptionsPopup() {
  const popup = document.querySelector("#custom-options-popup");
  const popupOverlay = document.querySelector("#popupOverlay");

  // Get current Flexmonster options
  const options = pivot.getOptions().grid;

  // Set current values to the select elements
  document.getElementById("custom-options-grand-totals-select").value = options.showGrandTotals ?? "on";
  document.getElementById("custom-options-subtotals-select").value = options.showTotals ?? "on";
  document.getElementById("custom-options-layout-select").value = options.type ?? "compact";

  popup.classList.remove("hideCustomPopup");
 ...