Dynamic Resize For Embedded IFrames
If you've ever attempted to dynamically resize your embedded iFrames in your parent application, you may have experienced a CORS conflict. Basically, since your parent application and sisense application serve from different domains, your browser restricts HTTP responses for security reasons. Luckily, we have a workaround that leverages the Window.postMessage() function. This solution dynamically resizes your embedded iFrame based on the height of the contents. // Within your SISENSE APPLICATION, apply this script on the dashboard to be embedded via iFrame: dashboard.on('refreshend', function () { var heightValue = 0, columnArr = dashboard.layout.columns, columnHeight = [], targetWindow = window.parent, // replace with your target domain targetOrigin = 'http://main.mytestapp.com:8083'; // iterate through columns for (var i = 0; i < columnArr.length; i++) { var cellsLength = columnArr[i].cells.length, heightTotal = 0; // increment through each column widget for (var j = 0; j < cellsLength; j++) { var height = columnArr[i].cells[j].subcells[0].elements[0].height; heightTotal += height; } columnHeight.push(heightTotal); // assign max aggregate column height heightValue = columnHeight.reduce(function (a, b) { return Math.max(a, b); }); } targetWindow.postMessage({ heightValue: heightValue }, targetOrigin); }); // Within your PARENT APPLICATION: window.addEventListener('message', receiveMessage, false); function receiveMessage(event) { // replace with your sisense application origin var sendingOrigin = 'http://reporting.mytestapp.com:8080'; if (event.origin !== sendingOrigin) { throw new Error('bad origin:', event.origin); } else { try { // replace with your iFrame ID document.getElementById('ifm').height = event.data.heightValue; } catch (err) { throw new Error(err.name + ':', err.message); } } }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.SisenseJs Custom Filter Samples
Gitlab Link: https://gitlab.com/SisenseJS/filter-samples This project was created to show several ways to integrate 3rd party components with Sisense.js. Many web apps that leverage Sisense.js for embedding do so because they already have a consistent look/feel for their application and want the controls related to Sisense to match. This sample project showcases a few common filter types, in a simple web page. This webpage uses Semantic UI framework, but this approach would be similar for Bootstrap, Material Design, etc Workflow Almost all custom filter controls follow the same workflow: Fetch data - Make an API call to fetch data from Sisense, and add the results as potential selections in the UI Initialization - Setup the component with this data User Selection - When a user makes a selection on this control, set a filter on your Sisense dashboard using our JavaScript API Filter Samples TOGGLE A simple toggle switch, that sets/unsets a filter when clicked DROPDOWN A drop-down menu built using Semantic UI's dropdown framework. This example has a simple dropdown that fetches a list of unique values from Sisense, and sets a filter based on user selection (supports multi-select). Also included is a more complex dropdown that nests multiple dimensions into levels. This takes a bit of HTML manipulation to create the hierarchy, but generally, it works the same as the simple example. CALENDAR DATE RANGE PICKER A dropdown that displays a date range picker, based on an open-source JavaScript component. This does require adding moment.js, daterangepicker.js, and daterangepicker.css into your HTML page, but the JavaScript implementation of this component is similar to the rest of the examples. One of the nice features of this component is that it allows you to define shortcuts for date ranges (yesterday, last month, etc) RESET BUTTON This is a simple button that resets the filters on the page. Resetting the filters for your Sisense dashboard is pretty simple through the JavaScript API, most of the code here is for resetting the UI for the other filter components. File Structure SEMANTIC This directory contains all files required for Semantic UI. No customizations were made here CONFIG.JS This file contains the base object that will store a reference to all settings/methods related to this website. When setting this up, you should update the server address and potentially the Elasticube. INDEX.HTML This HTML page is the default landing page for this website. It loads config.js and main.js, to initialize the application, and includes the definition of the filter components and widgets to display. This sample uses widgets from the Sample Healthcare dashboard that comes with the free trial of Sisense, so if you change the Elasticube in config.js you should also change the widget IDs and filter properties defined in this file. MAIN.CSS This contains any styling outside of the Semantic UI framework MAIN.JS This is the main JavaScript file that initializes the web page. This file is split into two sections: Initialization & Runtime INITIALIZATION initScript - Adds a <script /> tag to your HTML page, to add the Sisense.js Library connect - Once the Sisense.js library has finished loading, connect to your Sisense server loadApplication - Once connected, create a new Dashboard and find all the widgets & filters on the web page. For each widget found, run the loadWidget function. For each filter found, run the initFilter function. loadWidget - For a given widget ID, load the widget and render to the page initFilter - For a given filter, initialize it and add an event handler for when a user interacts with it RUNTIME setFilter - Runs after a filter selection was made, sets the filter using Sisense JavaScript API initScript() - Kicks off the initialization workflow Further help To get more help on Semantic UI their Documentation. For more help with Sisense.js, check out the Sisense documentation here.IFrame Embedding And Safari
For organizations embedding Sisense into their application using an iFrame we have identified a situation where the iFrame may not render when browsing to the application using Safari. This can be fixed with one setting change in the Safari browser. To do this, follow the steps below: Open Safari Pull down the Safari menu and choose "Settings..." 3. In the resulting Preferences window, click the "Privacy" tab and uncheck the "Prevent cross-site tracking" box 4. Close the Preferences window 5. Reload the application page Please note that this is specific to iFrame embedding and should not be an issue when browsing directly to the Sisense site.
Leveraging Sisense Notebooks with Compose SDK
Discover how to enhance your analytics integration with Sisense Notebooks and the Compose SDK. This article explores a code-first approach to creating custom datasets and visualizations using SQL, empowering data teams to leverage their existing skills. Learn how to seamlessly embed tailored insights into customer-facing applications, streamlining workflows for both analysts and developers. Unlock the potential of your data with Sisense, delivering impactful, personalized analytics that meets your organization’s unique needs.
