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.
BohdanPosted 8 months ago • Last reply 8 months ago
