Customize API request

Other

by Flexmonster Pivot Table

HTML

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

<div>
  <p>
    This example shows how to add customized headers in the API request (lines
    28-31 in the JavaScript box).
  </p>
  <p>See the sent request under the component.</p>
</div>

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

<div class="output" id="output">Output will appear here</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: 300,
  customizeAPIRequest: customizeAPIRequestFunction,
  report: {
    dataSource: {
      type: "api",
      url: "https://olap.flexmonster.com:9500",
      index: "fm-product-sales"
    },
    slice: {
    	rows: [
      	{ uniqueName: "Category" }
      ],
      columns: [
      	{ uniqueName: "[Measures]" }
      ],
      measures: [
      	{ uniqueName: "Price" }
      ]
    }
  }
});

function customizeAPIRequestFunction(req) {
  req.requestHeaders = {
    "customHeader1": "This is the first custom request header",
    "customHeader2": "This is the second custom request header"
  };
  showOutput(JSON.stringify(req, null, 2));
  return req;
}

function showOutput(content) {
  document.getElementById("output").innerText = content;
}