fix: minor issue with run all demo (#143)

Fixes issue whereby click event listeners could be added multiple times to the run all button in the demo. Now click event is only added once. Also adds some documentation around IFRAME allow features.
looker-open-source · Mar 8, 2023 · 59b1322 · 59b1322
1 parent d565004
commit 59b1322
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 34 deletions.
diff --git a/README.md b/README.md
@@ -591,3 +591,29 @@ COOKIE_SECRET=cookie_stash
 ## Embedded Javascript Events
 
 Prior to the release of the Embed SDK, Looker exposed an API that utilized JavaScript `postMessage` events. This API is still available for customers who cannot or do not want to use the Embed SDK (note that using the Embed SDK is highly recommended as it provides additional functionality and is simpler to use). An example application has been created to ensure that cookieless embed also works with JavaScript `postMessage` events. This example can be found [here](demo/message_example.ts).
+
+## Additional Considerations
+
+### Full screen tile visualizations
+
+Looker has the capability to display individual tile visualizations in full screen mode. This feature works for embedded IFRAMEs but the `fullscreen` feature MUST be added to the containing IFRAME. Version 1.8.2 of the Embed SDK was updated to allow features to be added. The following example shows how to enable support for full screen mode.
+
+```
+    LookerEmbedSDK.createDashboardWithId(runtimeConfig.dashboardId)
+      // Allow fullscreen tile visualizations
+      .withAllowAttr('fullscreen')
+      // Append to the #dashboard element
+      .appendTo('#dashboard')
+      ...
+      // Finalize the build
+      .build()
+      // Connect to Looker
+      .connect()
+      // Finish up setup
+      .then((dashboard: LookerEmbedDashboard) => {
+        ...
+      })
+      .catch((error: Error) => {
+        ...
+      })
+```
diff --git a/demo/demo.ts b/demo/demo.ts
@@ -42,15 +42,33 @@ import {
   resetConfiguration,
 } from './demo_config'
 
+let currentDashboard: LookerEmbedDashboard | undefined
+let currentLook: LookerEmbedLook | undefined
+let currentExplore: LookerEmbedExplore | undefined
+
+const initializeRunAllButton = () => {
+  // Add a listener to the "Run All" button and send 'xxxx:run' messages when clicked
+  const runAllButton = document.querySelector('#run-all')
+  if (runAllButton) {
+    runAllButton.addEventListener('click', () => {
+      if (currentDashboard) {
+        currentDashboard.run()
+      }
+      if (currentLook) {
+        currentLook.run()
+      }
+      if (currentExplore) {
+        currentExplore.run()
+      }
+    })
+  }
+}
+
 /**
  * Set up the dashboard after the SDK connects
  */
 const setupDashboard = (dashboard: LookerEmbedDashboard) => {
-  // Add a listener to the "Run All" button and send a 'dashboard:run' message when clicked
-  const runAllButton = document.querySelector('#run-all')
-  if (runAllButton) {
-    runAllButton.addEventListener('click', () => dashboard.run())
-  }
+  currentDashboard = dashboard
 
   // Add a listener to the dashboard's "Run" button and send a 'dashboard:run' message when clicked
   const runButton = document.querySelector('#run-dashboard')
@@ -85,11 +103,7 @@ const setupDashboard = (dashboard: LookerEmbedDashboard) => {
  * Set up the look after the SDK connects.
  */
 const setupLook = (look: LookerEmbedLook) => {
-  // Add a listener to the "Run All" button and send a 'look:run' message when clicked
-  const runAllButton = document.querySelector('#run-all')
-  if (runAllButton) {
-    runAllButton.addEventListener('click', () => look.run())
-  }
+  currentLook = look
 
   // Add a listener to the look's "Run" button and send a 'look:run' message when clicked
   const runButton = document.querySelector('#run-look')
@@ -112,11 +126,7 @@ const setupLook = (look: LookerEmbedLook) => {
  * Set up the explore after the SDK connects.
  */
 const setupExplore = (explore: LookerEmbedExplore) => {
-  // Add a listener to the "Run All" button and send a 'look:run' message when clicked
-  const runAllButton = document.querySelector('#run-all')
-  if (runAllButton) {
-    runAllButton.addEventListener('click', () => explore.run())
-  }
+  currentExplore = explore
 
   // Add a listener to the explore's "Run" button and send a 'explore:run' message when clicked
   const runButton = document.querySelector('#run-explore')
@@ -197,6 +207,7 @@ const initializeShowDashboardCheckbox = () => {
         renderDashboard(runtimeConfig)
       })
     } else {
+      currentDashboard = undefined
       cb.parentElement!.style.display = 'none'
     }
   }
@@ -218,6 +229,7 @@ const initializeShowLookCheckbox = () => {
         renderLook(runtimeConfig)
       })
     } else {
+      currentLook = undefined
       cb.parentElement!.style.display = 'none'
     }
   }
@@ -239,6 +251,7 @@ const initializeShowExploreCheckbox = () => {
         renderExplore(runtimeConfig)
       })
     } else {
+      currentExplore = undefined
       cb.parentElement!.style.display = 'none'
     }
   }
@@ -329,9 +342,10 @@ const initializeResetConfigButton = () => {
 }
 
 /**
- * Initialize configuration controls.
+ * Initialize controls.
  */
-const initializeConfigurationControls = () => {
+const initializeControls = () => {
+  initializeRunAllButton()
   initializeShowDashboardCheckbox()
   initializeShowLookCheckbox()
   initializeShowExploreCheckbox()
@@ -562,7 +576,7 @@ const initializeEmbedSdk = (runtimeConfig: RuntimeConfig) => {
  */
 document.addEventListener('DOMContentLoaded', function () {
   loadConfiguration()
-  initializeConfigurationControls()
+  initializeControls()
   const runtimeConfig = getConfiguration()
   initializeEmbedSdk(runtimeConfig)
   renderDashboard(runtimeConfig)

diff --git a/demo/message_example.ts b/demo/message_example.ts
@@ -264,14 +264,6 @@ const getDashboardFrameId = ({ dashboardId }: RuntimeConfig) =>
  * Initialize the dashboard controls
  */
 const initializeDashboardControls = (runtimeConfig: RuntimeConfig) => {
-  // Add a listener to the "Run All" button and send a 'dashboard:run' message when clicked
-  const runAllButton = document.querySelector('#run-all')
-  if (runAllButton) {
-    runAllButton.addEventListener('click', () =>
-      getEmbedFrame(getDashboardFrameId(runtimeConfig))?.send('dashboard:run')
-    )
-  }
-
   // Add a listener to the dashboard's "Run" button and send a 'dashboard:run' message when clicked
   const runButton = document.querySelector('#run-dashboard')
   if (runButton) {
@@ -393,14 +385,6 @@ const getLookFrameId = ({ lookId }: RuntimeConfig) => `embed-dasboard-${lookId}`
  * Initialize the dashboard controls
  */
 const initializeLookControls = (runtimeConfig: RuntimeConfig) => {
-  // Add a listener to the "Run All" button and send a 'look:run' message when clicked
-  const runAllButton = document.querySelector('#run-all')
-  if (runAllButton) {
-    runAllButton.addEventListener('click', () =>
-      getEmbedFrame(getLookFrameId(runtimeConfig))?.send('look:run')
-    )
-  }
-
   // Add a listener to the look's "Run" button and send a 'look:run' message when clicked
   const runButton = document.querySelector('#run-look')
   if (runButton) {
@@ -445,6 +429,20 @@ const initializeLookerEmbed = (runtimeConfig: RuntimeConfig) => {
   }
 }
 
+/**
+ * Initialize the run all button
+ */
+const initializeRunAllButton = (runtimeConfig: RuntimeConfig) => {
+  // Add a listener to the "Run All" button and send 'xxxx:run' messages when clicked
+  const runAllButton = document.querySelector('#run-all')
+  if (runAllButton) {
+    runAllButton.addEventListener('click', () => {
+      getEmbedFrame(getDashboardFrameId(runtimeConfig))?.send('dashboard:run')
+      getEmbedFrame(getLookFrameId(runtimeConfig))?.send('look:run')
+    })
+  }
+}
+
 /**
  * Do not use any of the following as an example. The following
  * tests out edge cases for cookieless login,
@@ -524,6 +522,7 @@ document.addEventListener('DOMContentLoaded', function () {
   loadConfiguration()
   initializeConfigurationControls()
   const runtimeConfig = getConfiguration()
+  initializeRunAllButton(runtimeConfig)
   initializeErrorControls(runtimeConfig)
   initializeDashboardControls(runtimeConfig)
   initializeLookControls(runtimeConfig)

diff --git a/docs/index.html b/docs/index.html
@@ -261,4 +261,15 @@ <h3><a name='env' id='env'></a> <code>.env</code> setup</h3>
   <h2>Embedded Javascript Events</h2>
 </a>
 <p>Prior to the release of the Embed SDK, Looker exposed an API that utilized JavaScript <code>postMessage</code> events. This API is still available for customers who cannot or do not want to use the Embed SDK (note that using the Embed SDK is highly recommended as it provides additional functionality and is simpler to use). An example application has been created to ensure that cookieless embed also works with JavaScript <code>postMessage</code> events. This example can be found <a href="demo/message_example.ts">here</a>.</p>
+
+<a href="#additional-considerations" id="additional-considerations" style="color: inherit; text-decoration: none;">
+  <h2>Additional Considerations</h2>
+</a>
+
+<a href="#full-screen-tile-visualizations" id="full-screen-tile-visualizations" style="color: inherit; text-decoration: none;">
+  <h3>Full screen tile visualizations</h3>
+</a>
+<p>Looker has the capability to display individual tile visualizations in full screen mode. This feature works for embedded IFRAMEs but the <code>fullscreen</code> feature MUST be added to the containing IFRAME. Version 1.8.2 of the Embed SDK was updated to allow features to be added. The following example shows how to enable support for full screen mode.</p>
+<pre><code><span class="hl-1">    </span><span class="hl-0">LookerEmbedSDK</span><span class="hl-1">.</span><span class="hl-2">createDashboardWithId</span><span class="hl-1">(</span><span class="hl-0">runtimeConfig</span><span class="hl-1">.</span><span class="hl-0">dashboardId</span><span class="hl-1">)</span><br/><span class="hl-1">      </span><span class="hl-7">// Allow fullscreen tile visualizations</span><br/><span class="hl-1">      .</span><span class="hl-2">withAllowAttr</span><span class="hl-1">(</span><span class="hl-3">&#39;fullscreen&#39;</span><span class="hl-1">)</span><br/><span class="hl-1">      </span><span class="hl-7">// Append to the #dashboard element</span><br/><span class="hl-1">      .</span><span class="hl-2">appendTo</span><span class="hl-1">(</span><span class="hl-3">&#39;#dashboard&#39;</span><span class="hl-1">)</span><br/><span class="hl-1">      ...</span><br/><span class="hl-1">      </span><span class="hl-7">// Finalize the build</span><br/><span class="hl-1">      .</span><span class="hl-2">build</span><span class="hl-1">()</span><br/><span class="hl-1">      </span><span class="hl-7">// Connect to Looker</span><br/><span class="hl-1">      .</span><span class="hl-2">connect</span><span class="hl-1">()</span><br/><span class="hl-1">      </span><span class="hl-7">// Finish up setup</span><br/><span class="hl-1">      .</span><span class="hl-2">then</span><span class="hl-1">((</span><span class="hl-0">dashboard</span><span class="hl-1">: </span><span class="hl-6">LookerEmbedDashboard</span><span class="hl-1">) </span><span class="hl-4">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1">        ...</span><br/><span class="hl-1">      })</span><br/><span class="hl-1">      .</span><span class="hl-2">catch</span><span class="hl-1">((</span><span class="hl-0">error</span><span class="hl-1">: </span><span class="hl-6">Error</span><span class="hl-1">) </span><span class="hl-4">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1">        ...</span><br/><span class="hl-1">      })</span>
+</code></pre>
 </div></div><div class="col-4 col-menu menu-sticky-wrap menu-highlight"><nav class="tsd-navigation primary"><ul><li class="current"><a href="modules.html">Exports</a></li></ul></nav><nav class="tsd-navigation secondary menu-sticky"><ul><li class="tsd-kind-class tsd-has-type-parameter"><a href="classes/EmbedBuilder.html" class="tsd-kind-icon">Embed<wbr/>Builder</a></li><li class="tsd-kind-class tsd-has-type-parameter"><a href="classes/EmbedClient.html" class="tsd-kind-icon">Embed<wbr/>Client</a></li><li class="tsd-kind-class"><a href="classes/LookerEmbedBase.html" class="tsd-kind-icon">Looker<wbr/>Embed<wbr/>Base</a></li><li class="tsd-kind-class"><a href="classes/LookerEmbedDashboard.html" class="tsd-kind-icon">Looker<wbr/>Embed<wbr/>Dashboard</a></li><li class="tsd-kind-class"><a href="classes/LookerEmbedExplore.html" class="tsd-kind-icon">Looker<wbr/>Embed<wbr/>Explore</a></li><li class="tsd-kind-class"><a href="classes/LookerEmbedExtension.html" class="tsd-kind-icon">Looker<wbr/>Embed<wbr/>Extension</a></li><li class="tsd-kind-class"><a href="classes/LookerEmbedLook.html" class="tsd-kind-icon">Looker<wbr/>Embed<wbr/>Look</a></li><li class="tsd-kind-class"><a href="classes/LookerEmbedSDK.html" class="tsd-kind-icon">Looker<wbr/>EmbedSDK</a></li><li class="tsd-kind-interface"><a href="interfaces/AddFilterJson.html" class="tsd-kind-icon">Add<wbr/>Filter<wbr/>Json</a></li><li class="tsd-kind-interface"><a href="interfaces/CancellableEventResponse.html" class="tsd-kind-icon">Cancellable<wbr/>Event<wbr/>Response</a></li><li class="tsd-kind-interface"><a href="interfaces/CookielessRequestInit.html" class="tsd-kind-icon">Cookieless<wbr/>Request<wbr/>Init</a></li><li class="tsd-kind-interface"><a href="interfaces/DashboardEvent.html" class="tsd-kind-icon">Dashboard<wbr/>Event</a></li><li class="tsd-kind-interface"><a href="interfaces/DashboardEventDetail.html" class="tsd-kind-icon">Dashboard<wbr/>Event<wbr/>Detail</a></li><li class="tsd-kind-interface"><a href="interfaces/DashboardLayout.html" class="tsd-kind-icon">Dashboard<wbr/>Layout</a></li><li class="tsd-kind-interface"><a href="interfaces/DashboardLayoutComponent.html" class="tsd-kind-icon">Dashboard<wbr/>Layout<wbr/>Component</a></li><li class="tsd-kind-interface"><a href="interfaces/DashboardTileDownloadEvent.html" class="tsd-kind-icon">Dashboard<wbr/>Tile<wbr/>Download<wbr/>Event</a></li><li class="tsd-kind-interface"><a href="interfaces/DashboardTileEvent.html" class="tsd-kind-icon">Dashboard<wbr/>Tile<wbr/>Event</a></li><li class="tsd-kind-interface"><a href="interfaces/DashboardTileEventDetail.html" class="tsd-kind-icon">Dashboard<wbr/>Tile<wbr/>Event<wbr/>Detail</a></li><li class="tsd-kind-interface"><a href="interfaces/DashboardTileExploreEvent.html" class="tsd-kind-icon">Dashboard<wbr/>Tile<wbr/>Explore<wbr/>Event</a></li><li class="tsd-kind-interface"><a href="interfaces/DashboardTileViewEvent.html" class="tsd-kind-icon">Dashboard<wbr/>Tile<wbr/>View<wbr/>Event</a></li><li class="tsd-kind-interface"><a href="interfaces/DrillMenuEvent.html" class="tsd-kind-icon">Drill<wbr/>Menu<wbr/>Event</a></li><li class="tsd-kind-interface"><a href="interfaces/DrillModalExploreEvent.html" class="tsd-kind-icon">Drill<wbr/>Modal<wbr/>Explore<wbr/>Event</a></li><li class="tsd-kind-interface"><a href="interfaces/ElementOptionItems.html" class="tsd-kind-icon">Element<wbr/>Option<wbr/>Items</a></li><li class="tsd-kind-interface"><a href="interfaces/ElementOptions.html" class="tsd-kind-icon">Element<wbr/>Options</a></li><li class="tsd-kind-interface"><a href="interfaces/EventDetail.html" class="tsd-kind-icon">Event<wbr/>Detail</a></li><li class="tsd-kind-interface"><a href="interfaces/ExploreEvent.html" class="tsd-kind-icon">Explore<wbr/>Event</a></li><li class="tsd-kind-interface"><a href="interfaces/ExploreEventDetail.html" class="tsd-kind-icon">Explore<wbr/>Event<wbr/>Detail</a></li><li class="tsd-kind-interface"><a href="interfaces/LookEvent.html" class="tsd-kind-icon">Look<wbr/>Event</a></li><li class="tsd-kind-interface"><a href="interfaces/LookEventDetail.html" class="tsd-kind-icon">Look<wbr/>Event<wbr/>Detail</a></li><li class="tsd-kind-interface"><a href="interfaces/LookSaveEvent.html" class="tsd-kind-icon">Look<wbr/>Save<wbr/>Event</a></li><li class="tsd-kind-interface"><a href="interfaces/LookSaveEventDetail.html" class="tsd-kind-icon">Look<wbr/>Save<wbr/>Event<wbr/>Detail</a></li><li class="tsd-kind-interface"><a href="interfaces/LookerAuthConfig.html" class="tsd-kind-icon">Looker<wbr/>Auth<wbr/>Config</a></li><li class="tsd-kind-interface"><a href="interfaces/LookerDashboardOptions.html" class="tsd-kind-icon">Looker<wbr/>Dashboard<wbr/>Options</a></li><li class="tsd-kind-interface"><a href="interfaces/LookerEmbedCookielessSessionData.html" class="tsd-kind-icon">Looker<wbr/>Embed<wbr/>Cookieless<wbr/>Session<wbr/>Data</a></li><li class="tsd-kind-interface"><a href="interfaces/LookerEmbedEvent.html" class="tsd-kind-icon">Looker<wbr/>Embed<wbr/>Event</a></li><li class="tsd-kind-interface"><a href="interfaces/LookerEmbedEventMap.html" class="tsd-kind-icon">Looker<wbr/>Embed<wbr/>Event<wbr/>Map</a></li><li class="tsd-kind-interface"><a href="interfaces/LookerEmbedFilterParams.html" class="tsd-kind-icon">Looker<wbr/>Embed<wbr/>Filter<wbr/>Params</a></li><li class="tsd-kind-interface"><a href="interfaces/PageChangedEvent.html" class="tsd-kind-icon">Page<wbr/>Changed<wbr/>Event</a></li><li class="tsd-kind-interface"><a href="interfaces/PageChangedEventDetail.html" class="tsd-kind-icon">Page<wbr/>Changed<wbr/>Event<wbr/>Detail</a></li><li class="tsd-kind-interface"><a href="interfaces/PagePropertiesChangedEvent.html" class="tsd-kind-icon">Page<wbr/>Properties<wbr/>Changed<wbr/>Event</a></li><li class="tsd-kind-interface"><a href="interfaces/QueryError.html" class="tsd-kind-icon">Query<wbr/>Error</a></li><li class="tsd-kind-interface"><a href="interfaces/SessionStatus.html" class="tsd-kind-icon">Session<wbr/>Status</a></li><li class="tsd-kind-interface"><a href="interfaces/TileStatus.html" class="tsd-kind-icon">Tile<wbr/>Status</a></li><li class="tsd-kind-interface"><a href="interfaces/UrlParams.html" class="tsd-kind-icon">Url<wbr/>Params</a></li><li class="tsd-kind-interface"><a href="interfaces/VisConfig.html" class="tsd-kind-icon">Vis<wbr/>Config</a></li><li class="tsd-kind-type-alias"><a href="modules.html#CookielessCallback" class="tsd-kind-icon">Cookieless<wbr/>Callback</a></li><li class="tsd-kind-type-alias"><a href="modules.html#SessionTokenRequest" class="tsd-kind-icon">Session<wbr/>Token<wbr/>Request</a></li></ul></nav></div></div></div><footer class="with-border-bottom"><div class="container"><h2>Legend</h2><div class="tsd-legend-group"><ul class="tsd-legend"><li class="tsd-kind-constructor tsd-parent-kind-class"><span class="tsd-kind-icon">Constructor</span></li><li class="tsd-kind-property tsd-parent-kind-class"><span class="tsd-kind-icon">Property</span></li><li class="tsd-kind-method tsd-parent-kind-class"><span class="tsd-kind-icon">Method</span></li></ul><ul class="tsd-legend"><li class="tsd-kind-property tsd-parent-kind-interface"><span class="tsd-kind-icon">Property</span></li><li class="tsd-kind-method tsd-parent-kind-interface"><span class="tsd-kind-icon">Method</span></li></ul><ul class="tsd-legend"><li class="tsd-kind-property tsd-parent-kind-class tsd-is-private"><span class="tsd-kind-icon">Private property</span></li><li class="tsd-kind-method tsd-parent-kind-class tsd-is-private"><span class="tsd-kind-icon">Private method</span></li></ul><ul class="tsd-legend"><li class="tsd-kind-method tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited method</span></li></ul><ul class="tsd-legend"><li class="tsd-kind-method tsd-parent-kind-class tsd-is-static"><span class="tsd-kind-icon">Static method</span></li></ul></div><h2>Settings</h2><p>Theme <select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></p></div></footer><div class="container tsd-generator"><p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div><div class="overlay"></div><script src="assets/main.js"></script></body></html>