Embedding Analytics | Sisense Community

Community Feedback
Chapters
Events
Forums
Blogs
KB Docs
Support
Learning
Use Case Gallery

Categories

MoreDiscussions

Embedding Analytics | Sisense Community

Knowledge Base Docs

Embedding Analytics

Created Apr 15, 2026

1 member

28 discussions

Docs that discuss embedding Sisense

Embedding Analytics
How to apply widget filters through code with SisenseJS [Linux/Windows]
Step-by-Step Guide Overview We will demonstrate how to build a UI that allows end-users to filter individual dashboard widgets by year. The solution leverages SisenseJS, JavaScript, and HTML. See the provided complete code sample below. Step 1: Prepare Your Environment Ensure that SisenseJS is available from your Sisense deployment (both Linux and Windows supported), and that you know your dashboard ID and host URL. Screenshot Example: To help you get started, here’s how your UI might look after implementation: The dashboard displays widgets, each with its own year filter control. Step 2: Implement the HTML & Script Below is a complete HTML file (HTML + JavaScript). <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <div id="sisenseApp" style="display: flex; width: 100%"> <div id="main" style="display: flex; flex-direction: column; justify-content: center; width: 80%;"></div> <div id="filters" style="width: 20%;"></div> </div> <script type="text/javascript"> const url = ""; // Your host URL const dashboardId = ""; // Your Dashboard ID let app, dash; // Store per-widget initial year options let widgetInitialYears = {}; const silentLogin = async () => { let isauth = await fetch(url + "/api/auth/isauth", { credentials: "include" }); let isauthJson = await isauth.json(); if (!isauthJson.isAuthenticated && isauthJson.ssoEnabled) { var iframe = document.createElement("iframe"); iframe.src = isauthJson.loginUrl + "?return_to=/api/auth/isauth"; iframe.style.display = "none"; document.body.append(iframe); iframe.onload = function () { document.body.removeChild(iframe); startSisense(); }; } else { startSisense(); } }; const startSisense = async () => { const sisensejs = document.createElement("script"); sisensejs.src = url + "/js/sisense.v1.js"; sisensejs.onload = async () => { await renderdash(); }; document.head.append(sisensejs); }; const renderdash = async () => { const main = document.getElementById("main"); main.innerHTML = ''; app = await Sisense.connect(url, true); dash = await app.dashboards.load(dashboardId); // Fetch widgets info const widgetsRaw = await fetch( url + "/api/v1/dashboards/" + dashboardId + "/widgets?fields=oid,title", { method: "GET", credentials: "include" } ); let widgets = await widgetsRaw.json(); if (widgets.length) { widgets.forEach((w) => { const widgetRow = document.createElement("div"); widgetRow.style.display = "flex"; widgetRow.style.alignItems = "flex-start"; widgetRow.style.marginBottom = "32px"; const widgetSection = document.createElement("div"); widgetSection.style.width = "84%"; let title = document.createElement("p"); title.innerText = w.title || w.oid; widgetSection.append(title); const widgetElement = document.createElement("div"); widgetElement.style.width = "100%"; widgetElement.style.height = "400px"; widgetElement.setAttribute("id", "widget_" + w.oid); widgetSection.append(widgetElement); widgetRow.append(widgetSection); const filterSection = document.createElement("div"); filterSection.style.width = "16%"; filterSection.style.paddingLeft = "32px"; let filterLabel = document.createElement("div"); filterLabel.innerText = "Filter by year:"; // Multi-select: create the select control ONCE let yearSelect = document.createElement("select"); yearSelect.multiple = true; yearSelect.size = 8; yearSelect.style.minWidth = "80px"; let applyBtn = document.createElement("button"); applyBtn.innerText = "Apply"; applyBtn.style.marginLeft = "8px"; filterSection.append(filterLabel); filterSection.append(yearSelect); filterSection.append(applyBtn); widgetRow.append(filterSection); main.append(widgetRow); // Sisense widget object const widget = dash.widgets.get(w.oid); widget.container = widgetElement; // Populate dropdown only on the first domready, only if filter is NOT present let hasPopulated = false; widget.$$model.on("domready", () => { widgetElement.style.border = "2px grey solid"; let filtersPanel = widget.metadata.panel('filters'); let filterExists = false; // Check if any "Commerce.Date" filter is present for (let f of filtersPanel.items) { if (f.jaql && f.jaql.table === "Commerce" && f.jaql.column === "Date") { filterExists = true; break; } } // Only populate dropdown ONCE, and only if no filter is present (first run) if (!hasPopulated && !filterExists) { // Years from rawQueryResult.value let queryValues = widget.$$model.rawQueryResult && widget.$$model.rawQueryResult.values ? widget.$$model.rawQueryResult.values : []; yearSelect.innerHTML = ""; let years = []; if (queryValues && queryValues.length) { years = queryValues.map(row => { const y = row[0]; if (!y) return undefined; if (y.text && y.text.length === 4) return y.text; if (y.data && typeof y.data === "string" && y.data.length >= 4) return y.data.substring(0, 4); return undefined; }).filter(val => val); years = Array.from(new Set(years)).sort((a, b) => b - a); } // Add "All" option years = ["", ...years]; // Store these initial years for later use widgetInitialYears[w.oid] = years; years.forEach(val => { let option = document.createElement("option"); option.value = val; option.text = val || "All"; yearSelect.append(option); }); yearSelect.size = years.length > 1 ? years.length : 2; hasPopulated = true; } }); // Apply year filter logic applyBtn.onclick = async function () { const filtersPanel = widget.metadata.panel('filters'); // Remove all existing Commerce.Date filters for (let i = filtersPanel.items.length - 1; i >= 0; i--) { const f = filtersPanel.items[i]; if (f.jaql && f.jaql.table === "Commerce" && f.jaql.column === "Date") { filtersPanel.items.splice(i, 1); } } // Collect selected years, ignoring "All" const selectedYears = Array.from(yearSelect.selectedOptions) .map(opt => opt.value) .filter(val => val); if (selectedYears.length) { filtersPanel.items.push({ jaql: { table: "Commerce", column: "Date", dim: "[Commerce.Date (Calendar)]", datatype: "datetime", level: "years", title: "Years in Date", filter: { explicit: true, members: selectedYears.map(year => year + "-01-01T00:00:00") } } }); } widget.refresh(); // ON SUBSEQUENT REFRESHES, always re-populate with original initial values // if the widget gets re-rendered (filters change), don't update options yearSelect.innerHTML = ""; // Use widgetInitialYears[w.oid] to rebuild the select let years = widgetInitialYears[w.oid] || []; years.forEach(val => { let option = document.createElement("option"); option.value = val; option.text = val || "All"; yearSelect.append(option); }); yearSelect.size = years.length > 1 ? years.length : 2; }; }); } dash.refresh(); }; silentLogin(); </script> </body> </html> Replace url and dashboardId with your actual Sisense deployment details. Step 3: Filter Logic The script dynamically loads all widgets in the dashboard and creates a per-widget filter dropdown for years. When you select one or more years, clicking 'Apply' will update the filter(s) for that widget only. Screenshot Example: Code explanation: Silent authentication ensures users are logged in via Sisense or SSO. SisenseJS is loaded dynamically. Widgets and UI elements are drawn programmatically. When filters are applied, the script updates the widget filter panel in-place and refreshes the widget. Conclusion This approach provides a robust way to let users filter widget data by year. This direct control improves interactivity and allows for more precise data exploration, all without modifying dashboard or widget definitions in MongoDB. The knowledge in this article can be used to build your own custom solution, customizing the filters UI and adapting the logic accordingly. References/Related Content SisenseJS Overview Sisense JavaScript API 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.
Thalita SantosPosted 5 months ago
0
Embedding Analytics
How to use Sisense.js in React [Linux]
Step-by-Step Guide: Step 1: Understand the Difference Between React and Vanilla JS React doesn’t directly execute scripts inside JSX because it manages a virtual DOM. When you add a <script> tag in React, it may not run as expected. React’s rendering process can remove or re-render the element before the script executes. Sisense.js, on the other hand, was designed for traditional web pages, where scripts can manipulate the DOM freely. That’s why, in React, we must load Sisense.js dynamically and control its initialization manually. Step 2: Dynamically Load Sisense.js To start, create a helper function that loads external scripts into the page <head>. This ensures the script is added only once and resolves when it’s ready to use. export const loadScript = (url: string, scriptName?: string) => { const name = scriptName || url; // Prevent adding the same script twice if (document.querySelector(`script[script-name="${name}"]`)) { return Promise.resolve(); } const script = document.createElement('script'); script.src = url; script.setAttribute('script-name', name); document.head.appendChild(script); return new Promise((resolve, reject) => { script.onload = resolve; script.onerror = reject; }); }; This helper will guarantee the script is only loaded once. The function works as a promise, so it will wait until the script is fully loaded before continuing, and it avoids duplicate <script> tags when components re-render. The Sisense Class will be attached to the window of the React application so you can access it. Step 3: Initialize Sisense Inside useEffect Next, use your loadScript helper inside a React useEffect hook. React components re-render frequently, so this ensures Sisense.js initializes only once when the component mounts. Important: You still need a <div> with the ID sisenseApp for Sisense.js to attach itself. import { useEffect, useRef } from 'react'; import { loadScript } from './loadScript'; // your helper const SisenseDashboard = () => { const container = useRef<HTMLDivElement>(null); const widget = useRef<HTMLDivElement>(null); const sisenseAppRef = useRef<any>(null); const sisenseWidgetRef = useRef<any>(null); useEffect(() => { const initSisense = async () => { // Prevent reinitialization on re-renders if (sisenseAppRef.current) return; await loadScript(`${SISENSE_URL}/js/sisense.js`); const Sisense = window.Sisense; const app = await Sisense.connect(SISENSE_URL); sisenseAppRef.current = app; const dashboard = await app.dashboards.load('YOUR_DASHBOARD_ID'); // Avoid duplicate widgets if (!sisenseWidgetRef.current) { const _widget = dashboard.widgets.get('YOUR_WIDGET_ID'); _widget.container = widget.current; await _widget.refresh(); sisenseWidgetRef.current = _widget; } }; initSisense(); }, []); return ( <div id="sisenseApp" ref={container} className="w-full h-full bg-white grid grid-cols-12"> <div ref={widget} className="h-[400px]" /> </div> ); }; export default SisenseDashboard; Inside the useEffect the script loads once when the component mounts. This grants only one injection; also, the useRef values persist between renders, preventing duplicate initialization. Step 4: Prevent Duplicate Widgets Without proper control, Sisense widgets may duplicate between renders or re-initializations. To avoid this, the example above uses useRef to store both the Sisense app instance and the widget instance. Before reloading, it checks if those references already exist: if (sisenseAppRef.current) return; and if (!sisenseWidgetRef.current) { const _widget = dashboard.widgets.get('YOUR_WIDGET_ID'); _widget.container = widget.current; await _widget.refresh(); sisenseWidgetRef.current = _widget; } That ensures that the script will load only once, the Sisense app connects only once, and the widget renders only once (no duplicates even if React re-renders). Why This Approach Works in React This pattern aligns with React’s lifecycle and virtual DOM behavior, ensuring a lifecycle-friendly approach where the script loads only when the component mounts. It’s also re-render safe, as the useRef hook keeps Sisense instances stable across renders. Additionally, built-in checks prevent duplicate widget creation, making the solution both reliable and reusable across multiple dashboards or widgets with minimal adjustments. Conclusion: Integrating Sisense.js into a React application requires managing when and how the script is loaded, since React doesn’t execute scripts directly in JSX. By dynamically injecting Sisense.js and controlling its initialization using useEffect and useRef, you can safely embed Sisense dashboards and widgets without duplication or race conditions. This approach is React-friendly, scalable, and reliable. Making it a solid base for embedding Sisense.js using modern hooks from React.. References/Related Content A Fully Demo Using Sisense.js in React - Sisense Other Way to Implement Using Older React Version - Sisense Implement Sisense.js in Standard React Application - Sisense Learn About Sisense.js Limitations - Sinsense UseEffect Documentation - React UseRef Documentation - React 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.
Micael SantanaPosted 5 months ago
0
Embedding Analytics
Embedding Sisense Playground in React [Linux]
Step-by-Step Guide: About this project This project is a hands-on playground for embedding Sisense analytics into modern web applications. By exploring the four embedding techniques included here, you can learn advanced integration patterns with React and improve the customizations of your own embedded analytics solutions. The repository includes: Examples of embedding full dashboards and individual widgets using all Sisense embedding methods. A scalable structure for customizing filters, layouts, and interactivity between Sisense and React components. A ready-to-run reference project that you can adapt for your environment. Note: SisenseJS still works, but the recommended method for new implementations is Compose SDK, as it is actively maintained and provides a modern developer experience. Web Access Token (WAT) This project uses Web Access Token (WAT) authentication. WAT is a Sisense feature that lets you define user permissions inside your own backend logic—including which dashboards the user can view and which actions they can perform. Some Sisense deployments require your Account Manager to enable WAT on your instance. This example uses the self-hosted WAT flow. Inside wat-server/, you will find a Node.js server responsible for generating the token. In the default configuration, users are allowed to filter and export the dashboard: grants: { res: [`dashboards/${process.env.VITE_APP_DASHBOARD_ID}`], prm: ['filter', 'export'], } You can modify these permissions as needed. Where the Examples Live All Embedding examples are located in src/routes/pages. Each page contains one embedding method: iframe: The simplest embedding method. Embeds the full dashboard as-is, with minimal control or customization. Embed SDK: Still iframe-based but adds events, filter control, and interaction hooks. Good when you need light customization without heavy development. If you need a hard customization, check other options. SisenseJS: Legacy scripting for dashboard customization. Works for huge customizations, but not recommended for new builds. Use only for maintaining older projects. Prefer Compose SDK. Compose SDK: A modern SDK with components for most of the recent frameworks and typed data sources. Not all widgets are supported yet, but this is the best option for huge customizations and future-proof development. Project installation Before starting, ensure you have: Node.js (LTS or current) pnpm package manager Access to a Sisense Linux instance with WAT enabled Then run: pnpm install in the root path, this installs all frontend dependencies plus the WAT server dependencies. Configuring your Web Access Token (WAT) This project uses self-hosted WAT generation, so you need a public RSA key, which must be stored at: wat-server/wat_key.pub You can follow the official documentation to set up your WAT. Getting the Sisense user ID Your Sisense user ID can be found in two ways: Inside Create / Test Token (in the Sisense Admin area) In the browser console, type: prism.user._id add this value to your .env file later. Preparing the dashboard A sample dashboard inside the SampleECommerce.dash file is included at the root of the repository. Start the Sample ECommerce Elasticube. Import the file into your Sisense instance. (Optional) Create your own dashboards. **If you change dashboard or widget IDs, update the SisenseJS example, which references specific widget identifiers. Set up Environment Variables You can create your .env file by copying the example one: cp .env.example .env. Then configure it (using some of that info you got in previous steps): #.env VITE_APP_SISENSE_URL="<https://your-sisense-instance.com>" VITE_APP_DASHBOARD_ID="your-dashboard-id" SISENSE_USER_ID="your-sisense-user-id" SISENSE_KID="your-kid-value" Ensure that the dashboard ID matches the resource defined in the WAT server: grants: { res: [`dashboards/${process.env.VITE_APP_DASHBOARD_ID}`], prm: ['filter', 'export'] } You may add more permissions as needed. Running the project To start development mode, run: pnpm dev. This launches: Service Port Description React App 5173 Embedding examples UI WAT Server 3000 Generates WAT tokens for local dev Then, visit now you can visit the main runtime in: http://localhost:5173. And now you can see the dashboard. To switch between implementations, use the sidebar menu. Important Concepts Some places in the code you will see a WAT implementation that uses the actual WAT to get a token and to consume the api this concept in something not officially supported, so be careful in using it, check the article . All those implementations are using React and use some concepts from it, so it's recommended to know about React. If you want to change the data model or the types, use ComposeSDK CLI . Conclusion: This project provides a complete environment for learning and testing all Sisense embedding methods inside a modern React application. By following the steps above, you can easily configure WAT, run the example dashboards, and use this repository as a solid foundation for your own embedded analytics solutions. References/Related Content Sisense Article – SisenseJS Demo Using React https://docs.sisense.com/main/SisenseLinux/using-web-access-token.htm Sisense Documentation – Web Access Token https://docs.sisense.com/main/SisenseLinux/using-web-access-token.htm Sisense Documentation – CLI https://docs.sisense.com/main/SisenseLinux/using-web-access-token.htm Sisense Documentation – Embed SDK https://docs.sisense.com/main/SisenseLinux/embed-sdk.htm Sisense Documentation – Compose SDK https://docs.sisense.com/main/SisenseLinux/compose-sdk.htm Sisense Academy – Embedding Courses https://academy.sisense.com 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.
Micael SantanaPosted 5 months ago
0
Embedding Analytics
How to use Sisense.js in React [Linux]
Step-by-step guide: Step 1: Understand the Difference Between React and Vanilla JS React doesn’t directly execute scripts inside JSX because it manages a virtual DOM. When you add a <script> tag in React, it may not run as expected. React’s rendering process can remove or re-render the element before the script executes. Sisense.js, on the other hand, was designed for traditional web pages, where scripts can manipulate the DOM freely. That’s why, in React, we must load Sisense.js dynamically and control its initialization manually. Step 2: Dynamically Load Sisense.js To start, create a helper function that loads external scripts into the page <head>. This ensures the script is added only once and resolves when it’s ready to use. export const loadScript = (url: string, scriptName?: string) => { const name = scriptName || url; // Prevent adding the same script twice if (document.querySelector(`script[script-name="${name}"]`)) { return Promise.resolve(); } const script = document.createElement('script'); script.src = url; script.setAttribute('script-name', name); document.head.appendChild(script); return new Promise((resolve, reject) => { script.onload = resolve; script.onerror = reject; }); }; This helper will guarantee the script is only loaded once. The function works as a promise, so it will wait until the script is fully loaded before continuing, and it avoids duplicate <script> tags when components re-render. The Sisense Class will be attached to the window of the React application so you can access it. Step 3: Initialize Sisense Inside useEffect Next, use your loadScript helper inside a React useEffect hook. React components re-render frequently, so this ensures Sisense.js initializes only once when the component mounts. 🧠 Important: You still need a <div> with the ID sisenseApp for Sisense.js to attach itself. import { useEffect, useRef } from 'react'; import { loadScript } from './loadScript'; // your helper const SisenseDashboard = () => { const container = useRef<HTMLDivElement>(null); const widget = useRef<HTMLDivElement>(null); const sisenseAppRef = useRef<any>(null); const sisenseWidgetRef = useRef<any>(null); useEffect(() => { const initSisense = async () => { // Prevent reinitialization on re-renders if (sisenseAppRef.current) return; await loadScript(`${SISENSE_URL}/js/sisense.js`); const Sisense = window.Sisense; const app = await Sisense.connect(SISENSE_URL); sisenseAppRef.current = app; const dashboard = await app.dashboards.load('YOUR_DASHBOARD_ID'); // Avoid duplicate widgets if (!sisenseWidgetRef.current) { const _widget = dashboard.widgets.get('YOUR_WIDGET_ID'); _widget.container = widget.current; await _widget.refresh(); sisenseWidgetRef.current = _widget; } }; initSisense(); }, []); return ( <div id="sisenseApp" ref={container} className="w-full h-full bg-white grid grid-cols-12"> <div ref={widget} className="h-[400px]" /> </div> ); }; export default SisenseDashboard; Inside the useEffect, the script loads once when the component mounts. This grants only one injection; also, the useRef values persist between renders, preventing duplicate initialization. Step 4: Prevent Duplicate Widgets Without proper control, Sisense widgets may duplicate between renders or re-initializations. To avoid this, the example above uses useRef to store both the Sisense app instance and the widget instance. Before reloading, it checks if those references already exist: if (sisenseAppRef.current) return; AND if (!sisenseWidgetRef.current) { const _widget = dashboard.widgets.get('YOUR_WIDGET_ID'); _widget.container = widget.current; await _widget.refresh(); sisenseWidgetRef.current = _widget; } That ensures that the script will load only once, the Sisense app connects only once and the widget renders only once (no duplicates even if React re-renders). Why This Approach Works in React This pattern aligns with React’s lifecycle and virtual DOM behavior, ensuring a lifecycle-friendly approach where the script loads only when the component mounts. It’s also re-render safe, as the useRef hook keeps Sisense instances stable across renders. Additionally, built-in checks prevent duplicate widget creation, making the solution both reliable and reusable across multiple dashboards or widgets with minimal adjustments. Conclusion: Integrating Sisense.js into a React application requires managing when and how the script is loaded, since React doesn’t execute scripts directly in JSX. By dynamically injecting Sisense.js and controlling its initialization using useEffect and useRef, you can safely embed Sisense dashboards and widgets without duplication or race conditions. This approach is React-friendly, scalable, and reliable. Making it a solid base for embedding Sisense.js using modern hooks from React.. References/Related Content A Fully Demo Using Sisense.js in React - Sisense Other Way to Implement Using Older React Version - Sisense Implement Sisense.js in Standard React Application - Sisense Learn About Sisense.js Limitations - Sinsense UseEffect Documentation - React UseRef Documentation - React 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.
Micael SantanaPosted 5 months ago
0
Embedding Analytics
Override the hidden left panel behavior in widget edit mode in Embed SDK [Linux]
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: https://docs.sisense.com/main/SisenseLinux/embedding-methods.htm#EmbedSDK Sisense Developer Reference: https://developer.sisense.com/guides/embeddingDashboards/embed-sdk.html https://developer.sisense.com/guides/embeddingDashboards/embed-sdk-ref.html 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.
Taras SkvarkoPosted 7 months ago
0
Embedding Analytics
Embed Sisense Linux in Next.js: SSR-safe script loading & client components [Linux]
Step-by-Step Guide: Some Concepts First: SSR (Server Side Rendering): On regular React (Vite, CRA, etc.), everything runs in the browser, so window, document, and global scripts are always available. In Next.js, your components may run on the server before they can access the browser or DOM objects. Scripting: Since Next.js renders applications differently, there's a proper order to import scripts. Client Components: By default, in Next.js (App Router,) all components are server components. So in practice, what needs to change? ComposeSDK For those who want to use Next.js with CSDK might not be possible at all. The Compose SDK was built for working using client-side aspects of React, like mutable URL path, also using Hooks and ContextAPI . You can follow the guide about setup in other frameworks, like Angular and Vue . Instance Scripts: The first step is loading the script. Next.js provides its own Script component, which you can import from next/script. The main difference is that this Script tag can work with SSR and lets you define a loading strategy. import Script from "next/script"; export default function Page() { return ( <> <Script src="<https://your-sisense-domain.com/js/sisense.js>" strategy="beforeInteractive" /> <div id="sisense-container" /> </> ); } Using the beforeInteractive strategy ensures the script always loads before your code runs. Global Variable Access If you're using EmbedSDK or Sisense.js , you will need access to the DOM, global variables, or even Sisense objects. Like I said above, these variables you can only access on the client side, so to handle this, follow these methods: Add 'use client' at the top of your component (this does not work in the main root layout, why ). This makes the component a client component, so you can use regular React hooks inside it. Always interact with DOM objects inside React hooks like useEffect. This guarantees your code only runs in the client context. 'use client' import { useEffect } from "react"; export default function SisenseJS() { useEffect(() => { if (typeof window !== "undefined" && window.Sisense) { window.Sisense.connect("<https://your-sisense-domain>", false) .then(app => console.log("Connected:", app)) .catch(console.error); } }, []); return <div id="sisenseApp" />; } By adding 'use client' and these validations inside useEffect, you ensure that the window and the Sisense script are correctly loaded. **Important: For Sisense.js and EmbedSDK, it's impossible to use them in server components because they require DOM properties. If you need an SSR, use the Iframe option. CSP A Content Security Policy (CSP) can sometimes block embedding through an iframe. To avoid this, make sure you add the right config in your next.config.js, for example: import type { NextConfig } from 'next'; const nextConfig: NextConfig = { async headers() { return [ { source: '/(.*)', headers: [ { key: 'Content-Security-Policy', value: 'frame-src <https://your-sisense-domain>; src <https://your-sisense-domain>', }, ], }, ]; }, }; export default nextConfig; This ensures that scripts and iframes from Sisense are allowed in your application. Troubleshoots with Typescript With you are using Next.js, probably it's with typescript, but window is not a fully typed object in Next.js when you inject some scripts in it, so to avoid that, you can extend the Window type in a .d.ts file, and add it to the typescript configuration: // global.d.ts export {}; declare global { interface Window { Sisense: any; sisenseEmbed: any; } } You can get an example of the Embed SDK example using react , to create the interfaces, or follow the reference about Sisense.Js API . Conclusion When using Next.js, be aware of the differences between server-side and client-side. All Sisense embedding methods depend on DOM access (client-side), since Sisense is ultimately a web platform. Another useful resource is Next.js’s documentation on SSR and client components . Also, you can find an example of each kind of implementation attached here. References/Related Content Next.js Documentation – Script Component Next.js Documentation – Server and Client Components Next.js Documentation – Content Security Policy Sisense Developer Portal – Embed SDK Sisense Developer Portal – Sisense.js Sisense Developer Portal – Iframe Embedding 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.
Micael SantanaPosted 7 months ago
0
Embedding Analytics
Unit Testing Sisense ComposeSDK with Jest
Unit Testing Sisense ComposeSDK with Jest Introduction Unit testing is a software development practice where individual components or functions of a library or application are tested independently in isolation. This article outlines how to configure Jest, a JavaScript unit testing library, to effectively test components or functions built using the Sisense ComposeSDK (@sisense/sdk-data). Terminology Jest: Jest is a popular JavaScript testing library used to run automated unit tests, providing assertions, mocks, and comprehensive test coverage reports. Babel: Babel is a JavaScript compiler that converts modern ES6 code into syntax compatible with older JavaScript environments, such as older browser versions or Node.js versions. Lodash: Lodash is a JavaScript utility library that provides convenient functions for common programming tasks such as manipulating arrays, objects, and strings. ComposeSDK uses Lodash internally. ES Modules (ESM): ES Modules, or ESM, refer to JavaScript’s official standardized system for importing and exporting code between separate files and packages, allowing modular and maintainable code structures. ES6+ (ES2015+): ES6+ (also known as ES2015+) refers to modern JavaScript syntax and features introduced since the 2015 ECMAScript specification, widely used in current JavaScript development. What is Unit Testing? Unit testing involves verifying that individual units of code, such as functions or methods, behave as expected in isolation. Unit tests are automated, repeatable, and provide immediate feedback on code quality and reliability. Step-by-Step Guide Step 1: Setting up Jest for ComposeSDK Jest, by default, does not process ES Module (ESM) syntax (import and export) found in external dependencies. Since ComposeSDK and its internal dependencies (such as lodash-es) use ESM syntax, additional configuration is required to successfully execute unit tests using the ComposeSDK libraries. Create a Jest configuration file (jest.config.cjs) at the root of the project with the following content: // jest.config.cjs module.exports = { transform: { '^.+\\.[jt]sx?$': 'babel-jest', }, transformIgnorePatterns: [ 'node_modules/(?!@sisense/sdk-common|@sisense/sdk-data|lodash-es)', ], moduleFileExtensions: ['js', 'jsx', 'json', 'node'], }; This configuration explicitly instructs Jest to process ComposeSDK and its dependency lodash-es with Babel, while ignoring other third-party packages, ensuring tests can execute correctly. Step 2: Configuring Babel for Jest To support Jest’s transformation of modern JavaScript syntax, a Babel configuration file (babel.config.cjs) is required at the root of the project: // babel.config.cjs module.exports = { presets: [ ['@babel/preset-env', { targets: { node: 'current' } }], ], }; This configuration ensures that modern JavaScript code is compiled down to syntax supported by the current Node.js environment. Step 3: Writing Unit Tests for ComposeSDK The following is an example function using ComposeSDK’s filterFactory: // src/makeFilter.js import { filterFactory } from '@sisense/sdk-data'; export function makeFilter(column, value) { return filterFactory.greaterThan(column, value); } The following Jest test demonstrates typical assertions. Note that some tests may contain more detailed checks than commonly needed: // src/makeFilter.test.js import { makeFilter } from './makeFilter'; describe('makeFilter', () => { it('returns the correct NumericFilter for greaterThan [Test.Dim] > 1000', () => { const filter = makeFilter('[Test.Dim]', 1000); // Core properties expect(filter._name).toBe('filter'); expect(filter.type).toBe('filter'); expect(filter.filterType).toBe('numeric'); expect(filter.isScope).toBe(true); // Attribute & comparison expect(filter.attribute).toBe('[Test.Dim]'); expect(filter.valueA).toBe(1000); expect(filter.operatorA).toBe('fromNotEqual'); // Defaults expect(filter.description).toBe(''); expect(filter.composeCode).toBeUndefined(); // Config object shape expect(filter.config).toMatchObject({ guid: expect.any(String), disabled: false, locked: false, }); }); }); Step 4: Configuring the Test Script in package.json To enable running Jest tests via a single command (npm test), add the following script to the project's package.json file: { "scripts": { "test": "jest" } } With this configuration, executing unit tests is straightforward: npm test This command runs Jest, which executes all unit tests in the project and reports the results. Jest will execute the unit test and report results indicating success or failure based on the assertions in the output. [ALT Text: Alt text: "Terminal screenshot showing successful Jest test result for makeFilter function. All test suites and tests are passed, with one test taking 3 ms."] Step 5: Extending Jest Configuration for Additional Dependencies If other packages produce similar ESM-related issues, they can be added to the existing Jest configuration under transformIgnorePatterns: transformIgnorePatterns: [ 'node_modules/(?!@sisense/sdk-common|@sisense/sdk-data|lodash-es|another-esm-package)', ], This flexibility enables straightforward testing of any ES module dependencies, including any other potential Compose SDK dependencies. Conclusion Unit testing Sisense ComposeSDK components with Jest requires explicitly configuring Babel to compile the ComposeSDK libraries. By adjusting Jest and Babel configurations appropriately, effective unit tests can be implemented. This approach allows comprehensive and full unit test coverage. References/Related Content: ComposeSDK Guide Jest Babel JS Unit Testing
Jeremy FriedelPosted 1 year ago • Last reply 1 year ago
2
Embedding Analytics
Embedding Sisense Dashboards In Salesforce

Embedding Sisense content into the applications where end users spend most of their time is one of the best ways to leverage your analytics investment. In this post, we'll go over embedding a Sisense dashboard in Salesforce, using Salesforce objects to filter the dashboard to the right context. 1. Create a new VisualForce page From the Setup menu, select the Developer Console option The Developer Console will open, select File -> New -> Visualforce Page 2. Add an iFrame to embed the Sisense dashboard Add a standardController to specify the desired page where the Sisense dashboard will be added. In this example, we'll use the Account record page: <apex:page standardController="Account"> <apex:iframe src="https://<Sisense Server URL>/app/main#/dashboards/<dashboardID>?embed=true&h=f&t=f&r=f&l=f" width="100%" height="1024px" scrolling="true" id="sisenseIframe"/> </apex:page> Use the embed=true parameter to remove the headers, and also pass which page components you want displayed (toolbars, filters, navigation, etcetera). Documentation. 3. Make it dynamic Salesforce allows you to pass object values down to the embedded content. In this case, we will pass the Account ID to filter the dashboard to the account record. NOTE: The field you are passing as filter needs to exist in your Sisense data model. First, filter the dashboard by the column that contains the Salesforce object values, and get the encoded filter JAQL using the following post: passing dashboard filters by URL parameters . Find the part of the encoded JAQL that contains the dimensional value (in this example the Account ID), and replace it with the Salesforce placeholder: {!Account.Id}: filter=%5B%7B%22jaql%22%3A%7B%22table%22%3A%22Customers%22%2C%22column%22%3A%22SFDCAccountID%22%2C%22dim%22%3A%22%5BCustomers.SFDCAccountID%5D%22%2C%22datatype%22%3A%22text%22%2C%22merged%22%3Atrue%2C%22title%22%3A%22SFDCAccountID%22%2C%22filter%22%3A%7B%22explicit%22%3Atrue%2C%22multiSelection%22%3Atrue%2C%22members%22%3A%5B%22{!Account.Id}%22%5D%7D%2C%22collapsed%22%3Afalse%2C%22datasource%22%3A%7B%22title%22%3A%22MW%22%2C%22fullname%22%3A%22LocalHost%2FMW%22%2C%22id%22%3A%22aLOCALHOST_aMW%22%2C%22address%22%3A%22LocalHost%22%2C%22database%22%3A%22aMW%22%2C%22lastBuildTime%22%3A%222020-09-30T14%3A53%3A50.547Z%22%7D%7D%2C%22%24%24events%22%3A%7B%7D%2C%22instanceid%22%3A%22DC3F2-74F4-1C%22%2C%22%24filter%22%3A%7B%7D%2C%22%24permissionsService%22%3A%7B%22sourceToGlobalObjects%22%3A%7B%22dashboard%22%3A%22prism.activeDashboard.userAuth%22%2C%22widget%22%3A%22prism.activeWidget.dashboard.userAuth%22%7D%7D%2C%22isCascading%22%3Afalse%2C%22%24%24guid%22%3A%22B7684-3347-E875-9BBB%22%2C%22%24%24hashKey%22%3A%22object%3A2661%22%7D%5D Append it to the URL in the Visualforce page by adding &filter=<encoded jaql> Save the Visualforce page 4. Make the Visualforce Page Available In Salesforce, under Setup, search for Visualforce pages and edit the newly created page Check the "Available for Lighting Experience, Lighting Communities, and the mobile app" check box. Save the page 5. Add the Visualforce Page In Salesforce, under Setup, search for the page where the Sisense dashboard will be displayed. In this example, it's the Account Record Page. Click the Edit button The page layout will be opened. Choose Visualforce from the left side bar and drag it to the desired location in the layout. Select the new component, the settings will open in the right side. Select the newly created Visualforce page, add a label, and enter the desired height (in pixels) for the component. Save the page layout. Now the page will contain the Sisense dashboard, filtered down by the Salesforce object: Other Considerations: SSO must be set up for a seamless experience, otherwise users may get the Sisense login page when they don't have an active session in Sisense. Visualforce lets you use CSS and Javascript to customize height, width and other styling aspects of the iFrame. Make sure to line up the height of the iFrame with the height of the Lighting component containing the Visualforce page in the layout, so that users don't get multiple scrollbars.
intapiuserPosted 3 years ago • Last reply 1 year ago
5
Embedding Analytics
Sisense Compose SDK

Sisense Compose SDK The Future is Composable In the fast-paced world of data-driven applications, developers are constantly seeking innovative ways to create customized data products that seamlessly integrate into their projects. Sisense has stepped up to the challenge with its groundbreaking Compose SDK, which has fundamentally changed the game. This powerful toolkit empowers developers to harness the full potential of Sisense components, enabling them to craft data products that are not only highly customized but also perfectly tailored to their applications. Traditionally, the embedded analytics market constrained developers within the boundaries of their chosen tools. However, Compose SDK breaks free from this limitation. Instead of merely embedding a third-party tool, developers now have the freedom to build bespoke data products by selecting from a rich library of Sisense components and seamlessly integrating them with a wide range of other tools within their Integrated Development Environment (IDE). A Practical Example In the world of UI design, consistency is key. Imagine your company has chosen the Material UI framework to style your application. It provides a sleek and uniform look, but now you need to populate Material UI tables with dynamic data from Sisense. Enter Compose SDK. With it, you can seamlessly merge Material UI's aesthetics with Sisense's analytical power. Start with Material UI tables that align perfectly with your design guidelines. Then, using the Compose SDK's ExecuteQuery component, you effortlessly infuse these tables with real-time data from Sisense. The result? Stunning, data-rich components that not only adhere to your design principles but also deliver invaluable insights. Your users get the best of both worlds - visually appealing design and powerful data. Get Started with Compose SDK Excited to explore the potential of the Compose SDK? Good news - it's currently in Beta and available to all Sisense partners, ready for you to harness its capabilities today. To embark on your journey, you can begin by cloning the example repository from GitHub listed below. To install the necessary packages for your sample application, follow the user-friendly Compose SDK Quickstart Guide. Keep in mind that, for the time being, these packages are accessible on GitHub, requiring a personal access token for access. In conclusion, Sisense's Compose SDK represents a revolutionary leap forward in the world of data product development. It empowers developers to break free from the constraints of traditional embedded analytics and build highly customized, seamlessly integrated data products. With the Compose SDK, the possibilities are limitless, and the power to transform your applications lies at your fingertips. So, why wait? Dive into the world of Compose SDK, unleash your creativity, and revolutionize your data products today. Your applications will thank you for it! Credit : Sample Application initially developed by Sisense Senior Director of Field Engineering: Tom Linton Compose SDK -- Material UI Example Sisense Quick Start Guide Sisense Github
Sisense UserPosted 2 years ago • Last reply 1 year ago
1
Embedding Analytics
Supercharging Your Tabular Views: AG Grid Powered by Sisense Compose SDK

Supercharging Your Tabular Views: AG Grid Powered by Sisense Compose SDK How to Build a Tabular View with Sisense Compose SDK and AG Grid This guide walks through how to use Sisense Compose SDK's query hooks to power an AG Grid table component in React. We'll break down the steps, explain the code, and highlight the key functionalities of AG Grid. Introduction Tables are essential in BI applications for summarizing large datasets and providing users with a simple way to navigate, filter, and analyze data. AG Grid is an ideal solution for tabular views, offering robust capabilities like sorting, filtering, grouping, and data exporting. When combined with the Sisense Compose SDK, you can power real-time, data-driven applications that provide users with seamless, customizable data interactions. In this example, we are using a sample eCommerce dataset, available through the Sisense Compose SDK free trial, to demonstrate how powerful this combination can be. Users can explore product sales by country, age range, and time period in a fully interactive grid. AG Grid's advanced tabular capabilities include features like multi-level row grouping, custom value formatting, pivot mode for creating complex data hierarchies, and the ability to export data to formats like CSV. These features, when integrated with Sisense's query hooks and real-time data, enable developers to create highly dynamic dashboards where users can manipulate large datasets with ease. This combination of Sisense Compose SDK and AG Grid empowers developers to create rich, interactive data experiences, allowing users to filter and manipulate data at granular levels, all while leveraging real-time querying powered by Sisense. Step-by-Step Breakdown of the Code Setting Up the Project packages used: npm install ag-grid-react ag-grid-community @mui/material @sisense/sdk-ui @sisense/sdk-data Register AG Grid Modules AG Grid uses modules to enable functionality like client-side row models, and sorting and filtering. We register the modules to be used within AG Grid: import { AgGridReact } from "ag-grid-react"; import "ag-grid-community/styles/ag-grid.css"; import "ag-grid-community/styles/ag-theme-alpine.css"; These imports ensure that AG Grid is properly styled and functional. Setting Up the Query with Sisense SDK Sisense Compose SDK’s `useExecuteQuery` is used to fetch data from your data sources. The query can include dimensions and measures which AG Grid will render. const queryProps = useMemo(() => ({ dataSource: DM.DataSource, dimensions: [DM.Country.Country, DM.Commerce.AgeRange, DM.Commerce.Date.Years], measures: [ measureFactory.sum(DM.Commerce.Revenue, "Total Revenue"), measureFactory.sum(DM.Commerce.Quantity, "Total Quantity"), ], }), []); Here, `useExecuteQuery` executes the query based on the defined data source (`DM.DataSource`), dimensions (e.g., country, age range), and measures (e.g., revenue, quantity). Fetching and Displaying Data We leverage React's `useEffect` hook to update the state of `rowData` once data is fetched. This ensures AG Grid displays up-to-date information. const { data, isLoading, isError } = useExecuteQuery(queryProps); useEffect(() => { if (!isLoading && !isError && data) { const rows = data.rows.map((row) => ({ country: row[0]?.text || "N/A", ageRange: row[1]?.text || "N/A", year: row[2]?.text || "N/A", revenue: row[3]?.data || 0, quantity: row[4]?.data || 0, })); setRowData(rows); } }, [data, isLoading, isError]); This block processes the raw data returned from the query and formats it for use in the AG Grid. Column Definitions AG Grid requires column definitions that define how each field should be displayed. const columnDefs = useMemo(() => [ { field: "country", headerName: "Country" }, { field: "ageRange", headerName: "Age Range" }, { field: "year", headerName: "Year" }, { field: "revenue", headerName: "Total Revenue", valueFormatter: (params) => abbreviateNumber(params.value), // Helper function for number formatting }, { field: "quantity", headerName: "Total Quantity", valueFormatter: (params) => abbreviateNumber(params.value), }, ], []); We define five columns: country, age range, year, revenue, and quantity. The `valueFormatter` function ensures that numbers are displayed in an abbreviated format (e.g., "1.2K" for thousands). AG Grid Configuration The grid configuration includes `defaultColDef` for common properties across all columns (like filtering and sorting), and `animateRows` for smoother transitions. const defaultColDef = useMemo(() => ({ flex: 1, minWidth: 100, sortable: true, filter: true, resizable: true, }), []); Here, all columns are set to be sortable, filterable, and resizable by default. Exporting Data AG Grid’s API allows exporting table data to CSV. We use a button to trigger the export functionality: const onBtnExport = useCallback(() => { gridRef.current.api.exportDataAsCsv(); }, []); Rendering the Grid Finally, we render the AG Grid component, passing the `rowData`, `columnDefs`, and `defaultColDef` as props: <AgGridReact ref={gridRef} rowData={rowData} columnDefs={columnDefs} defaultColDef={defaultColDef} animateRows={true} /> This sets up the AG Grid to dynamically render data retrieved via Sisense Compose SDK. Value of Tabular Views Tabular views are crucial for presenting structured data, providing an easy way to explore, filter, and analyze datasets. AG Grid’s built-in features like sorting, filtering, and exporting make it a perfect fit for visualizing data-rich tables in BI environments. Features of AG Grid - Sorting and Filtering: Users can sort and filter data by column. - Grouping: Group rows by common fields. - Customization: Full flexibility in column definitions and row configurations. - Exporting: Allows exporting table data to CSV format. - Performance: Handles large datasets efficiently. Using Sisense Compose SDK to Power Components Sisense Compose SDK is an API-first approach to data querying, which powers the `useExecuteQuery` hook in this component. By combining it with AG Grid, you can easily visualize dynamic, real-time data in table format. Here is a functional example in Github https://github.com/sisensers/ag-grid-compose-sdk.git
Sisense UserPosted 1 year ago
0