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. You 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. You 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!
Interactive Time Period Comparison with BloX & Custom Actions
Here is a use case on how to leverage BloX widgets in Sisense to create an interactive dashboard for comparing any KPI between two different time periods. This solution allows users to select two months (or any two time periods) and dynamically calculates the percentage change in the KPI between these selected months.How to Create BloX Custom 'From-To' Filter -- All Dates with “Clear” Button
How to Create BloX Custom 'From-To' Filter -- All Dates with “Clear” Button We will create a Blox widget to have date filters with the 'From and To' fields and the button Clear. Actually, this button will add a whole range of dates to the filter. Create a new BloX widget and copy-paste the next code to the Editor window: { "style": "", "script": "", "title": "", "showCarousel": true, "carouselAnimation": { "showButtons": false }, "body": [ { "type": "Container", "width": "20%", "style": { "margin": "0 auto" }, "items": [ { "spacing": "large", "type": "TextBlock", "text": "From Date", "weight": "light", "color": "black" }, { "type": "Input.Date", "id": "SelectVal_from", "placeholder": "", "defaultValue": "", "style": { "width": "100%" }, "borderRadius": "4px", "borderStyle": "none", "backgroundColor": "#F4F4F8" }, { "spacing": "medium", "type": "TextBlock", "text": "To Date", "color": "black" }, { "type": "Input.Date", "id": "SelectVal_to", "placeholder": "", "defaultValue": "", "style": { "width": "100%" }, "borderRadius": "4px", "borderStyle": "none", "backgroundColor": "#F4F4F8" }, { "type": "ActionSet", "actions": [ { "type": "filter-date", "title": "Submit", "data": { "FilterFields": [ "[Commerce.Date (Calendar)]" ] } }, { "type": "filter-datecls", "title": "Clear", "data": { "FilterFields": [ "[Commerce.Date (Calendar)]" ] } } ] } ] } ] } Next code please copy to the Configuration tab { "fontFamily": "Open Sans", "fontSizes": { "default": 16, "small": 14, "medium": 22, "large": 32, "extraLarge": 50 }, "fontWeights": { "default": 400, "light": 100, "bold": 800 }, "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": "#93c0c0" }, "green": { "normal": "#2BCC7F" }, "red": { "normal": "#FA5656" }, "accent": { "normal": "#2E89FC" }, "good": { "normal": "#54a254" }, "warning": { "normal": "#e69500" }, "attention": { "normal": "#cc3300" } } } }, "imageSizes": { "default": 40, "small": 40, "medium": 80, "large": 120 }, "imageSet": { "imageSize": "medium", "maxImageHeight": 100 }, "actions": { "color": "", "backgroundColor": "", "maxActions": 5, "spacing": "large", "buttonSpacing": 20, "actionsOrientation": "horizontal", "actionAlignment": "right", "margin": "0", "showCard": { "actionMode": "inline", "inlineTopMargin": 16, "style": "default" } }, "spacing": { "default": 5, "small": 5, "medium": 10, "large": 20, "extraLarge": 40, "padding": 0 }, "separator": { "lineThickness": 1, "lineColor": "#D8D8D8" }, "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": 197 } Now we need to add 2 Actions - 'filter-date' (for the filter) and 'filter-datecls' (for “clear” button). So, go to the Actions tab and create the first Action with name - filter-date const filVal_from = payload.data.SelectVal_from const filVal_to = payload.data.SelectVal_to const filterDims = payload.data.FilterFields; const dash = payload.widget.dashboard; let newFilter = {}; newFilter = { jaql: { dim: "", filter: { from: filVal_from, to: filVal_to } } }; filterDims.forEach(function (dim) { newFilter.jaql.dim = dim; dash.filters.update(newFilter, { refresh: true, save: true }) }) After this press Next and Create buttons. And now we will add the second Action with name - 'filter-datecls' const filVal_from = "1980-03-04T00:00:00" const filVal_to = "2063-03-04T00:00:00" const filterDims = payload.data.FilterFields; const dash = payload.widget.dashboard; let newFilter = {}; newFilter = { jaql: { dim: "", filter: { from: filVal_from, to: filVal_to } } }; filterDims.forEach(function (dim) { newFilter.jaql.dim = dim; dash.filters.update(newFilter, { refresh: true, save: true }) }) After this press Next and Create buttons. Here we found how to create a nice-looking BloX widget with dates filters and a "clear" button. You can add some new options that will better fit your needs. ALT text: A user interface displaying a data management tool. On the left side, there is an area labeled "Add Rows" with entries from different years (2000 to 2022). On the right side, there are options for selecting "Single" or "Multiple" items, along with a button to "Submit" or "Clear." The overall layout is organized and features dropdown menus and buttons for user interaction.BloX - Date and Timestamp Range Filter
Sisense doesn't currently support filtering on timestamps natively. This article shows how we can leverage BloX to work around this limitation and allow users to select a date and timestamp range to filter their dashboards. (This is an updated version of https://community-old.sisense.com/hc/en-us/community/posts/360038026133-Select-a-date-and-time-range-to-filter-your-dashboards-, shout out to Kaitleen Crowe!) 1. Create a numeric date-time column in the data model The goal here is to convert the date-time field you wish to filter by to a BIGINT in the format of YYYYDDMMHHMMSS. Let's break that down. Choose your date-time field to convert. Create a new custom column in the same table. Convert the date-time field to a BigInt with the format YYYYDDMMHHMMSS. Your values should not have '/' or '-'. If you have these characters, they will need to be parsed out. Example: In this example we will be converting the [Admission_Time] field into a custom column [Admission_Time_Int] as a BIGINT. **Note: Your date formats can vary so the method to convert will vary as well. -- Changing datatype to bigint toBigInt( --formatting date replaceAll(StrParts(toString([Admission_Time]), ' ', 1), '-', '') + -- formatting time replaceAll(left(SubString(toString([Admission_Time]), 12), 8), ':', '')) 2. Add BloX widget to the dashboard Add a new BloX widget to your dashboard. Upload the BloX template attached in this article (file DateTimeFilter-2022-11-08.json) to your instance like shown in the screenshot below. Once the template is loaded in your Editor tab, scroll to the ActionSet and under actions, change the NumDateTimeColumn value to the name of the table and column of the numeric date-time that you created in the first step. The format is tableName.columnName. 3. Create a new custom action Create a new BloX action like shown below. Copy and paste the Javascript code below into the custom action editor: var datetimeCol = payload.data.NumDateTimeColumn; var dash = payload.widget.dashboard; //grab the start date and start time and parsing values var dt1 = payload.data.datevalstart; dt1 = dt1.substring(0, 4) + dt1.substring(5, 7) + dt1.substring(8); var t1 = payload.data.timevalstart; if (t1 == '') { t1 = '00:00'; } t1 = t1.substring(0, 2) + t1.substring(3); var dtstart = parseInt((dt1 + t1 + '00'), 10); //grab the end date and end time and parsing values var dt2 = payload.data.datevalend; dt2 = dt2.substring(0, 4) + dt2.substring(5, 7) + dt2.substring(8); var t2 = payload.data.timevalend; if (t2 == '') { t2 = '23:59'; } t2 = t2.substring(0, 2) + t2.substring(3); var dtend = parseInt((dt2 + t2 + '00'), 10); //create JAQL filter definition let newFilter = {}; newFilter = { jaql: { dim: "", filter: { from: dtstart, to: dtend } } } //apply the filter datetimeCol.forEach(function (dim) { newFilter.jaql.dim = dim; dash.filters.update(newFilter, { refresh: true, save: true }) }) Name the action DateTimeSelector (or any other name you'd like), press Next then Create to save the new action. If you choose to give the action a different name, do the following additional steps: Copy the name of the new action. Click the Editor tab. Scroll to the ActionSet and under actions, change the type to the name of the action you created. 4. Add the numeric Date-Time column to the dashboard filter panel. Add the numeric date-time column you created in the first step to the dashboard filter panel. When adding this filter, go to the Values tab and select the 'Between' option Press OK. You now have a selector for date and time. Select a date and time in the picker input fields and press the Filter button. 5. Improve User Experience by making the input fields remember previous selection You will notice that after you hit the Filter button, even though your selection has been applied to the dashboard filter, the BloX widget will refresh and your previous selection will be wiped from the date and time selectors. To prevent this, you can turn off dashboard filters in the BloX widget setting. Open the BloX widget, go the Filters tab on the right panel, then turn off the Dashboard Filters option. Once this option is turned off, the BloX widget will not refresh when you hit the Filter button. Note that after a page/dashboard reload, the BloX widget will still refresh and wipe the previous selection from the date and time input fields. If you'd like to further improve the User Experience by having the date and time input fields to remember the previous selection even after a page refresh, follow these steps: Open the BloX widget. In the Filters tab on the right panel, turn the Dashboard Filters option back on. Turn on only the numeric date-time filter and leave every other dashboard filter turned off. Click Apply and then open the BloX widget again. Open the widget script editor by click the three-dot menu of the widget, then click Edit Script. Copy and paste the Javascript code below into the widget script editor. //***** Populate input boxes with current filter values *****/ widget.on('ready', function() { //replace with filter name var filterName = "Admission Time"; // ----------Find date filter---------- let dateFilter = dashboard.filters.$$items.find((item) => { if (item.jaql && item.jaql.title.indexOf(filterName) !== -1) { return true } }) //get the current 'from' filter value and parse it into date / time format var fromDateTimeString = String(dateFilter.jaql.filter.from); var fromDate = fromDateTimeString.slice(0,4) + '-' + fromDateTimeString.slice(4,6) + '-' + fromDateTimeString.slice(6,8); var fromTime = fromDateTimeString.slice(8,10) + ':' + fromDateTimeString.slice(10,12);// + ' ' + fromAMPM; //check if current 'from' filter value is a valid date / time var checkInvalid_from = typeof dateFilter.jaql.filter.from == 'undefined' || dateFilter.disabled == true; var filterDateValue_from = (checkInvalid_from) ? 'someInvalidDate' : fromDate; var filterTimeValue_from = (checkInvalid_from) ? 'someInvalidTime' : fromTime; //set the current 'from' filter value as placeholder and default value for input field $('#datevalstart', element).attr('value', filterDateValue_from); $('#timevalstart', element).attr('value', filterTimeValue_from); //get the current 'to' filter value and parse it into date / time format var toDateTimeString = String(dateFilter.jaql.filter.to); var toDate = toDateTimeString.slice(0,4) + '-' + toDateTimeString.slice(4,6) + '-' + toDateTimeString.slice(6,8); var toTime = toDateTimeString.slice(8,10) + ':' + toDateTimeString.slice(10,12);// + ' ' + fromAMPM; //check if current 'to' filter value is a valid date / time var checkInvalid_to = typeof dateFilter.jaql.filter.to == 'undefined' || dateFilter.disabled == true; var filterDateValue_to = (checkInvalid_to) ? 'someInvalidDate' : toDate; var filterTimeValue_to = (checkInvalid_to) ? 'someInvalidTime' : toTime; //set the current 'to' filter value as placeholder and default value for input field $('#datevalend', element).attr('value', filterDateValue_to); $('#timevalend', element).attr('value', filterTimeValue_to); }); Replace the var filterName value in the script (line 5) with the name of your date-time dashboard filter. Click Save. Go back to your dashboard and refresh the page. Your BloX date and time selectors should now be populated with the current filter values, i.e. the values you previously selected.
Reset to Default Filters Button using BloX
This article will explain how to create reset to default filters button in BloX This helps in case you want to provide this icon functionality on the dashboard and not just in the Filters panel. Create a new custom action with the below code: *Make sure you're naming the action 'Click' if you're using the attached dashfile in section 2 var dashboard = payload.widget.dashboard dashboard.filters.update(dashboard.defaultFilters,{refresh:true}) You can use the dashfile attached (Backtodefaultfilters.dash ) OR Copy & Paste the below JSON code in the Editor: { "style": "", "script": "", "title": "", "showCarousel": true, "body": [], "actions": [ { "type": "Click", "title": "Reset Filters" } ] }Filter selections in Blox widget
Question How to show the values selected in the dashboard filter as a Blox widget? Answer Our example uses a filter/field called "Divison_name". First, in your BloX widget's Editor tab: 1. Set "showCarousel" to "true", but add the following option to make the navigation arrows go away: "showCarousel": true, "carouselAnimation": { "showButtons": false }, 2. Within the specific Text Block / container you want to change, give it an "id" attribute of "text-to-change" and "wrap" attribute as shown in the bolded section below: "type": "TextBlock", "text": "{panel:Divison_name}", "id": "text-to-change", "wrap": "true", (Explanation: the "id" helps the widget script in the next steps run properly, and the "wrap" helps all the selected options show up if your user selects lots of them). Next, edit your widget's script by doing this: 3. Copy and paste the whole script below: const filterTitle = "Divison_name"; widget.on("ready", (scope, args) => { let text = `${filterTitle}: All`; try { let foundFilter; const filter = scope.dashboard.filters.$$items.forEach((item) => { if (item.levels) { item.levels.forEach((level) => { if (level.title === filterTitle) { foundFilter = level; } }); } else if (item.jaql.title === filterTitle) { foundFilter = item.jaql; } }); const { filter: myFilter } = foundFilter; /* In Sisense we have different structures of the filter. For more details about possible options, please, check this article: https://sisense.dev/guides/querying/jaqlSyntax/#filtering */ text = myFilter.members ? `${filterTitle}: ${myFilter.members.join(", ")}` : myFilter.exclude ? `${filterTitle} excludes: ${myFilter.exclude.members.join(", ")}` : myFilter.contains ? `${filterTitle} contains: ${myFilter.contains}`: `${filterTitle}: custom filter`; $("#text-to-change", element).text(text); } catch(err) { console.warn(`Filter with title ${filterTitle} was not found`); $("#text-to-change", element).text(text); } }); Change the variable filterTitle to whatever your dashboard filter's title is instead of "Divison_name" - presumably something like "Country". Save all the changes, then refresh the dashboard. Important: the structure of the JAQL filter is explained in the article below, so the script should be updated accordingly to the structure that is defined in the filter: https://sisense.dev/guides/querying/jaqlSyntax/#filteringBloX Template: Home Page
BloX Template: Home Page Introduction The Blox Home Page template allows the dashboard designers to incorporate KPIs as a card widget. Each card can be treated as a visual summary of the dashboard it is referring to. As an example, the TOTAL AMOUNT card on the left talks about KPIs that relate to the dashboard referenced in the Jump to Dashboard action button. Similarly, the TOTAL QUANTITY card can reference another dashboard. Installation Instructions Download the BloX dashboard template (BloX Template - Home Page.dash.txt -- Please change the extension back to .dash before importing) Import the template and choose the downloaded file. Edit the BloX widget as per your use case. In Items, add the date column. In Values, edit columns for KPI you would like to calculate. Please make sure to change the dashboard OID in the BloX code for Jump to dashboard configuration. For Jump to dashboard, you can change the values for "drilledDashboardDisplayType", 1 New tab 2 Popup window 3 Current tab Looking forward to having you all try this out and let us know your comments/suggestions!!Changing Measures In The Entire Dashboard Using Blox User Interface
Objective Display several related values (KPIs/Measures) in multiple widgets in the dashboard based on the user selection, in a simple and easy way, without duplicating widgets/formulas or tables in the Elasticube. As a direct result - the queries behind the widgets are extremely faster - lead to shorter loading time when the end-user needs to change the whole dashboard KPIs. Example files (works with Ecommerce Sample Elasticube): Dashboard Blox Template Blox Action Demonstration: Preparation Create a new Indicator widget and save its WidgetId. Create a custom action with this code below and name it SwitchMeasure var dimIndex = payload.data.selectVal - 1; var dimToSwapTo = payload.widget.metadata.panels[1].items[dimIndex].jaql; var widgetIds = payload.data.widgetToModify; payload.widget.dashboard.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(); widget.refresh(); }) Implementation 1. ADDING MEASURES TO SWITCH BETWEEN The formulas in the values panel define the measures your other widgets will switch between. Create a new Blox widget and add all the formulas (Up to 20 Formulas) you want to switch between into the values panel in the selection of the button Blox widget. Please pay attention to the order (top value to bottom -> left to right buttons) 2. CUSTOMIZING THE BUTTONS SELECTION WIDGET This step will define the values that are visible to the user in the button selection widget. -Add choices that reflect the ORDER and intuitive name the formulas in the values panel. -Add the widget IDs of the widgets you'd like to modify to the script of each option. You can find the widget ids in the URL when in widget editing mode. -Change the button color by editing the Background color for each option. For example, we will be switching between Revenue, Cost, and Quantity, our Blox script would be: { "style": "", "script": "", "title": "", "showCarousel": true, "titleStyle": [ { "display": "none" } ], "carouselAnimation": { "delay": 0, "showButtons": false }, "body": [ { "type": "TextBlock", "id": "", "class": "", "text": " " } ], "actions": [ { "type": "SwitchMeasure", "title": "Revenue", "style": { "backgroundColor": "#298C1A" }, "data": { "widgetToModify": [ "5f1b462e336d9c242cb9e8ea", "5f1b462e336d9c242cb9e8e5", "5f1b462e336d9c242cb9e8e7", "5f1b462e336d9c242cb9e8e9", "5f1b462e336d9c242cb9e8e8" ], "selectVal": "1" } }, { "type": "SwitchMeasure", "title": "Cost", "style": { "backgroundColor": "#A31818" }, "data": { "widgetToModify": [ "5f1b462e336d9c242cb9e8ea", "5f1b462e336d9c242cb9e8e5", "5f1b462e336d9c242cb9e8e7", "5f1b462e336d9c242cb9e8e9", "5f1b462e336d9c242cb9e8e8" ], "selectVal": "2" } }, { "type": "SwitchMeasure", "title": "Quantity", "style": { "backgroundColor": "#708AA5" }, "data": { "widgetToModify": [ "5f1b462e336d9c242cb9e8ea", "5f1b462e336d9c242cb9e8e5", "5f1b462e336d9c242cb9e8e7", "5f1b462e336d9c242cb9e8e9", "5f1b462e336d9c242cb9e8e8" ], "selectVal": "3" } } ] } 3. CUSTOMIZING THE BUTTON SELECTION ANIMATION Add the script (widget script) below to the indicator you created in the preparation section: Change the WidgetID to your indicator Widget ID Change the formula names based on the value list from the buttons selection widget Change the button’s titles based on the titles you selected the buttons selection widget //Widget Script: var ChooseYourUnselectColor = '#D3D3D3'; var Button1Color = '#298C1A'; var Button2Color = '#A31818'; var Button3Color = '#708AA5'; var widgetIndicator = '5f1b462e336d9c242cb9e8ea' widget.on('ready',function(widget, args){ var widgetOID = widgetIndicator; //Get the selected KPI object var widget = prism.activeDashboard.widgets.$$widgets.find(w => w.oid === widgetOID) if(widget.metadata.panels[0].items[0].jaql.title == 'Total Revenue'){ var textOfButtonToFormat1 = 'Cost'; var textOfButtonToFormat2 = 'Quantity'; var selectedButton = 'Revenue' $('button.btn:contains('+textOfButtonToFormat1+')').css({ transition : 'background-color 50ms ease-in-out', "background-color": ChooseYourUnselectColor }); $('button.btn:contains('+textOfButtonToFormat2+')').css({ transition : 'background-color 50ms ease-in-out', "background-color": ChooseYourUnselectColor }); $('button.btn:contains('+selectedButton+')').css({ transition : 'background-color 50ms ease-in-out', "background-color": Button1Color }); } else if (widget.metadata.panels[0].items[0].jaql.title == 'Total Cost') { var textOfButtonToFormat1 = 'Revenue'; var textOfButtonToFormat2 = 'Quantity'; var selectedButton = 'Cost' $('button.btn:contains('+textOfButtonToFormat1+')').css({ transition : 'background-color 50ms ease-in-out', "background-color": ChooseYourUnselectColor }); $('button.btn:contains('+textOfButtonToFormat2+')').css({ transition : 'background-color 50ms ease-in-out', "background-color": ChooseYourUnselectColor }); $('button.btn:contains('+selectedButton+')').css({ transition : 'background-color 50ms ease-in-out', "background-color": Button2Color }); } else { var textOfButtonToFormat1 = 'Revenue'; var textOfButtonToFormat2 = 'Cost'; var selectedButton = 'Quantity' $('button.btn:contains('+textOfButtonToFormat1+')').css({ transition : 'background-color 50ms ease-in-out', "background-color": ChooseYourUnselectColor }); $('button.btn:contains('+textOfButtonToFormat2+')').css({ transition : 'background-color 50ms ease-in-out', "background-color": ChooseYourUnselectColor }); $('button.btn:contains('+selectedButton+')').css({ transition : 'background-color 50ms ease-in-out', "background-color": Button3Color }); } })How to embed an image from an external drive in the Sisense widget (a Blox template)
This article explains how you can embed images from an external drive (Google Drive) to the Sisense widget. Note: The solution is implemented with the help of the Blox plugin and on the L2023.3 Sisense version. In order to embed an image into the Blox widget, you need to make sure that the Blox plugin is enabled on your instance. To do so: 1. Open the Admin tab. 2. Navigate to Add-ons page (Server & Hardware). 3. Toggle the Blox plugin on. Make sure it's triggered the plugins rebuild. Once the Blox plugin is enabled, navigate to Analytics tab -> create a new Blox widget and import the template attached by clicking 3 dots menu in the Blox edit mode: Once it's done, you need to update the following part of the template: <img src='URL to the image'></img> In our case, the image is hosted on the Google Drive so that we put the URL to the image on the Google Drive. It's displayed in a widget as on the screenshot below: The Blox template is attached to this guide. Feel free to use this template as an example to create your own widgets using the Blox plugin. Note: If your Google Drive URL gives a 403 error https://drive.google.com/uc?export=view&id={img-ID} change it to https://lh3.google.com/u/0/d/{img-ID} Additional Resources: Sisense Blox Tutorials Sisense Developer's Experience Embedded BloX Playground Disclaimer: Please note, that this blog post contains one possible custom workaround solution for users with similar use cases. We cannot guarantee that the custom code solution described in this post will work in every scenario or with every Sisense software version. As such, we strongly advise users to test solutions in their own environment prior to deploying them to ensure that the solutions proffered function as desired in their environment. For the avoidance of doubt, the content of this blog post is provided to you “as-is” and without warranty of any kind, express, implied or otherwise, including without limitation any warranty of security and or fitness for a particular purpose. The workaround solution described in this post incorporates custom coding which is outside the Sisense product development environment and is therefore not covered by not covered by Sisense warranty and support services.
