Blox | Sisense Community

How to fix the position of carousel navigation buttons in BloX [Linux]

Introduction This article explains how to fix the position of the forward/backward navigation buttons in a BloX carousel widget in Sisense. By default, the carousel navigation buttons may shift or reposition depending on the size of the text block, image or content being displayed. This, for example, can create the need to scroll to go forward or backward in the carousel, especially when content has big dimensions. You can also have the need to put the buttons in a custom fixed position depending on your use case. The solution is to apply a custom CSS override directly within the BloX widget's style field, using absolute positioning to anchor the buttons to a fixed location within the widget container The solution is tested on Sisense L2026.1.2 and works for both cloud and on-premises deployments. Step-by-Step Guide 1. Open your BloX widget editor On your dashboard, click the three-dot menu on the BloX image gallery widget → Edit BloX . 2. Locate the style field in the BloX JSON In the BloX editor, find the style property within your widget's JSON definition. This is where custom CSS rules are applied to the widget's components. 3. Identify the carousel button class The BloX carousel navigation buttons use the class .carousel-button. You will target this class in your CSS override to control the button positioning. 4. Add the CSS override In the style field of your BloX widget, add the following CSS: .carousel-button { position: absolute !important; top: 100px !important; transform: none !important; } In the end, it should look similar to this: { "style": ".carousel-button { position: absolute !important; top: 100px !important; transform: none !important; }", "script": "", "title": "", "showCarousel": true, "body": [ { "type": "Container", "items": [ { "type": "TextBlock", "text": "️{panel: Brand}", "style": { "text-align": "center", "font-weight": "bold", "font-size": "24px", "margin": "100px" } }, { "type": "TextBlock", "text": "️{panel: Country}", "style": { "text-align": "center", "font-weight": "bold", "font-size": "24px", "margin": "100px" } }, { "type": "TextBlock", "text": "️{panel: Category}", "style": { "text-align": "center", "font-weight": "bold", "font-size": "24px", "margin": "100px" } }, { "type": "TextBlock", "text": "️${panel: Total Cost}", "style": { "text-align": "center", "font-weight": "bold", "font-size": "24px", "margin": "100px" } }, { "type": "TextBlock", "text": "️${panel: Total Revenue}", "style": { "text-align": "center", "font-weight": "bold", "font-size": "24px", "margin": "100px" } } ] } ], "actions": [] } Without style (need to scroll to see the arrow buttons): With style (arrow buttons are in a fixed position at the top, no need to scroll): This does three things: position: absolute !important – removes the button from the normal document flow and positions it relative to its containing element, so it no longer shifts with image content. top: 100px !important – anchors the button 100 pixels from the top of the widget container. Adjust this value to suit your widget's layout. transform: none !important – overrides any default vertical centering transform that Sisense applies to the buttons, which would otherwise conflict with the absolute positioning. 5. Adjust the top value to your needs The 100px value in top: 100px !important is a starting point. Depending on the height of your widget and the visual position you want the buttons to appear at, you can increase or decrease this value. For example: 6. Save and test Click Apply and reload the dashboard. The navigation buttons should now remain fixed at the defined position regardless of which image is displayed in the carousel. Important notes !important is required: Sisense applies default inline styles to the carousel buttons. Without !important, your CSS rules may be overridden and have no visible effect. Class name stability: The .carousel-button class is part of the BloX framework. While it is more stable than widget-level DOM classes, it is still part of a custom implementation. We recommend testing after any Sisense version upgrade. Absolute positioning context: The position: absolute rule positions the button relative to the nearest positioned ancestor. If your BloX layout uses nested containers, you may need to also set position: relative on the parent container to ensure the button anchors correctly. Conclusion By adding a targeted CSS override to the BloX widget's style field, you can anchor the carousel navigation buttons to a fixed pixel position within the widget, eliminating the shifting behaviour that occurs when images of different sizes are displayed. The top value can be freely adjusted to match your dashboard's visual design, and the same pattern can be extended to control other aspects of the carousel layout such as button size, colour, or opacity. References / Related content Sisense BloX Widget Documentation 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.

Blox

Customized Welcome Banner Using the Logged-In User's Name with BloX [Linux]

Introduction This article demonstrates how to build a customized welcome banner that greets the currently logged-in user by their first name using a BloX widget in Sisense. The solution is tested on Sisense L2026.1.2 and works for both cloud and on-premises deployments. Step-by-Step Guide 1. Prepare your environment Open an existing dashboard or create a new one. No data panel configuration is required for this widget – the banner does not consume any measures or dimensions from your data model. 2. Add a BloX widget Click + Add Widget on your dashboard and select BloX from the widget type list. Open the BloX editor. 3. Leave the data panel empty Because this widget reads the user's name from the Sisense session rather than from a data panel, you do not need to add any panels. You can leave the BloX data panel completely empty. 4. Paste the full BloX JSON Replace the contents of the BloX editor with the following JSON: { "script": "setTimeout(function() { var name = prism.user.firstName || 'Team'; $('.welcome-text').text('Welcome back, ' + name + '!'); }, 500);", "showCarousel": false, "body": [ { "type": "Container", "style": { "background-color": "#ffffff", "padding": "25px", "border-left": "8px solid #3498db" }, "items": [ { "type": "TextBlock", "class": "welcome-text", "text": "Welcome back!", "size": "extraLarge", "weight": "bolder", "color": "dark" }, { "type": "TextBlock", "text": "Here is the latest executive data for your active portfolio.", "size": "medium", "isSubtle": true, "style": { "margin-top": "5px" } } ] } ], "actions": [] } 5. Adapt the banner to your dashboard There are three areas you will typically want to customize: Subtitle text – Update the second TextBlock's "text" value (currently "Here is the latest executive data for your active portfolio.") to describe your specific dashboard's content or purpose. Accent colour – The left border color is set to #3498db (blue) via the "border-left" style property. Replace this hex value with any color that matches your organization's branding or dashboard theme. Fallback name – The script uses 'Team' as a fallback if the user's first name is not available (e.g. for service accounts or API users). You can change 'Team' to any preferred fallback string, such as 'there' to produce "Welcome back, there!". 6. Customize the greeting text The greeting is constructed in the script as 'Welcome back, ' + name + '!'. You can change the prefix or suffix to suit your tone, for example: 'Good morning, ' + name + '!' 'Hello, ' + name + '. Here\'s your dashboard.' 'Hi ' + name + ', welcome to your workspace!' Simply update the string in the script field accordingly. 7. Save and test Click Save in the BloX editor. The banner will render with the placeholder text "Welcome back!" for a brief moment (while the DOM loads), then immediately update to display the logged-in user's first name. To verify personalization, open the dashboard as different users and confirm that each sees their own name. Important notes prism.user availability: The prism object is only available when a user is actively logged into Sisense in the browser. It is not available in embedded scenarios where Sisense is loaded without a full user session (e.g. SSO token-based embedding without the full Sisense shell). In those cases, you may need to retrieve the user's name from your embedding application's context instead. First name only: prism.user.firstName returns only the first name. If you prefer to display the full name, you can use (prism.user.firstName + ' ' + prism.user.lastName) in the script. No data panel required: Unlike most BloX widgets, this one does not need any panels configured. Adding unnecessary panels will not break the widget, but it will trigger redundant data queries on every dashboard load. Placeholder flash: The placeholder text "Welcome back!" defined in the JSON body is briefly visible before the script runs. This is expected behaviour and is typically imperceptible to users. If you want to minimize it, you can set the initial "text" value to an empty string "" instead. Conclusion By reading from the prism.user session object, this BloX widget delivers a zero-configuration personalization layer that requires no data model changes, no additional panels, and no backend modifications. The pattern is lightweight and reusable – the same prism.user.firstName approach can be applied in any other BloX widget or dashboard script wherever user-aware content is needed, such as personalized filter defaults, user-specific instructions, or role-based messaging. References / Related content BloX Overview – Sisense Documentation 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.

Blox

Animated Target vs Actual Progress Bar with BloX [Linux]

Introduction This article demonstrates how to build an animated progress bar that visualises actual performance against a target using a BloX widget in Sisense. Sisense's native indicator widgets offer basic target comparisons, but they provide limited control over layout, colour logic, and animation. This BloX solution displays the actual value, the target value, and a dynamically filled progress bar – all within a single compact widget. The bar animates on load, fills proportionally based on the actual-to-target ratio, and changes colour automatically depending on performance: Green when the target has been met or exceeded (≥ 100%). Blue for normal progress (between 30% and 100%). Red when attainment is critically low (≤ 30%). This makes it ideal for quota attainment tracking, budget consumption, project completion, or any use case where progress toward a goal needs to be communicated at a glance. The solution is tested on Sisense L2026.1.2 and works for both cloud and on-premises deployments. Step-by-Step Guide 1. Prepare your environment Open an existing dashboard or create a new one. You will need two measures available in your data model: An actual measure (e.g. Total Actual, Total Revenue, Units Sold). A target measure (e.g. Total Target, Quota, Budget). Both measures will be added as separate panels in the BloX widget. 2. Add a BloX widget Click + Add Widget on your dashboard and select BloX from the widget type list. Open the BloX editor. 3. Set up your data panel In the BloX data panel, add two panels: Panel 1: Your actual measure – name it Total Actual. Panel 2: Your target measure – name it Total Target. These names are referenced in the BloX body using the {panel: <Panel Name>} syntax and must match exactly. 4. Paste the full BloX JSON Replace the contents of the BloX editor with the following JSON: { "script": "setTimeout(function() { $('.blox-goal-container').each(function() { var $this = $(this); var actualText = $this.find('.actual-val').text().replace(/[^0-9.-]+/g, ''); var targetText = $this.find('.target-val').text().replace(/[^0-9.-]+/g, ''); var actual = parseFloat(actualText) || 0; var target = parseFloat(targetText) || 1; var pct = (actual / target) * 100; if (pct < 0) pct = 0; if (pct > 100) pct = 100; var barColor = '#3498db'; if (pct >= 100) barColor = '#2ecc71'; else if (pct <= 30) barColor = '#e74c3c'; var $fill = $this.find('.blox-progress-fill'); $fill.css('background-color', barColor); $fill.animate({ width: pct + '%' }, 1500); }); }, 500);", "showCarousel": false, "body": [ { "type": "Container", "class": "blox-goal-container", "style": { "background-color": "#ffffff", "padding": "25px" }, "items": [ { "type": "TextBlock", "text": "Department: {panel: Department}", "size": "small", "weight": "bolder", "color": "dark", "isSubtle": true }, { "type": "ColumnSet", "style": { "margin-top": "15px", "margin-bottom": "15px" }, "columns": [ { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "class": "actual-val", "text": "{panel:Total Actual} ", "size": "extraLarge", "weight": "bolder", "color": "dark" } ] }, { "type": "Column", "width": "auto", "items": [ { "type": "TextBlock", "text": "Target: ", "size": "medium", "isSubtle": true, "horizontalAlignment": "right", "style": { "margin-top": "10px" } } ] }, { "type": "Column", "width": "auto", "items": [ { "type": "TextBlock", "class": "target-val", "text": "{panel:Total Target} ", "size": "medium", "weight": "bolder", "horizontalAlignment": "right", "style": { "margin-top": "10px" } } ] } ] }, { "type": "Container", "class": "blox-progress-track", "style": { "background-color": "#ecf0f1", "border-radius": "10px", "height": "16px", "width": "100%", "overflow": "hidden" }, "items": [ { "type": "Container", "class": "blox-progress-fill", "style": { "background-color": "#3498db", "height": "16px", "width": "0%", "border-radius": "10px" }, "items": [] } ] } ] } ], "actions": [] } 5. Adapt the JSON to your data There are three areas you will typically need to customise: Panel references – Replace {panel:Total Actual} and {panel:Total Target} with the exact panel names as they appear in your BloX data panel. The names must match exactly, including spacing. Card label – Update the "text" value in the first TextBlock (currently {panel:Department}) to reflect your metric/panel name. Colour thresholds – The script uses three colour zones by default. To adjust the thresholds, locate the following lines in the script field and change the numeric values: if (pct >= 100) → bar turns green. Change 100 to a different target attainment threshold if needed. else if (pct <= 30) → bar turns red. Change 30 to raise or lower the danger zone. 6. Adjust the animation speed The bar animates over 1500 milliseconds (1.5 seconds) by default. To change this, find 1500 in the script field and replace it with your preferred duration in milliseconds. For example, use 800 for a snappier animation or 3000 for a slower, more dramatic fill. 7. Save and test Click Save in the BloX editor. The widget will render with the actual and target values displayed, and the progress bar will animate from 0% to the calculated attainment percentage. Applying dashboard filters will recalculate and re-animate the bar in real time. Important notes Formatted values: The regex replace(/[^0-9.-]+/g, '') strips currency symbols, thousand separators, and percentage signs before parsing. This means the script works correctly with values formatted as $1,234,567 or 1.5M – as long as the underlying number is present in the rendered text. Very large abbreviated values (e.g. 1.2B) may not parse correctly; in those cases, consider formatting the panel value as a plain number. Zero target guard: The script defaults the target to 1 if the parsed target value is 0 or missing (var target = parseFloat(targetText) || 1). This prevents a division-by-zero error. If a zero target is a valid scenario in your data, add explicit handling for that case. Multiple bar groups on one widget: Each blox-goal-container is processed independently, so multiple bar groups can coexist in the same widget without interfering with each other. Export behaviour: Because the progress bar is rendered via DOM manipulation and animation, PDF and image exports will capture the bar at whatever fill state it is in at the moment of export – typically fully filled, since the animation completes quickly. Conclusion By combining BloX's flexible JSON layout with a lightweight jQuery animation, this solution delivers a polished, data-driven progress bar that responds dynamically to dashboard filters and automatically signals performance status through colour. The pattern is straightforward to extend: additional metrics can be stacked as new cards, thresholds can be tuned to match business rules, and the label and colour scheme can be adapted to any use case – from sales quota tracking to project milestone completion. References / Related content BloX Overview – Sisense Documentation 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.

Blox

Auto-Rotating KPI Carousel with BloX [Linux]

Introduction This article demonstrates how to build an auto-rotating KPI carousel using a BloX widget in Sisense. The solution is tested on Sisense L2026.1.2 and works for both cloud and on-premises deployments. This BloX can stack multiple metric cards into a single widget footprint and automatically cycle through them every 6 seconds using a smooth fade transition. Each card is independently styled with a coloured left border, making it easy to visually distinguish metrics at a glance. The carousel is driven entirely by the BloX script field, with no external plugins or additional dashboard scripts required. Step-by-Step Guide 1. Prepare your environment Open an existing dashboard or create a new one. You will need at least two measures available in your data panel to populate the metric cards – for example, Total Revenue, Total Cost, and Total Quantity. The carousel can display any number of metrics; the example below uses three. 2. Add a BloX widget Click + Add Widget on your dashboard and select BloX from the widget type list (advanced configuration). Open the BloX editor. 3. Set up your data panel In the BloX data panel, add the measures you want to display as separate panels. In the example below, three panels are used: Total Revenue Total Cost Total Quantity These are referenced in the BloX body using the {panel: <Panel Name>} syntax. 4. Paste the full BloX JSON Replace the contents of the BloX editor with the following JSON: { "style": "", "script": "if(window.metricTimer) clearInterval(window.metricTimer); setTimeout(function() { var slides = $('.blox-metric-slide'); if(slides.length === 0) return; slides.parent().css({ 'position': 'relative', 'min-height': '140px' }); slides.css({ 'position': 'absolute', 'top': 0, 'left': 0, 'width': '100%', 'height': '100%', 'box-sizing': 'border-box', 'opacity': 0 }); slides.eq(0).css('opacity', 1); var curr = 0; window.metricTimer = setInterval(function() { slides.eq(curr).animate({opacity: 0}, 800); curr = (curr + 1) % slides.length; slides.eq(curr).animate({opacity: 1}, 800); }, 6000); }, 500);", "title": "", "showCarousel": false, "body": [ { "type": "Container", "class": "master-metric-wrapper", "style": { "background-color": "#ffffff", "border-radius": "12px", "box-shadow": "0px 8px 24px rgba(0, 0, 0, 0.08)", "margin": "15px", "padding": "0" }, "items": [ { "type": "Container", "class": "blox-metric-slide", "style": { "padding": "30px", "border-left": "8px solid #2ecc71", "border-radius": "12px" }, "items": [ { "type": "TextBlock", "text": "TOTAL REVENUE", "size": "small", "weight": "bolder", "color": "dark", "isSubtle": true, "style": { "letter-spacing": "1.5px", "text-transform": "uppercase" } }, { "type": "TextBlock", "text": "{panel:Total Revenue}", "size": "extraLarge", "weight": "bolder", "style": { "font-size": "38px", "margin-top": "8px", "color": "#2c3e50" } } ] }, { "type": "Container", "class": "blox-metric-slide", "style": { "padding": "30px", "border-left": "8px solid #3498db", "border-radius": "12px" }, "items": [ { "type": "TextBlock", "text": "TOTAL COST", "size": "small", "weight": "bolder", "color": "dark", "isSubtle": true, "style": { "letter-spacing": "1.5px", "text-transform": "uppercase" } }, { "type": "TextBlock", "text": "{panel: Total Cost}", "size": "extraLarge", "weight": "bolder", "style": { "font-size": "38px", "margin-top": "8px", "color": "#2c3e50" } } ] }, { "type": "Container", "class": "blox-metric-slide", "style": { "padding": "30px", "border-left": "8px solid #e74c3c", "border-radius": "12px" }, "items": [ { "type": "TextBlock", "text": "TOTAL QUANTITY", "size": "small", "weight": "bolder", "color": "dark", "isSubtle": true, "style": { "letter-spacing": "1.5px", "text-transform": "uppercase" } }, { "type": "TextBlock", "text": "{panel: Total Quantity}", "size": "extraLarge", "weight": "bolder", "style": { "font-size": "38px", "margin-top": "8px", "color": "#2c3e50" } } ] } ] } ], "actions": [] } 5. Adapt the JSON to your data There are three areas you will typically need to customise: Panel references – Replace {panel:Total Revenue}, {panel: Total Cost}, and {panel: Total Quantity} with the exact panel names as they appear in your BloX data panel. The name must match exactly, including spacing. Card labels – Update the "text" value in the first TextBlock of each container (e.g. "TOTAL REVENUE") to match your metric names. Border colours – Each card has a "border-left" style property with a hex colour. The example uses green (#2ecc71), blue (#3498db), and red (#e74c3c). Replace these with any colours that suit your dashboard theme. 6. Add or remove metric cards To add a new metric card , copy any existing container block (from { "type": "Container" ...} to its closing }) and paste it as a new item in the body array. Make sure to: Set "display": "none" in its style object (only the first card should omit this, as it is the one shown on initial load). Update the label text and panel reference. Assign a new border colour. To remove a card , simply delete its container block from the body array. 7. Adjust the rotation speed The carousel rotates every 6000 milliseconds (6 seconds) by default. To change this, find the number 6000 in the script field and replace it with your preferred interval in milliseconds. For example, use 3000 for 3 seconds or 10000 for 10 seconds. The fade transition duration is set to 500 milliseconds . This appears twice in the script as fadeOut(500, ...) and fadeIn(500). You can reduce or increase this value to make the transition faster or slower. 8. Save and test Click Save in the BloX editor. The widget will display the first metric card immediately, then begin cycling through the remaining cards automatically. Applying dashboard filters will update the displayed values in real time – the carousel continues rotating with the filtered data. Important notes Timer persistence: The window.metricTimer variable is stored on the global window object so it persists across widget re-renders and can be cleared reliably. If you have multiple BloX carousel widgets on the same dashboard, give each timer a unique variable name (e.g. window.metricTimer1, window.metricTimer2) to prevent them from interfering with each other. Initial card visibility: Only the first container in the body array should be visible on load. All subsequent containers must include "display": "none" in their style object. If this is missing, multiple cards will stack on top of each other before the script runs. Export behaviour: Because the carousel animation is script-driven, PDF and image exports will capture only whichever card is currently visible at the moment of export. Conclusion By combining BloX's flexible JSON layout with a lightweight JavaScript timer, this solution turns a single widget into a space-efficient rotating KPI display – ideal for executive dashboards, TV/kiosk screens, or any scenario where screen real estate is limited. The pattern is fully modular: cards can be added, removed, or restyled independently, and the rotation speed can be tuned to match the pace of your audience. The same approach can be extended to rotate more complex card layouts, such as cards containing multiple metrics, sparkline images, or conditional colour indicators. References / Related content BloX Overview – Sisense Documentation 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.

Blox

BloX: Chart type switcher [Linux-Windows]

Step-by-Step Guide Supported chart types: Bar, Column, Line, Area. Limitations While column, bar, line, and area charts are generally compatible with each other and no fields will be lost when switching, some design options are not preserved: Stacking applies only to bar, column, and area charts. When switching between these chart types, the stacking option is retained. However, if you switch to a line chart and then back, the previous stacking selection won’t be remembered. You can define the same stack type across the board when switching from a line chart by using the stackTypeAfterLineChart variable, but it won’t automatically restore previous selections for individual widgets. Line types, line width, and markers apply only to line and area charts. If you switch from a bar or column chart to a line or area chart and then back, the previous settings won’t be retained. Instructions Create a new BloX widget in your dashboard, then import the BloX template (ChartTypeSwitch-BloXTemplate.json) attached below. Alternatively, you can download and import the attached dashboard example (BloX-ChartTypeSwitcher.dash.txt — remove the .txt extension before importing), which already includes the BloX chart switcher widget and a couple of demo widgets. Download and open the BloX action ChartTypeSwitcher.js file, then copy the content. Create a new BloX custom action, then paste the code from the ChartTypeSwitcher.js file. Name the action ChartTypeSwitcher . Go back to the BloX Editor tab and make the necessary and optional changes. Each button in this BloX widget is represented by a block of code under the actions property, as shown below. { "type": "ChartTypeSwitcher", "title": "Column", "style": { "backgroundColor": "#2D4671" }, "data": { "widgetToModify": [ "68be419f56bf797473134f9e", "68d2d32e3ec41d31d95e3fa5" ], "stackTypeAfterLineChart": "stack", "selectVal": "column" } } Customizable Properties Below are the properties you can update as needed. Do not change the values of other properties. title (optional): The text displayed on the button. backgroundColor (optional): The color of the button. widgetToModify (mandatory): A comma-separated list of widget IDs that will be changed to the chart type selected by the button. You can restrict widgets to switch to only a subset of the supported chart types by configuring different widget ID lists for each button. Example: You might want widget1 to switch between all four chart types, but widget2 only between Bar and Column. In that case, include widget2’s ID in the widgetToModify list for the Bar and Column buttons, and leave it out of the Line and Area buttons’ lists. stackTypeAfterLineChart (mandatory): The stacking type ("stack", "stack100", or "none") to apply when switching from a line chart to a bar, column, or area chart. The stacking option is retained when switching between bar, column, and area charts, but since line charts don’t have stacking, this property determines which stack type to apply when switching from a line chart. Save the widget, then check that each button is working correctly. Conclusion The BloX chart type switcher offers a flexible way to control visualization formats directly from your dashboard, giving users a seamless way to explore data across different chart types without creating separate widgets. References / Related Content Creating BloX Custom Actions 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.

Blox

How to open a dashboard with BloX without opening a new page [Linux]

Step-by-step Guide 1. Please create a new dashboard and add a BloX widget to it. 2. In the widget settings, select Actions, then choose Create Action. Add a custom action with your preferred name (preferably camel-cased) and the title “Go to Dashboard.” Set the type to “CustomRedirect” and use the following code. var target = payload.params.targetUrl; window.location.href = target; 3. Update the code in your BloX widget with the version provided below. Be sure to customize the targetUrl value to match the dashboard URL you wish to use for redirection. { "type": "Container", "actions": [ { "type": "CustomRedirect", "title": "Go to Dashboard", "params": { "targetUrl": "http://your-sisense-url/app/main/dashboards/your-dashboard-id?h=false" // after ? you put any parameters you want or need } } ] } 4. Confirm the BloX creation, then you should have a result similar to this: 5. When you click the "Go to Dashboard" button, you'll be taken directly to your preferred dashboard in the same browser window, differently from the behavior we have using Action.OpenUrl. This approach can be used for both Native and Embedded Sisense experiences, allowing you to set up customized navigation and redirect flows. Please note: unlike the standard Sisense left panel navigation, which keeps your page view unchanged, this method refreshes the window to present the most up-to-date data. If you prefer an in-page navigation similar to the left panel for any custom development with embedding, we recommend using EmbedSDK. The dashboard.open function allows you to load a new dashboard within the same frame without refreshing the entire page. References/Related Content The BloX reference guide can be accessed here: https://docs.sisense.com/main/SisenseLinux/sisense-blox-reference.htm And specific documentation about custom actions creation here: https://docs.sisense.com/main/SisenseLinux/creating-custom-actions.htm Conclusion By following these steps, you can create custom navigation between dashboards or pages within your Native or Embedded Sisense application using BloX widgets, all while staying in the same window. 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.

Blox

BloX Template: Indicators With Sparkline

Introduction In many use cases, the most current state of your KPI is as important as the trend of that KPI over time (for example, the trend of stock price, impressions or reach of your social media campaigns, etc), so you want to show both an indicator and a sparkline chart next to it. Creating multiple indicator and line chart widgets is not the most efficient way to implement this requirement considering the performance (multiple widgets and queries) and the complexity of the UI design (fonts size, layout etc). The Indicators with Sparklines template allows you to implement this requirement easily using BloX. This template is structured in 3 columns, one for the sparkline (shows history of the value), one for the indicator (shows the current value), and one for the name of the KPI. Installation Instructions 1. Download the template . Change the extension from txt to json 2. Import the template and choose the downloaded file. 3. Refresh your browser. 4. Create a new Blox Widget and open the Templates menu under the design panel. You should now be able to see and choose the new template. If you cannot see the template in the All Templates menu, please restart the Sisense.Blox service on your Sisense server. 5. Populate the Items and Values panels with relevant fields and aggregations. Please note that any change in panel item names should be reflected in the card editor. In Items , add the date column. In Values , add two columns for each KPI: one column for the unfiltered KPI to show the trendline, e.g. SUM(Impressions) , and another column for the current value of the KPI using measured value, e.g. ( SUM(Impressions), Date) where Date is set to Today. Technical Notes CAROUSEL & CAROUSEL BUTTON The "showCarousel" parameter should always be set to True, otherwise, the entire block will be repeated vertically for all the different dates in the data (all the numbers will be exactly the same). To remove the carousel button, please use this widget script below. widget.on('ready', function(sender, ev){ //remove carousel button $('.carousel-button', element).remove(); }); COLORS To modify the color of the sparkline, search for this piece of code in the Editor. You can then modify the line-color, fill-color, and point-color. You can also modify other parameters such as the width of the graph. {spark:Organic} To change the color of the fonts, search for this piece of code in the Editor. You can then modify the color paramater. "style": { "color": "#395795" } PDF EXPORT This template works with PDF Export. To hide the carousel arrow buttons: place below the "showCarousel": true, "carouselAnimation": { "showButtons": false },

Blox

Blox action initiating the elasticube build for Sisense on Linux

Step-by-Step Guide: Prerequisites: Blox is enabled in your Sisense instance You have access to edit dashboards and create actions You know the UUID ( datamodelId ) of the model you want to build 1. Add a Blox widget to your dashboard To define and register a custom action, you must first create a Blox widget in a dashboard. Open your dashboard Click + Add Widget → Blox In the widget editor, add the following minimal configuration: { "style": "", "script": "", "title": "", "showCarousel": true, "body": [], "actions": [] } Click Apply to save the widget. 2. Create the custom action from the widget editor Now that the Blox widget is added, follow these steps to define the custom action: Click the pencil/edit icon on the Blox widget Go to the Actions tab Click the three-dot menu (⋮) in the top-right corner of the Actions tab Select “ Create Action ” This opens the action editor. 3. Define the buildCube action Step 1: Set the action name and paste the code Action name: buildCube Language: JavaScript Paste the following code: // JavaScript (Blox Action) const datamodelId = payload.data.datamodelId; const buildType = payload.data.buildType || "full"; const schemaOrigin = payload.data.schemaOrigin || "latest"; const rowLimit = payload.data.rowLimit != null ? payload.data.rowLimit : 0; const $internalHttp = prism.$injector.has("base.factories.internalHttp") ? prism.$injector.get("base.factories.internalHttp") : null; const ajaxConfig = { url: "/api/v2/builds", method: "POST", contentType: "application/json", accept: "*/*", headers: { "internal": "true" }, data: JSON.stringify({ datamodelId: datamodelId, buildType: buildType, schemaOrigin: schemaOrigin, rowLimit: rowLimit }), async: false }; const httpPromise = $internalHttp ? $internalHttp(ajaxConfig, true) : $.ajax(ajaxConfig); if (httpPromise && httpPromise.then) { httpPromise .then(response => { console.log("Build task created successfully:", response); }) .catch(error => { console.error("Failed to create build task:", error); }); } else { console.error("HTTP request failed to initiate."); } Step 2: Define the action template In the Template tab of the same modal, paste the following JSON: { "type": "buildCube", "title": "title", "data": { "datamodelId": "datamodelId", "buildType": "buildType", "schemaOrigin": "schemaOrigin", "rowLimit": "0" } } Click Save to register the action. 4. Use the action from a Blox widget After defining the action, you can call it from a widget using this configuration: { "style": "", "script": "", "title": "", "showCarousel": true, "body": [], "actions": [ { "type": "buildCube", "title": "Build", "data": { "datamodelId": "8800cc3d-b12f-4fe9-962a-c0c2ff8f7e85" } } ] } This will display a “ Build ” button. When clicked, it triggers the buildCube action for the given model. You can extend the data block with: "buildType" — full, schema_changes, by_table, publish "schemaOrigin" — latest or running (for extract models) "rowLimit" — a row limit integer (default: 0) Conclusion: To trigger Elasticube builds in Sisense on Linux, you can define a reusable Blox action ( buildCube ) and call it from dashboards. This method simplifies model maintenance and enables users to initiate builds on demand, without needing direct access to the Data page or backend. References/Related Content Sisense REST API endpoint documentation Sisense BloX Custom Actions Guide 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 require additional assistance with this, please don't hesitate to let us know.

Blox

Input Parameters using BloX for What-If Analysis

Input Parameters using BloX for What-If Analysis This is an alternative to the paid or community Input Parameter plugins. This new BloX Input Parameter custom action: supports multiple levers (input parameters) with just one Apply button supports all widget types remembers previous selections even after refreshing/closing the dashboard loops through all widgets so dashboard designers do not have to specify widget IDs in the BloX code. Note : Be mindful of performance when considering this option as this will execute the BloX action on all widgets including those that the input parameters may not necessarily be relevant to. Input Parameter Implementation Instructions: Import the example dashboard attached below. Before importing the file, change the file extension from .txt to .dash. Make sure that you still have the Sample ECommerce Elasticube for this dashboard to properly display the data. Open the BloX Lever Configuration widget, then add the custom action given below to your Sisense environment. Go to the Actions tab, click the three-dot menu, then click Create Action. Copy the custom action code from below and paste it into your BloX custom action editor. Give this name for the action: ParameterSwap_V2_AllWidgets. Y ou can also use a different name, but make sure the name of the action matches with the name referenced in the BloX code. Click Next, then Create. Click the Apply button to close the widget. Enter values to the levers and click Apply. The number on the widgets is now recalculated based on your input. There are three input parameters in this example. To add another input parameter: In the BloX code of the Lever Configuration widget, modify the number of input parameters in the BloX code under the paramsToModify parameter. For example, if you need 4 input parameters (levers), update the value to 4. On the left panel, add the additional swap_levers to the Values panel, i.e. swap_lever4, swap_lever5, etc. You can assign any arbitrary hard-coded number to these swap levers. To add the input box to the widget, copy one of the column elements then add it to the BloX code. Modify the id parameter to selectVal<lever number>, e.g. if this is the fourth lever, the id should be selectVal4. Similarly, modify the value parameter to match the swap_lever name you added in the previous step, e.g. [swap_lever4]. Update the title text as well and give it a meaningful description. Save the widget by clicking the Apply button. Add the additional levers to your widget formulas as needed so that they get recalculated when you enter the input values. Input Parameter BloX action: //initialize variables var swapParam = []; //create an array of swap_levers for (d = 0; d < payload.data.paramsToModify; d++) { swapParam[d] = "swap_lever" + (d + 1); } //loop through each of the specified widgets payload.widget.dashboard.widgets.$$widgets .forEach(function (widget) { //loop through each panel in the widget //exclude the filter panel (last panel) for (p = 0; p < widget.metadata.panels.length - 1; p++) { //loop through each item in the panel for (i = 0; i < widget.metadata.panels[p].items.length; i++) { //check if the panel item contains context (i.e. a formula) if (widget.metadata.panels[p].items[i].jaql.context != undefined) { var queryContext = widget.metadata.panels[p].items[i].jaql.context; //loop through each context in the item for (let [k, v] of Object.entries(queryContext)) { //loop through each swap_lever for (s = 0; s < swapParam.length; s++) { //check if the formula contains the swap_lever if (v.title == swapParam[s]) { var val = 'selectVal' + (s + 1); //update the formula with the swap_lever value that the user entered v.formula = payload.data[val]; } } } } } } //apply and save changes to the widget widget.changesMade('plugin-BloX', ['metadata']) //refresh the widget widget.refresh(); }) Resetting to Default Values The attached dashboard example includes a Reset button to reset the input parameters to pre-set default values. If you do not need this option, you can remove the second action from the BloX code, as shown in the highlighted part of the screenshot below. Instructions to implement the Reset button: Open the BloX Lever Configuration widget, then add the custom action given below to your Sisense environment. Go to the Actions tab, click the three-dot menu, then click Create Action. Copy the custom action code from below and paste it into your BloX custom action editor. Give this name for the action: ParameterSwap_V2_AllWidgets_Reset . Y ou can also use a different name, but make sure the name of the action matches with the name referenced in the BloX code. Click Next, then Create. In the BloX code, update the defaultValues array with your required default values. See screenshot below for reference. There are three input parameters in this example, if you have more/less parameters, update the paramsToModify value to the correct number of parameters that you have. See screenshot below for reference. Click the Apply button to close the widget. Reset Input Parameter BloX action: //initialize variables var leverValues = payload.data.defaultValues; var swapParam = []; //create an array of swap_levers for (d = 0; d < payload.data.paramsToModify; d++) { swapParam[d] = "swap_lever" + (d + 1); } //loop through all widgets in the dashboard payload.widget.dashboard.widgets.$$widgets .forEach(function (widget) { //loop through each panel in the widget //exclude the filter panel (last panel) for (p = 0; p < widget.metadata.panels.length - 1; p++) { //loop through each item in the panel for (i = 0; i < widget.metadata.panels[p].items.length; i++) { //check if the panel item contains context (i.e. a formula) if (widget.metadata.panels[p].items[i].jaql.context != undefined) { var queryContext = widget.metadata.panels[p].items[i].jaql.context; //loop through each context in the item for (let [k, v] of Object.entries(queryContext)) { //loop through each swap_lever for (s = 0; s < swapParam.length; s++) { //check if the formula contains the swap_lever if (v.title == swapParam[s]) { var val = 'selectVal' + (s + 1); //update the formula with the default value v.formula = leverValues[s]; } } } } } } //apply and save changes to the widget widget.changesMade('plugin-BloX', ['metadata']) //refresh the widget widget.refresh(); }) We hope this is a helpful article and would love to hear about your experience in the comments!

Blox

Using BloX to enable or disable Pivot rows in Sisense dashboards (Linux)

Using BloX to enable or disable pivot rows in Sisense dashboards (Linux) Step-by-Step Guide To enable or disable a row in a Pivot widget using BloX, follow these steps: 1. Create a Custom Action in BloX: Open the BloX widget in edit mode. Click on the three-dot icon. Select "Create Action" and name it manageRows. 2. Insert Action Code: Copy and paste the following code snippet into the action creation area: let widgets = payload.widget.dashboard.widgets.$$widgets; let pivotWidgets = widgets.filter(widget => widget.type === 'pivot2'); pivotWidgets.forEach(widget => { let panel = widget.metadata.panels.find(p => p.name === 'rows'); if (!panel) return; // Replace [Commerce.Condition] with the dimension of the row to be managed. let item = panel.items.find(i => i.jaql ?.dim === '[Commerce.Condition]'); if (!item) return; item.disabled = !item.disabled; widget.changesMade('pivotchanged', ['metadata']); widget.refresh(); }); 3. Configure the Action Parameters: Add the following action parameters in the second step: { "type": "manageRows", "title": "title" } 4. Apply the Action: Click "Create" and then "Apply" to save your custom action. 5. Import the Dashboard: Import the provided dashboard, which is based on the sample cube "Sample ECommerce" and contains a BloX widget with the script that utilizes the created action, and also two Pivot widgets for testing purposes. 6. Test the Button: Use the "ChangePivot" button within the dashboard to toggle the visibility of the "Condition" row. Conclusion: By following this guide, you can create interactive dashboards that allow users to enable or disable pivot rows with a simple button click. This functionality enhances the user experience by providing dynamic interaction with the data. References/Related Content Sisense BloX Custom Actions Guide Creating Custom Actions in Sisense 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.