Sisense Community

Customizing the Sisense User Interface with Interactive Buttons and Icons

Customizing the Sisense User Interface with Interactive Buttons and Icons Sisense plugins and scripts enable extensive customization of the Sisense user interface, allowing developers to add interactive elements such as buttons and icons to enhance functionality and user experience. A common use case of plugins involves adding clickable icons or buttons that trigger specific plugin features or open custom UI elements. This article outlines the process for adding these interactive elements using a practical example. Icon Example Key Steps for Adding Clickable Buttons Follow this general flow to successfully add a custom clickable buttons or icon into the Sisense UI: Choose the UI placement: Determine the exact area of the Sisense UI where the button or icon will appear. Identify the target parent container: Find the appropriate parent element in the DOM that will contain the new button. Prevent duplication: Implement checks to avoid adding duplicate buttons, if Sisense dashboard or prism event used fires more than once. Create the HTML button element: Construct the button programmatically and apply necessary styling, adding either button text or icon image. Attach Click Listener: Use JavaScript event listeners to define the button or icon interactive behavior. Practical Example: Adding a Button to the Filter Header Below is a clear and reusable example demonstrating the process of adding a clickable button to the filters header in a Sisense dashboard. This can easily be adapted for different parts of the dashboard or various plugin functionalities. function addCustomButton() { // Step 1: Locate the UI container (in this example, the header to the right hand filter panel) const filtersContainer = document.querySelector('.filters-headline'); // Step 2: Avoid duplicate button addition if (filtersContainer && !filtersContainer.querySelector('.custom-btn')) { // Identify placement context, in this example next to the spacer element to the right of the filters label const spacerElement = filtersContainer.querySelector('.spacer'); if (spacerElement) { // Step 3: Create the button with appropriate classes const customButton = document.createElement('button'); customButton.classList.add('btn', 'btn--icon', 'btn--dark', 'btn--on-grey', 'custom-btn'); // Insert an SVG icon (example provided) customButton.innerHTML = ` <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0,0,256,256"> <g fill="#5b6372" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"> <g transform="scale(8,8)"> <path d="M9,4c-1.64453,0 -3,1.35547 -3,3v18c0,1.64453 1.35547,3 3,3h17v-24zM9,6h3v11.41406l4,-4l4,4v-11.41406h4v16h-15c-0.35156,0 -0.68359,0.07422 -1,0.1875v-15.1875c0,-0.56641 0.43359,-1 1,-1zM14,6h4v6.58594l-2,-2l-2,2zM9,24h15v2h-15c-0.56641,0 -1,-0.43359 -1,-1c0,-0.56641 0.43359,-1 1,-1z"></path> </g> </g> </svg> `; = `  `; // Step 4: Define button functionality customButton.addEventListener('click', function () { // Replace with your plugin's custom action yourPlugin.action(); }); // Insert button into UI spacerElement.insertAdjacentElement('afterend', customButton); } } } // Add button upon dashboard load prism.on("dashboardloaded", function (e, args) { args.dashboard.on("widgetinitialized", addCustomButton); }); By following these principles and adapting the provided example, you can effectively enrich the Sisense interface, tailoring the UI to specific custom workflows and interactions.

Add-ons & Plug-Ins

Loading Amchart5 and Other External Libraries via Script Tags in Plugins

Loading Amchart5 and Other External Libraries via Script Tags in Plugins This article explains how to load external libraries, such as Amchart5 , into Sisense plugins , such as plugins that create new custom widget visualization types, by dynamically adding script tags to the page header to load the library. This method can avoid potential issues associated with other loading techniques but also offers flexibility such as using an external CDN to reduce plugin size and file count. Previous articles have discussed how to load external libraries and modules for Sisense plugins via adding the file to the plugin folder, and adding the file to the "source" parameter array in the plugin.json. What Is a Script Tag? A script tag is an HTML element (<script>) used to embed or reference JavaScript code in an HTML document. When you include a script tag with a src attribute, the browser downloads and executes the external JavaScript file. Why Use Script Tags for Loading External Libraries? For certain JavaScript libraries, especially visualization libraries like Amchart5, loading the library via a script tag can help avoid issues that might arise from bundling the files directly into the plugin. The script tag method provides several benefits: Flexibility: It allows the option of using an external CDN. This can reduce the size of the plugin package and the number of files you need to manage. Auto-Updating: When using a CDN, the external library can be updated automatically without modifying the plugin. Self-Hosting Option: Alternatively, you can set the src parameter to a local path of JavaScript files uploaded within the plugin, ensuring that the plugin remains fully self-hosted and independent of any CDN. Loading External Libraries: Self-Hosted or Using a CDN Self-Hosted: The script’s src is set to point to the files within the plugin folder. This follows this very specific format: /plugins/${name_of_plugin_folder}/{Any_subfolders_if_needed}/{full_name_of_the_file} This approach makes the plugin self-contained and avoids external dependencies. The src path must follow this format. CDN-Hosted: The src parameter is set to the URL of the external CDN, such as: https://cdn.amcharts.com/lib/5/xy.js Using a CDN can reduce the plugin’s file size and benefit from auto-updating libraries, though it introduces a dependency on the CDN’s availability. Example Loader Script Below is an example of a loader file (loader.6.js) that dynamically adds script tags to the page header to load Amchart5 and its modules (AM5 is loaded in this example, as well as additional AM5 modules dealing with axises and animation, this is a self-hosted example and does not rely on a CDN). // List of script URLs to add to the page header const scriptUrls = [ "/plugins/am5Example/am5/index.js", "/plugins/am5Example/am5/xy.js", "/plugins/am5Example/am5/themes/Animation.js" ]; // Function to add a script tag to the header function addScriptToHeader(url) { const script = document.createElement("script"); script.src=url; // Optionally set async or defer attributes if needed script.async = false; document.head.appendChild(script); } // Loop through each URL and add it to the header scriptUrls.forEach(url => addScriptToHeader(url)); This can be modified to occur on a specific prism and dashboard event, as opposed to immediately when the plugin loads. In this script: document.createElement("script"): Creates a new script tag. script.src: Specifies the source of the JavaScript file. document.head.appendChild(script): Adds the script tag to the Sisense page header. The async attribute is set to false to ensure that scripts load in the order they are added. Configuring plugin.json In your plugin’s plugin.json, reference the loader file and the library file itself. The loader file then adds the necessary external scripts. An example plugin.json configuration is shown below: { "name": "am5Example", "pluginInfraVersion": 2, "isEnabled": true, "source": [ "am5/loader.6.js" ], "folderName": "am5Example", "version": "1.0.0" } This setup makes the external library (Amchart5, in this case) available to your plugin without bundling the entire library directly into the main codebase. Conclusion Using script tags to load external libraries like Amchart5 provides a flexible method for managing dependencies in Sisense plugins. Whether the libraries are self-hosted or rely on an external CDN, this method simplifies the management of external scripts and can lead to more efficient plugin development, and avoid issues with specific libraries such as Amchart5 that work best when loaded as a script element. The example plugin that demonstrates this type of loading is available for download below.

Add-ons & Plug-Ins

Plugin - RemoveImageDownload - Removing Items From Sisense Menus

Plugin – RemoveImageDownload – Removing Items From Sisense Menus This article discusses a plugin (and an equivalent dashboard script ) that removes the “Download as Image” option from Sisense menus. This same approach can be applied to remove any other menu option in Sisense by adjusting the relevant code. Organizations may want to hide or remove specific menu items for several reasons: Security : Prevent certain menu options from being used. Enforcing Best Practices: Remove menu items not used in the standard recommended workflow Streamlined UI : Hide unused menu items to simplify the user experience. Plugin Overview RemoveImageDownload plugin removes the “Download Image” option from all standard Sisense menus which include the: Dashboard Toolbar Menu Widget Context Menu (in a dashboard) Direct Download Menu in the Widget Editor and Viewer This is accomplished using the Sisense beforemenu event . That event runs before any standard Sisense menu is rendered, giving scripts and plugins an opportunity to modify or remove items. The primary JavaScript file of the plugin (main.6.js) can also be used as a standalone dashboard script, simply copy and paste the code as a dashboard script. The code works by listening to the beforemenu event, which Sisense triggers before rendering any of its menus. Within that event, the script functions filters the args.settings.items array, each “item” in this array may itself contain nested sub-items (like the “Download” submenu). The script locates the specific item or items to remove by checking parameters such as item.caption or item.command.title, and then filters the menu items out accordingly. This code design is flexible, by adjusting which string is matched in the filter logic this code can be used for any standard Sisense menu item. Below is the complete code, with explanatory comments: // // Remove the image option from the download menu in the widget context (dashboard view) // prism.on("beforemenu", (ev, args) => { if ( !args.settings?.name || !args.settings?.scope?.widget || !args.settings.name.includes("widget") || !args.settings.items ) { return; } const downloadMenu = args.settings.items.find(item => item.caption === "Download"); if (!downloadMenu?.items) { return; } const downloadWithoutImage = downloadMenu.items.filter(item => { return !(item.command && item.command.title === "dashboard.widget.commands.image.title"); }); if (downloadWithoutImage !== undefined) { downloadMenu.items = downloadWithoutImage; } }); // // Remove the "Download Image" option from the main dashboard Download menu // prism.on("beforemenu", (ev, args) => { if ( !args.settings?.name || !args.settings.name.includes("dashboard") || args.settings.name.includes("widget") || !args.settings.items ) { return; } const downloadMenu = args.settings.items.find(item => item.caption === "Download"); if (!downloadMenu?.items) { return; } const downloadWithoutImage = downloadMenu.items.filter(item => { return !(item.command && item.command.title === "Download Image"); }); if (downloadWithoutImage !== undefined) { downloadMenu.items = downloadWithoutImage; } }); // // Remove the image download option from the Widget Editor UI download dropdown // prism.on("beforemenu", (ev, args) => { if (!args.settings?.items) { return; } args.settings.items = args.settings.items.filter(item => { return !(item.command && item.command.title === "dashboard.widget.commands.image.title"); }); }); Plugin Readme Below is the README for the RemoveImageDownload plugin. # Remove Image Download from Menu ## Description This plugin removes the option to download images from the widget and dashboard menu UI. It does not modify Sisense API endpoints, including the image API endpoint. ## Installation 1. **Download the plugin:** - Extract the compressed archive to /opt/sisense/storage/plugins/ - Or, in Admin > System Management > File Management, upload the extracted folder to the plugins directory. 2. **Wait for the plugin to load.** 3. **Refresh the page.** Screenshots Below are before-and-after screenshots of the relevant Sisense menus when the plugin is enabled. With Plugin Without Plugin With Plugin Without Plugin With Plugin Without Plugin Further Customization and Other Use Cases To use this code to hide additional items or different item adjust the strings checked in item.command.title or item.caption to hide or rename other menu items. Console logging the args.settings.items array temporarily can be used to find the appropriate title and caption strings.The conditionals can be modified as needed to only apply the function to a particular menu. The same beforemenu event can be used to modify Sisense menus as needed in Sisense scripts and plugins. The plugin is downloadable below. How did the plugin work for you? What other type of plugin are you looking to learn more about? Let me know in the comments!

Data Models

Reading multiple excel files into Sisense data model

Reading multiple Excel files into Sisense data model Introduction: If you are migrating from Windows to a Sisense Linux-hosted solution, on the Sisense Windows machine you may use an SFTP client that moves Excel files placed in a remote server's folder to a folder on the Sisense Windows server. With this, it is used as a source folder for Excel file import to an ElastiCube. Since this is not possible with your hosted Linux, we could use the CDATA SFTP Connector to import these files. In your existing connection string, you will get just the names of the files. When connecting to an Excel sheet stored in an SFTP server, the URI must be sftp://<server>:<port>/<path to file> , as shown below. If the connection string does not contain this, you will just get the names of the files. Additionally, the ConnectionType and AuthScheme must be set to SFTP , and the SSHAuthMode must be set to either None , Password , or Public_Key depending on your SFTP server. If the issue still persists, it would be helpful to have a log file. To generate a log file, in your connection string to Excel, please set the Log file to the path where the log file will be generated (such as C:/Logs/log.txt) and Verbosity to 3. Then reproduce the error. Additional Resources: Sisense Docs: https://docs.sisense.com/win/SisenseWin/introduction-to-data-sources.htm Sisense Academy: https://academy.sisense.com/sisense-data-designer-web-application