Sisense Community logo
     
    • Community Feedback
    • Chapters
    • Events
    • Forums
      • Help and How To
      • Product Feedback Forum
      • Strategy & Use Cases
    • Blogs
    • KB Docs
      • KB Docs
      • Add-Ons & Plug-Ins
      • APIs
      • Best Practices
      • Blox
      • CDT
      • Cloud Managed Service
      • Data Models
      • Data Sources
      • Embedding Analytics
      • How-Tos & FAQs
      • Onboarding
      • PySisense
      • Security
      • Sisense Administration
      • Sisense Intelligence & AI
      • Troubleshooting
      • Widget & Dashboard Scripts
    • Support
    • Learning
      • Sisense Academy: Free Courses and Certifications
      • Official Developer Documentation
      • Official Product Documentation
      • Official Sisense Youtube Channel
      • Sisense Compose SDK Playground
      • Official Sisense Discord
    • Use Case Gallery
    •      
    Discussions
    •                    
    •                    
    •                    
    •                    
    •                    
    •                    
    •                    
    •                    
    •                    
    •                    
    •                    
    •                    
    •                    
    •                    
    •                    
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   
    Discussions
    • TagsChevronRightIcon
    Configuration & Design Tips
    • Blog banner
      • Widget & Dashboard ScriptsChevronRightIcon

      Hiding Widgets if a Widget Has No Results [Linux]

                                                                                                               

      Hiding Widgets if a Widget Has No Results [Linux] Introduction A common dashboard design requirement is hiding widgets that have no data. This article includes a widget script that conditionally hides an indicator widget when its primary value is empty or represents an N/A like value. This behavior is commonly requested when dashboard filters or formulas result in no meaningful value and the widget should be visually hidden rather than showing an empty or zero indicator. The article also includes an alternative dashboard-level approach that hides widgets based on filter selections, without inspecting widget query results. This alternative is derived from the linked external blog post . This is applicable to both on-cloud and on-prem Sisense in all recent Sisense versions. Use Case Customers often want indicator widgets to disappear when their calculated value is not meaningful. Common examples include: Filters resulting in no matching data Calculations returning N/A, null, or empty values Conditional metrics that only apply to certain filter selections Rather than showing an empty indicator, this approach hides the widget entirely and restores it automatically when the value becomes valid again. Layout Considerations For best visual results, it is ideal to use one of these two layouts for the indicator widgets that may be hidden: Place the indicator widget in its own dashboard row Place it at the end of a row Hiding a widget via a script does not automatically resize or reflow other widgets on the same row. Step by Step Guide Widget Script to Hide Widget Based on Indicator Value This widget script is applied directly to the indicator widget. It evaluates the widget’s primary value after each render and hides or shows the widget accordingly. Behavior If the primary value is null, empty, or an N/A like string, the widget container is set to display: none. When the value becomes valid and not null again, the widget is restored to visibility and redrawn to ensure correct indicator rendering. A guard variable prevents infinite redraw loops, since a redraw triggers the widget ready event. A debug flag allows optional console logging when needed. Widget Script /** * Hide widget when its primary indicator value is empty or N/A-like. * * Behavior: * - If the value is empty, set the widget container to display "none". * - If the returned value becomes a number or valid value, restore display style to original and redraw * - A redraw triggers "ready" again, so a guard variable prevents a redraw loop. * * Debug: * - Set debug variable = true to enable console logging to track script status. * * For best results use on indicator in own row or at end of row, if other widgets exist on row, empty space will appear in dashboard */ widget.on("ready", function () { function run() { var debug; var suppressNextReady; var hideValues; debug = false; suppressNextReady = false; hideValues = [ "n/a", "#n/a", "na", "none", "null", "undefined" ]; // Function to turn console logging on or off function log(message, data) { if (!debug) { return; } if (data === undefined) { console.log("[hide-empty-indicator] " + message); return; } console.log("[hide-empty-indicator] " + message, data); } // Widget CSS selector function getWidgetElement() { return document.querySelector('widget[widgetid="' + widget.oid + '"]'); } // Get value of primary indicator value function getPrimaryValue() { if ( widget.queryResult && widget.queryResult.value && widget.queryResult.value.data !== undefined ) { return widget.queryResult.value.data; } try { if ( widget.queryResult && widget.queryResult.data && widget.queryResult.data.length ) { return widget.queryResult.data[0][0]; } } catch (e) { log("Value read failed for data[0][0].", e); } if (widget.queryResult && Array.isArray(widget.queryResult)) { if (widget.queryResult.length && widget.queryResult[0].length) { if (widget.queryResult[0][0]) { return widget.queryResult[0][0].Value; } } } return null; } function shouldHide(value) { var text; var normalized; if (value === null || value === undefined) { return true; } text = String(value).trim(); if (!text) { return true; } normalized = text.replace(/\\/g, "/").toLowerCase(); return hideValues.indexOf(normalized) !== -1; } function isElementHidden(element) { if (!element) { return false; } return element.style.display === "none"; } function hideWidget(element) { if (!element) { return; } if (element.style.display === "none") { return; } element.style.display = "none"; log("Hid widget due to empty/N/A-like value."); } function showWidgetAndRedrawIfNeeded(element) { var wasHidden; if (!element) { return; } wasHidden = isElementHidden(element); element.style.display = ""; if (!wasHidden) { log("Widget already visible."); return; } if (typeof widget.redraw !== "function") { log("Widget restored, redraw not available."); return; } suppressNextReady = true; log("Widget restored, triggering redraw."); widget.redraw(); } function applyRule() { var element; var primaryValue; element = getWidgetElement(); if (!element) { log("Widget container element not found."); return; } if (widget.queryResult === undefined) { log("queryResult is not available yet, keeping widget visible."); element.style.display = ""; return; } primaryValue = getPrimaryValue(); log("Primary value evaluated.", primaryValue); if (shouldHide(primaryValue)) { hideWidget(element); return; } showWidgetAndRedrawIfNeeded(element); } function onReady() { if (suppressNextReady) { suppressNextReady = false; log("Ready fired after redraw, applying rule without redraw."); applyRule(); return; } applyRule(); } onReady(); } run(); }); Notes The script uses display: none instead of jQuery hide or show to avoid layout and rendering issues with indicator widgets. Redraw is triggered only when restoring visibility, not when hiding. The script relies only on the widget ready event, which fires again after redraw and filter changes. Dashboard Script to Hide Widgets Based on Filter Selections As an alternative, widgets can be hidden purely based on filter selections, without checking whether the widget returns data. This approach is useful when visibility rules are deterministic based on filters. This method uses a dashboard script and CSS classes to hide widget containers. Example Dashboard Script dashboard.on('filterschanged', function (se, ev) { let filterName = 'Region' //mapping of filter items and widgets to be hidden. //if selected filter item is not available in the list, widgets in 'default' key will be hidden let itemWidgetMapping = { 'Midwest':['6390b5a285a029002e9e2ad6'], 'South': ['6238887ba77683002ea4425b'], 'West':['6390b5a285a029002e9e2ad6', '6238887ba77683002ea4425b'], 'default':[] } selectedFilter = ev.items.find(el=>el.jaql.title == filterName) let selectedItem = 'default' if(selectedFilter && selectedFilter.jaql.filter.members) selectedItem = selectedFilter.jaql.filter.members[0] //unhide all widgets first and then hide widgets based on selected filter $(`widget`).closest('.dashboard-layout-subcell-host').removeClass('dontshowme-parent') if(selectedItem in itemWidgetMapping){ for (const [key, value] of Object.entries(itemWidgetMapping)) { if(key == selectedItem){ itemWidgetMapping[key].forEach(function (item, index) { $(`widget[widgetid="${item}"]`).closest('.dashboard-layout-subcell-host').addClass('dontshowme-parent') }); } } } else{ itemWidgetMapping['default'].forEach(function (item, index) { $(`widget[widgetid="${item}"]`).closest('.dashboard-layout-subcell-host').addClass('dontshowme-parent') }); } }); Choosing the Right Approach Generally the widget script is best suited when: Visibility depends on whether data is returned The indicator value can be empty due to calculations or filters Generally the dashboard script is best suited when: Visibility depends only on filter selections Centralized control over multiple widgets is required These approaches are alternatives and should not be used simultaneously for the same widgets. Conclusion Hiding indicator widgets based on their returned value can potentially improve dashboard clarity and user experience. The widget script approach provides result aware behavior, while the dashboard script approach offers deterministic, filter based control. Both methods are powerful tools for customizing dashboard widget visibility. Two Full Row Indicator Widgets, both visible First Row Indicator Widget is now hidden, by script, due to no data Two Indicators in one row, both visible Second Indicator is now hidden by script, due to no data 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.

      Jeremy Friedel
      Jeremy FriedelPosted 1 week ago
      0
               
    • Blog banner
      • Widget & Dashboard ScriptsChevronRightIcon

      Programmatically Formatting Bar Chart Widget Value Labels in Sisense

                                                                                               

      Programmatically Formatting Bar Chart Widget Value Labels in Sisense This article outlines ways to programmatically format Sisense Bar Chart Widget Value labels via widget scripts , covering methods to prevent label overlap and apply consistent styling across all labels. Custom Styling for Data Labels The script below enables the formatting of Chart Widget Value labels by setting a custom background color, padding, and border-radius. Ensure the default data label UI option is disabled. Other CSS and Highcharts settings can be added as needed.         widget.on('render', function (se, ev) { ev.widget.queryResult.plotOptions.bar.dataLabels = { backgroundColor: '#f5d142', color: 'white', padding: 5, borderRadius: 5, enabled: true } })       Preventing Label Overlap The script below manually adjusts value label positioning to prevent overlap in densely populated bar chart widgets. The exact formulas for label positioning can be changed as needed.         widget.on('domready', function (se, ev) { var barWidth = $('.highcharts-series-group .highcharts-series rect', element).width(); $('.highcharts-data-labels .highcharts-label', element).each(function () { var labelWidth = $(this).find('rect').width(); var labelHeight = $(this).find('rect').height(); $(this).find('rect').attr('x', ($(this).find('rect').attr('x') + 2)); $(this).find('rect').attr('height', barWidth); $(this).find('rect').attr('y', ((labelHeight - barWidth) / 2)); }) })         Dynamically Increase Space for Labels If bar value labels overlap with the chart bars, you can dynamically adjust the maximum value on the y-axis to create additional space. A different formula, or a hard-coded value, can also be used as the y-axis maximum value.         widget.on('processresult', function (se, ev) { var maxValue = 0; var increasePercent = 0.2; ev.result.series.forEach(function (series) { series.data.forEach(function (dataItem) { if (dataItem.y > maxValue) maxValue = dataItem.y; }) ev.result.yAxis[0].max = maxValue + (increasePercent * maxValue); }) })       Conclusion These scripts enable customizing dynamically formatted and well-positioned data labels in your Sisense charts, enhancing readability and aesthetics beyond the default Sisense data bar data labels in bar chart widgets. For further discussion of these types of scripts, see the  Dynamically Formatted Data Labels article Example Of Custom Labels Added via Scripting   Y-Axis Maximum Set To a Very Large Value Check out this related content:  Academy Documentation

      Jeremy Friedel
      Jeremy FriedelPosted 1 year ago • Last reply 1 month ago
      1
               
    • Blog banner
      • APIsChevronRightIcon

      Connection Tool - Programmatically Remove Unused Datasource Connections, and List All Connections

                                                                                                                                                                       

      Connection Tool - A Tool to Programmatically Remove Unused Datasource Connections, and List All Connections     Managing connections within your Sisense server can become complex over time, if there are a large number of connections, and connections are often added, and replace earlier datasource connections. In some scenarios unused connections can accumulate, potentially cluttering the Connection Manager UI with no longer relevant connections. Although unused connections typically represent minimal direct security risk, it's considered best practice to maintain a clean, organized list of connections, and in some scenarios it can be desired to remove all unused connections. Sisense prevents the deletion of connections actively used in datasources, safeguarding your dashboards and datasources from disruptions. However, inactive or "orphaned" connections remain after datasources are deleted or a connection is replaced, potentially contributing to unnecessary UI complexity in the connection manager UI. Connections can be of any type Sisense supports, common types include various SQL connections, Excel files, and CSV files, as well as many data providers, such as Big Panda. This tool can also be used to list all connections, with no automatic deletion of unused connections. Introducing the Sisense Connection Prune Tool The Sisense Connection Prune Tool is a Python-based Sisense API based tool designed to programmatically identify and delete unused connections. It generates a CSV report listing all connections and their associated datasources, streamlining your connection management process. If desired, it can automatically remove all unused connections automatically from a Sisense server.   Using the Tool, sourcing the Virtual Environment, generating the Connection CSV   CSV Output of Used Connections and Associated Datasources   CSV opened visually to view as Table, Excel and other programs and text editors can open CSV files   Sisense Connection Prune Tool README Here's the full README included with the tool: # Sisense Connection Prune Tool A command-line tool to list used data connections and prune unused Sisense connections via CSV. It allows you to generate a CSV file of all connections and their dependencies, then delete those connections if needed, after removing the connections to keep from the CSV. ## Features - **Dry Run Mode**: Simulate deletions without making any changes. - **CSV-Based Flow**: Easily inspect and list connections to remove before deletion. - **Logging**: Extensive logs if needed. - **Error Handling**: Clear and descriptive messages for issues encountered during execution. ## Usage 1. **Activate the Virtual Environment** After downloading this project folder, activate the Python virtual environment bundled with it that includes all Python dependencies. - **Windows**: `venv\Scripts\activate` - **macOS/Linux**: `source venv/bin/activate` 2. **Configure the Tool** Open the `config.yaml` file and set your Sisense server URL, bearer token, CSV file path, and log file path. For example: ```yaml server_url: "https://your.sisense.server" bearer_token: "your_bearer_token_here" dry_run: true csv_file_path: "connections.csv" log_file_path: "connection_tool.log" ``` - **server_url**: The URL of your Sisense instance. - **bearer_token**: Your Sisense API token for authentication. - **dry_run**: If set to `true`, deletions will be simulated (no real deletions). - **csv_file_path**: Where the CSV file should be created and read from. - **log_file_path**: Where log file will be stored. 3. **Run the Tool** ```bash python3 ConnectionPruneTool.py ``` You will be prompted to choose an option: 1. **Generate connection CSV** - Fetches all Sisense connections. - Immediately removes (or simulates removing, if `dry_run` is `true`) any connection with no dependencies. - Writes all remaining connections and their dependencies to the CSV file. - **Important**: Inspect the CSV file and remove lines for any connections you want to **keep**. 2. **Delete connections from CSV list** - Reads the CSV file. - Removes or simulates removing each connection still listed. - Provides a summary report of which connections were deleted or bypassed. 4. **Review the Logs** Check the file specified in `log_file_path` for a record of all actions taken or simulated if needed. This is helpful for understanding what happened during each run and diagnosing any issues. ## Example Workflow 1. **Generate CSV** ```bash python3 ConnectionPruneTool.py # Choose option 1 when prompted ``` After generation, open the CSV file and **delete rows** corresponding to any connections you want to **keep**. 2. **Delete Connections** ```bash python3 ConnectionPruneTool.py # Choose option 2 when prompted ``` The tool will read the CSV and delete the remaining listed connections (or simulate deletion, if `dry_run` is enabled). ## Notes - Unused connections are removed automatically in step 1, without a CSV step - To keep a connection, remove its line from the CSV before proceeding with deletion. - If `dry_run` is set to `true`, no actual deletions will occur, only simulated logs and printed messages. - The log file will be cleared at the start of each run, so be sure to review or archive logs (or change log file name in config), if needed. ​ This is a command-line tool to list used data connections and prune unused Sisense connections, in general and via a CSV list. It allows a user with a data admin or higher bearer token to generate a CSV file of all connections and their dependencies, then delete those connections if needed, from the remaining connections in the CSV. Example Output: Deleted unused connection: Old_DB_Connection (ID: 123abc) CSV file generated at connections.csv. It contains 25 row(s) of active connections. Please review and remove lines for connections you want to keep before running deletion step by running tool again. Remaining lines will be deleted in deletion mode. Summary Report: Total lines in CSV (active used connections): 25 Deleted Unused Connections: - Old_DB_Connection No connections were bypassed.   API Endpoints Used Retrieve connections: GET /api/v2/connections Retrieve dependencies: GET /api/v2/connections/{connection_id}/getAllDependencies Delete connection: DELETE /api/v2/connections/{connection_id} Full Code connections.py - Uses Sisense API endpoints to: Fetch all connections (GET /api/v2/connections). Retrieve datasource dependencies for a specific connection (GET /api/v2/connections/{connection_id}/getAllDependencies). Delete a specific connection (DELETE /api/v2/connections/{connection_id}).     from helperFunctions import load_config, api_get, api_delete config = load_config() headers = {"Authorization": f"Bearer {config['bearer_token']}"} base_url = config["server_url"] # Retrieve all connections from Sisense def get_all_connections(): endpoint = f"{base_url}/api/v2/connections" return api_get(endpoint, headers) # Retrieve dependencies of a specific connection def get_connection_dependencies(connection_id): endpoint = f"{base_url}/api/v2/connections/{connection_id}/getAllDependencies" return api_get(endpoint, headers) # Delete a specific connection def delete_connection(connection_id): endpoint = f"{base_url}/api/v2/connections/{connection_id}" return api_delete(endpoint, headers) helperFunctions.py - Uses the Requests library to handle API requests (GET/DELETE). Catches and logs API errors. Uses PyYAML to read the config.yaml file for configuration.     import yaml import requests import logging # Load configuration from YAML file def load_config(): with open("config.yaml", "r") as file: return yaml.safe_load(file) # Configure logging settings def setup_logging(log_file): logging.basicConfig( filename=log_file, level=logging.INFO, format="%(asctime)s - %(levelname)s - %(message)s", ) # Perform a GET request with error handling def api_get(endpoint, headers): try: response = requests.get(endpoint, headers=headers, verify=False) response.raise_for_status() return response.json() except requests.RequestException as e: logging.error(f"GET request failed: {e}") print(f"Error during GET request: {e}") return None # Perform a DELETE request with error handling def api_delete(endpoint, headers): try: response = requests.delete(endpoint, headers=headers, verify=False) response.raise_for_status() return response except requests.RequestException as e: logging.error(f"DELETE request failed: {e}") print(f"Error during DELETE request: {e}") return None ConnectionPruneTool.py - Serves as the entry point for the entire tool. Implements a CLI for user interaction. Invokes connections.py and helperFunctions.py to retrieve, analyze, and optionally delete Sisense connections. Uses Pandas to build a DataFrame of connection details and writes the results to a CSV file. Reads back the CSV file to remove selected connections after manual edits. Manages logs and prints summary reports to the terminal. import pandas as pd import logging import os from connections import ( get_all_connections, get_connection_dependencies, delete_connection, ) from helperFunctions import load_config, setup_logging # Load config yaml config = load_config() setup_logging(config["log_file_path"]) # Clear log file at start open(config["log_file_path"], "w").close() dry_run = config["dry_run"] csv_path = config["csv_file_path"] def generate_connections_csv(): """ Retrieves all connections from Sisense, deletes any that have no dependencies (unless in dry_run mode), and writes the remaining used connections and their dependent data models to a CSV file. """ # Create or clear existing CSV open(csv_path, "w").close() connections = get_all_connections() if connections is None: logging.error("Failed to retrieve connections.") print("Failed to retrieve connections.") return data = [] deleted = [] bypassed = [] # Go through each connection returned from the API for conn in connections: dependencies = get_connection_dependencies(conn["oid"]) if dependencies is None: logging.warning( f"Failed to retrieve dependencies for: {conn['name']} ({conn['oid']})" ) print( f"Failed to retrieve dependencies for: {conn['name']} ({conn['oid']})" ) bypassed.append(conn["name"]) continue # If no dependencies, optionally delete the connection (not in dry-run) if not dependencies: action_msg = "[Dry Run] Would delete" if dry_run else "Deleted" log_str = ( f"{action_msg} unused connection: {conn['name']} (ID: {conn['oid']})" ) print(log_str) logging.info(log_str) if not dry_run: try: response = delete_connection(conn["oid"]) # If response is None, treat it as a failed deletion if response is None: logging.error( f"Failed to delete unused connection: {conn['name']} ({conn['oid']})." ) print( f"Error deleting unused connection: {conn['name']} ({conn['oid']})" ) bypassed.append(conn["name"]) else: deleted.append(conn["name"]) except Exception as e: logging.error( f"Exception while deleting unused connection: {conn['name']} ({conn['oid']}) - {e}" ) print( f"Error deleting unused connection: {conn['name']} ({conn['oid']})" ) bypassed.append(conn["name"]) else: # If the connection is used, add each dependency row to CSV. # Use a fallback value if 'title' or 'oid' is missing. for dep in dependencies: dep_title = dep.get( "title", "NULL TITLE Share Datasource with associated Bearer Token user to include in CSV", ) dep_oid = dep.get("oid", "NULL OID") data.append( { "Connection Name": conn["name"], "Connection ID": conn["oid"], "Elasticube/Data Model Name": dep_title, "Elasticube/Data Model ID": dep_oid, } ) # Create a DataFrame of only the used connections (with datasource dependencies) df = pd.DataFrame(data) df.to_csv(csv_path, index=False) row_count = len(df) logging.info(f"Generated CSV at {csv_path}") print( f"CSV file generated at {csv_path}. " f"It contains {row_count} row(s) of used connections.\n" "Please review and remove lines for connections you want to keep " "before running deletion step by running tool again. Remaining lines will be deleted in deletion mode." ) # Summaries for auto-deleted (unused) connections print("\nSummary Report:") print(f"Total lines in CSV (active used connections): {row_count}") if deleted: print("\nDeleted Unused Connections:") for d in deleted: print(f" - {d}") else: print("\nNo connections were deleted in this step.") if bypassed: print("\nBypassed Connections:") for b in bypassed: print(f" - {b}") else: print("\nNo connections were bypassed in this step.") def delete_connections_from_csv(): """ Reads the CSV (remaining lines after user review, removing lines for connections to keep), then deletes each connection listed. If a delete fails or returns None, the connection is logged and added to 'bypassed'. """ if not os.path.exists(csv_path): print( "CSV file does not exist. Please generate it first or fix the config path." ) return df = pd.read_csv(csv_path) deleted = [] bypassed = [] for _, row in df.iterrows(): conn_id = row["Connection ID"] conn_name = row["Connection Name"] action_msg = "[Dry Run] Would delete" if dry_run else "Deleted" log_str = f"{action_msg} connection: {conn_name} ({conn_id})" print(log_str) logging.info(log_str) if not dry_run: try: response = delete_connection(conn_id) if response is None: logging.error( f"Failed to delete connection: {conn_name} ({conn_id})" ) print(f"Error deleting connection: {conn_name} ({conn_id})") bypassed.append(conn_name) else: deleted.append(conn_name) except Exception as e: logging.error( f"Exception while deleting connection: {conn_name} ({conn_id}) - {e}" ) print(f"Error deleting connection: {conn_name} ({conn_id})") bypassed.append(conn_name) # Print summary report print("\nSummary Report:") if deleted: print("Deleted Connections:") for d in deleted: print(f" - {d}") else: print("No connections were deleted.") if bypassed: print("\nBypassed:") for b in bypassed: print(f" - {b}") else: print("No connections were bypassed.") if __name__ == "__main__": # If there is no CSV file found, select step 1 automatically if not os.path.exists(csv_path): print( "No CSV file found; defaulting to generating connections CSV. " "Correct config if CSV file name has changed." ) generate_connections_csv() else: choice = input( "Choose an option:\n" "1 - Generate connection CSV\n" "2 - Delete connections from CSV list\n" "Enter your choice (1 or 2): " ) if choice == "1": generate_connections_csv() elif choice == "2": delete_connections_from_csv() else: print("Invalid option. Please enter '1' or '2'.") Conclusion By automating the detection of inactive connections and simplifying their removal, the Sisense Connection Prune Tool reduces clutter in the Sisense server Connection Manager UI while minimizing the risk of unintentionally impacting active datasources. Whether you opt for a dry-run mode to review potential deletions in a generated CSV file, or to simply list connections, or proceed with the full removal of unused connections, this tool offers a clear, flexible, and reliable approach to keeping your connections organized. A full copy of the tool, is attached below.        

      Jeremy Friedel
      Jeremy FriedelPosted 1 year ago • Last reply 3 months ago
      4
               
    • Blog banner
      • Add-ons & Plug-InsChevronRightIcon

      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> `; = ` <!-- Your SVG icon here --> `; // 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.

      Jeremy Friedel
      Jeremy FriedelPosted 1 year ago
      0
               
    • Blog banner
      • Add-ons & Plug-InsChevronRightIcon

      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.    

      Jeremy Friedel
      Jeremy FriedelPosted 1 year ago • Last reply 1 year ago
      1
               
      • Sisense AdministrationChevronRightIcon

      How to make a dashboard as the first page of the analytics tab

                                       

      How to make a dashboard as the first page of the analytics tab Introduction:  How to add the dashboard/site as the first page of the Analytics tab with the help of the Branding. Step-by-step guide:  Create a dashboard based on the BLOX, for example Share this dashboard with the group Everyone Press 3 dots on the top right of the dashboard, select Embed code, and select the following checkboxes on the float window [ALT Text: The image shows the "Embed Dashboard" settings for a Sisense dashboard. It includes options to customize the embed settings, such as toggling the right panel, left panel, toolbar, and header. The URL code at the bottom updates based on the selected options. The unchecked options suggest that the embed link is being customized to hide specific UI elements in the embedded dashboard.] Copy the URL Code Paste it to the Admin - App configuration - White labeling - Analytics & Data Main pages  -  Analytics Home Page or  Admin - Server & Hardware - Management - Configuration - Branding - Home Page  (Be sure that toggle Enable Branding is enabled) Press the Save button to save the changes Check with a user who has Viewer permission To add the site, you should just paste the URL of the site into the Home Page field. Just remember that, based on the security, that site should allow use if with Iframe from other domains - X-Frame-Options: ALLOW-FROM origin ( https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/X-Frame-Options ) To check this, you can use the  https://example.com site Refrences Sisense Docs 

      OleksandrB
      OleksandrBPosted 1 year ago
      0
               
      • Add-ons & Plug-InsChevronRightIcon

      Exploring the Potential of Sisense Jump to Dashboard Filter Configurations

                                                                       

      Exploring the Potential of Sisense Jump to Dashboard Filter Configurations Introduction: Sisense Jump to Dashboard offers a powerful way to enhance the user experience and streamline data exploration with the help of different filter configurations. By default, all the filters from the parent dashboard, measured values, and widget filters are passed and replaced in the drill dashboard. This guide explains and provides examples of how you can customize the way filters impact the drill dashboard. We'll delve into multiple filter configuration options and provide a step-by-step guide on how to implement them effectively. The Default Behaviour & Description: The default settings of the Jump to Dashboard add-on do not require any JavaScript configuration. You can use the plugin with the default configuration right after it’s enabled. The default filter behavior configuration is the following: displayFilterPane : true This parameter determines if to display a filter pane in the target dashboard window. The default value is true which means that the filters pane shall be displayed. excludeFilterDims : [] Dimensions to exclude from the drilled dashboard filter. An empty array means that no dimensions are excluded. includeFilterDims : [] Dimensions to include in the drilled dashboard filter. An empty array means that all dimensions are included. resetDashFilterAfterJTD : false Resets the filters of a target dashboard. Combine this with mergeTargetDashboardFilters if you want your dashboard filters to be displayed in the target dashboard. mergeTargetDashboardFilters : false Determines if you want your dashboard filters to be displayed in the target dashboard (usually combined with resetDashFilterAfterJTD) Configuration Methods: A detailed explanation can be found here: https://community.sisense.com/t5/knowledge/jumptodashboard-plugin-how-to-use-and-customize/ta-p/17375 config.js method: it’s a system-wide configuration and takes effect for the entire Sisense installation. To edit the default system-wide JTD filters configuration set in the config.js navigate with the help of File Manager to plugins -> jumpToDashboard -> js -> config.js Adjust the configuration required by modifying the file and saving the changes - the changes will take effect after the plugin rebuild process which is initiated right after the config changes are saved. Once the user refreshes the dashboard and obtains the last build of the plugins, the new configuration will be in place across all the dashboards. Widget script method: It’s used to override the default system-wide config and can change the behavior of a particular widget Not all configuration parameters are supported for this method - check the “Configured In” field of the specification table located on the Technical Details tab of the JTD Marketplace Page: Jump to Dashboard - Sisense Configuration can be applied by adding the Widget JavaScript Extension to the particular widget The changes take effect right after the script is saved and the dashboard containing the widget is reloaded. Configurable Filters Behavior + Script Examples: displayFilterPane The filter panel is visible by default: If you want to hide it in the drill dashboard, just change row 4 in config.js like:   displayFilterPane : false   OR add the following script to configure it for the particular JTD widget   prism.jumpToDashboard(widget, { displayFilterPane: false});​   The result will look like this: excludeFilterDims By default, all the filters from the parent dashboard, measured values, and widget filters are passed to the drill dashboard, but you can exclude particular dimensions from being passed. In Sisense, a "dimension" is a qualitative attribute used to categorize and filter quantitative data (measures). In most cases, it will be represented as the table_name.column_name identifying the data location in the elasticube or live model. A few things to note: excludeFilterDims is an array so even when the single filter dimension is used, it should be enclosed in square brackets []. This configuration can be modified both on a system-wide level via config.js, or via the widget script When excluding the date dimension using the parameter excludeFilterDims, (Calendar) must be used or the exclusion will not work.  Example: [Table.Dimension(Calendar)] An example if you use excludeFilterDims with Dimension B: Parent Dash FIlters Drill Dash Filters Resulting Filters Dimension A - Value A1 Dimension A - Value A2 Dimension A - Value A1 Dimension B - Value B1 Dimension B - Value B2 No Dimension C - Value C1 Dimension C - Value C2 Dimension C - Value C1 Widget script Example:   prism.jumpToDashboard(widget, { excludeFilterDims: ["[divisions.Divison_name]", "[Admissions.Admission_Time (Calendar)]", "[doctors.Specialty]" ] });   includeFilterDims It’s the opposite of the excludeFilterDims described above. includeFilterDims is intended to explicitly set the filter's dimensions you want to pass to the drill dashboard. All other filter dims will be ignored . The same usage notes apply here as for the excludeFilterDims. Example if you use includeFilterDims with Dimension B: Parent Dash FIlters Drill Dash Filters Resulting Filters Dimension A - Value A1 Dimension A - Value A2 No Dimension B - Value B1 Dimension B - Value B2 Dimension B - Value B1 Dimension C - Value C1 Dimension C - Value C2 No Widget script Example:   prism.jumpToDashboard(widget, { includeFilterDims: ["[country.Country]", "[brand.Brand]" ] });   resetDashFilterAfterJTD Note: Configurable in config,js file only By default, after we open the dashboard with the help of JTD, the filters passed to this drill dashboard by JTD are saved for the user. This behavior can be changed with the help of resetDashFilterAfterJTD config. Once set to true, the filters of the drill dashboard will be preserved (in the temporary storage inside the dashboard object ​​prism.activeDashboard.filtersToRestore) and restored during the next dashboard opening. config.js example:   resetDashFilterAfterJTD: true   mergeTargetDashboardFilters By default, when the drill dashboard is opened with the help of JTD, the filters of the drill dashboard are replaced with the filters from the parent dashboard. If you’d like to compliment the dashboard filters with the original ones from the drill dashboard, you can enable this parameter. Usage Example: Parent Dash FIlters Drill Dash Filters mergeTargetDashboardFilters: false mergeTargetDashboardFilters: true No Dimension A - Value A2 No Dimension A - Value A2 Dimension B - Value B1 Dimension B - Value B2 Dimension B - Value B1 Dimension B - Value B1 No Dimension C - Value C2 No Dimension C - Value C2 Widget Script Example:   prism.jumpToDashboard(widget, { mergeTargetDashboardFilters: true });   Locating the correct dimension for the config: There is a simple way of finding out the correct filter dims for the configuration scripts. When the source dashboard is open, open the Browser Development Console. Here are the common shortcuts to open the browser developer console: Chrome: Ctrl + Shift + J (Windows/Linux) or Cmd + Option + J (Mac) Firefox: Ctrl + Shift + K (Windows/Linux) or Cmd + Option + K (Mac) Edge: Ctrl + Shift + I (Windows/Linux) or Cmd + Option + I (Mac) Safari: Cmd + Option + C (Mac) (Enable "Show Develop menu in menu bar" in Preferences first) Opera: Ctrl + Shift + I (Windows/Linux) or Cmd + Option + I (Mac) In the console type in the following to list the active dashboard filters’ dimensions:   prism.activeDashboard.filters.$$items.forEach((item)=>console.log(JSON.stringify(item.jaql.dim)));   The list of active dashboard filter dimensions should be returned like below, so you can use them in your configurations: Hope the above helps you understand the Jump to Dashboard filter settings better and I wish you good luck with setting up your JTD customizations!

      Taras Skvarko
      Taras SkvarkoPosted 2 years ago • Last reply 1 year ago
      2
               
    • Blog banner
      • Add-ons & Plug-InsChevronRightIcon

      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!

      Jeremy Friedel
      Jeremy FriedelPosted 1 year ago
      0
               
      • TroubleshootingChevronRightIcon

      Resolving resize widget Issue when the Tabber Widget is in use

                               

      Resolving the resize widget Issue when the Tabber Widget is in use Introduction When using the Tabber widget, you may encounter issues where other widgets cannot be resized. This guide provides a step-by-step solution to resolve the problem by temporarily removing and recreating the Tabber widget while ensuring all widgets remain functional. Step-by-Step Guide Identify the Problem: Confirm that the issue is with the Tabber widget not allowing the resizing of other widgets on the dashboard. Delete the Tabber Widget: Before deleting the Tabber widget, copy any scripts associated with it. Remove the Tabber widget from the dashboard. Resize the Widgets: Resize the other widgets on the dashboard as needed. Ensure that the widgets are properly sized before re-adding the Tabber widget. Recreate the Tabber Widget: Add the Tabber widget back to the dashboard. Paste the previously copied script into the new Tabber widget. Verify the Solution: Check if the resizing issue is resolved in the duplicated dashboard. Ensure that the Tabber widget and other widgets are functioning correctly. Troubleshooting Tips Edit Mode Issues: If you cannot change the size of widgets in edit mode, try adding another widget next to the one you want to resize. This can sometimes resolve resizing issues. Conclusion By following the steps, you can restore full resizing functionality. If issues persist, try adding another widget nearby as a workaround. This ensures a smooth and flexible dashboard layout.

      Sisense User
      Sisense UserPosted 1 year ago • Last reply 1 year ago
      2
               
      • Add-ons & Plug-InsChevronRightIcon

      How to change the color of the JumpToDashboard icon in Sisense on Linux

                                                       

      How to change the color of the JumpToDashboard icon in Sisense on Linux This article provides a step-by-step guide on how to change the color of the JumpToDashboard (JTD) icon in the widget header toolbar within Sisense. This customization can enhance the visual integration of the dashboard with your organization's branding. Step-by-Step Guide Log in to Sisense as an administrator. Navigate to Admin > File Management . Locate the JTD Plugin under plugins > jumpToDashboard > styles . Modify the CSS File by opening style.css in a text editor. Add the following lines to change the icon color and position under the .jtd-title-img object:  background-color: #047e90; Save the changes. Navigate to Admin > Server & Hardware > Add-ons , disable the jumpToDashboard add-on and wait for the system to rebuild. Re-enable the jumpToDashboard add-on and wait for the system to rebuild again. Refresh your dashboard to ensure the changes have taken effect. The JTD icon should now display in the specified color and position. Conclusion By following these steps, you can successfully customize the color of the JumpToDashboard icon in Sisense. This allows for better alignment with your organization's design preferences and enhances the overall user interface. 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.

      Liliia Kislitsyna
      Liliia KislitsynaPosted 1 year ago
      0