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 With ReactJS
Gitlab Link: https://gitlab.com/SisenseJS/react-sample This project was generated with create-react-app version 1.5.2. The goal is to show a basic integration of Sisense.js using ReactJS. When you load the application, it makes some API calls to fetch all Sisense dashboards whose title are prefixed with Sample and adds option to the dropdown list. Upon selection of a dashboard (uses the first result as default), the application loads the widgets from that dashboard onto the page. For simplicity, certain widget types are excluded from display (textbox and indicator widgets) Dashboard The application gets most of the widgets for a given dashboard and displays them on the page. The end user can click to download each widget, as either an image or CSV Prerequisite Please note you need to be integrated with SSO or WAT in order to be able to implement Sisense.js embedding. If you have not done so already, please refer to documentation regarding how to onboard SSO or WAT, and how to integrate that with embedding. Configuration In order to setup this application for your Sisense server, check out the configuration file at /src/config/sisense.js. This file contains some settings, such as the dashboard title prefix, your Sisense server's address, etc that you may want to update before running. Development server Run npm start to build and run the application, then navigate to http://localhost:3000/. The app will automatically reload if you change any of the source files. Production server Run npm run build to generate a production build out of the application. Once built, you can deploy the web app to a web server, as per Instructions from React Further help To get more help on create-react-app for ReactJS check out their Github Repository. For more help with Sisense.js, check out the Sisense documentation here.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.Sisense Storytelling: Embedding Sisense Interactive Dashboards in PowerPoint 2013 / 2016
Introduction: This post describes how live interactive dashboards can be embedded into Microsoft PowerPoint presentations. A common use for this ability is to leverage the Sisense dashboards for storytelling, allowing the presenter of the dashboard to answer questions on-the-fly be filtering and drilling into the data during the meeting itself. Big Plus: Whenever the presentation is opened and presented, the data and dashboards will be updated with the most up to date data in the ElastiCube = No need to manually update your presentations anymore! In order to embed a Sisense dashboard into a Microsoft PowerPoint presentation, the following steps are required. A short video example of this can be seen in the following video: Prerequisites: 1. Sisense installation and dashboards 2. Sisense server enabled with SSL - Setting-Up-SSL 3. PowerPoint 2013 / 2016 or Later Installation: Install the "Web Viewer" add-on on the PC running the PowerPoint presentation (this can be found at the MSFT Office Store). Note: The "Web Viewer" add-on is a 3rd party SW and is not developed or supported by Sisense. After completing the installation, in any slide in which you wish to embed a dashboard or widget, press on Insert --> My Add-ins --> Web Viewer: In the URL box, enter the URL of the dashboard or widget you would like to embed. Note: Make sure to remove the https:// at the beginning of the URL and add the embed=true switch to the end. (more on iframe embedding options can be found at: Embedding Dashboards and Widgets). For example: Note: The computer running the PowerPoint slideshow must have network access to the Sisense server (in case a firewall is in place, please create the appropriate rules to allow access to the ElastiCube server). Due to a limitation in the "Web Viewer" add on, in order to update the dashboards / widgets, close the PowerPoint presentation and open it again.Simple SisenseJS Example - Assemble A Dashboard From A List Of Widgets
Download: HTMLFile , JSFile Introduction: Use this sample application as a quick and simple tutorial on sisense JS. It addresses a common use case for allowing a user to assemble a dashboard from a list of available widgets. Note: This is not production-grade and should only be used for quick and easy learning. Instructions: #1 Download the HTML and JSFile. #2 Edit the HTML file in notepad and replace all instance of jay.sisense.com with your sisense host e.g. localhost:8081 #3 Place the files in the following folder C:\Program Files\Sisense\app\resources - vs 7.2.x C:\Program Files\Sisense\PrismWeb\Resources - vs 7.1.x and earlier Note: This file can also be executed from your web application. #4 Make sure that you are logged into the Sisense application or have SSO enabled. #5 Invoke the file in the following format http://<host>/resources/dash_builder.html?dash=<dashboard ID> e.g. http://jay.sisense.com/Resources/dash_builder.html?dash=5a66642a6e74366b8c8a00ae #6 The list of widgets (make sure you add Titles to all of them) shows up in the selection list. Choose your widget and then select [+] to add or [-] to remove. Note: There is no persistence, built in to save the dashboard for each user.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.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); } } }Change Filters When Using SisenseJS
Introduction Sisense allows importing widgets and filters as components to be presented in different websites. This is done by SisenseJS. Sometimes, it is required to modify the widgets filters based on website attributes such as logged in user, location, previous user selections etc. Using the below scripts, you will be able to modify the dashboard filters and save them to the server so data will be saved even when refreshing the page. Code Snippet: 1. Modifying dashboard filters: // Find the filter we want to change based on the dim var filterToChange = dash.filters.$$filters.find(item => item.jaql.dim == "[Commerce.Age Range]"); if (filterToChange && filterToChange.$$model.jaql.filter){ var members = filterToChange.$$model.jaql.filter.members; // Check if we already have the member selected if (members && !members.includes("65+")) { // Push a new member to the filter members.push("65+"); // Save the dashboard dash.$$model.$dashboard.updateDashboard(dash.$$model,"filters"); } } 2. Save filters changes to the server is done by sending "true" as the second parameter to the "connect" function: Sisense.connect('http://10.20.4.155:8081',true).then(function(app) { . . . }); 3. Create and add new filter to the dashboard: var applyFilter = function (dim, value, activeDashboard) { // Get the active dashboard, only run if sisense is loaded if (activeDashboard) { // Create the filter options var filterOptions = { save: true, refresh: true, unionIfSameDimensionAndSameType: false }; // Create the jaql for the filter var jaql = { 'datatype': 'text', 'dim': dim, 'filter': { 'multiSelection': true, 'members': value, 'explicit': true }, "title": dim }; // Create the filter jaql var applyJaql = { jaql: jaql }; // Set the new filter activeDashboard.$$model.filters.update(applyJaql, filterOptions); } }; Download: ModifyFiltersSisenseJS.htmlTwo-Way Filter Updating Between Embedded Iframe And Parent Application
The following code example can be modified to facilitate the two-way passing of filter information between an embedded iframe and its parent application. Window.postMessage() is used to pass information between the origins and avoid CORS complications. // The following code example can be modified to facilitate the two - way passing of filter information between an embedded iframe and its parent application. // Window.postMessage() is used to pass information between the origins and avoid CORS complications. // // In your DASHBOARD SCRIPT (Sisense Application) // // OUTGOING dashboard.on('filterschanged', function (dash, args) { var targetOrigin = 'http://your_parent_application_origin', targetWindow = window.parent; targetWindow.postMessage({ filterUpdate: args.filters }, targetOrigin); }); // INCOMING window.addEventListener('message', receiveMessage, false); function receiveMessage(event) { var sendingOrigin = 'http://your_parent_application_origin'; if (event.origin !== sendingOrigin) { throw new Error('bad origin:', event.origin); } else { if (defined(event.data, 'memberToRemove') && defined(event.data, 'jaql')) { // remove from members, add removed filter to excluded var members = event.data.jaql.jaql.filter.members, removed; removed = members.splice(members.indexOf(event.data.memberToRemove), 1); event.data.jaql.jaql.filter.filter.exclude.members.push(removed); // make update prism.activeDashboard.filters.update(event.data.jaql, { save: true, refresh: true, unionIfSameDimensionAndSameType: false }); } } } // // In your PARENT APPLICATION // // MARKUP // <div id ="filterWrapper"></div> <iframe id="ifm" name="ifm" width="100%" height="768" frameborder="0" src="your_dashboard_URL" scrolling="auto"></iframe> // EVENT LISTENERS function setOnClickListener(jaql) { $('.filter-button').on('click', function (ev) { ev.preventDefault(); $(this).remove(); removeFilter(ev.currentTarget.innerText, jaql); }); } // OUTGOING function removeFilter(memberToRemove, jaql) { frames['ifm'].postMessage({ memberToRemove: memberToRemove, jaql: jaql }, 'http://your_base_sisense_app_origin'); } // INCOMING window.addEventListener('message', receiveMessage, false); function receiveMessage(event) { var sendingOrigin = 'http://your_base_sisense_app_origin'; if (event.origin !== sendingOrigin) { throw new Error('bad origin:', event.origin); } else { try { if (defined(event.data, 'filterUpdate')) { var filterObject = event.data.filterUpdate[0], exclude = false; if (defined(filterObject, 'jaql.filter.filter.exclude')) { exclude = filterObject.jaql.filter.filter.exclude; } $('#filterWrapper').empty(); filterObject.jaql.filter.members.forEach(function (item) { if (!exclude || exclude.members.includes(item)) { return; } $('#filterWrapper').append('<button class="btn-default filter-button">' + item + '</button>'); }); setOnClickListener(filterObject); } } catch (err) { throw new Error(err.message); } } }
