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.

Introduction This article explains how to change the font size and style of cells in a Sisense Pivot Table widget using the official Pivot 2.0 API (widget.transformPivot). A common approach found in community posts relies on jQuery class selectors such as .p-head-content and .p-value to apply CSS changes directly to the DOM. While this may work in older versions, it is not officially supported and is prone to breaking across Sisense updates, since class names and UI structure can change between releases. The recommended and supported approach is to use the widget.transformPivot API, which provides a stable, version-resilient way to style pivot cells programmatically. The solution is tested on Sisense L2026.1.2 and works for both cloud and on-premises deployments. Step-by-Step Guide 1. Open the widget script editor Click the three-dot menu on your Pivot Table widget → Edit Script . 2. Identify the cell types you want to style The transformPivot API allows you to target specific cell types within the pivot: You can target one, several, or all types in a single call. 3. Paste the script widget.transformPivot( { type: ['value', 'member', 'subtotal', 'grandtotal'] }, function(metadata, cell) { cell.style = cell.style || {}; cell.style.fontSize = '8px'; } ); 4. Customize the style At the core of the script, the cell.style object accepts standard CSS properties in camelCase format. You can extend it to apply additional styles beyond font size. For example: widget.transformPivot( { type: ['value', 'member', 'subtotal', 'grandtotal'] }, function(metadata, cell) { cell.style = cell.style || {}; cell.style.fontSize = '8px'; cell.style.fontWeight = 'bold'; cell.style.color = '#333333'; cell.style.fontFamily = 'Arial, sans-serif'; } ); 5. Click Apply and test Save the script and reload the widget. All targeted cell types will now reflect the styles you defined. Important notes Why not use jQuery class selectors? Scripts that rely on class names like .p-head-content or .p-value are tied to the internal DOM structure of the widget, which Sisense does not guarantee to remain stable across versions. These scripts may stop working after an upgrade without any warning. Pivot 2.0 API only: The widget.transformPivot method is part of the Pivot 2.0 API. Ensure your widget is using Pivot 2.0 (not the legacy Pivot widget) for this script to work. Cell types: If you only want to style specific cell types (e.g. only data values), simply remove the unwanted types from the array. For example, { type: ['value'] } will only affect data cells. Conclusion By using the widget.transformPivot API instead of direct DOM manipulation, you get a supported, upgrade-safe way to control the visual appearance of pivot cells. The cell.style object accepts any standard CSS property in camelCase, making it straightforward to extend this pattern to font family, weight, colour, and more. References / Related content Pivot 2.0 API - transformPivot 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.

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.

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.

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.

Introduction This article demonstrates how to automatically highlight rows in a Sisense Pivot Table widget based on how close a date column is to today's date. The script developed here adds visual urgency to your pivots by colour-coding each row based on the number of days remaining until the date in a specified column: Light green for rows where the deadline has already passed (expired). Light red for rows where the deadline is critically close (urgent). Light yellow for rows where the deadline is approaching within a configurable warning window. No highlight for rows where the deadline is comfortably in the future. This is particularly useful for dashboards tracking contract renewals, project deadlines, task due dates, or any time-sensitive data where users need to spot at-risk rows 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 that contains a Pivot Table widget, or create a new one. Make sure your table includes at least one column that contains date values. The script works best with dates formatted as mm/dd/yyyy or yyyy-mm-dd, which are the standard Sisense table output formats. You can use attached .dash and .sdata for testing. 2. Identify your date column index The script uses a 0-based column index to locate the date column. This means the first column is index 0, the second is 1, the third is 2, and so on. Count the columns in your table from left to right and note the position of your date column. You will use this number in the configuration section of the script. 3. Open the widget script editor Click the three-dot menu on the Pivot Table widget → Edit Script . 4. Paste the full script /** * Date Proximity Row Highlighting * * Compares a specific date column against today's date and paints the row * yellow (if the deadline is approaching) or red (if past due). */ // --- CONFIGURATION --- const DATE_COLUMN_INDEX = 2; // 0-based index of your date column (e.g., 2 is the 3rd column) const DAYS_WARNING = 14; // Highlight yellow if the deadline is within this many days const DAYS_URGENT = 5; // Highlight red if the deadline is urgent (within this many days) const EXPIRED_COLOR = '#d4edda'; // Light Green for past-due/expired deadlines const URGENT_COLOR = '#f8d7da'; // Light Red for urgent deadlines const WARNING_COLOR = '#fff3cd'; // Light Yellow for approaching deadlines widget.on('domready', function () { // Scope our DOM search to this specific widget only const $widget = $(element); // Find all data rows in the table body $widget.find('table tbody tr').each(function () { const $row = $(this); const $cells = $row.find('td'); // Safety check: ensure the row actually has our date column if ($cells.length <= DATE_COLUMN_INDEX) return; // Extract the text of the date column const dateText = $cells.eq(DATE_COLUMN_INDEX).text().trim(); // Skip empty rows or standard 'Grand Total' style texts if (!dateText || dateText.toLowerCase().includes('total')) return; // Parse the date (Works best with mm/dd/yyyy or yyyy-mm-dd Sisense formats) const rowDate = new Date(dateText); // Only proceed if it is a valid date if (!isNaN(rowDate.getTime())) { const today = new Date(); // Strip the time to compare pure calendar dates today.setHours(0, 0, 0, 0); rowDate.setHours(0, 0, 0, 0); // Calculate the difference in milliseconds and convert to days const diffTimeMilli = rowDate.getTime() - today.getTime(); const diffDays = Math.ceil(diffTimeMilli / (1000 * 60 * 60 * 24)); // Apply color to all cells in the row to guarantee the background isn't obscured if (diffDays < 0) { // Deadline is in the past! (Expired) -> Light Green $cells.css('background-color', EXPIRED_COLOR); } else if (diffDays <= DAYS_URGENT) { // Deadline is extremely close! (Urgent) -> Light Red $cells.css('background-color', URGENT_COLOR); } else if (diffDays <= DAYS_WARNING) { // Deadline is approaching within our warning threshold! -> Light Yellow $cells.css('background-color', WARNING_COLOR); } else { // Clear out the color if it's safe $cells.css('background-color', ''); } } }); }); 5. Configure the script constants At the top of the script, update the configuration constants to match your table and your business rules: const DATE_COLUMN_INDEX = 2;     // 0-based index of your date column (e.g., 2 = 3rd column) const DAYS_WARNING = 14;          // Highlight yellow if deadline is within this many days const DAYS_URGENT = 5;            // Highlight red if deadline is within this many days const EXPIRED_COLOR = '#d4edda'; // Light Green for past-due/expired rows const URGENT_COLOR = '#f8d7da';  // Light Red for urgent rows const WARNING_COLOR = '#fff3cd'; // Light Yellow for approaching rows DATE_COLUMN_INDEX – Set this to the 0-based position of your date column. DAYS_WARNING – Any row whose date is within this many days from today will be highlighted yellow. The default is 14 days. DAYS_URGENT – Any row whose date is within this many days from today will be highlighted red. The default is 5 days. This threshold takes priority over the warning threshold. Colour constants – The default colours follow a standard traffic-light convention. You can replace any hex value with your organisation's brand colours. 6. Click Apply and test Save the script and reload the widget. Rows containing dates will now be colour-coded automatically based on their proximity to today. Rows with dates safely in the future will have no background colour change. Important notes Date format compatibility: The script relies on JavaScript's native new Date() parser. This works reliably with mm/dd/yyyy and yyyy-mm-dd formats. If your Sisense instance is configured to display dates in a different format (e.g. dd/mm/yyyy), the parser may misinterpret the values. In that case, you will need to add a custom date parsing step before the new Date(dateText) call. Pagination: The script runs on domready, which fires each time the table re-renders – including after a page change. This means the highlighting is automatically reapplied when the user navigates to a different page of results. Grand Total rows: The script automatically skips any row whose date cell contains the word "total", preventing the Grand Total row from being incorrectly highlighted. Conclusion By hooking into the domready event and reading the rendered cell values directly from the DOM, this script adds a real-time, date-aware traffic-light system to any Sisense Pivot Table widget – with no changes required to the underlying data model. The configuration constants at the top of the script make it straightforward to adapt the column position, day thresholds, and colours to any use case. The same pattern can be extended to highlight rows based on other conditions, such as numeric thresholds, status text values, or combinations of multiple columns and conditions. References / Related content Sisense JavaScript API Reference – Widget Events 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.