|
| 1 | +--- |
| 2 | +title: Native Embedding SDK Feature Flags |
| 3 | +description: Native Embedding SDK Feature Flags |
| 4 | +--- |
| 5 | + |
| 6 | +The Native Embedding SDK has some client-side feature flags, which enables the customer open or close some functionalites flexibly. These feature flags can be set via js global variables. |
| 7 | + |
| 8 | +## Feature Flags |
| 9 | + |
| 10 | +### MULTIPLE_DOSSIERS |
| 11 | + |
| 12 | +When this feature flag is set to `true`, the Native Embedding SDK allows the user to embed the visualizations from different dossiers. |
| 13 | + |
| 14 | +This feature flag can be set by: |
| 15 | + |
| 16 | +```js |
| 17 | +window.microstrategy.nativeEmbedding.featureFlags.multipleDossiers = true; |
| 18 | +``` |
| 19 | + |
| 20 | +A full example can be seen in [Embed multiple dossier visualizations on a page](http://localhost:3000/native-embedding-architecture/embed-multiple-viz#embed-visualizations-from-multiple-dossiers) |
| 21 | + |
| 22 | +### ENABLE_PROFILE |
| 23 | + |
| 24 | +When this feature flag is set to `true`, the Native Embedding SDK will generate a detailed performance profile in the global variable `window.mstrEmbedProfile`. |
| 25 | + |
| 26 | +This feature flag can be set by: |
| 27 | + |
| 28 | +```js |
| 29 | +window.microstrategy.nativeEmbedding.featureFlags.enableProfile = true; |
| 30 | +``` |
| 31 | + |
| 32 | +A full example is as below: |
| 33 | + |
| 34 | +```js |
| 35 | +try { |
| 36 | + window.microstrategy.nativeEmbedding.featureFlags.enableProfile = true; |
| 37 | + // configuration for the target dossier |
| 38 | + const configs = { |
| 39 | + projectId: "EC70648611E7A2F962E90080EFD58751", |
| 40 | + objectId: "27D332AC6D43352E0928B9A1FCAF4AB0", |
| 41 | + }; |
| 42 | + const environment = await microstrategy.embeddingComponent.environments.create({ |
| 43 | + serverUrl: `https://demo.microstrategy.com/MicroStrategyLibrary`, |
| 44 | + getAuthToken() { |
| 45 | + return fetch(`https://demo.microstrategy.com/MicroStrategyLibrary/api/auth/login`, { |
| 46 | + method: "POST", |
| 47 | + credentials: "include", // including cookie |
| 48 | + mode: "cors", // setting as CORS mode for cross origin |
| 49 | + headers: { "Content-Type": "application/json" }, |
| 50 | + body: JSON.stringify({ |
| 51 | + // here we login as guest user, you can log in as normal user with `username` and `password` as well |
| 52 | + // username: "input your username", |
| 53 | + // password: "input your password", |
| 54 | + loginMode: 8, // 8 means guest login, use `1` if you log in as normal user |
| 55 | + }), |
| 56 | + }) |
| 57 | + .then((response) => { |
| 58 | + if (response && response.ok) { |
| 59 | + return response.headers.get("X-MSTR-authToken"); |
| 60 | + } |
| 61 | + throw Error("Failed to fetch auth token."); |
| 62 | + }) |
| 63 | + .catch((error) => { |
| 64 | + console.log("Error:", error); |
| 65 | + }); |
| 66 | + }, |
| 67 | + }); |
| 68 | + const mstrBot = await environment.loadBot({ |
| 69 | + projectId: configs.projectId, |
| 70 | + objectId: configs.objectId, |
| 71 | + }); |
| 72 | + // the data id can be obtained from the `mstrBot.getQuestions() API` |
| 73 | + const dataIdAndContainers = [ |
| 74 | + { |
| 75 | + dataId: "A1F3431F2CA2481BB966EC8F35A9AC3A", |
| 76 | + container: document.getElementById("container1"), |
| 77 | + }, |
| 78 | + { |
| 79 | + dataId: "B1F3431F2CA2481BB966EC8F35A9AC3A", |
| 80 | + container: document.getElementById("container2"), |
| 81 | + }, |
| 82 | + ]; |
| 83 | + const botVizList = await Promise.all( |
| 84 | + dataIdAndContainers.map((dataIdAndContainer) => { |
| 85 | + const { dataId, container } = dataIdAndContainer; |
| 86 | + return mstrBot.renderVisualization(dataId, container); |
| 87 | + }) |
| 88 | + ); |
| 89 | +} catch (e) { |
| 90 | + console.error(e.message); |
| 91 | +} |
| 92 | +``` |
0 commit comments