ContributionsMost RecentNewest TopicsMost LikesSolutionsRe: 🎢 CommunityFest Day 3: Step right up and show off your skills! 🎪 Interactive Body Pain Intensity Map This Blox visualization is an interactive Body Pain Intensity Map, designed to show which parts of the body experience the most discomfort or strain. Each red bubble represents a specific body region, and the size of the bubble corresponds to the level of pain or impact intensity - the larger the bubble, the higher the reported pain in that area. The numbers inside the labels quantify that intensity, providing a clear comparison between different regions. What makes this chart interactive is that each number is clickable, allowing users to filter by clicking on numbers. This visualization helps users quickly identify problem areas and analyze how pain or impact is distributed across the body. Re: How to make Switchable Dimension with Radio Buttons Yes, that's possible. I made some changes in the widget script. widget.on('domready',function(widget, args){ widgetIds = ['68ffba4ca380a7cd27d34fed']; const radios = document.querySelectorAll('.radiotval-dimswitch input'); refWidget = prism.activeDashboard.widgets.$$widgets.find(w => w.oid === widgetIds[0]); defaultPanel = refWidget.metadata.panels[0].items[0].jaql.title; defaultMeasureIndex = widget.metadata.panels[0].items.findIndex(i=>i.jaql.title === defaultPanel); radios.forEach(radio => { radio.checked = (radio.value == defaultMeasureIndex); }); radios.forEach(r => r.addEventListener('change', e => { dimToSwapTo = widget.metadata.panels[0].items[event.target.value].jaql; switchMeasure(dimToSwapTo) })); }) function switchMeasure(dimToSwapTo){ prism.activeDashboard.widgets.$$widgets .filter(i => widgetIds.includes(i.oid)) .forEach(function (widget) { widget.metadata.panels[0].items[0].jaql = dimToSwapTo; widget.changesMade('plugin-BloX', 'metadata'); widget.refresh(); }) } Also updated little bit in Blox script: { "title": "", "style": "", "script": "", "showCarousel": true, "carouselAnimation": { "delay": 0, "showButtons": false }, "body": [ { "type": "Container", "class": "radiotval-dimswitch", "items": [ { "type": "Input.ChoiceSet", "id": "radiotVal", "displayType": "expanded", "choices": [ { "title": "Category", "value": "0" }, { "title": "Status", "value": "1" } ] } ] } ], "actions": [] } -Hari Re: Filter to only show Relevant Dimension Values Hi Laflet​ , We can do it using 'Custom' option in the dashboard filter. By default, when you use a field from a Dimension table, Sisense shows all values from that table, even those not linked to any fact records. Add below jaql in the 'Custom' option of the filter and apply. Then set it as background filter. Here, replace [fact_table.Id] with the table name and field name of your fact table column. { "attributes": [ { "dim": "[fact_table.Id]", "filter": { "exclude": { "members": [ "N\\A" ] } } } ] } Please let me know if you have any questions -Hari Re: Querying Model in Text Widgets? Hi As you know, the Text widget in Sisense doesn’t allow adding dimensions or measures directly, so there’s no built-in way to display dynamic values like {Total Revenue} out of the box. However, this can be achieved using a small custom script. Here’s one approach you can try: Create a Text Widget and add your desired text in the widget, for example: This year revenue: {Total Revenue}. We’ll use a script to replace {Total Revenue} with the actual value from your model. Add the following script to your widget: widget.on('domready', function(w, args){ const textToReplace = '{Total Revenue}' const result = getMeasure(args.widget); args.widget.style.content.html = args.widget.style.content.html.replace(textToReplace, result.values[0].text); }) function getMeasure(widget) { const query = { "datasource": widget.datasource, "metadata": [ { "jaql": { "type": "measure", "formula": "[3DDF8-AEA]", "context": { "[3DDF8-AEA]": { "table": "sales_revenue", "column": "amount", "dim": "[sales_revenue.amount]", "datatype": "numeric", "columnTitle": "amount", "tableTitle": "sales_revenue", "agg": "sum", "title": "sum of amount" } }, "title": "[sum of amount]", "columnTitle": "[sum of amount]" } } ] }; return runHTTP(query); } function runHTTP(jaql) { const $internalHttp = prism.$injector.has("base.factories.internalHttp") ? prism.$injector.get("base.factories.internalHttp") : null; const ajaxConfig = { url: "/api/datasources/" + encodeURIComponent(jaql.datasource.title) + "/jaql", method: "POST", data: JSON.stringify(jaql), contentType: "application/json", dataType: "json", async: false }; const httpPromise = $internalHttp ? $internalHttp(ajaxConfig, true) : $.ajax(ajaxConfig); return httpPromise.responseJSON; }; Replace the value of textToReplace with the placeholder text you want to replace in your widget. In the script above, replace the query object with the JAQL you want to execute. If you need to use a more complex calculation, you can get the exact JAQL by creating a temporary Indicator Widget and adding your formula in the Primary panel. Then, in your browser console, run: prism.activeWidget.metadata.panels[0].items[0].jaql Copy the JAQL object from the console output and use it in query variable in the script. Then, save the script and refresh the dashboard. Result: If you prefer a simpler, no-code approach, you can use the Paldi Advanced Text Widget plugin. It allows you to: - Add rich text, images, and HTML content - Display dynamic values and dimensions directly - Avoid custom scripting This is often the most efficient and flexible solution for dynamic text in dashboards. https://www.paldi.solutions/sisense-plugins/advanced-text-widget Please let me know if you have any questions -Hari Re: How to make Switchable Dimension with Radio Buttons Hi Astroraf​ , Hope the script below works for you! Blox script: { "title": "", "style": "", "script": "", "showCarousel": true, "body": [ { "type": "Container", "class": "radiotval-dimswitch", "items": [ { "type": "Input.ChoiceSet", "id": "radiotVal", "displayType": "expanded", "choices": [ { "title": "Total Revenue", "value": "0" }, { "title": "Total Quantity", "value": "1" } ] } ] } ], "actions": [] } Also add below widget script to the blox widget. Here add ids of target widgets to widgetids array. widget.on('domready',function(widget, args){ widgetIds = ['68ffba3fa3420a7cd45d34feb', '68ffba47aa380a7cd27d34fed']; const radios = document.querySelectorAll('.radiotval-dimswitch input'); refWidget = prism.activeDashboard.widgets.$$widgets.find(w => w.oid === widgetIds[0]); if (refWidget.metadata.panels[1].$$widget.type == 'indicator') { defaultPanel = refWidget.metadata.panels[0].items[0].jaql.title; } else { defaultPanel = refWidget.metadata.panels[1].items[0].jaql.title; } defaultMeasureIndex = widget.metadata.panels[1].items.findIndex(i=>i.jaql.title === defaultPanel); radios.forEach(radio => { radio.checked = (radio.value == defaultMeasureIndex); }); radios.forEach(r => r.addEventListener('change', e => { dimToSwapTo = widget.metadata.panels[1].items[event.target.value].jaql; switchMeasure(dimToSwapTo) })); }) function switchMeasure(dimToSwapTo){ prism.activeDashboard.widgets.$$widgets .filter(i => widgetIds.includes(i.oid)) .forEach(function (widget) { if (widget.metadata.panels[1].$$widget.type == 'indicator') { widget.metadata.panels[0].items[0].jaql = dimToSwapTo; } else { widget.metadata.panels[1].items[0].jaql = dimToSwapTo; } widget.changesMade('plugin-BloX', 'metadata'); widget.refresh(); }) } Result: Please let me know if you have any questions -Hari https://www.binextlevel.com/ Re: Conditional Format in BloX using an image Hi Astroraf​ , Try the modified script: Changes made: Added class names at line number 32, 87 and 126 { "style": "@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@700;800&display=swap');", "script": "", "title": "", "conditions": [ { "minRange": "-Infinity", "maxRange": 0.1, "image": "/plugins/assets/icons/red_arrow.png", "color": "#D34A4A", "fontSize": "14px", "fontWeight": "600" }, { "minRange": 0.1, "maxRange": "Infinity", "image": "/plugins/assets/icons/green-up-arrow.svg", "color": "#079B65", "fontSize": "14px", "fontWeight": "600" } ], "titleStyle": [ { "display": "none" } ], "showCarousel": false, "body": [ { "type": "ColumnSet", "class": "condition_container", "columns": [ { "type": "Column", "width": "stretch", "style": { "width": "430px", "height": "145px", "box-sizing": "border-box", "padding": "16px" }, "items": [ { "type": "ColumnSet", "columns": [ { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "No shows - last full month", "style": { "font-family": "Inter, sans-serif", "font-size": "16px", "font-weight": "700", "text-align": "left", "color": "#212A31", "margin": "0" } } ] }, { "type": "Column", "width": "auto", "horizontalAlignment": "right", "style": { "text-align": "right", "min-width": "14px" }, "items": [ { "type": "ColumnSet", "style": { "align-items": "center" }, "columns": [ { "type": "Column", "width": "auto", "items": [ { "type": "Image", "url": "{conditions:image}", "class": "conditional_image", "altText": "delta", "horizontalAlignment": "right", "style": { "width": "12px", "height": "10px", "margin-right": "6px", "margin-top": "2px" } } ] }, { "type": "Column", "width": "150", "items": [ { "type": "TextBlock", "text": "{panel:# of unique Patient ID}", "style": { "font-family": "Inter, sans-serif", "font-size": "14px", "font-weight": "600", "color": "{conditions:color}", "text-align": "right", "margin": "0" } } ] } ] } ] } ] }, { "type": "TextBlock", "text": "{panel: No Show}", "class": "condition_data", "style": { "margin-top": "16px", "font-family": "Manrope, Inter, sans-serif", "font-size": "28px", "line-height": "32px", "font-weight": "700", "text-align": "left", "color": "#212A31" } }, { "type": "TextBlock", "text": "Avg 10%", "style": { "margin-top": "8px", "font-family": "Inter, sans-serif", "font-size": "12px", "font-weight": "500", "text-align": "left", "color": "#969696" } } ] } ] } ], "actions": [] } - Hari Re: Use Case Show & Tell with Patrick Morris Wow, thanks so much for letting me know about the shout-out! It’s great to hear my website was mentioned. I’m excited to stay engaged with the Sisense community Re: Help with BloX Widget Thank you DRay​ for tagging me; this is an interesting use case. JBuck2287​ Just to confirm if I understand the requirement, you want to show or hide a blox widget that has some message based on Yes/No filter? Please check this post if that helps: https://www.binextlevel.com/post/hide-widgets-based-on-selected-filters Let me know if you are looking for something else Thanks, Hari Re: Enhance Your Sisense Dashboard with a Search Box for Filters Hi MikeGre​ , It seems like the 'initialized' event is not working. Please try the below query. The main change I made is replacing 'initialized' with 'widgetrefreshed' dashboard.on('widgetrefreshed', function (se, ev) { $('.filters-headline').css({'height':'50%', }); $('.filters-global-header').css('height', '65px'); let searchBox = $('#custom-filter-search'); if(searchBox.length > 0) { return; } let $input = $('<input type="text" id="custom-filter-search">'); let $button = $('<button id="custom-filter-search-button"> Search </button>'); $('.filters-global-header').append($input); $('.filters-global-header').append($button); $button.css({ 'margin-left': '5px', 'padding': '1px 3px', 'border-radius': '3px', 'border': '1.5px solid #bfbfbf', 'background-color': '#ffffff', 'font-size': '13px', 'color': 'black' }) $button.on('click', function(){ const inputValue = $('#custom-filter-search').val().toUpperCase(); $('.global-filters .ew-content-host .ew-panel .ew-item-wrapper').each(function(index, element){ if ($(this).find('.f-header-host .ew-i-caption').text().toUpperCase().includes(inputValue)) { $(this).css('display', 'block') } else { $(this).css('display', 'none') } }) }); }) -Hari Re: JavaScript does not work for Tabber Hi rholmesminton​ , I tried the above script, and it's working well. One thing to note: make sure your tab names are correct and that the tab names in the 'tabFilterMapping' variable are in uppercase. This is important because the tabber displayed all tab names in uppercase. Here is the updated script: widget.on('ready', function(w, args){ $('.listDefaultCSS .listItemDefaultCSS', element).on('click', function(s){ widget.scriptConfig = true; filter = prism.activeDashboard.filters.$$items.find(el=>el.jaql.title == 'Checklist Type') //Title of filter //mapping of Tab name and filter item. Here when Tab1 is selected, 'Onboarding' will get selected in Checklists Type filter var tabFilterMapping = { 'TAB 1':"Onboarding", 'TAB 2':"Advancement" } var filterValue = tabFilterMapping[$(s)[0].currentTarget.innerHTML] filter.jaql.filter = { "explicit": true, "multiSelection": false, "members": [ filterValue ] } var filterOptions = { save: true, refresh: true, } prism.activeDashboard.filters.update(filter, filterOptions) }) ; }); - Hari