Custom report picker and custom layout picker outside of Flexmonster

Custom UI controls and views

by Flexmonster Pivot Table

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

<div>
  <h2>Creating a custom report picker and a custom layout picker</h2>
  <p>
    This example describes how to create a custom report picker and a 
    layout picker for 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-report-picker" 
      target="_blank"
    >step-by-step guide</a>.
  </p>
</div>

<div class="content text-center">
  <div class="width-20 mt-5 pt-3">
    <h4 class="title">Choose report</h4>
    <div class="nav flex-column">
      <button onclick="openReport('weather')" type="button" class="nav-item my-2 btn btn-secondary">Weather</button>
      <button onclick="openReport('sales')" type="button" class="nav-item my-2 btn btn-secondary">Sales</button>
      <button onclick="openReport('happiness')" type="button" class="nav-item my-2 btn btn-secondary">Happiness</button>
      <button onclick='openReport("medical")' type="button" class="nav-item my-2 btn btn-secondary">Medical</button>
    </div>
    <br /><br />
    <h4 class="title">Select the view</h4>
    <div class="nav flex-column">
      <button onclick="changeView('flat')" type="button" class="nav-item my-2 btn btn-outline-secondary">Table</button>
      <button onclick="changeView('pivot')" type="button" class="nav-item my-2 btn btn-outline-secondary">Summary</button>     
      <button onclick="changeView('charts')" type="button" class="nav-item my-2 btn btn-outline-secondary">Charts</button>
    </div>
  </div>
  <div class="width-80">
    <div id="pivot-container"></div>
  </div>
</div>

CSS

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

.content {
  display: flex;
  align-items: center;
}

.width-20 {
  width: 20%;
  margin-right: 20px;
  text-align: center;
}

.width-80 {
  width: 80%;
}

.content h4 {
    font-family: "Montserrat", sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: #5c3b8c;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.content .btn {
    text-transform: none;
    padding: 8px 0;
    width: 100%;
    border-radius: 6px;
    font-family: "Montserrat", sans-serif;
    font-size: 0.75rem;
    text-decoration: none;
    border: 1px solid;
}

.nav.flex-column:nth-of-type(1) .btn {
  background-color: #7E57C2;
  color: white;
  border-color: #7E57C2;
}

.nav.flex-column:nth-of-type(1) .btn:hover {
  background-color: white;
  color: #7E57C2;
}

.nav.flex-column:nth-of-type(2) .btn {
  background-color: white;
  color: #7E57C2;
  border-color: #7E57C2;
}

.nav.flex-column:nth-of-type(2) .btn:hover {
  background-color: #7E57C2;
  color: white;
}

JavaScript

const pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
  height: 550,
  toolbar: true,
  report: {
    options: {
      showHeaders: false,
    },
  },
  customizeCell: customizeCellFunction,
});

let viewType = "flat";

function openReport(data) {
  let report = "";
  
  switch (data) {
  	case "happiness":
    	report = happinessReport();
      break;
    case "weather":
    	report = weatherReport();
      break;
    case "sales":
    	report = salesReport();
      break;
    case "medical":
    	report = medicalReport();
      break;
  }
  
  // Sets the chosen view type after switching the reports
  switch (viewType) {
  	case "flat":
    	report.options.viewType = "grid";
      report.options.grid.type = "flat";
      break;
    case "pivot":
    	report.options.viewType = "grid";
      report.options.grid.type = "compact";
      break;
    case "charts":
    	report.options.viewType = "charts";
      break;
  }
  
  pivot.setReport(report);
}

function changeView(view) {
  viewType = view;
  let options = pivot.getOptions();
  
  switch (view) {
  	case "flat":
    	options.viewType = "grid";
    	options.grid.type = "flat";
      break;
    case "pivot":
      options.viewType = "grid";
    	options.grid.type = "compact";
      break;
    case "charts":
      options.viewType = "charts";
      break;
  }
  
  pivot.setOptions(options);
  pivot.refresh();
}

function weatherReport() {
  return {
    dataSource: {
      type: "csv",
      filename: "https://cdn.flexmonster.com/data/weather_in_aus.csv",
    },
    slice: {
      rows: [
        {
          uniqueName: "Date.Month",
        },
        {
          uniqueName: "Location",
        },
      ],
      columns: [
        {
          uniqueName: "RainToday",
          filter: {
   ...