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.
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/#filteringCustomizing the size of a Blox pop-up using a script on Linux
Customizing the size of a Blox pop-up using a script on Linux Introduction This article provides a step-by-step guide on adjusting the size of a Blox pop-up using a script applicable to all modals in Blox. This customization can enhance the appearance of your dashboard and ensure all elements fit well within the design. Step-by-Step Guide Access the Blox Editor: Open your Sisense dashboard and navigate to the Blox widget where you want to adjust the show card height. Add a Custom Script to the "script" Section of the Blox Editor: Insert the following script to adjust the width and height of the show card: const _bloxModalWidth = '50vw'; // Adjust the width as needed const _bloxModalHeight = '50vh'; // Adjust the height as needed (function addStyleToHead() { const styleId = 'blox-show-card-modal-style'; if (!document.getElementById(styleId)) { const cssContent = '.blox-show-card-modal > div { width: ' + _bloxModalWidth + ' !important; height: ' + _bloxModalHeight + ' !important; }'; const styleElement = document.createElement('style'); styleElement.type = 'text/css'; styleElement.appendChild(document.createTextNode(cssContent)); document.head.appendChild(styleElement); } })(); After implementing the changes, preview the dashboard to ensure the widget view meets your expectations.If you prefer not to use a script, you can adjust the style of the form itself to better fit within the pop-up. Modify the CSS properties directly in the Blox editor to achieve the desired dimensions. Conclusion By following these steps, you can customize the height and width of a show card in Sisense Blox to better fit your dashboard design. Whether you use a script or adjust styles directly, these methods provide flexibility in managing the appearance of your dashboard elements. 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.Blox - Multi-Select Dropdown List Filter
Blox - Multi-Select Dropdown List Filter This article will take you step by step on how to create a multi-select dropdown filter using Blox and JavaScript. ElastiCube: 1. For each field you want to use in multi-select filter, you need to add a custom column. For instance, in our Sample ECommerce ElastiCube, add a custom column to the "Category" table: For Sisense on Windows add the below string in order to create the column: '<li><input type="checkbox" />'+[Category].[Category]+'</li>' For Sisense on Linux: '<li><input type=checkbox>'+[Category].[Category] + '</li>' 2. Change its name to [CategoryHTML]. 3. Do the same for the column [Country] from the table [Country] and name it [CountryHTML]. 3. Perform the 'Changes Only' build. Dashboard: 1. Download the dashboard attached and import it to your application. 2. Create a custom action in BloX and name it MultiBoxSelection: 3. Add the action's code below: var outputFilters = []; var widgetid = payload.widget.oid; var widgetElement = $('[widgetid="' + widgetid + '"]'); widgetElement.find($('blox input:checked')).parent().each(function () { var values = $('.fillmeup').attr('value') + $(this).text(); $('.fillmeup').attr('value', values); }).each((i, lmnt) => { outputFilters.push($(lmnt).text()); }) payload.widget.dashboard.filters.update( { 'jaql': { 'dim': payload.data.dim, 'title': payload.data.title, 'filter': { 'members': outputFilters }, 'datatype': 'text' } }, { 'save': true, 'refresh': true } ) 4. Action's snippet: { "type": "MultiBoxSelection", "title": "Apply", "data": { "dim": "FilterDimension", "title": "FilterTitle" } } 5. Add the widget's script. For each widget you need to change identifiers [CategoryList] and [CategoryItems] - these identifiers should be unique per each widget on a page: widget.on('ready', function() { var checkList = document.getElementById('CategoryList'); var items = document.getElementById('CategoryItems'); checkList.getElementsByClassName('anchor')[0].onclick = function(evt) { if (items.classList.contains('visible')) { items.classList.remove('visible'); items.style.display = "none"; } else { items.classList.add('visible'); items.style.display = "block"; } } items.onblur = function(evt) { items.classList.remove('visible'); } }); widget.on('processresult', function(a, b) { b.result.slice(1, b.result.length).forEach(function(i) { b.result[0][0].Text = b.result[0][0].Text + ' ' + i[0].Text }) }); These identifiers should be the same as you have in the widget in the value of [text]: { "type": "TextBlock", "spacing": "large", "id": "", "class": "", "text": "<div id='CategoryList' class='dropdown-check-list' tabindex='100'> <span class='anchor'>Select Category</span> <ul id='CategoryItems' class='items'>{panel:CategoryHTML}</ul> </div>" } 5. Click Apply on the widget and refresh the dashboard. Important Notes: Make sure you have the Category in the items (The new column was created) and name the Item "Category". Make sure you have a Category Filter (The actual category field and name it "Category") on the dashboard level. Make sure to replace the field and table names with the relevant field/table in the Action, in the editor of the Blox widget in the Blox items and in the dashboard filter. 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 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 Sisense warranty and support services.Quickly Add Unique Identifier to Blox Action Buttons Without Modifying Blox Template
A customer recently had the unusual request for a method to select and distinguish, via a CSS selector used within a custom Javascript action, for a specific Blox buttons in a existing Blox widget that contained multiple identical buttons, identical in inner text and all other parameters, without adding any new lines to the Blox template to add unique identifiers.BloX 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!!
