|
| 1 | +--- |
| 2 | +title: Improve embedding dossier page's performance - Case 2 |
| 3 | +description: Describes how to use goToPage() API to enhance the performance in some specific scenarios. |
| 4 | +--- |
| 5 | + |
| 6 | +This page introduces a method to improve the embedding performance in a specific case. |
| 7 | + |
| 8 | +## The performance problem in a specific case |
| 9 | + |
| 10 | +In some embedding scenario, the SDK user may want to enter the Library Web home page first, then enter a dossier page from the Library home page: |
| 11 | + |
| 12 | + |
| 13 | + |
| 14 | + |
| 15 | +Though it seems to be the same case as the user clicks a dossier item on home page to enter a dossier page, the SDK user may want to add some custom workflows when switching the pages, like answer prompts for the selected dossier, or add some customizations on the dossier page UI. So the original Library Web's workflow can't satisfy this. |
| 16 | + |
| 17 | +In this case, the SDK user might write his program like this: |
| 18 | + |
| 19 | +```js |
| 20 | +const embeddingContext = await microstrategy.embeddingContexts.embedLibraryPage(configA); |
| 21 | +// Catch the dossier info when clicking the dossier item on Library homepage |
| 22 | +embeddingContext.registerEventHandler( |
| 23 | + microstrategy.dossier.EventType.ON_DOSSIER_INSTANCE_CHANGED, |
| 24 | + async ({ projectId, dossierId, instanceId }) => { |
| 25 | + // Use REST APIs to answer the prompt, or apply the filter |
| 26 | + await answerPromptForInstance(instanceId); |
| 27 | + await applyFilterForInstance(filterContents); |
| 28 | + const dossier = await microstrategy.dossier.create({ |
| 29 | + instance: { |
| 30 | + mid: instanceId, |
| 31 | + status: 1, |
| 32 | + }, |
| 33 | + ...configB, |
| 34 | + }); |
| 35 | + } |
| 36 | +); |
| 37 | +``` |
| 38 | + |
| 39 | +This workflow works but has some performance issue. |
| 40 | + |
| 41 | +That's because the `microstrategy.dossier.create()` API will destroy the original iframe and create a new iframe, so its loading is like open the dossier in a new browser tab, in which we need to fetch all the resources, including the static resources and REST API result again. |
| 42 | + |
| 43 | +In contrary, in a normal Library Web workflow, when the user enters the dossier page from homepage on Library Web, the js context is maintained. All these resources are cached and Library Web doesn't need to load them repeatedly. |
| 44 | + |
| 45 | +## A better solution: Use `goToPage()` |
| 46 | + |
| 47 | +To improve the performance of this use case and gain the similar performance as clicking the dossier item to enter a dossier pages from the Library homepage. You can use the [EmbeddingContext.goToPage()](../embedding-context/#gotopagepageinfo) API like this: |
| 48 | + |
| 49 | +```javascript |
| 50 | +const embeddingContext = await microstrategy.embeddingContexts.embedLibraryPage(configA); |
| 51 | +// Catch the dossier info when clicking the dossier item on Library homepage |
| 52 | +embeddingContext.registerEventHandler( |
| 53 | + microstrategy.dossier.EventType.ON_DOSSIER_INSTANCE_CHANGED, |
| 54 | + async ({ projectId, dossierId, instanceId }) => { |
| 55 | + // Use REST APIs to create the instance and answer the prompt, or apply the filter |
| 56 | + await answerPromptForInstance(instanceId); |
| 57 | + await applyFilterForInstance(filterContents); |
| 58 | + await embeddingContext.goToPage({ |
| 59 | + projectId, |
| 60 | + objectId: dossierId, |
| 61 | + instanceId, |
| 62 | + isAuthoring: false, |
| 63 | + }); |
| 64 | + } |
| 65 | +); |
| 66 | +``` |
| 67 | + |
| 68 | +The [EmbeddingContext.goToPage()](../embedding-context/#gotopagepageinfo) API will not destroy the current iframe. Its workflow is similar as a simple redirect on the Library Web, so it has the similar performance as entering the dossier page from homepage on Library. |
| 69 | + |
| 70 | +Here are some details about how to use the `goToPage()` to implement the original workflow: |
| 71 | + |
| 72 | +### How to get the dossier instance when the dossier item is clicked |
| 73 | + |
| 74 | +You have 2 ways to get the dossier instance in this workflow: |
| 75 | + |
| 76 | +- If you want to reuse the dossier instance created by the dossier page switch on Library Web, you can use the [ON_DOSSIER_INSTANCE_CHANGED](../add-functionality/add-event#ondossierinstancechanged) event: |
| 77 | + |
| 78 | +```js |
| 79 | +embeddingContext.registerEventHandler( |
| 80 | + microstrategy.dossier.EventType.ON_DOSSIER_INSTANCE_CHANGED, |
| 81 | + async ({ projectId, dossierId, instanceId }) => { |
| 82 | + await answerPromptForInstance(instanceId); |
| 83 | + await applyFilterForInstance(filterContents); |
| 84 | + await embeddingContext.goToPage({ |
| 85 | + projectId, |
| 86 | + objectId: dossierId, |
| 87 | + instanceId, |
| 88 | + isAuthoring: false, |
| 89 | + }); |
| 90 | + } |
| 91 | +); |
| 92 | +``` |
| 93 | + |
| 94 | +- If you want to manage the instance by yourself, or sometimes in the following workflow you still need to create a dossier instance of your own, you can use the [ON_LIBRARY_ITEM_SELECTED](../add-functionality/add-event#onlibraryitemselected) event: |
| 95 | + |
| 96 | +```js |
| 97 | +embeddingContext.registerEventHandler( |
| 98 | + microstrategy.dossier.EventType.ON_LIBRARY_ITEM_SELECTED, |
| 99 | + async ({ projectId, docId }) => { |
| 100 | + // Use REST API to create your own instance |
| 101 | + const instanceId = await createDossierInstance(projectId, docId); |
| 102 | + await answerPromptForInstance(instanceId); |
| 103 | + await applyFilterForInstance(filterContents); |
| 104 | + await embeddingContext.goToPage({ |
| 105 | + projectId, |
| 106 | + objectId: dossierId, |
| 107 | + instanceId, |
| 108 | + isAuthoring: false, |
| 109 | + }); |
| 110 | + } |
| 111 | +); |
| 112 | +``` |
| 113 | + |
| 114 | +### How to monitor the page change |
| 115 | + |
| 116 | +Sometimes the SDK user may have different components on their client page when the inner page is the Library homepage from the components on the dossier page. For example, if the user has a customized "reprompt" button, he might want to show it when the inner page is a dossier page, and hide it when the inner page is Library homepage. |
| 117 | + |
| 118 | +We can use the [ON_DOSSIER_INSTANCE_ID_CHANGE](../add-functionality/add-event#ondossierinstanceidchange) event to monitor the page changes: |
| 119 | + |
| 120 | +```js |
| 121 | +embeddingContext.registerEventHandler( |
| 122 | + microstrategy.dossier.EventType.ON_DOSSIER_INSTANCE_ID_CHANGE, |
| 123 | + async (instanceId) => { |
| 124 | + if (instanceId) { |
| 125 | + // A new dossier instance is created. The page is the dossier page |
| 126 | + repromptButton.setVisible(true); |
| 127 | + } else { |
| 128 | + // The instance is deleted. Will go to another page like homepage |
| 129 | + repromptButton.setVisible(false); |
| 130 | + } |
| 131 | + } |
| 132 | +); |
| 133 | +``` |
| 134 | + |
| 135 | +And if the user wants to know when the page render is finished, to make some custom UI changes, like a customized loading bar, he can use the [ON_PAGE_LOADED](../add-functionality/add-event#onpageloaded) event: |
| 136 | + |
| 137 | +```js |
| 138 | +embeddingContext.registerEventHandler( |
| 139 | + microstrategy.dossier.EventType.ON_DOSSIER_INSTANCE_CHANGED, |
| 140 | + async ({ projectId, dossierId, instanceId }) => { |
| 141 | + loadingBar.show(); |
| 142 | + // Do other things |
| 143 | + } |
| 144 | +); |
| 145 | +embeddingContext.registerEventHandler(microstrategy.dossier.EventType.ON_PAGE_LOADED, async () => { |
| 146 | + loadingBar.hide(); |
| 147 | +}); |
| 148 | +``` |
| 149 | + |
| 150 | +### How to maintain the dossier page UI customizations |
| 151 | + |
| 152 | +When you use `microstrategy.dossier.create(props)` API, you may need to do some UI customizations, like hide some buttons on the toolbar: |
| 153 | + |
| 154 | +```js |
| 155 | +await microstrategy.dossier.create({ |
| 156 | + url: "https://demo.microstrategy.com/MicroStrategyLibrary/app/B7CA92F04B9FAE8D941C3E9B7E0CD754/27D332AC6D43352E0928B9A1FCAF4AB0", |
| 157 | + placeholder: document.getElementById("embedding-dossier-container"), |
| 158 | + navigationBar: { |
| 159 | + enabled: true, |
| 160 | + gotoLibrary: false, |
| 161 | + title: false, |
| 162 | + toc: true, |
| 163 | + reset: true, |
| 164 | + }, |
| 165 | +}); |
| 166 | +``` |
| 167 | + |
| 168 | +The `goToPage()` function doesn't have such parameters. However, you can set these customization together in the [customUi](../embed-library-main-page/embed-library-properties#customui) parameter when you call the initial `microstrategy.embeddingContexts.embedLibraryPage()` function: |
| 169 | + |
| 170 | +```js |
| 171 | +const embeddingContext = await microstrategy.embeddingContexts.embedLibraryPage({ |
| 172 | + serverUrl: "https://demo.microstrategy.com/MicroStrategyLibrary", |
| 173 | + placeholder: document.getElementById("embedding-dossier-container"), |
| 174 | + customUi: { |
| 175 | + dossierConsumption: { |
| 176 | + navigationBar: { |
| 177 | + enabled: true, |
| 178 | + gotoLibrary: false, |
| 179 | + title: false, |
| 180 | + toc: true, |
| 181 | + reset: true, |
| 182 | + }, |
| 183 | + }, |
| 184 | + dossierAuthoring: { |
| 185 | + toolbar: { |
| 186 | + undo: { |
| 187 | + visible: false, |
| 188 | + }, |
| 189 | + redo: { |
| 190 | + visible: false, |
| 191 | + }, |
| 192 | + }, |
| 193 | + }, |
| 194 | + }, |
| 195 | +}); |
| 196 | +``` |
| 197 | + |
| 198 | +Then the UI customization will take effect when you navigate from the Library homepage to a dossier consumption or a dossier authoring page. |
| 199 | + |
| 200 | +### How to use the events and APIs on dossier page |
| 201 | + |
| 202 | +If you use some APIs or events on the dossier page, like: |
| 203 | + |
| 204 | +```js |
| 205 | +const dossier = await microstrategy.dossier.create({ |
| 206 | + url: "https://demo.microstrategy.com/MicroStrategyLibrary/app/B7CA92F04B9FAE8D941C3E9B7E0CD754/27D332AC6D43352E0928B9A1FCAF4AB0", |
| 207 | + placeholder: document.getElementById("embedding-dossier-container"), |
| 208 | +}); |
| 209 | +dossier.registerEventHandler(microstrategy.dossier.EventType.ON_PAGE_LOADED, async () => { |
| 210 | + loadingBar.hide(); |
| 211 | +}); |
| 212 | +document.getElementById("filter-btn").addEventListener("click", async () => { |
| 213 | + await dossier.applyFilter(filterContent); |
| 214 | +}); |
| 215 | +``` |
| 216 | + |
| 217 | +You can use the [embeddingContext](../embedding-context) and [embeddingContext.dossierConsumption](../embedding-context/dossier-consumption-page-apis) object to do this, like: |
| 218 | + |
| 219 | +```js |
| 220 | +const embeddingContext = await microstrategy.embeddingContexts.embedLibraryPage({ |
| 221 | + serverUrl: "https://demo.microstrategy.com/MicroStrategyLibrary", |
| 222 | + placeholder: document.getElementById("embedding-dossier-container"), |
| 223 | +}); |
| 224 | +embeddingContext.registerEventHandler(microstrategy.dossier.EventType.ON_PAGE_LOADED, async () => { |
| 225 | + loadingBar.hide(); |
| 226 | +}); |
| 227 | +document.getElementById("filter-btn").addEventListener("click", async () => { |
| 228 | + await embeddingContext.dossierConsumption.applyFilter(filterContent); |
| 229 | +}); |
| 230 | +``` |
0 commit comments