Embedding

/* Container */
<div id="dossierContainer"></div>
/* First, we need to load the JavaScript Library for the MicroStrategy Embedding SDK. */
<script src="https://demo.microstrategy.com/MicroStrategyLibrary/javascript/embeddinglib.js"></script>
<script type="text/javascript">

/* These are the parameters necessary for connecting to the Dashboard ----------------------------- */
baseRestURL = "https://demo.microstrategy.com/MicroStrategyLibrary";
projectID   = "B7CA92F04B9FAE8D941C3E9B7E0CD754";
dossierID   = "43CDADC942EA17F40F7629BE9D48861B";
/* since in this case we want dashboard to load automatically for everyone we will use a demo user */
username    = "demo";
password    = "";
/* End of configuration parameters  ------------------------------------------------------------- */

/* Generate the complete URL for the Dashboard */
var dossierUrl = baseRestURL + '/app/' + projectID + '/' + dossierID;

/* Populate div with Dashboard: */
microstrategy.dossier.create({
	/* This is the document's <div> container where the Dashboard should be placed. */
	placeholder: document.getElementById("dossierContainer"),
	url: dossierUrl,

	/* The following parameters define the appearance of the Dashboard.
	E.g. is the navigation or collaboration bar displayed, do right-click actions work, etc. */
	disableNotification: true,
	enableResponsive: true,

	/* And parameters for the user authentication. */
	/* In case we didn't want the dashboard to load automatically for everyone */
	/* and wanted the user to log in we would skip that part. */
	enableCustomAuthentication: true,
	customAuthenticationType: microstrategy.dossier.CustomAuthenticationType.AUTH_TOKEN,
	getLoginToken: login

}).then(function(dossier) {
	/* Code to execute after the Dashboard has finished loading... */
});

function login() {
	/* Prepare some parameters for login request */
	var options = {
		method: 'POST',
		credentials: 'include', /* include cookie */
		mode: 'cors', /* set as CORS mode for cross origin resource sharing */
		headers: {'Content-Type': 'application/json'},
		body: JSON.stringify({
		/* loginMode: 8 */ /* Login as guest user. */
		"loginMode": 1, /* standard login mode */
		"username": username,
		"password": password
		})
	};

	/* The actual login takes place here */
	return fetch(baseRestURL + '/api/auth/login', options).then(function (response) {
		if (response.ok) {
		return response.headers.get('x-mstr-authToken');
		} else {
		response.json().then(function(json) {
			console.log(json);
		});
		}
	}).catch(function (error) {
		console.log(error);
	});
};
					

/* Container and navigation */
/* When the button/link is clicked it will use navigateToPage method on the dashboard */
<div id="weekButton" align="center"
	onclick="dossier3.navigateToPage(dossier3.getPageByNodeKey('W253--K206'));">
	Week
</div>
<div id="weekdayButton" align="center"
	onclick="dossier3.navigateToPage(dossier3.getPageByNodeKey('K345--K321'));">
	Weekday
</div>
<div id="advertisementsButton" align="center"
	onclick="dossier3.navigateToPage(dossier3.getPageByNodeKey('K53--K46'));">
	Advertisements
</div>
<div id="articleButton" align="center"
	onclick="dossier3.navigateToPage(dossier3.getPageByNodeKey('K100--K92'));">
	Article
</div>
<div id="dossierContainer"></div>
/* First, we need to embed the JavaScript Library for the MicroStrategy Embedding SDK. */
<script src="https://demo.microstrategy.com/MicroStrategyLibrary/javascript/embeddinglib.js"></script>
<script type="text/javascript">

/* These are parameters for connecting to the Dashboard ----------------------------- */
baseRestURL = "https://demo.microstrategy.com/MicroStrategyLibrary";
projectID   = "B7CA92F04B9FAE8D941C3E9B7E0CD754";
dossierID   = "43CDADC942EA17F40F7629BE9D48861B";
/* since in this case we want dashboard to load automatically for everyone we will use a demo user */
username    = "demo";
password    = "";
/* End of configuration parameters  ------------------------------------------------------------- */

/* Variable which will reference dashboard once it gets embedded */
var dossier3 = null;

/* Generate the complete URL for the Dashboard */
var dossierUrl = baseRestURL + '/app/' + projectID + '/' + dossierID;

/* Populate div with Dashboard: */
microstrategy.dossier.create({
	/* This is the document's <div> container where the Dashboard should be placed. */
	placeholder: document.getElementById("dossierContainer"),
	url: dossierUrl,

	/* The following parameters define the appearance of the Dashboard.
	E.g. is the navigation or collaboration bar displayed, do right-click actions work, etc. */
	disableNotification: true,
	enableResponsive: true,

	/* And parameters for the user authentication. */
	/* In case we didn't want the dashboard to load automatically for everyone */
	/* and wanted the user to log in we would skip that part. */
	enableCustomAuthentication: true,
	customAuthenticationType: microstrategy.dossier.CustomAuthenticationType.AUTH_TOKEN,
	getLoginToken: login

}).then(function(dossier) {
	/* Code to execute after the Dashboard has finished loading... */
	dossier3 = dossier; /* bind newly created dashboard to the variable we created earlier */
});

function login() {
	/* Prepare some parameters for login request */
	var options = {
		method: 'POST',
		credentials: 'include', /* include cookie */
		mode: 'cors', /* set as CORS mode for cross origin resource sharing */
		headers: {'Content-Type': 'application/json'},
		body: JSON.stringify({
		/* loginMode: 8 */ /* Login as guest user. */
		"loginMode": 1, /* standard login mode */
		"username": username,
		"password": password
		})
	};

	/* The actual login takes place here */
	return fetch(baseRestURL + '/api/auth/login', options).then(function (response) {
		if (response.ok) {
		return response.headers.get('x-mstr-authToken');
		} else {
		response.json().then(function(json) {
			console.log(json);
		});
		}
	}).catch(function (error) {
		console.log(error);
	});
};
					

/* Container */
<div id="divFilter" class="w3-col s2 w3-padding">
	<h2 id="filterHeader"></h2>
	<ul id="filterList" class="w3-ul w3-hoverable">
		<!-- This is where the list of filter elements will be displayed -->
	</ul>
</div>
<div id="dossierContainer" class="w3-col s10 w3-padding">
	<!-- This is where the embedded Dashboard will be displayed -->
</div>
/* First, we need to embed the JavaScript Library for the MicroStrategy Embedding SDK. */
<script src="https://demo.microstrategy.com/MicroStrategyLibrary/javascript/embeddinglib.js"></script>
<script type="text/javascript">

/* These are the parameters necessary for connecting to the Dashboard ----------------------------- */
baseRestURL = "https://demo.microstrategy.com/MicroStrategyLibrary";
projectID   = "B7CA92F04B9FAE8D941C3E9B7E0CD754";
dossierID   = "43CDADC942EA17F40F7629BE9D48861B";
/* since in this case we want dashboard to load automatically for everyone we will use a demo user */
username    = "demo";
password    = "";
/* End of configuration parameters  ------------------------------------------------------------- */

microstrategy.dossier.create({
	/* This is the document's <div> container where the Dashboard should be placed. */
	placeholder: document.getElementById("dossierContainer"),
	url: dossier2URL,

	/* The following parameters define the appearance of the Dashboard.
	   E.g. is the navigation or collaboration bar displayed, do right-click actions work, etc. */
	disableNotification: true,
	filterFeature: {
		enabled: false,
		edit: true,
		summary: true
	},
	dossierFeature: {
		readonly: true
	},
	shareFeature: {
		enabled: true,
		invite: false,
		link: false,
		email: false,
		export: false,
		download: false
	},
	enableCollaboration: false,
	dockedComment: {
		dockedPosition: "right",
		canClose: false,
		dockChangeable: false,
		isDocked: true
	},
	enableResponsive: true,

	/* And parameters for the user authentication. */
	/* In case we didn't want the dashboard to load automatically for everyone */
	/* and wanted the user to log in we would skip that part. */
	enableCustomAuthentication: true,
	customAuthenticationType: microstrategy.dossier.CustomAuthenticationType.AUTH_TOKEN,
	getLoginToken: () => { return Promise.resolve(token) }

}).then(function (dossier) {
	/* after the Dashboard has finished loading...
	   get hook to dossier */
	embedded_dossier = dossier;

	/* define event handler */
	var selectHandler = function (e) {
		var selectionAttribute = null;
		var selectionElement = null;
		for (var i = 0; i < e.graphics.length; i++) {
			var selection = e.graphics[i];
			selectionAttribute = selection[0].n;
			selectionElement = selection[0].v;
		}
		/* Define action. In our case, just display the selected element's name */
		document.getElementById("selectionHeader").innerHTML = selectionAttribute;
		document.getElementById("selectionValue").innerHTML = selectionElement;
	};

	/* register event handler to capture selections by clicks on visualization */
	embedded_dossier.registerEventHandler(
		"onGraphicsSelected",
		selectHandler)

	/*
	* Now that the dashboard has loaded, let's build an attribute selector in our application.
	* In our example we use a <ul> object with a <li> element for each attribute element.
	*/

	/* get list of all filters */
	embedded_dossier.getFilterList().then(function (filterList) {
		allFilters = filterList;

		/* loop through all filters */
		for (var i = 0; i < allFilters.length; i++) {

			/*
			* If a filter is of type attributeSelector, then create a <li> element.
			* Note: In this example we build only one list. For multiple filters
			* we should build a separate selector for each filter!
			*/

			/* If attributeSelector */
			if (allFilters[i].filterType === "attributeSelector") {

				/* loop through all elements */
				for (var j = 0; j < allFilters[i].filterDetail.items.length; j++) {

					/* for each element, create a <li> */
					var item = document.createElement('li');

					/* name the <li> element like the attribute element and also set its id */
					item.appendChild(document.createTextNode(allFilters[i].filterDetail.items[j].name));
					item.id = allFilters[i].filterDetail.items[j].name;

					/* if the filter element is selected, add a certain style sheet so we can distinguish it from the rest */
					if (allFilters[i].filterDetail.items[j].selected) item.classList.add("w3-grey");

					/*
					* Finally, we want our <li> elements to function as selectors.
					* So let's add an onclick function to them, that modifies the Dashboard's filter.
					*/
					item.onclick = function () {

						/* Remove highlight from all <li> items... */
						var c = this.parentNode.children;
						for (var x = 0; x < c.length; x++) {
							c[x].classList.remove("w3-grey");
						}
						/* ...and add highlight only to element which has been clicked. */
						this.classList.add("w3-grey");

						/* create a filterDataObj */
						var filterDataObj = {};
						var filterInfoObj = {};
						var selectionObj = {};

						/* search for the filter that matches the <li>'s id and retrieve the filterKey and value */
						for (var i = 0; i < allFilters.length; i++) {
							for (var j = 0; j < allFilters[i].filterDetail.items.length; j++) {
								if (allFilters[i].filterDetail.items[j].name === this.id) {
									filterInfoObj.key = allFilters[i].filterKey;
									selectionObj.value = allFilters[i].filterDetail.items[j].value;
								}
							}
						}

						/* call the Embedding SDK function to change the filter selection */
						filterDataObj.selection = selectionObj;
						filterDataObj.filterInfo = filterInfoObj;
						embedded_dossier.filterSelectSingleAttribute(filterDataObj);

					};

					/* And finally append the created <li> element to the <ul> object */
					document.getElementById("filterList").appendChild(item);

					/*
					* Now that we have created our filter element selector including
					* the formatting and the onclick-action, let's add the filter name as a header.
					*/
					document.getElementById("filterHeader").innerHTML = allFilters[i].filterName;
				}
			}
		}
	});
});

function login() {
	/* Prepare some parameters for login request */
	var options = {
		method: 'POST',
		credentials: 'include', /* include cookie */
		mode: 'cors', /* set as CORS mode for cross origin resource sharing */
		headers: {'Content-Type': 'application/json'},
		body: JSON.stringify({
		/* loginMode: 8 */ /* Login as guest user. */
		"loginMode": 1, /* standard login mode */
		"username": username,
		"password": password
		})
	};

	/* The actual login takes place here */
	return fetch(baseRestURL + '/api/auth/login', options).then(function (response) {
		if (response.ok) {
		return response.headers.get('x-mstr-authToken');
		} else {
		response.json().then(function(json) {
			console.log(json);
		});
		}
	}).catch(function (error) {
		console.log(error);
	});
};
					

<script type="text/javascript">

/* These are the parameters ----------------------------- */
baseRestURL = "https://demo.microstrategy.com/MicroStrategyLibrary";
projectID   = "B7CA92F04B9FAE8D941C3E9B7E0CD754";
reportID    = "9614176011EA78B5A5980080EFE52B6D",
username    = "demo";
password    = "";
/* End of configuration parameters  ----------------------------- */

/* Generate some helper variables and functions */
const loginOptions = {
	method: 'POST',
	credentials: 'include', /* include cookie */
	mode: 'cors', /* set as CORS mode for cross origin resource sharing */
	headers: { 'Content-Type': 'application/json' },
	body: JSON.stringify({
		/* loginMode: 8 */ /* Login as guest user. */
		"loginMode": 1, /* standard login mode */
		"username": username,
		"password": password
	})
};

/* Function to fetch auth token from REST API */
const getAuthToken = () => {
	return fetch(baseRestURL + '/api/auth/login', loginOptions).then((response) => {
		if (response.ok) {
			return response.headers.get('x-mstr-authToken');
		} else if (response.status === 401) {
			/* try again */
			return getAuthToken();
		} else {
			response.json().then((json) => {
				console.log(json);
			});
		}
	}).catch((error) => {
		console.log(error);
	});
};

/* ----------------------------- */
/* This is where we fetch the auth token and then use it to get data */
/* This uses helper functions that are defined further down. */
getAuthToken()
.then(token => {
	fetch(
		baseRestURL + '/api/reports/' + reportID + '/instances',
		{
			method: 'POST',
			credentials: 'include', /* include cookie */
			mode: 'cors', /* set as CORS mode for cross origin resource sharing */
			headers: {
				'Content-Type': 'application/json',
				'Accept': 'application/json',
				'X-MSTR-AuthToken': token,
				'X-MSTR-ProjectID': projectID
			}
		}
	).then(response => {
		return response.json();
	}).then(data => {
		/* ------------ */
		/* Use the data */
		/* ------------ */
		console.log(data);
	}).catch((error) => {
		console.log(error);
	});
}).catch(error => { console.log(error); });
/* ----------------------------- */
</script>
					

/* First, we need to embed the some JavaScript libraries. */
/* This example uses jQuery and some other scripts to prepare the table */
/* dynamically and embed it in a page in an element with specified ID. */
<div id="jsGrid"></div>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" />
	<link type="text/css" rel="stylesheet"
		href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" />
<script
  src="https://code.jquery.com/jquery-3.5.0.min.js"
  integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ="
  crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
<script type="text/javascript">

/* These are the parameters necessary for connecting to the Dashboard ----------------------------- */
baseRestURL = "https://demo.microstrategy.com/MicroStrategyLibrary";
projectID   = "B7CA92F04B9FAE8D941C3E9B7E0CD754";
reportID    = "9614176011EA78B5A5980080EFE52B6D",
username    = "demo";
password    = "";
/* End of configuration parameters  ------------------------------------------------------------- */

/* Generate some helper variables and functions */
const loginOptions = {
	method: 'POST',
	credentials: 'include', /* include cookie */
	mode: 'cors', /* set as CORS mode for cross origin resource sharing */
	headers: { 'Content-Type': 'application/json' },
	body: JSON.stringify({
		/* loginMode: 8 */ /* Login as guest user. */
		"loginMode": 1, /* standard login mode */
		"username": username,
		"password": password
	})
};

/* Function to fetch auth token from REST API */
const getAuthToken = () => {
	return fetch(baseRestURL + '/api/auth/login', loginOptions).then((response) => {
		if (response.ok) {
			return response.headers.get('x-mstr-authToken');
		} else if (response.status === 401) {
			/* try again */
			return getAuthToken();
		} else {
			response.json().then((json) => {
				console.log(json);
			});
		}
	}).catch((error) => {
		console.log(error);
	});
};

const populateTable = (token) => {
	fetch(
		baseRestURL + '/api/v2/reports/' + reportID + '/instances',
		{
			method: 'POST',
			credentials: 'include', /* include cookie */
			mode: 'cors', /* set as CORS mode for cross origin resource sharing */
			headers: {
				'Content-Type': 'application/json',
				'Accept': 'application/json',
				'X-MSTR-AuthToken': token,
				'X-MSTR-ProjectID': projectID
			}
		}
	).then(response => {
		return response.json();
	}).then((data) => {
		createGrid(data);
	}).catch((error) => {
		console.log(error);
	});

};

function createGrid(response) {

	var fields = [];

	var grid = response.definition.grid;
	var attributes = grid.rows;
	var metrics = grid.columns[0].elements;
	for (var i = 0; i < attributes.length; i++) {
		var field = {};
		field.name = attributes[i].name;
		field.type = "text";

		fields.push(field);
	}

	for (var i = 0; i < metrics.length; i++) {
		var field = {};
		field.name = metrics[i].name;
		field.type = "number";
		fields.push(field);
	}
	var formattedData = [];
	var data = response.data;
	for (var k = 0; k < data.paging.current; k++) {
		var formattedRow = {};
		const headers = data.headers.rows[k];
		for (var i = 0; i < attributes.length; i++) {

			formattedRow[attributes[i].name] = attributes[i].elements[i].formValues[0];
		}
		const metricValues = data.metricValues.formatted[k];
		for (var i = 0; i < metrics.length; i++) {
			formattedRow[metrics[i].name] = metricValues[i]
		}
		formattedData.push(formattedRow);
	}


	$("#jsGrid").jsGrid({
		width: "100%",
		height: "400px",

		inserting: false,
		editing: false,
		sorting: false,
		paging: true,
		filtering: false,

		pageButtonCount: 5,

		data: formattedData,

		fields: fields
	});
}

/* ----------------------------- */
/* This is where we fetch the auth token and then use it to get data and create table */
getAuthToken()
.then(token => { populateTable(token); })
.catch(error => { console.log(error); });
/* ----------------------------- */
</script>