Override the hidden left panel behavior in widget edit mode in Embed SDK [Linux]
When embedding Sisense dashboards using the Embed SDK, the left panel will automatically hide when switching to widget edit mode if the showLeftPane is set to true for the dashboard. This article explains how to override this default SDK behavior and ensure that the left panel remains visible in widget edit mode. Applicable to all Sisense deployments (Cloud and On-Prem) using the Embed SDK.
Step-by-Step Guide:
1. Background
By default, if the showLeftPane is set to false, the Sisense Embed SDK hides the left panel when a widget is opened in edit mode. This can be undesirable when users need to access the left panel while editing a widget.
2. Example setup
Below is a minimal HTML example that embeds a Sisense dashboard with custom settings using the Embed SDK.
<html> <body></body> <head> <script type="text/javascript" src="/js/frame.js"></script> <script> const dashboardOptions = { showToolbar: true, showLeftPane: false, showRightPane: true } var frame = document.createElement('iframe'); frame.setAttribute('id', 'sisenseFrame'); frame.setAttribute('style', 'width: 100%; height: 800px;'); document.body.appendChild(frame); const SisenseFrame = window['sisense.embed'].SisenseFrame; const enums = window['sisense.embed'].enums; const sisenseFrame = new SisenseFrame({ url: document.location.origin, dashboard: '676972921a49b9002af6dbaa', settings: dashboardOptions, editMode: true, element: document.getElementById('sisenseFrame') }); window.currentFrame = SisenseFrame; sisenseFrame.render(); </script> </head> </html>When this widget is opened in edit mode, you may notice that the left panel remains hidden.
3. Overriding the default SDK behavior
To override this behavior, use the widget lifecycle events provided by the Embed SDK. Specifically, listen for the LOADED and UNLOADED events and dynamically update the dashboard settings.
sisenseFrame.render().then(() => { sisenseFrame.widget.on(enums.WidgetEventType.LOADED, function() { sisenseFrame.updateSettings({ showToolbar: true, showLeftPane: true, showRightPane: true }); }); sisenseFrame.widget.on(enums.WidgetEventType.UNLOADED, function() { sisenseFrame.updateSettings(dashboardOptions); }); });Explanation:
- When the widget is loaded (LOADED), the dashboard settings are updated to ensure the left panel remains visible.
- When the widget is unloaded (UNLOADED), the original dashboard configuration is restored.
Conclusion
By adding event listeners to handle widget load and unload states, you can easily override the default behavior of the Sisense Embed SDK and ensure that the left panel remains visible in widget edit mode. This approach provides greater flexibility when customizing embedded dashboards for your users.
References/Related Content
- Sisense Documentation:
- Sisense Developer Reference:
Disclaimer: This post outlines a potential custom workaround for a specific use case or provides instructions regarding a specific task. The solution may not work in all scenarios or Sisense versions, so we strongly recommend testing it in your environment before deployment. If you need further assistance with this, please let us know.
