Embedding SDK Samples

https://microstrategy.github.io/embedding-sdk-samples
Admin
A collection of samples demonstrating the functionality and workflows of the MicroStrategy Embedding...
Tokens:9,790
Snippets:91
Trust Score:8.3
Update:4 months ago
Show doc for...
Tokens:
Raw
### Search Reports Example URL

Source: https://microstrategy.github.io/embedding-sdk-samples/library_browsing

An example URL demonstrating how to search for reports with specific query parameters like name, type, and limit.

```javascript
https://demo.microstrategy.com/MicroStrategyLibrary/api/searches/results?name=report1&type=3&limit=10
```

--------------------------------

### Get Library - GET /api/library

Source: https://microstrategy.github.io/embedding-sdk-samples/library_browsing

Retrieves the library content for the currently authenticated user.

```javascript
GET /api/library
```

--------------------------------

### Get Quick Search Results - GET /api/searches/results

Source: https://microstrategy.github.io/embedding-sdk-samples/library_browsing

Fetches search results using the Quick Search engine and displays them as a list.

```javascript
GET /api/searches/results
```

--------------------------------

### Get Session - GET /api/sessions

Source: https://microstrategy.github.io/embedding-sdk-samples/library_browsing

Retrieves information about the current configuration session.

```javascript
GET /api/sessions
```

--------------------------------

### Login and Get Identity Token

Source: https://microstrategy.github.io/embedding-sdk-samples/feature_showcase/3_Use_IdentityToken.html

This JavaScript function handles the login process and retrieves an identity token from the MicroStrategy API. It uses the Fetch API to make POST requests to the /api/auth/login and /api/auth/identityToken endpoints. Ensure the correct baseURL, username, password, and loginMode are provided.

```javascript
function login() {
    var baseURL = document.getElementById("baseURL").value
    var username = document.getElementById("username").value
    var password = document.getElementById("password").value
    var loginMode = parseInt(document.getElementById("loginMode").value)
    var options = {
        method: 'POST',
        credentials: 'include',
        // Including cookie mode: 'cors',
        // Setting as cors mode for cross origin headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ loginMode, username, password })
    };
    return fetch(baseURL + '/api/auth/login', options)
        .then(function(response) {
            if (response.ok) {
                const authToken = response.headers.get('x-mstr-authToken');
                var option = {
                    method: 'POST',
                    credentials: 'include',
                    // Including cookie mode: 'cors',
                    // Setting as cors mode for cross origin examples: {
                        'Content-Type': 'application/json',
                        'X-MSTR-AuthToken': authToken
                    }
                }
                return fetch(baseURL + '/api/auth/identityToken', option)
                    .then(function(response) {
                        if (response.ok) {
                            return response.headers.get('X-MSTR-IdentityToken')
                        }
                    })
            } else {
                response.json().then(function(json) {
                    console.log(json);
                });
            }
        }).catch(function(error) {
            console.log(error);
        });
}
```

--------------------------------

### Create Dossier Instance

Source: https://microstrategy.github.io/embedding-sdk-samples/feature_showcase/7_Use_Dossier_Instance.html

This function handles the authentication and creation of a dossier instance. It sends a POST request to the /api/auth/login endpoint for authentication, and then to the /api/dossiers/{dossierId}/instances endpoint to create the instance. The resulting JSON is displayed in the 'dossierInstance' textarea.

```javascript
function createDossierInstance() {
var baseURL = document.getElementById("baseURL").value
var username = document.getElementById("username").value
var password = document.getElementById("password").value
var loginMode = parseInt(document.getElementById("loginMode").value)
var options = {
method: 'POST',
credentials: 'include',
// Including cookie mode: 'cors',
// Setting as cors mode for cross origin headers:
{
'Content-Type': 'application/json'
},
body: JSON.stringify({ loginMode, username, password })
};
fetch(baseURL + '/api/auth/login', options)
.then(function(response) {
if (response.ok) {
const authToken = response.headers.get('x-mstr-authToken')
const dossierId = document.getElementById('dossierId').value
const projectId = document.getElementById('projectId').value
const options = {
method: 'POST',
credentials: 'include',
// Including cookie mode: 'cors',
// Setting as cors mode for cross origin origin headers:
{
'content-type': 'application/json',
"accept": "application/json",
"x-mstr-authtoken": authToken,
"x-mstr-projectid": projectId,
}
}
fetch(baseURL + '/api/dossiers/' + dossierId + '/instances', options)
.then(response => {
response.json().then(json => {
document.getElementById('dossierInstance').innerText = JSON.stringify(json, null, 2)
})
})
}
else {
response.json().then(json => {
console.log(json);
});
}
}).catch(error => {
console.log(error);
});
}
```

--------------------------------

### Show Dossier

Source: https://microstrategy.github.io/embedding-sdk-samples/feature_showcase/7_Use_Dossier_Instance.html

This function displays a dossier in a specified HTML element. It retrieves the necessary IDs and the dossier instance JSON, constructs the dossier URL, and then uses `microstrategy.dossier.create` to render the dossier. Ensure the placeholder div and necessary IDs are present in your HTML.

```javascript
function showDossier() {
var baseURL = document.getElementById("baseURL").value
var projectId = document.getElementById("projectId").value
var dossierId = document.getElementById("dossierId").value
var dossierInstance = JSON.parse(document.getElementById("dossierInstance").innerText)
var placeHolderDiv = document.getElementById("myDossier");
var dossierUrl = baseURL + '/app/' + projectId + '/' + dossierId;
microstrategy.dossier.create({
placeholder: placeHolderDiv,
url: dossierUrl,
instance: dossierInstance,
enableResponsive: true,
containerHeight: '1000px',
}).then(dossier => {
d = dossier
}).catch(e => {
console.log(e.message)
});
}
```

--------------------------------

### HTML Structure for Embedding SDK

Source: https://microstrategy.github.io/embedding-sdk-samples/feature_showcase/4_Use_SAML.html

Sets up the HTML page with input fields for server, project, and dossier IDs, along with buttons to trigger login and dossier display. Includes the Embedding SDK JavaScript library.

```html
<html>
<head>
<script type="text/javascript" src="https://demo.microstrategy.com/MicroStrategyLibrary/javascript/embeddinglib.js"></script>
</head>
<body>
<div>
<div>Server:<input type="text" id="baseURL" value="https://[Your MicroStrategy Environment]/MicroStrategyLibrary" size="100"></div>
<div>ProjectID: <input type="text" id="projectId" value="73E53B9A11EAB363B78E0080EF8506F9" size="100"></div>
<div>DossierID: <input type="text" id="dossierId" value="ECC26AE1584D33F0AF9B1BA7C0DC5F0B" size="100"></div>
<p>The <input type="submit" onclick="autoLogin()" value="autoLogin()"> function can be used to automatically show dossier if the user has already logged in.</p>
<p>Otherwise, you can click <input type="submit" onclick="login('1048576')" value="Login with SAML"> or <input type="submit" onclick="login('4194304')" value="Login with OIDC">to log in. </p>
<p>This solution works on MicroStrategy 2021+, except Update 2. See another example for Update 2. This solution works for both SAML (loginMode=1048576) and OIDC (loginMode=4194304) authentications. Just need to change the loginMode parameter.</p>
<p> If you need this for MicroStrategy 2020, you need to add login-dialog.jsp to your library server under auth directory. You can find a copy in MicroStrategy 2021 Library Server. </p>
</div>
<div id="myDossier"></div>
<script type="text/javascript">
//Fetch auth token function getAuthToken() {
let options = {
method: "GET",
credentials: "include", //Including cookie mode: "cors", // Setting as cors mode for cross origin headers: {"content-type": "application/json"},
};
const baseURL = document.getElementById("baseURL").value;
return fetch( baseURL + "/api/auth/token",options )
.then((response) => {
if (response.ok) {
return response.headers.get("x-mstr-authtoken");
} else {
// Log the response json if it failed
return null
}
})
.catch((error) => {
// Log the error if failed
return null
})
}

//This function will automatically show the dossier, if user has already logged into MicroStrategy Library.
function autoLogin() {
getAuthToken().then(function(token) {
if (!!token) {
//If we have auth token, show dossier.
showDossier();
}
})
}

function login(mode) {
//listen to the message will be sent from MicroStrategy Library login page
window.addEventListener("message", messageEventListener);
const baseURL = document.getElementById("baseURL").value;
//need to store the tab. close it later.
this.newTab = window.open(baseURL + "/auth/login-dialog.jsp?loginMode="+mode+"&callback-origin=" + encodeURIComponent(location.origin), "_blank");
};

function messageEventListener() {
//SAML auth is complete
window.removeEventListener("message", messageEventListener);
showDossier();
//close tab
if (this.newTab) {
this.newTab.close();
this.newTab = null;
};
}

function showDossier() {
var baseURL = document.getElementById("baseURL").value
var projectId = document.getElementById("projectId").value
var dossierId = document.getElementById("dossierId").value
var placeHolderDiv = document.getElementById("myDossier");
var dossierUrl = baseURL + '/app/' + projectId + '/' + dossierId;
microstrategy.dossier.create({
placeholder: placeHolderDiv,
url: dossierUrl,
enableCustomAuthentication: true,
enableResponsive: true,
customAuthenticationType: microstrategy.dossier.CustomAuthenticationType.AUTH_TOKEN,
getLoginToken: getAuthToken,
containerHeight: '1000px'
}).then(function(dossier) {
// use the dossier instance if you need
});
}

autoLogin();
</script>
</body>
</html>
```

--------------------------------

### Embed and Control Single Visualization

Source: https://microstrategy.github.io/embedding-sdk-samples/feature_showcase/9_Single_Visualization.html

Initializes a single visualization from a MicroStrategy dossier, sets up event handlers for page and visualization changes, and provides functions to resize the visualization and toggle the resize button's visibility.

```html
<html>
<head>
<script type="text/javascript" src="https://demo.microstrategy.com/MicroStrategyLibrary/javascript/embeddinglib.js"></script>
</head>
<body>
<div>This example shows how to use Embedding SDK to show single visualization. </div>
<div id="visualPanel">
 <select id="visualSelector"></select>
 <button onclick="resizeVisual('maximized')">Max Size</button>
 <button onclick="resizeVisual('normal')">Normal Size</button>
 <input type="checkbox" id="resizeButtonVisible" checked=""><span>Resize Button</span>
</div>
<div id="mydossier"></div>
<script type="text/javascript">
 var url = "https://demo.microstrategy.com/MicroStrategyLibrary/app/EC70648611E7A2F962E90080EFD58751/B9AD59BA4AD8B047047212BAE1A236A3";
 var key = "W367";
 document.addEventListener("DOMContentLoaded", function () {
 var container = document.getElementById("mydossier");
 //This page has multiple visualizations
 microstrategy.dossier.create({
 url: url,
 enableResponsive: true,
 placeholder: container,
 containerHeight: '1000px',
 enableCollaboration: false,
 dockedTOC: {
 canClose: true,
 dockChangeable: false,
 isDocked: false
 },
 navigationBar: {
 enabled: false
 },
 //Config the visualization appearances
 visualizationAppearances: [{
 visualizationKey: key,
 size: "maximized",
 resizeButtonVisible: false
 }]
 }).then((dossier) => {
 d = dossier;
 d.registerEventHandler(microstrategy.dossier.EventType.ON_PAGE_SWITCHED, updateVisuals);
 d.registerEventHandler(microstrategy.dossier.EventType.ON_PAGE_LOADED, updateVisuals);
 d.registerEventHandler(microstrategy.dossier.EventType.ON_VISUALIZATION_RESIZED, handleVisualizationResized);
 updateVisuals();
 })
 });

 //Event handler for visualization resized.
 handleVisualizationResized = function (e) {
 //Add your code here
 console.log("Visualization Resized Event");
 }

 //Populate the visualization selector
 updateVisuals = function () {
 d.getCurrentPageVisualizationList().then((visuals) => {
 let s = document.getElementById("visualSelector");
 while (s.firstChild) {
 s.removeChild(s.lastChild);
 }
 for (visual of visuals) {
 let o = document.createElement("option");
 o.value = visual.key;
 o.innerText = visual.name;
 if (visual.key === key) {
 o.selected = true;
 }
 s.appendChild(o);
 }
 })
 }

 resizeVisual = function (size) {
 //Change Visualization Size programmatically
 let visualSelector = document.getElementById("visualSelector");
 let key = visualSelector.selectedOptions[0].value;
 let resizeButtonVisible = document.getElementById("resizeButtonVisible").checked;
 d.changeVisualizationSize({
 visualizationKey: key,
 size: size,
 resizeButtonVisible: resizeButtonVisible
 })
 .then((visualization) => {
 console.log("The follow visualization is resized: ", visualization);
 })
 .catch((error) => {
 console.log(error);
 });
 }
</script>
</body>
</html>
```

--------------------------------

### Initialize Dossier and Event Handlers

Source: https://microstrategy.github.io/embedding-sdk-samples/feature_showcase/11_Selection.html

Initializes the dossier and registers event handlers for page switching and loading to reset selectors.

```javascript
var url = "https://demo.microstrategy.com/MicroStrategyLibrary/app/EC70648611E7A2F962E90080EFD58751/69AF3E7DB548FD6E23C57E9B71DD966B"
selectedAttribute = new Set()
document.addEventListener("DOMContentLoaded", function(){
    var container = document.getElementById("mydossier")
    //This page has multiple visualizations
    microstrategy.dossier.create({
        url: url,
        enableResponsive: true,
        placeholder: container,
        containerHeight: '800px',
        enableCollaboration: false,
        dockedTOC: {
            canClose: true,
            dockChangeable: false,
            isDocked:false
        },
        navigationBar: {
            enabled: false
        }
    }).then((dossier) => {
        d = dossier
        d.registerEventHandler(microstrategy.dossier.EventType.ON_PAGE_SWITCHED, reset)
        d.registerEventHandler(microstrategy.dossier.EventType.ON_PAGE_LOADED, reset)
    })
})

reset = function() {
    resetVisualSelector()
    resetElementSelector()
    selectedAttribute = new Set()
}
```

--------------------------------

### Initialize Dossier and Handle PanelStack Events

Source: https://microstrategy.github.io/embedding-sdk-samples/feature_showcase/10_PanelStack.html

Initializes a MicroStrategy Dossier using the Embedding SDK and registers event handlers for page and panel switches. This code should be used when you need to embed a dossier and manage its interactive elements like panel stacks.

```javascript
var url = "https://demo.microstrategy.com/MicroStrategyLibrary/app/EC70648611E7A2F962E90080EFD58751/5587CB0B11EB8297835E0080AFEB08B5";
document.addEventListener("DOMContentLoaded", function () {
  let container = document.getElementById("mydossier");
  microstrategy.dossier
    .create({
      url: url,
      enableResponsive: true,
      placeholder: container,
      containerHeight: "1000px",
      enableCollaboration: false,
      dockedTOC: {
        canClose: true,
        dockChangeable: false,
        isDocked: false,
      },
      navigationBar: {
        enabled: false,
      },
    })
    .then((dossier) => {
      d = dossier;
      d.registerEventHandler(microstrategy.dossier.EventType.ON_PAGE_SWITCHED, updatePanels);
      d.registerEventHandler(microstrategy.dossier.EventType.ON_PAGE_LOADED, updatePanels);
      d.registerEventHandler(microstrategy.dossier.EventType.ON_PANEL_SWITCHED, handlePanelSwitched);
      updatePanels();
    });
});
```

--------------------------------

### Apply Selections on Dossier Load

Source: https://microstrategy.github.io/embedding-sdk-samples/feature_showcase/12_Selection_On_Load.html

Use the `visualizationSelectedElements` parameter within the `microstrategy.dossier.create` function to define initial selections for specific visualizations. This requires the visualization's key and the attribute elements to be selected.

```html
<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="https://demo.microstrategy.com/MicroStrategyLibrary/javascript/embeddinglib.js"></script>
</head>
<body>
  <div>This example shows how to make selections on visualization on the initial load. This example contains hard-coded object IDs. </div>
  <div id="mydossier"></div>
  <script type="text/javascript">
    var url = "https://demo.microstrategy.com/MicroStrategyLibrary/app/EC70648611E7A2F962E90080EFD58751/69AF3E7DB548FD6E23C57E9B71DD966B"
    document.addEventListener("DOMContentLoaded", function () {
      let container = document.getElementById("mydossier")
      //This page has multiple visualizations
      microstrategy.dossier.create({
        url: url,
        enableResponsive: true,
        placeholder: container,
        containerHeight: '800px',
        enableCollaboration: false,
        dockedTOC: {
          canClose: true,
          dockChangeable: false,
          isDocked: false
        },
        navigationBar: {
          enabled: false
        },
        visualizationSelectedElements: [
          {
            visualizationkey: "K59",
            selection: {
              attributeElements: [
                {
                  attribute: {
                    id: "8D679D3711D3E4981000E787EC6DE8A4",
                    name: "Category" //This is optional
                  },
                  elements: [
                    {
                      id: "h3;8D679D3711D3E4981000E787EC6DE8A4",
                      name: "Movies" //This is optional
                    },
                  ],
                },
              ],
            },
          },
        ]
      }).then((dossier) => {
        // 
      })
    })
  </script>
</body>
</html>
```

--------------------------------

### Authenticate User - POST /api/auth/login

Source: https://microstrategy.github.io/embedding-sdk-samples/library_browsing

Authenticates a user and establishes an HTTP session on the MicroStrategy web server.

```javascript
POST /api/auth/login
```

--------------------------------

### Guest Login with Multiple Auth Modes

Source: https://microstrategy.github.io/embedding-sdk-samples/feature_showcase/1_2_Guest_With_MultiAuth.html

This JavaScript function initiates a POST request to the MicroStrategy authentication API to log in as a guest user. It's used when the server supports multiple authentication types and guest access is enabled.

```javascript
function login() {
    var options = {
        method: 'POST',
        credentials: 'include',
        mode: 'cors',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
            loginMode: 8 // Login as guest user.
        })
    };
    return fetch(baseURL + '/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);
        });
}
```

--------------------------------

### Enable CORS with configOverride.properties

Source: https://microstrategy.github.io/embedding-sdk-samples

Manually configure Cross-Origin Resource Sharing (CORS) by editing the configOverride.properties file. This is necessary when embedding MicroStrategy content in a web page on a different domain.

```properties
auth.cors.origins=http://example.com:port
security.allowedOrigins=http://example.com:port
```

--------------------------------

### Show Dossier with Identity Token Authentication

Source: https://microstrategy.github.io/embedding-sdk-samples/feature_showcase/3_Use_IdentityToken.html

This JavaScript function initializes and displays a MicroStrategy dossier using the embedding SDK. It configures custom authentication by providing a function to retrieve the login token. Ensure the placeholder div, baseURL, projectId, and dossierId are correctly set.

```javascript
function showDossier() {
    var baseURL = document.getElementById("baseURL").value
    var projectId = document.getElementById("projectId").value
    var dossierId = document.getElementById("dossierId").value
    var placeHolderDiv = document.getElementById("myDossier");
    var dossierUrl = baseURL + '/app/' + projectId + '/' + dossierId;
    microstrategy.dossier.create({
        placeholder: placeHolderDiv,
        url: dossierUrl,
        enableCustomAuthentication: true,
        enableResponsive: true,
        customAuthenticationType: microstrategy.dossier.CustomAuthenticationType.IDENTITY_TOKEN,
        getLoginToken: login,
        containerHeight: '1000px'
    });
}
```

--------------------------------

### Show Dossier with Custom Error Handlers

Source: https://microstrategy.github.io/embedding-sdk-samples/feature_showcase/5_ErrorHandling.html

This function creates and displays a dossier, integrating custom error handling for both the initial creation and subsequent interactions.

```javascript
function showDossier() {
    var baseURL = document.getElementById("baseURL").value
    var projectId = document.getElementById("projectId").value
    var dossierId = document.getElementById("dossierId").value
    var placeHolderDiv = document.getElementById("myDossier");
    var dossierUrl = baseURL + '/app/' + projectId + '/' + dossierId;
    microstrategy.dossier.create({
        placeholder: placeHolderDiv,
        url: dossierUrl,
        enableCustomAuthentication: true,
        enableResponsive: true,
        customAuthenticationType: microstrategy.dossier.CustomAuthenticationType.AUTH_TOKEN,
        getLoginToken: login,
        containerHeight: '1000px',
        errorHandler: customErrorHandler
    }).then(function(dossier) {
        dossier.addCustomErrorHandler(function(error) {
            //Add custom logic here
            window.alert("Error after creating of dossier: " + error.message)
        });
    });
}
```

--------------------------------

### Apply Filter to Dossier on Creation

Source: https://microstrategy.github.io/embedding-sdk-samples/feature_showcase/6_Filters.html

Use the 'filters' parameter in the microstrategy.dossier.create function to pre-apply filters. Specify the attribute name and the desired selections for that attribute.

```javascript
document.addEventListener("DOMContentLoaded", function(){
  var container = document.getElementById("mydossier"),
      url = "https://demo.microstrategy.com/MicroStrategyLibrary/app/EC70648611E7A2F962E90080EFD58751/837B57D711E941BF000000806FA1298F/W232--K146";
  microstrategy.dossier.create({
    url: url,
    enableResponsive: true,
    placeholder: container,
    containerHeight: '1000px',
    filters: [
      {
        "name": "Region", //You can change to the actual attribute name.
        "selections": [
          {"name":"NAM"} //You can change to the actual attribute element name.
        ]
      }
    ]
  })
});
```

--------------------------------

### Embed Dossier with Guest Authentication

Source: https://microstrategy.github.io/embedding-sdk-samples/feature_showcase/1_2_Guest_With_MultiAuth.html

This JavaScript code embeds a MicroStrategy dossier into a placeholder div. It configures the embedding to use custom authentication, specifically token-based authentication, and provides the 'login' function to obtain the necessary authentication token for guest access.

```javascript
document.addEventListener("DOMContentLoaded", function(){
    var placeHolderDiv = document.getElementById("mydossier");
    var dossierUrl = baseURL +'/app/'+ projectId + '/' + dossierId;
    microstrategy.dossier.create({
        placeholder: placeHolderDiv,
        url: dossierUrl,
        enableCustomAuthentication: true,
        enableResponsive: true,
        customAuthenticationType: microstrategy.dossier.CustomAuthenticationType.AUTH_TOKEN,
        getLoginToken: login
    });
});
```

--------------------------------

### JavaScript Login Function for Auth Token

Source: https://microstrategy.github.io/embedding-sdk-samples/feature_showcase/2_Use_Auth_Token.html

This JavaScript function handles the login process to obtain an authentication token from the MicroStrategy server. It sends credentials via a POST request and returns the token if successful.

```javascript
function login() {
    var baseURL = document.getElementById("baseURL").value;
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    var loginMode = parseInt(document.getElementById("loginMode").value);
    var options = {
        method: 'POST',
        credentials: 'include',
        mode: 'cors',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ loginMode, username, password })
    };
    return fetch(baseURL + '/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)
        });
}
```

--------------------------------

### Populate Panel Stack Selector

Source: https://microstrategy.github.io/embedding-sdk-samples/feature_showcase/10_PanelStack.html

Fetches the current page's panel stacks and dynamically creates HTML select elements for each panel stack, allowing users to switch between panels. This function is called upon page load or switch.

```javascript
updatePanels = function () {
  d.getCurrentPagePanelStacks()
    .then((currentPagePanelStacks) => {
      let panelStacksPanel = document.getElementById("panelStacksPanel");
      while (panelStacksPanel.firstChild) {
        panelStacksPanel.removeChild(panelStacksPanel.lastChild);
      }
      for (panelStack of currentPagePanelStacks) {
        let nameSpan = document.createElement("span");
        nameSpan.innerText = panelStack.name;
        panelStacksPanel.appendChild(nameSpan);
        let s = document.createElement("select");
        s.setAttribute("onchange", "selectPanel(this)");
        for (panel of panelStack.panels) {
          let o = document.createElement("option");
          o.value = panel.key;
          o.innerText = panel.name;
          s.appendChild(o);
        }
        panelStacksPanel.appendChild(s);
      }
    })
    .catch((error) => {
      console.log(error);
    });
};
```

--------------------------------

### Apply Visualization Selection

Source: https://microstrategy.github.io/embedding-sdk-samples/feature_showcase/11_Selection.html

Applies the selected elements to a visualization based on the chosen action (replace, add, remove).

```javascript
applySelection = function() {
    let visualSelector = document.getElementById("visualSelector")
    let key = visualSelector.selectedOptions[0].value
    let action = document.getElementById("actionSelector").value
    let attributeElements = []
    //Listen to specific visualization
    d.registerGraphicsSelectEventHandlerToViz(key, (selectedElements)=> {
        //console.log("GraphicsSelectEventHandlerToViz", key, selectedElements)
    })
    for (attr of attrElements) {
        let attrID = attr.attribute.id
        if (selectedAttribute.has(attrID)) {
            let elementSelector = document.getElementById(attrID)
            let attribute = { "id": attrID}
            let elements = []
            for (o of elementSelector.selectedOptions) {
                elements.push({"id": o.id})
            }
            attributeElements.push({attribute,elements})
        }
    }
    let obj = {
        "vizKey": key,
        "action": action,
        "selection": { attributeElements }
    }
    // console.log(obj)
    d.selectVizElement(obj).then(selection => {
        //console.log(selection)
    })
}
```

--------------------------------

### Update Visualization Selector

Source: https://microstrategy.github.io/embedding-sdk-samples/feature_showcase/11_Selection.html

Fetches the list of available visualizations for the current page and populates the visual selector dropdown.

```javascript
resetVisualSelector = function() {
    let s = document.getElementById("visualSelector")
    while (s.firstChild) {
        s.removeChild(s.lastChild)
    }
}

updateVisuals = function () {
    d.getCurrentPageVisualizationList().then((visuals) => {
        resetVisualSelector()
        let s = document.getElementById("visualSelector")
        for (visual of visuals) {
            let o = document.createElement("option")
            o.value = visual.key
            o.innerText = visual.name
            s.appendChild(o)
        }
    })
}
```

--------------------------------

### Populate Element Selector

Source: https://microstrategy.github.io/embedding-sdk-samples/feature_showcase/11_Selection.html

Retrieves available elements for a selected visualization and populates the element panel with selectable options.

```javascript
resetElementSelector = function() {
    let elementPanel = document.getElementById("elementPanel")
    while (elementPanel.firstChild) {
        elementPanel.removeChild(elementPanel.lastChild)
    }
}

getElements = function() {
    let visualSelector = document.getElementById("visualSelector")
    let key = visualSelector.selectedOptions[0].value
    d.getAvailableElements(key).then(availableElements => {
        attrElements = availableElements
        resetElementSelector()
        let elementPanel = document.getElementById("elementPanel")
        for (attributeSelector of availableElements) {
            let attr = attributeSelector.attribute
            let elements = attributeSelector.elements
            let nameSpan = document.createElement("span")
            nameSpan.innerText = attr.name+" "
            elementPanel.appendChild(nameSpan)
            let s = document.createElement("select")
            s.setAttribute("id", attr.id)
            s.setAttribute("multiple", "true")
            for (item of elements) {
                let o = document.createElement("option")
                o.value = item.name
                o.id = item.id
                o.innerText = item.name
                s.appendChild(o)
            }
            elementPanel.appendChild(s)
            let checkbox = document.createElement("input")
            checkbox.setAttribute("type", "checkbox")
            checkbox.setAttribute("attrID", attr.id)
            checkbox.setAttribute("onchange", "selectAttr(this)")
            elementPanel.appendChild(checkbox)
        }
    }).catch(error => {
        
    })
}
```

--------------------------------

### Embed Dossier with Guest Authentication

Source: https://microstrategy.github.io/embedding-sdk-samples/feature_showcase/1_No_Authentication.html

This HTML and JavaScript code embeds a MicroStrategy dossier using guest authentication. Ensure the embeddinglib.js script is included and the target div has a valid ID.

```html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://demo.microstrategy.com/MicroStrategyLibrary/javascript/embeddinglib.js"></script>
</head>
<body>
<div>This example uses guest authentication. </div>
<div id="mydossier"></div>
<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function(){
    var container = document.getElementById("mydossier");
    var url = "https://demo.microstrategy.com/MicroStrategyLibrary/app/EC70648611E7A2F962E90080EFD58751/837B57D711E941BF000000806FA1298F";
    microstrategy.dossier.create({
      url: url,
      enableResponsive: true,
      placeholder: container,
      containerHeight: '1000px',
      enableCollaboration: false,
      dockedTOC: {
        dockedPosition: 'right',
        theme: 'light',
        canClose: false,
        dockChangeable: false,
        isDocked:true
      },
      navigationBar: {
        enabled: false,
        gotoLibrary: false,
        title: false,
        toc: false,
        reset: false,
        share: false,
        comment: false,
        filter: false
      },
      optionsFeature: {
        enabled: false,
        help: true,
        manage: true,
        logout: true,
        showTutorials: true
      },
      filterFeature: {
        enabled: false,
        editable: false,
        summary: true
      },
      shareFeature: {
        enabled: false,
        invite: false,
        link: false,
        email: false,
        export: false,
        download: false
      }
    });
  });
</script>
</body>
</html>
```

--------------------------------

### Custom Login Token Function

Source: https://microstrategy.github.io/embedding-sdk-samples/feature_showcase/5_ErrorHandling.html

This function handles the login process and retrieves an authentication token. It's used by the SDK when custom authentication is enabled.

```javascript
function login() {
    var baseURL = document.getElementById("baseURL").value
    var username = document.getElementById("username").value
    var password = document.getElementById("password").value
    var loginMode = parseInt(document.getElementById("loginMode").value)
    var options = {
        method: 'POST',
        credentials: 'include',
        // Including cookie mode: 'cors',
        // Setting as cors mode for cross origin headers: {
        'Content-Type': 'application/json'
        },
        body: JSON.stringify({ loginMode, username, password })
    };
    return fetch(baseURL + '/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);
        });
}
```

--------------------------------

### JavaScript Function to Show Dossier with Auth Token

Source: https://microstrategy.github.io/embedding-sdk-samples/feature_showcase/2_Use_Auth_Token.html

This function initiates the embedding of a MicroStrategy dossier using a custom authentication token. It configures the embedding library with the login token retrieval function and error handling.

```javascript
function showDossier() {
    var baseURL = document.getElementById("baseURL").value;
    var projectId = document.getElementById("projectId").value;
    var dossierId = document.getElementById("dossierId").value;
    var placeHolderDiv = document.getElementById("myDossier");
    var dossierUrl = baseURL + '/app/' + projectId + '/' + dossierId;
    microstrategy.dossier.create({
        placeholder: placeHolderDiv,
        url: dossierUrl,
        enableCustomAuthentication: true,
        enableResponsive: true,
        customAuthenticationType: microstrategy.dossier.CustomAuthenticationType.AUTH_TOKEN,
        getLoginToken: login,
        containerHeight: '1000px',
        errorHandler: customErrorHandler
    }).then(function(dossier) {
        d = dossier;
        dossier.addCustomErrorHandler(function(error) {
            //Add custom logic here
            window.alert("Error after creating of dossier: " + error.message);
        });
    });
}
```

--------------------------------

### Access Embedding SDK JavaScript

Source: https://microstrategy.github.io/embedding-sdk-samples

Include the Embedding SDK in your web application by referencing its URL. This allows you to embed MicroStrategy Dossiers and control their behavior via JavaScript.

```html
https://[YOUR Environment]/MicroStrategyLibrary/javascript/embeddinglib.js
```

--------------------------------

### Configure CORS via Library Admin URL

Source: https://microstrategy.github.io/embedding-sdk-samples

Access the Library Admin page to configure CORS settings. This is the recommended method for enabling embedding in other sites.

```html
https://<host_name>:<port>/MicroStrategyLibrary/admin
```

--------------------------------

### Switch Panel in Dossier

Source: https://microstrategy.github.io/embedding-sdk-samples/feature_showcase/10_PanelStack.html

Switches the current panel within a selected panel stack using its key. This function is triggered by the 'onchange' event of the select element created in `updatePanels`.

```javascript
selectPanel = function (item) {
  d.switchPanel(item.value)
    .then((switchPanel) => {
      console.log("Panel switched to "+switchPanel.currentPanel);
    })
    .catch((error) => {
      console.log(error);
    });
};
```

--------------------------------

### Keep Session Alive - PUT /api/sessions

Source: https://microstrategy.github.io/embedding-sdk-samples/library_browsing

Extends the HTTP and Intelligence Server sessions by resetting their timeouts.

```javascript
PUT /api/sessions
```

--------------------------------

### Handle Panel Switched Event

Source: https://microstrategy.github.io/embedding-sdk-samples/feature_showcase/10_PanelStack.html

A callback function that logs a message to the console when a panel switch event occurs. This is registered using `d.registerEventHandler`.

```javascript
handlePanelSwitched = function(e) {
  console.log("Panel switched.", e)
}
```

--------------------------------

### JavaScript Custom Error Handler

Source: https://microstrategy.github.io/embedding-sdk-samples/feature_showcase/2_Use_Auth_Token.html

A placeholder function for handling errors that occur during the dossier creation process. This allows for custom error management within the embedding application.

```javascript
function customErrorHandler(error) {
    //Add custom logic here
    window.alert("Error during creating of dossier: " + error.message);
}
```

--------------------------------

### Track Attribute Selection

Source: https://microstrategy.github.io/embedding-sdk-samples/feature_showcase/11_Selection.html

Manages the selection and deselection of attributes based on checkbox changes.

```javascript
selectAttr = function(input) {
    let attrID = input.getAttribute("attrID")
    if (input.checked) {
        selectedAttribute.add(attrID)
    } else {
        selectedAttribute.delete(attrID)
    }
}
```
Tokens:
Raw