Search Results

Here is a method for adding detailed information about the chart and data that will always appear at the bottom of a widget. Steps: Create widget Add below script to widget. Update text to be displayed and set format of text Save the script and refresh widget descriptionSpace = 80 widget.on('processresult',function(se,ev){ ev.result.chart.spacingBottom = descriptionSpace//to add required space to display description at bottom }) //Bottom description widget.on('domready', function(w, args){ text = 'This is a description. This is a description. This is a description. This is a description. This is a description. This is a description. This is a description. This is a description. This is a description. ' chart = w.chart[0][Object.keys(w.chart[0])[0]].hc chart.renderer.text(text, 15, chart.chartHeight - descriptionSpace+20) .css({ width: chart.chartWidth-15, color: '#a0a0a0', 'font-style': 'italic' }) .add(); });

Currently there is an option to add description for each widget by click on i-button on title. But there is no i-button at dashboard level to write some information such as purpose and other details about dashboard. Here is a script to add i-Button in dashboard toolbar. When you click on this i-Button, description will be displayed on a pop-up window. Steps: Create Dashboard Add below script to dashboard. Update the variable 'template' with description of dashboard. Save the script and refresh dashboard dashboard.on('initialized', function (se, ev) { let clearFiltersButton = ` ` let $toolbarRight = $('.prism-toolbar__section--right .prism-toolbar__cell.btns-holder'); $toolbarRight.prepend(clearFiltersButton); $toolbarRight.find('#dashboard-i-button').on('click', dashboardDescription); }) function dashboardDescription() { const modalScope = prism.$ngscope; const modalDom = prism.$injector.get('ux-controls.services.$dom'); const options = { scope: { in: modalScope, }, template: `Welcome to Sales Dashboard (Description about the dashboard...)`, }; const ui = {}; modalDom.modal(options, ui); if (!modalScope.$$phase) { modalScope.$apply(); } $('.md-ai-modal').css({'z-index':'999', 'position':'absolute', 'left': '0', 'right': '0', 'top':'30%'}) $('.md-content').css({'z-index':'999', 'position':'absolute', 'left': '0', 'right': '0', 'top':'30%', 'width':'500px'}) $('.md-overlay').css({'z-index':'998', 'position':'absolute'}) }

Here is a blox template for cool cards Blox Editor: { "style": "", "script": "", "title": "", "showCarousel": false, "body": [ { "type": "ColumnSet", "columns": [ { "type": "Column", "spacing": "small", "items": [ { "type": "ColumnSet", "height": "40px", "style": { "border-radius": "6px 6px 0px 0pc", "background-image": "linear-gradient(330deg, #C74B7B 10%, #703971 )", "box-shadow": "1px 1px 2px #a6a4a4" }, "columns": [ { "type": "Container", "style": {}, "items": [ { "type": "TextBlock", "id": "", "class": "", "text": "Current Month Revenue", "horizontalAlignment": "left", "style": { "color": "#edeef0", "font-weight": "500", "font-size": "12px", "margin": "15px 0px 15px 10px" } } ] }, { "type": "Image", "id": "", "class": "", "url": "https://www.svgrepo.com/show/419269/avatar-human-person.svg", "altText": "image descriptions", "style": { "margin": "0px 10px", "width": "20px" } } ] }, { "type": "Container", "style": { "background-color": "#FFFFFF", "margin-bottom": "1px", "border-radius": "0px 0px 6px 6px" }, "items": [ { "type": "TextBlock", "spacing": "small", "id": "", "class": "", "text": "$10,354", "horizontalAlignment": "center", "style": { "color": "#6a6a6b", "font-weight": "100", "font-size": "30px" } }, { "type": "TextBlock", "spacing": "small", "id": "", "class": "", "text": "5% higher than last month", "horizontalAlignment": "center", "style": { "color": "#6a6a6b", "font-size": "12px" } }, { "spacing": "small", "type": "TextBlock", "text": "20, 30, 15, 35, 22, 35, 20, 45", "horizontalAlignment": "center", "weight": "bold", "color": "grey", "style": { "margin-bottom": "10px" } } ] } ] }, { "type": "Column", "spacing": "small", "items": [ { "type": "ColumnSet", "height": "40px", "style": { "border-radius": "6px 6px 0px 0pc", "background-image": "linear-gradient(330deg, #E86180, #CD4C7C )", "box-shadow": "1px 1px 2px #a6a4a4" }, "columns": [ { "type": "Container", "style": {}, "items": [ { "type": "TextBlock", "id": "", "class": "", "text": "Current Month Sales", "horizontalAlignment": "left", "style": { "color": "#edeef0", "font-weight": "500", "font-size": "12px", "margin": "15px 0px 15px 10px" } } ] }, { "type": "Image", "id": "", "class": "", "url": "https://www.svgrepo.com/show/419269/avatar-human-person.svg", "altText": "image descriptions", "style": { "margin": "0px 10px", "width": "20px" } } ] }, { "type": "Container", "style": { "background-color": "#FFFFFF", "margin-bottom": "1px", "border-radius": "0px 0px 6px 6px" }, "items": [ { "type": "TextBlock", "spacing": "small", "id": "", "class": "", "text": "$12,354", "horizontalAlignment": "center", "style": { "color": "#6a6a6b", "font-weight": "100", "font-size": "30px" } }, { "type": "TextBlock", "spacing": "small", "id": "", "class": "", "text": "8% higher than last month", "horizontalAlignment": "center", "style": { "color": "#6a6a6b", "font-size": "12px" } }, { "spacing": "small", "type": "TextBlock", "text": "20, 30, 15, 35, 22, 35, 20, 45", "horizontalAlignment": "center", "weight": "bold", "color": "grey", "style": { "margin-bottom": "10px" } } ] } ] }, { "type": "Column", "spacing": "small", "items": [ { "type": "ColumnSet", "height": "40px", "style": { "border-radius": "6px 6px 0px 0pc", "background-image": "linear-gradient(330deg, #FD7387, #E86182 )", "box-shadow": "1px 1px 2px #a6a4a4" }, "columns": [ { "type": "Container", "style": {}, "items": [ { "type": "TextBlock", "id": "", "class": "", "text": "Current Month Target", "horizontalAlignment": "left", "style": { "color": "#edeef0", "font-weight": "500", "font-size": "12px", "margin": "15px 0px 15px 10px" } } ] }, { "type": "Image", "id": "", "class": "", "url": "https://www.svgrepo.com/show/419269/avatar-human-person.svg", "altText": "image descriptions", "style": { "margin": "0px 10px", "width": "20px" } } ] }, { "type": "Container", "style": { "background-color": "#FFFFFF", "margin-bottom": "1px", "border-radius": "0px 0px 6px 6px" }, "items": [ { "type": "TextBlock", "spacing": "small", "id": "", "class": "", "text": "$12,110", "horizontalAlignment": "center", "style": { "color": "#6a6a6b", "font-weight": "100", "font-size": "30px" } }, { "type": "TextBlock", "spacing": "small", "id": "", "class": "", "text": "2% higher than last month", "horizontalAlignment": "center", "style": { "color": "#6a6a6b", "font-size": "12px" } }, { "spacing": "small", "type": "TextBlock", "text": "20, 30, 15, 35, 22, 35, 20, 45", "horizontalAlignment": "center", "weight": "bold", "color": "grey", "style": { "margin-bottom": "10px" } } ] } ] }, { "type": "Column", "spacing": "small", "items": [ { "type": "ColumnSet", "height": "40px", "style": { "border-radius": "6px 6px 0px 0pc", "background-image": "linear-gradient(330deg, #FF9C83, #FF7A87 )", "box-shadow": "1px 1px 2px #a6a4a4" }, "columns": [ { "type": "Container", "style": {}, "items": [ { "type": "TextBlock", "id": "", "class": "", "text": "Last Month Revenue", "horizontalAlignment": "left", "style": { "color": "#edeef0", "font-weight": "500", "font-size": "12px", "margin": "15px 0px 15px 10px" } } ] }, { "type": "Image", "id": "", "class": "", "url": "https://www.svgrepo.com/show/419269/avatar-human-person.svg", "altText": "image descriptions", "style": { "margin": "0px 10px", "width": "20px" } } ] }, { "type": "Container", "style": { "background-color": "#FFFFFF", "margin-bottom": "1px", "border-radius": "0px 0px 6px 6px" }, "items": [ { "type": "TextBlock", "spacing": "small", "id": "", "class": "", "text": "$9,245", "horizontalAlignment": "center", "style": { "color": "#6a6a6b", "font-weight": "100", "font-size": "30px" } }, { "type": "TextBlock", "spacing": "small", "id": "", "class": "", "text": "12% higher than last month", "horizontalAlignment": "center", "style": { "color": "#6a6a6b", "font-size": "12px" } }, { "spacing": "small", "type": "TextBlock", "text": "20, 30, 15, 35, 22, 35, 20, 45", "horizontalAlignment": "center", "weight": "bold", "color": "grey", "style": { "margin-bottom": "10px" } } ] } ] } ] } ], "actions": [] } Configuration { "fontFamily": "Open Sans", "fontSizes": { "default": 14, "small": 16, "medium": 20, "large": 50, "extraLarge": 32 }, "fontWeights": { "default": 500, "light": 100, "bold": 1000 }, "containerStyles": { "default": { "backgroundColor": "#f2f4f7", "foregroundColors": { "default": { "normal": "#3a4356" }, "white": { "normal": "#ffffff" }, "grey": { "normal": "#9ea2ab" }, "orange": { "normal": "#f2B900" }, "yellow": { "normal": "#ffcb05" }, "black": { "normal": "#000000" }, "lightGreen": { "normal": "#3ADCCA" }, "green": { "normal": "#54a254" }, "red": { "normal": "#dd1111" }, "accent": { "normal": "#2E89FC" }, "good": { "normal": "#54a254" }, "warning": { "normal": "#e69500" }, "attention": { "normal": "#cc3300" } } } }, "imageSizes": { "default": 40, "small": 40, "medium": 80, "large": 160 }, "imageSet": { "imageSize": "medium", "maxImageHeight": 100 }, "actions": { "color": "white", "backgroundColor": "", "maxActions": 5, "spacing": "extraLarge", "buttonSpacing": 20, "actionsOrientation": "horizontal", "actionAlignment": "left", "showCard": { "actionMode": "inline", "inlineTopMargin": 16, "style": "default" } }, "spacing": { "default": 5, "small": 10, "medium": 60, "large": 20, "extraLarge": 40, "padding": 10 }, "separator": { "lineThickness": 3, "lineColor": "#ffcb05" }, "factSet": { "title": { "size": "default", "color": "default", "weight": "bold", "warp": true }, "value": { "size": "default", "color": "default", "weight": "default", "warp": true }, "spacing": 20 }, "supportsInteractivity": true, "height": 198.8, "imageBaseUrl": "" }

Here is a blox template for cool cards Blox Editor script: { "style": "", "script": "", "title": "", "showCarousel": false, "body": [ { "type": "ColumnSet", "columns": [ { "type": "Column", "spacing": "small", "items": [ { "type": "ColumnSet", "height": "50px", "style": { "border-radius": "8px", "background-image": "linear-gradient(330deg, rgba(0,0,0,0.1) 0.2%, #16703a )", "box-shadow": "2px 2px 4px #a6a4a4" }, "columns": [ { "type": "Container", "style": { "margin": "5px 0px auto 15px" }, "items": [ { "type": "TextBlock", "id": "", "class": "", "text": "98.5%", "style": { "color": "#FFFFFF", "font-weight": "800", "font-size": "25px" } }, { "type": "TextBlock", "id": "", "class": "", "text": "Sample Text", "style": { "color": "#FFFFFF", "font-weight": "600", "font-size": "12px" } }, { "type": "TextBlock", "id": "", "class": "", "text": "Sample Text: 254", "style": { "color": "#FFFFFF", "font-weight": "600", "font-size": "12px", "margin": "18px 0px 0px 0px" } } ] }, { "type": "Image", "id": "", "class": "", "url": "https://www.svgrepo.com/show/419269/avatar-human-person.svg", "altText": "image descriptions", "style": { "margin": "25px 10px" } } ] } ] }, { "type": "Column", "spacing": "small", "items": [ { "type": "ColumnSet", "height": "50px", "style": { "border-radius": "8px", "background-image": "linear-gradient(330deg, rgba(0,0,0,0.1) 1%, #ba2e29 )", "box-shadow": "2px 2px 4px #a6a4a4" }, "columns": [ { "type": "Container", "style": { "margin": "5px 0px auto 15px" }, "items": [ { "type": "TextBlock", "id": "", "class": "", "text": "98.5%", "style": { "color": "#FFFFFF", "font-weight": "800", "font-size": "25px" } }, { "type": "TextBlock", "id": "", "class": "", "text": "Sample Text", "style": { "color": "#FFFFFF", "font-weight": "600", "font-size": "12px" } }, { "type": "TextBlock", "id": "", "class": "", "text": "Sample Text: 254", "style": { "color": "#FFFFFF", "font-weight": "600", "font-size": "12px", "margin": "18px 0px 0px 0px" } } ] }, { "type": "Image", "id": "", "class": "", "url": "https://www.svgrepo.com/show/419274/certification-diploma-proof.svg", "altText": "image descriptions", "style": { "margin": "25px 10px" } } ] } ] }, { "type": "Column", "spacing": "small", "items": [ { "type": "ColumnSet", "height": "50px", "style": { "border-radius": "8px", "background-image": "linear-gradient(330deg, rgba(0,0,0,0.1) 1%, #3147c4 )", "box-shadow": "2px 2px 4px #a6a4a4" }, "columns": [ { "type": "Container", "style": { "margin": "5px 0px auto 15px" }, "items": [ { "type": "TextBlock", "id": "", "class": "", "text": "98.5%", "style": { "color": "#FFFFFF", "font-weight": "800", "font-size": "25px" } }, { "type": "TextBlock", "id": "", "class": "", "text": "Sample Text", "style": { "color": "#FFFFFF", "font-weight": "600", "font-size": "12px" } }, { "type": "TextBlock", "id": "", "class": "", "text": "Sample Text: 254", "style": { "color": "#FFFFFF", "font-weight": "600", "font-size": "12px", "margin": "18px 0px 0px 0px" } } ] }, { "type": "Image", "id": "", "class": "", "url": "https://www.svgrepo.com/show/419266/document-pen-sign.svg", "altText": "image descriptions", "style": { "margin": "25px 10px" } } ] } ] }, { "type": "Column", "spacing": "small", "items": [ { "type": "ColumnSet", "height": "50px", "style": { "border-radius": "8px", "background-image": "linear-gradient(330deg, rgba(0,0,0,0.1) 1%, #801854 )", "box-shadow": "2px 2px 4px #a6a4a4" }, "columns": [ { "type": "Container", "style": { "margin": "5px 0px auto 15px" }, "items": [ { "type": "TextBlock", "id": "", "class": "", "text": "98.5%", "style": { "color": "#FFFFFF", "font-weight": "800", "font-size": "25px" } }, { "type": "TextBlock", "id": "", "class": "", "text": "Sample Text", "style": { "color": "#FFFFFF", "font-weight": "600", "font-size": "12px" } }, { "type": "TextBlock", "id": "", "class": "", "text": "Sample Text: 254", "style": { "color": "#FFFFFF", "font-weight": "600", "font-size": "12px", "margin": "18px 0px 0px 0px" } } ] }, { "type": "Image", "id": "", "class": "", "url": "https://www.svgrepo.com/show/419294/clipboard-list-todo.svg", "altText": "image descriptions", "style": { "margin": "25px 10px" } } ] } ] } ] } ], "actions": [] } Configuration : { "fontFamily": "Open Sans", "fontSizes": { "default": 14, "small": 16, "medium": 20, "large": 50, "extraLarge": 32 }, "fontWeights": { "default": 500, "light": 100, "bold": 1000 }, "containerStyles": { "default": { "backgroundColor": "#FFFFFF", "foregroundColors": { "default": { "normal": "#3a4356" }, "white": { "normal": "#ffffff" }, "grey": { "normal": "#9ea2ab" }, "orange": { "normal": "#f2B900" }, "yellow": { "normal": "#ffcb05" }, "black": { "normal": "#000000" }, "lightGreen": { "normal": "#3ADCCA" }, "green": { "normal": "#54a254" }, "red": { "normal": "#dd1111" }, "accent": { "normal": "#2E89FC" }, "good": { "normal": "#54a254" }, "warning": { "normal": "#e69500" }, "attention": { "normal": "#cc3300" } } } }, "imageSizes": { "default": 40, "small": 40, "medium": 80, "large": 160 }, "imageSet": { "imageSize": "medium", "maxImageHeight": 100 }, "actions": { "color": "white", "backgroundColor": "", "maxActions": 5, "spacing": "extraLarge", "buttonSpacing": 20, "actionsOrientation": "horizontal", "actionAlignment": "left", "showCard": { "actionMode": "inline", "inlineTopMargin": 16, "style": "default" } }, "spacing": { "default": 5, "small": 10, "medium": 60, "large": 20, "extraLarge": 40, "padding": 10 }, "separator": { "lineThickness": 3, "lineColor": "#ffcb05" }, "factSet": { "title": { "size": "default", "color": "default", "weight": "bold", "warp": true }, "value": { "size": "default", "color": "default", "weight": "default", "warp": true }, "spacing": 20 }, "supportsInteractivity": true, "height": 125, "imageBaseUrl": "" }

Using Blox we can visualize Total Value and sparkline to show values over time. Here is a widget script to create similar visualization but with more features such as tooltip, click-and-filter functionality etc. Steps: 1. Create a line or column chart. Chart should contains only one dimension and one value panel. 2. Disable Legend, Value Label, Markers, X-Axis and Y-Axis in design panel (right side panel of widget in edit mode) 2. Add below script to widget. This script will show sum of values as single value at top-left corner 3. Save the script and refresh widget widget.on('processresult',function(se,ev){ ev.result.chart.backgroundColor = '#5181c9' ev.result.xAxis.gridLineWidth = 0 ev.result.chart.spacing = [0, 10, 5, 10] var totalAmount = 0 $.each(ev.result.series[0].data, function(index, value){ totalAmount = totalAmount + value.y }) myItem = se.metadata.panels[1].items[0] myMask = $$get(myItem, "format.mask", {}) var numberFormatter = prism.$injector.get('$filter')('numeric'); formattesValue = numberFormatter(totalAmount, myMask); //Subtitle ev.result.subtitle = { text: `Total Amount ${formattesValue} `, align: 'left', style: { color: '#FFFFFF', fontSize:'13px', fontWeight:'bold' } } }) widget.on('domready', function(se, ev){ $('.highcharts-root', element).css('background-color', '#5181c9') }) widget.on('beforedatapointtooltip', function(se, ev){ ev.context.points[0].valueColor = '#4a4a4a' })

Sometimes, you may need to apply a filter to your dashboard without making it visible. Below is a script that allows you to hide one or more dashboard filters. Steps: Open the dashboard where you want to hide the filter. Add the script below, ensuring you update the 'filterTitles' variable with the list of filters you wish to hide. Save the script and refresh the dashboard. const filterTitles = ['Category', 'Condition']; dashboard.on('initialized', (dash, args) => { dash.filters.$$items.forEach((item, index) => { if (filterTitles.includes(item.jaql.title)) { var styles = ` .global-filters .ew-content-host .ew-panel .ew-item-wrapper:nth-child(${index+2}) { display: none; }` var styleSheet = document.createElement("style") styleSheet.innerText = styles document.head.appendChild(styleSheet) } }) })

We already have a script to add additional information in tooltip . But we can display only calculated values (measures) in tooltip using that script. Here is a solution to display one or more text fields in tooltip. Steps: Create a Column/Line/Area/Bar chart. Make sure it has only one dimension selected under Categories panel and no dimension under 'Break by' panel 2. Add below script to widget. Update the variable newJaql with jaql of dimensions to be displayed in tooltip. (Below script is to display Region and State field from Records table) Ensure that there are no multiple entries in the table that correspond to a single item on the X-axis. For example, in the above screenshot, each items in X-axis should have only one Region and State in the table. Otherwise chart will show incorrect result. 3. Save the script and refresh the widget var newJaql = [ //Tooptip Dimension 1 { jaql : { column: "Region", //Colum name datatype: "text", dim: "[Records.Region]", //table + column name table: "Records", //table name title: "Region" } }, //Tooptip Dimension 2 { jaql : { column: "State", //Colum name datatype: "text", dim: "[Records.State]", //table + column name table: "Records", //table name title: "State" } }] widget.on("beforequery", function (se, ev) { $.each(newJaql, function(index, value){ ev.query.metadata.push(value) }) }) widget.on("beforedatapointtooltip", function (se, ev){ let category = ev.context.category $.each(newJaql, function(index, value){ var tooltipTitle = value.jaql.title var headerIndex = ev.widget.rawQueryResult.headers.indexOf(tooltipTitle) console.log(headerIndex) var resultObject = ev.widget.rawQueryResult.values.find(el=>el[0].text == category) if(resultObject){ var tooltipText = resultObject[headerIndex].text ev.context.points[ev.context.points.length]= { seriesName: tooltipTitle, showPercentage: false, value: tooltipText, valueColor: ev.context.points[0].valueColor } } }) })

Sometimes we may need to include more information in tooltip. Here is how we can achieve this. Steps: Create column/bar/line/area chart In this approach, result of disabled Values panel will display as additional information in tooltip . So create and disable Values panel as required. Make sure there is only one Values panel is enabled and there is no Categories and Break by panel is disabled. Add below widget script and save Refresh widget widget.on("beforequery", function (se, ev) { $.each(ev.widget.metadata.panels[1].items, function(index, value){ if(value.disabled == true) { var newJaql = { jaql : JSON.parse(JSON.stringify(value.jaql)) } ev.query.metadata.push(newJaql) lastIndex = ev.query.metadata.length - 1 ev.query.metadata[lastIndex].disabled = false } }) }) widget.on("beforedatapointtooltip", function (se, args){ var valueSet, breakbyExist = false, categoryExist = false if(args.widget.metadata.panels[2].items.length > 0) breakbyExist = true if(args.widget.metadata.panels[0].items.length > 0) categoryExist = true category = args.context.category seriesName = args.context.points[0].seriesName if(categoryExist) { categoryTitle = args.widget.metadata.panels[0].items[0].jaql.title categoryIndex = args.widget.rawQueryResult.headers.indexOf(categoryTitle) } if(breakbyExist) { breakbyTitle = args.widget.metadata.panels[2].items[0].jaql.title breakByIndex = args.widget.rawQueryResult.headers.indexOf(breakbyTitle) } $.each(se.rawQueryResult.values, function(key, value) { if(!categoryExist) { if(value[breakByIndex].text == seriesName) { valueSet = value } }else if(!breakbyExist) { if(value[categoryIndex].text == category) { valueSet = value } }else { if(value[breakByIndex].text == seriesName && value[categoryIndex].text == category) { valueSet = value } } }) $.each(args.widget.metadata.panels[1].items, function(index, value){ if(value.disabled == true) { resultIndex = args.widget.rawQueryResult.headers.indexOf(value.jaql.title) args.context.points[args.context.points.length]= { seriesName: value.jaql.title, showPercentage: false, value: valueSet[resultIndex].text, valueColor: args.context.points[0].valueColor } } }) }) If you're looking for a more visually appealing and efficient way to display additional information in tooltips, consider rendering a chart. This approach not only enhances the aesthetic appeal but also significantly improves the rendering speed of the tooltip. If you're interested in implementing this solution or would like more details, feel free to reach out . Below is a GIF showcasing the improved tooltip with a chart. This visual representation highlights the efficiency and aesthetic benefits of this approach.

Here is an example of calling a rest API using Blox and displaying its response. This example is to display a list of Sisense folders owned by the logged in user. You can use any other url instead. Steps: Create a blox widget with 3 value panels, Name, Id and Type. Type 0 instead of formula in all panels as in the screenshot below. 2. Copy and paste below blox script. In the below script, replace "/api/folders" (line 21) with any other URL you need to call. Blox Script: { "style": ".blox-slides:not(:first-child) .fetch-button{display:none; !important;} .blox-slides .btn{margin-bottom:10px; font-weight:bold; color:black; font-size:1em}", "script": "", "title": "", "carouselAnimation": { "delay": 0 }, "body": [ { "type": "ActionSet", "class": "fetch-button", "style": { "padding": "5px" }, "actions": [ { "type": "fetchFromAPI", "class": "fetch-button", "title": "Get Data", "data": { "apiUrl": "/api/folders" }, "style": { "background-color": "#1f8038", "color": "#ffffff" } } ] }, { "type": "ColumnSet", "separator": false, "columns": [ { "type": "Column", "width": "25%", "separator": true, "items": [ { "type": "TextBlock", "class": "fetch-button", "weight": "light", "horizontalAlignment": "left", "separator": true, "text": "Name", "style": { "font-size": "13px", "font-weight": "bold", "margin": "5px" } }, { "type": "TextBlock", "weight": "light", "horizontalAlignment": "left", "separator": true, "text": "{panel:Name}", "style": { "font-size": "13px" } } ] }, { "type": "Column", "separator": true, "width": "50%", "items": [ { "type": "TextBlock", "class": "fetch-button", "weight": "light", "horizontalAlignment": "left", "separator": true, "text": "Id", "style": { "font-size": "13px", "font-weight": "bold", "margin": "5px" } }, { "type": "TextBlock", "horizontalAlignment": "left", "separator": true, "weight": "light", "text": "{panel:Type}", "style": { "font-size": "13px" } } ] }, { "type": "Column", "separator": true, "width": "25%", "items": [ { "type": "TextBlock", "class": "fetch-button", "weight": "light", "horizontalAlignment": "left", "separator": true, "text": "Type", "style": { "font-size": "13px", "font-weight": "bold", "margin": "5px" } }, { "type": "TextBlock", "weight": "light", "horizontalAlignment": "left", "separator": true, "color": "default", "text": "{panel:Id}", "style": { "font-size": "13px" } } ] } ] } ] } Configuration: { "fontFamily": "Open Sans", "fontSizes": { "default": 16, "small": 12, "medium": 22, "large": 32, "extraLarge": 50 }, "fontWeights": { "default": 500, "light": 100, "bold": 1000 }, "containerStyles": { "default": { "backgroundColor": "#ffffff", "foregroundColors": { "default": { "normal": "#000000" }, "white": { "normal": "#000000" }, "grey": { "normal": "#3A4356" }, "orange": { "normal": "#f2B900" }, "yellow": { "normal": "#ffcb05" }, "black": { "normal": "#000000" }, "lightGreen": { "normal": "#3ADCCA" }, "green": { "normal": "#54a254" }, "red": { "normal": "#dd1111" }, "accent": { "normal": "#2E89FC" }, "good": { "normal": "#54a254" }, "warning": { "normal": "#e69500" }, "attention": { "normal": "#cc3300" } } } }, "imageSizes": { "default": 40, "small": 40, "medium": 80, "large": 160 }, "imageSet": { "imageSize": "medium", "maxImageHeight": 100 }, "actions": { "color": "", "backgroundColor": "white", "maxActions": 5, "spacing": "extraLarge", "buttonSpacing": 5, "actionsOrientation": "horizontal", "actionAlignment": "center", "showCard": { "actionMode": "inline", "inlineTopMargin": 16, "style": "default" } }, "spacing": { "default": 5, "small": 20, "medium": 60, "large": 20, "extraLarge": 40, "padding": 2 }, "separator": { "lineThickness": 1, "lineColor": "#eeeeee" }, "factSet": { "title": { "size": "default", "color": "default", "weight": "bold", "warp": true }, "value": { "size": "default", "color": "default", "weight": "default", "warp": true }, "spacing": 20 }, "supportsInteractivity": true, "imageBaseUrl": "", "height": 618 } 3. Create a custom action with name ' fetchFromAPI' and use below script. Here we are pushing the response from API to widget. So panel names specified in script should be same as in Blox widget. const apiUrl = payload.data.apiUrl; const $internalHttp = prism.$injector.has("base.factories.internalHttp") ? prism.$injector.get("base.factories.internalHttp") : null; // Ajax configurations const ajaxConfig = { url: apiUrl, method: "GET", contentType: "application/json", accept: "application/json", async: false }; const httpPromise = $internalHttp ? $internalHttp(ajaxConfig, true) : $.ajax(ajaxConfig); payload.widget.on('processresult', function(se, ev){ ev.result.length = 0 $.each(httpPromise.responseJSON, function(index, value){ ev.result.push({ "0": { "Panel": "Name", "Value": value.name, "Text": value.name, "HasValue": true }, "1": { "Panel": "Id", "Value": value.type, "Text": value.type, "HasValue": true }, "2": { "Panel": "Type", "Value": value.oid, "Text": value.oid, "HasValue": true } }) }) }) payload.widget.refresh() 4. Add below widget script. This is to hide '0' (which we specified in value panel formula) widget.on('processresult', function(se, ev){ $.each(ev.result[0], function(index, value){ value.Value = '' value.Text = '' }) })

In order to refresh all widgets in a dashboard, we need to refresh the entire page. But we can add a button to refresh all widgets. Here is a script to add refresh button for a dashboard. Steps: Create dashboard Add below script to dashboard Save the script and refresh the dashboard dashboard.on('initialized', function (se, ev) { let dashboardRefreshButton = ` ↻ ` let $toolbarRight = $('.prism-toolbar__section--right .prism-toolbar__cell.btns-holder'); $toolbarRight.prepend(dashboardRefreshButton); $toolbarRight.find('#dashboard-refresh-button').on('click', dashboardRefresh); }) function dashboardRefresh() { $.each(dashboard.widgets.$$widgets, function(index, value){ value.refresh() }) }

If there are more rows in table widget its bit difficult to find a particular item from a column. But it will be easy if we applied different colors to different items in the column. Here is a script to apply styles to each items in table widget. Steps: Create a table widget Add below widget script. Update the variable columnIndex with index of column to which color should be applied. (index is a number assigned to columns starting with 1. In above screenshot, State column has index 1, Country has index 2 and Region has index 3) Update the variable itemStyleMapping with mapping of item to style. Style can be background color, font color, padding etc. Save the script and refresh widget widget.on('domready', function(se, ev){ let columnsIndex = 3 let itemStyleMapping = { 'West':'background-color:#e64c72; color:white; padding: 2px 8px; border-radius:15px', 'South': 'background-color:#e69545; color:white; padding: 2px 8px; border-radius:15px', 'Northeast': 'background-color:#5f5da8; color:white; padding: 2px 8px; border-radius:15px', 'Midwest': 'background-color:#4a9455; color:white; padding: 2px 8px; border-radius:15px', 'Unknown': 'background-color:#8c8b8c; color:white; padding: 2px 8px; border-radius:15px' } const elementToObserve = $('table tbody', element)[0]; $(elementToObserve).find(`tr td:nth-child(${columnsIndex})`).each(function(index, value){ var label = $(this).text() if(label in itemStyleMapping) { $(this).text('') $(this).prepend(`${label}`) } }) const observer = new MutationObserver(function(e) { for(const m of e) { if (m.type === 'childList') { $.each(m.addedNodes, function(index, value){ elementObj = $(value).find('td:nth-child(3)') var label = elementObj.text() if(label in itemStyleMapping) { elementObj.text('') elementObj.prepend(`${label}`) } }) } } }) observer.observe(elementToObserve, {subtree: true, childList: true}); })

Finding the right filter in a dashboard with many options can be frustrating. Instead of scrolling endlessly, you can add a search box to make it easier to find the filter you need. This guide will show you how to quickly set up a search feature for your Sisense dashboard filters. Steps: Open Your Dashboard Insert below dashboard Script Save and Refresh the Dashboard dashboard.on('initialized', function (se, ev) { $('.filters-headline').css({'height':'50%', }); $('.filters-global-header').css('height', '65px'); let searchBox = $('#custom-filter-search'); if(searchBox) { searchBox.remove() } let $input = $(''); $input.css({ 'width': '95%', 'margin-left': '5px', 'border-radius': '3px', 'border': '1.5px solid #bfbfbf', 'background-color': '#ffffff', 'font-size': '13px', 'color': '#757575' }) $('.filters-global-header').append($input); $input.on('input', function(){ const inputValue = $(this).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') } }) }) })