Change Date Granularity of a Widget using BloX
This article will cover the below options: Section 1- Buttons + Highlight Background-Color - Creating Buttons of date granularity slicing options (Alternative for Tabber plugin) OR Section 2 - Dropdown List - Creating Drop-down list with Date granularity slicing options (Alternative for Tabber plugin) ------------------------------------------------------------------------ Section 1- Buttons + Highlight Background-Color: You can follow the steps below or download the dashboard file , import it and create a custom action as described in Step 2. (Buttons-DateGranularityBloX.dash) Step 1: Create a BloX widget and use this snippet in the Editor tab: (or import this JSON file as a BloX template) Provide the widget ID to apply the change, you can apply on multiple widgets : "widgetToModify": ["5f7b91e27051052128453cdf","5f7b91e27051052128sdfcer"] "style": "", "script": "", "title": "", "titleStyle": [ { "display": "none" } ], "showCarousel": true, "body": [], "actions": [ { "type": "dynamicGranSwap", "title": "Years", "style": { "background-color": "#1D426C" }, "data": { "widgetToModify": [ "5f7b91e27051052128453cdf" ] }, "dategran": "years" }, { "type": "dynamicGranSwap", "title": "Quarters", "style": { "background-color": "#D3D3D3" }, "data": { "widgetToModify": [ "5f7b91e27051052128453cdf" ] }, "dategran": "quarters" }, { "type": "dynamicGranSwap", "title": "Months", "style": { "background-color": "#D3D3D3" }, "data": { "widgetToModify": [ "5f7b91e27051052128453cdf" ] }, "dategran": "months" }, { "type": "dynamicGranSwap", "title": "Weeks", "style": { "background-color": "#D3D3D3" }, "data": { "widgetToModify": [ "5f7b91e27051052128453cdf" ] }, "dategran": "weeks" }, { "type": "dynamicGranSwap", "title": "Days", "style": { "background-color": "#D3D3D3" }, "data": { "widgetToModify": [ "5f7b91e27051052128453cdf" ] }, "dategran": "days" }, { "type": "dynamicGranSwap", "title": "Hours", "style": { "background-color": "#D3D3D3" }, "data": { "widgetToModify": [ "5f7b91e27051052128453cdf" ] }, "dategran": "minutes" } ] } Step 2: Create a custom action with the below code and name it "dynamicGranSwap": Adjust the background color of unselected & selected buttons // Holds the chosen granularity from the selected button 'months' for example const dategran = payload.dategran; var widgetIds = payload.data.widgetToModify; //Change the background color for unselected buttons payload.widget.style.currentCard.actions.forEach(function(i){ i.style["background-color"] = '#D3D3D3' }) //Change the background color for selected buttons payload.widget.style.currentCard.actions .filter(i => i.dategran == dategran)[0].style["background-color"] = "#1D426C" //Redraw the changes payload.widget.redraw() //For each widget change the data granularity payload.widget.dashboard.widgets.$$widgets .filter(i=>widgetIds.includes(i.oid)) .forEach(function(widget){ //change the level of granularity to the chosen value from our button: 'months' for example widget.metadata.panels[0].items[0].jaql.level = dategran; //Apply changes to Mongo widget.changesMade() //Refresh widget widget.refresh() }) Section 2 - Dropdown List: You can follow the steps below or download the dashboard file , import it and create a custom action as described in Step 2. (DateGrnularityBloX.dash) Step 1: Create a BloX widget and use this snippet to create the choice-set: { "type": "Input.ChoiceSet", "id": "data.choicesetvalue", "class": "", "displayType": "compact", "value": "1", "choices": [ { "title": "Hours", "value": "minutes" }, { "title": "Days", "value": "days" }, { "title": "Weeks", "value": "weeks" }, { "title": "Months", "value": "months" }, { "title": "Quarters", "value": "quarters" }, { "title": "Years", "value": "years" } ] } Step 2: Create a custom action with the below code and name it "DateGranDrill" (provide the widget ID to apply the change - can apply on multiple widgets): var gran = payload.data.choicesetvalue // Holds the chosen granularity 'months' for example var widgets = ['5ec291c181203611649756f6','5ec291c121803611649756c7'] //Apply this action on widget ids //for each widget id widgets.forEach(myfunction) function myfunction (item) { var widgetfindid = prism.activeDashboard.widgets.$$widgets.find(w => w.oid === item) widgetfindid.metadata.panels[0].items[0].jaql.level = gran //change the level of granularity to the chosen value 'months' for example or the item location (currently 0) widgetfindid.changesMade() //apply changes to Mongo widgetfindid.refresh() //refresh the widget } Step 3: Use the action you've created in the editor under "actions" section: "actions": [ { "type": "DateGranDrill", "title": "Apply" } ]BloX Template: Dynamic Pivot Table
Introduction: The Dynamic Table template allows you to create a pivot table which dynamically sizes columns based on the size of the browser. This template is structured for 4 columns, each of which are set to 25% of the column set size, which changes based on the browser window. LARGE BROWSER WINDOW: SMALLER BROWSER WINDOW: Installation Instructions: Download the attached template Import template and choose the downloaded file: 3. Refresh your browser 4. Create a new Blox Widget and open the Templates menu under the design panel. You should now be able to see and choose the new template. If you cannot see the template in the All Templates menu, please restart the Sisense.blox service on your Sisense server. Populate the Items and Values panels with relevant fields and aggregations. Please note that any change in panel item names should be reflected in the card editor. Technical Notes CAROUSEL To show items stacked vertically instead of via the default carousel view, the carousel is set to false in row 8 of the Editor. "showCarousel": false HEADER To configure a header to only repeat for the first carousel item, see line 2 in Editor where the title is not loaded for all items with class "blox-pivot-title" which is specified for each column header TextBlock. except the first based on class. "style": ".blox-slides:first-child .blox-pivot-title{display:block; !important;} .blox-slides .blox-pivot-title{margin-bottom:10px; font-weight:bold; color:black; font-size:1em}" SEPARATOR Separator attributes (color, thickness) are specified in Configuration at line 91. Separators are then added to the top of each textbox item as well as to each Column type for vertical separators at Line 19, 23, 33, 41, 48, 54, 63, 71, 80, 89, 97 and 106 in the Editor. "separator": { "lineThickness": 1, "lineColor": "#9b9999", "padding": 25, "spacing": 40 }, PADDING To eliminate item padding to generate continuous separator lines, padding is set to -1 in line 89 in Configuration. DYNAMIC COLUMN WIDTH Each column’s width is specified to 25% of the ColumnSet at Lines 17, 42, 64 and 90. "width": "25%", Limitations DASHBOARD RENDER ITEM LIMIT Regardless of font size, 100 sets of items will render on the dashboard (items sets, not rows). Everything still exports to CSV. PDF EXPORT LIMITATION However man rows can fit on a single page (depends on font size), that's what will show in the preview. Any overflow is not thrown a subsequent page and is dropped from the PDF.Sisense BloX Custom Actions Guide
Sisense BloX 2.0 has introduced custom actions. These answer any need for interactivity that is not met by the 5 native action types. Once an action is created, its snippet is added to the “My Actions” section of the actions tab, and it can be called, updated or deleted by any designer working in Sisense. When creating a custom action, you may use pure JavaScript syntax as well as libraries used in Sisense, such as jQuery, underscore.js, and moment.js. The action can access prism and other global variables. Upon saving, the action's, code goes through Babel, transforming it into ES5 for cross-browser compliance purposes. This transformation is transparent to the designers, that will still see their original syntax any time they choose to edit the action. Payload Custom actions can use an argument named payload to access most of their relevant information. We’ll review a few important payload properties that any action will be able to access: Container: The DOM element holding the widget body. Can be very useful for jQuery selectors. Data: The action’s data property. When you define a new custom action, the best practice is to populate the data property with all attributes and variables that you would like your action to get from the card. This is also where all input fields’ values are contained. <link to populating data> Result: Contains the data panels of the specific card that triggered the action. For the full widget result set, it is better to access payload.widget.queryResult. Widget: The Sisense BloX widget object. You can use this object to access the widget’s structure and result set as well as the parent dashboard and its attributes (filters, other widgets in the dashboard, etc.) In addition to the above native properties, the payload will also contain any property that will be added to the action (see example below). Creating An Action To create a custom action, open the editor’s main menu and choose “Create Action”. The design panel Should now turn into a Javascript editor. Give your action a javascript-friendly name, preferably camel cased. Now you can define your action’s functionality. Click Next to go to the next step and define your action’s snippet. As snippets were meant to help designers add elements and actions to their cards, it’s crucial to make sure that yours includes all of the inputs that your action needs to run properly. Once saved, the action and snippets will be saved on the Sisense application DB and will be visible to all other designers in the Sisense BloX actions tab. Copy the snippet to the clipboard and paste it to an action container in the Sisense BloX editor to test it. You can find the snippets for action containers in the Actions tab’s Action Buttons section. If any inputs were included, such as the text attribute, adjust their values to this action button’s specific requirements. Now, click on one of the action buttons to trigger it. In our case, we will see out action’s output in the browser’s JavaScript console: Editing and Deleting Actions Any designer can currently edit or delete existing custom actions. To do so, find your action in My Actions section, click on the menu button on the rightmost of the screen and choose the desired option from the dropdown menu. In case you are using widgets and Blox scripts please remember: 1. Widget script: executed before the widget is initialized (when you open a dashboard or refresh the page). That's a good place to create widget event handlers, or create parameters that you only need to define once regardless of result sets. 2. BloX script tag: runs every time the BloX widget is rendered and loaded to the screen (includes filters update, screen resizing and anything that triggers redrawing of the BloX widget). This is a good place to execute scripts that should run every time the view is loaded (for example: selecting elements from the DOM and applying different manipulations on them).Implement Tabber In Blox [Linux]
Introduction Tabber provides the ability to allow users to show and hide widgets based on their interaction with the dashboard. We can use blox to accomplish the same thing. The advantage to this approach is more flexibility in how you use and display tabber, the downside is that there is more of an initial set up cost. If you need a more customizable tabber solution, follow along. Step-by-Step Guide STEP 1: MAKE YOUR WIDGETS TO BE TABBED. Start like you would if you were making a tabber by populating the dashboard with all the widgets you will be showing/hiding. Create a text file of all the widget ids and which widget they belong to, it will be handy for the next steps. For this example I created 3 pivot tables, each showing revenue along a different dimension (Category, Brand, and Age) STEP 2: MAKE THE BLOX WIDGET Create a new blox widget. Add a dropdown menu to allow people to choose which view they want. { "style": "", "script": "", "title": "", "showCarousel": true, "body": [ { "type": "Container", "items": [ { "type": "Input.ChoiceSet", "id": "selectVal", "class": "", "displayType": "compact", "choices": [ { "title": "Brand", "value": "Brand" }, { "title": "Category", "value": "Category" }, { "title": "Age", "value": "Age" } ] } ] } ], "actions": [ { "type": "Tabber", "title": "Submit" } ] } In this example, we have three different views of the same data, one by category, one by brand, and one by age. We add each as an option to our drop down. Now we need to make our custom action. STEP 3: CUSTOM ACTION Create a custom action "Tabber" with the following code: const value = payload.data.selectVal; // This is the css selector for each widget // widget[widgetid="{your widget id}"] const brand_id = 'widget[widgetid="5f87359026e1201818bf48bb"]' const category_id = 'widget[widgetid="5f87359626e1201818bf48bf"]' const age_id = 'widget[widgetid="5f8735cb26e1201818bf48c3"]' if (value == 'Brand') { $(brand_id).show() $(category_id).hide() $(age_id).hide() } else if (value == 'Category') { $(brand_id).hide() $(category_id).show() $(age_id).hide() } else { $(brand_id).hide() $(category_id).hide() $(age_id).show() } Then put this code: { "type": "Tabber", "title": "Submit" } payload.data.selectVal gets us the value of whatever option the user selected in the drop down. You'll need to change the widget id's in the example above to match those on your dashboard. Depending on which value the user selected we choose to show or hide the various widgets. Save the action and add it to your blox widget. We are done with our Blox widget. STEP 4: DASHBOARD SCRIPT At this point your blox tabber should sort of work. You can select a value and once selected it should only show the widgets that are associated with it. But the problem is that no widgets are being hidden on start up. So we'll have to add a dashboard script to hide some of the widgets. dashboard.on('domready',function(d) { const brand_id = 'widget[widgetid="5f87359026e1201818bf48bb"]' const category_id = 'widget[widgetid="5f87359626e1201818bf48bf"]' const age_id = 'widget[widgetid="5f8735cb26e1201818bf48c3"]' $(brand_id).show() $(category_id).hide() $(age_id).hide() }) As seen in the script here, we are basically just copy and pasting a small chunk of our blox action. In this case I am telling blox to show the brand widget only be default. This works since the default for the blox selection is also brand. STEP 5: THE FINISHED PRODUCT All the source files can be found here: https://github.com/nathangiusti/Sisense/tree/master/JS%20Scripts/Blox/Tabber In this folder you will find two folders, one with tabber implemented as dropdown and the other with tabber implemented as buttons. The Sample Ecommerce cube was used to build this example. Conclusion By setting up a Blox dropdown, defining a custom action, and adding a dashboard script, you can create a dynamic, interactive dashboard that adapts to user selections. 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.Dashboard Request Portal // Embedding Google Form with BloX
Solution: To manage requests for new dashboards (or any other data collection needs) you can embed a Google Form straight into a dashboard using BloX! Get started with this BloX template and follow the steps below. You can then create a dashboard to manage and track the responses by connecting to Google Sheets. Embed Your Google Form Collect Responses Straight From a Dashboard Manage and Track Requests Steps: 1. Create your Google Form 2. Configure settings to allow the form to render for any browser, even if no user is signed in to a google account. Then specify additional options. 3. Set up response collection to populate a Google Sheet. 4. Select Share then the embed <> Symbol to get iframe code 5. Modify the code for BloX Double quotes are swapped for single quotes. Before: <iframe src="https://docs.google.com/forms/d/e/1FAIpQLScxLrVbjkRK25fkSwyRUQt7QZKO9h6-pBesI-7XuEXWK5GzSQ/viewform?embedded=true" width="700" height="520" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe> After: <iframe src='https://docs.google.com/forms/d/e/1FAIpQLScxLrVbjkRK25fkSwyRUQt7QZKO9h6-pBesI-7XuEXWK5GzSQ/viewform?embedded=true' width='640' height='2931' frameborder='0' marginheight='0' marginwidth='0'>Loading…</iframe> 6. Import the BloX template. 7. Using the template, replace the text in line 20 with your modified code. You're all set! 8. To take it even further, connect to the google sheet and build a dashboard to monitor and track requests.Jump To Dashboard (JTD) BloX Close Button - Linux
Introduction When using the Jump to Dashboard (JTD) feature, the modal window can only be closed by clicking outside of it. This guide explains how to use Blox to create a button inside the modal, allowing users to close it easily. Step-by-Step Guide Step 1: Create a BloX Widget Add a BloX widget inside the JTD dashboard (the dashboard users jump to). Example code is below: { "style": "", "script": "", "title": "", "titleStyle": [ { "display": "none" } ], "showCarousel": false, "body": [], "actions": [ { "type": "CloseIframe", "title": "Close", "style": { "background-color": "#115740" } } ] } Step 2: Create a BloX Custom Action Add a custom action "CloseIframe" in BloX and include the following script: $('.md-overlay', window.parent.document).click(); This script triggers the close action when the button is clicked. Note: You can replace the button with an image (e.g., an "X" icon) and attach the close action to it. Conclusion By adding a BloX button or image with a custom action, users can close the JTD modal window without clicking outside. This enhances usability and improves navigation within the dashboard. 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 Template: Currencies Conditional (Crypto)
I have created a BloX template called Crypto Conditional to display currencies changes. This template will display the comparison of data value and an indicator to show it recent behavior The BloX display the data directly from sisense elastic data hub where data is constantly refreshed. The 2nd row of data display percentage change from the previous data change. Base off the percentage change (positive or negative) it will display the red or green arrow This gives a clear definition on which image to use when the number are within each range. The class "conditional_data" is then set above the text value of your container as well as the class "conditional_image is set above the image url tag that you want to display For this BloX example, I have created multiple class to separate each currency i.e: conditional_data 1 and conditional_image 1 Installation Instructions: 1. Download the attached template 2. Click the 3dots on the right in a Blox widget, click import template and drag it in. 3. You should now be able to see and choose the new template. If you cannot see the template in the All Templates menu, please restart the Sisense.blox service on your Sisense server. 4. Populate the Items and Values panels with relevant fields and aggregations. Please note that any change in panel item names should be reflected in the card editor.BloX Template: Indicators With Sparkline
Introduction In many use cases, the most current state of your KPI is as important as the trend of that KPI over time (for example, the trend of stock price, impressions or reach of your social media campaigns, etc), so you want to show both an indicator and a sparkline chart next to it. Creating multiple indicator and line chart widgets is not the most efficient way to implement this requirement considering the performance (multiple widgets and queries) and the complexity of the UI design (fonts size, layout etc). The Indicators with Sparklines template allows you to implement this requirement easily using BloX. This template is structured in 3 columns, one for the sparkline (shows history of the value), one for the indicator (shows the current value), and one for the name of the KPI. Installation Instructions 1. Download the template. Change the extension from txt to json 2. Import the template and choose the downloaded file. 3. Refresh your browser. 4. Create a new Blox Widget and open the Templates menu under the design panel. You should now be able to see and choose the new template. If you cannot see the template in the All Templates menu, please restart the Sisense.Blox service on your Sisense server. 5. Populate the Items and Values panels with relevant fields and aggregations. Please note that any change in panel item names should be reflected in the card editor. In Items, add the date column. In Values, add two columns for each KPI: one column for the unfiltered KPI to show the trendline, e.g. SUM(Impressions), and another column for the current value of the KPI using measured value, e.g. (SUM(Impressions), Date) where Date is set to Today. Technical Notes CAROUSEL & CAROUSEL BUTTON The "showCarousel" parameter should always be set to True, otherwise, the entire block will be repeated vertically for all the different dates in the data (all the numbers will be exactly the same). To remove the carousel button, please use this widget script below. widget.on('ready', function(sender, ev){ //remove carousel button $('.carousel-button', element).remove(); }); COLORS To modify the color of the sparkline, search for this piece of code in the Editor. You can then modify the line-color, fill-color, and point-color. You can also modify other parameters such as the width of the graph. <span class='blox-sparkline' type='line' line-color='#3a5694' width='220' height='40' line-width='3' fill-color='#c6d8f8' point-color:'#28467a'>{spark:Organic}</span> To change the color of the fonts, search for this piece of code in the Editor. You can then modify the color paramater. "style": { "color": "#395795" } PDF EXPORT This template works with PDF Export. To hide the carousel arrow buttons: place below the "showCarousel": true, "carouselAnimation": { "showButtons": false },Relative Date Filter in Blox
Part 1: Preparation And Setup Download the BloX Template Here Import the Template into BloX (tutorial here) Create an action called "RelativeDate" Add the code below to the action and save it. if (payload.text == "Year" ) { prism.activeDashboard.filters.$$items[0].jaql.level = "years"; prism.activeDashboard.filters.$$items[0].jaql.filter.last.count = 1; prism.activeDashboard.filters.$$items[0].jaql.filter.last.offset = 0; } else if (payload.text == "Qtr" ) { prism.activeDashboard.filters.$$items[0].jaql.level = "quarters"; prism.activeDashboard.filters.$$items[0].jaql.filter.last.count = 1; prism.activeDashboard.filters.$$items[0].jaql.filter.last.offset = 0; } else if (payload.text == "Month" ) { prism.activeDashboard.filters.$$items[0].jaql.level = "months"; prism.activeDashboard.filters.$$items[0].jaql.filter.last.count = 1; prism.activeDashboard.filters.$$items[0].jaql.filter.last.offset = 0; } else if (payload.text == "LastMonth" ) { prism.activeDashboard.filters.$$items[0].jaql.level = "months"; prism.activeDashboard.filters.$$items[0].jaql.filter.last.count = 1; prism.activeDashboard.filters.$$items[0].jaql.filter.last.offset = 1; } else if (payload.text == "Week" ) { prism.activeDashboard.filters.$$items[0].jaql.level = "weeks"; prism.activeDashboard.filters.$$items[0].jaql.filter.last.count = 1; prism.activeDashboard.filters.$$items[0].jaql.filter.last.offset = 0; } //Add widgetsIDs that you would like to update var widgets = ['5efb8c3ad957252878a2bb7d','5efb8c5dd957252878a2bb7f'] //Apply this action on widget ids //for each widget id widgets.forEach(myfunction) function myfunction (item) { var widgetfindid = prism.activeDashboard.widgets.$$widgets.find(w => w.oid === item) widgetfindid.changesMade() //apply changes to Mongo widgetfindid.refresh() //refresh the widget } CONFIGURATION STEP A: DEFINING FILTER Add a filer on a Date Dimension using the “Time Frame” option. STEP B: CONFIGURING YOUR ACTION The action has this format: This code is in the blox “Editor” section. Add the items you want to filter on. "type": "ActionSet", "actions": [ { "type": "RelativeDate", "text": "Week", "title": "Current Week" }, { "type": "RelativeDate", "text": "Month", "title": "Current Month" }, This code is in the action. Add the “if” portion to correspond with the “ActionSet”. if (payload.text == "Year" ) { prism.activeDashboard.filters.$$items[0].jaql.level = "years"; prism.activeDashboard.filters.$$items[0].jaql.filter.last.count = 1; prism.activeDashboard.filters.$$items[0].jaql.filter.last.offset = 0; } else if --- See the code in the action Apply and enjoy!Using BloX Buttons - Changing Date Granularity Of Widgets In A Dashboard
This article covers the steps to change the date granularity of a widget using BloX actions along with the dropdown input of BloX. In this post, we shall achieve the functionality with the help of single-select BloX buttons that has some color animations. STEP 1: CREATING ACTION WITH LIST OF WIDGETS TO BE AFFECTED On a dashboard, create a BloX widget. Using the BloX widget, create an action with code below and name the action "dategran_buttons". Note: you need to include the widget IDs of all the widget you'd want to get affected using the BloX date granularity changer. const dategran = payload.dategran; // Holds the chosen granularity from the selected button 'months' for example var widgets = ['5f33224e15e4d70d748910f6','5f34d3218a3c0d1bc43ddb48']; //Include the widgetsIDs here as array of strings ['widgetID_1', 'widgetID_2'] /*for each widget id, we grab the granularity from the selected button, apply it to all the widgets listed in the array above, save the changes and then refresh*/ widgets.forEach(myfunction); function myfunction (item){ var widgetfindid = prism.activeDashboard.widgets.$$widgets.find(w => w.oid === item) widgetfindid.metadata.panels[0].items[0].jaql.level = dategran //change the level of granularity to the chosen value from our button: 'months' for example widgetfindid.changesMade() //apply changes to MongoDB - the application database widgetfindid.refresh() //refresh the widget }; STEP 2: CREATING BLOX LAYOUT WITH BUTTONS Now, to build the buttons with the appropriate values of date granularity, download the BloX template from here or use the code below and paste it in the 'Editor' tab of BloX widget. In this example, we will have 4 buttons in the following order - Quarters, Months, Weeks and Days. Each button will have the action type as 'dategran_buttons' (the BloX action we created in the last step) and also will carry the date granularity in a json key "date_gran' - for example "date_gran":"months" on the button for Months. { "style": "", "script": "", "title": "", "showCarousel": true, "body": [ { "type": "Container", "items": [ { "type": "TextBlock", "horizontalAlignment": "center", "size": "medium", "spacing": "small", "color": "black", "text": "Choose Date Granularity" } ] } ], "actions": [ { "type": "dategran_buttons", "title": "Quarters", "style": { "backgroundColor": "#1D426C" }, "dategran": "quarters" }, { "type": "dategran_buttons", "title": "Months", "style": { "backgroundColor": "#1D426C" }, "dategran": "months" }, { "type": "dategran_buttons", "title": "Weeks", "style": { "backgroundColor": "#1D426C" }, "dategran": "weeks" }, { "type": "dategran_buttons", "title": "Days", "style": { "backgroundColor": "#1D426C" }, "dategran": "days" } ] } STEP 3: COLOR ANIMATION ON THE BUTTONS USING A WIDGET THAT IS AFFECTED Now the functionality of button helping to change the date granularity in the list of widgets whose widgetIDs you pasted in the action will work as expected. Now, let us get the buttons to animate in the desired fashion which is: 'when a button is clicked, the clicked button has SELECTED color and all other buttons take the UNSELECTED color. Before you begin implementing this step, get the hex codes of the selected and unselected colors as per your UI preference. In one of the widgets (line/bar/column) that will be affected by the BloX buttons, paste the code below into the script editor of that widget. This logic can be updated: The functionality has been refined such that a button when in clicked state cannot be clicked again and will be unavailable for any click action. For example, when 'Month' is selected which modifies all the widgets, then only the 3 other buttons are now clickable. Note: Pasting this into one of the widgets will be enough. Also, in the variable 'widgetID' used in the code below, replace it with the current widget whose script editor you're making use of. This should be available in the URL of the script editor you are in. var ChooseYourUnselectColor = '#D3D3D3'; //Unselected Color var ChooseYourSelectedColor = '#1D426C'; //Selected Color var widgetID = '5f33224e15e4d70d748910f6'; //Current Widget which runs this script widget.on('ready',function(widget, args){ var widgetOID = widgetID; //Get the selected date granularity var widget = prism.activeDashboard.widgets.$$widgets.find(w => w.oid === widgetOID) if(widget.metadata.panels[0].items[0].jaql.level == 'quarters'){ var textOfButtonToFormat1 = 'Months'; var textOfButtonToFormat2 = 'Weeks'; var textOfButtonToFormat3 = 'Days'; var selectedButton = 'Quarters'; $('button.btn:contains('+textOfButtonToFormat1+')').css({ transition : 'background-color 50ms ease-in-out', "background-color": ChooseYourUnselectColor, "pointer-events": "auto" }); $('button.btn:contains('+textOfButtonToFormat2+')').css({ transition : 'background-color 50ms ease-in-out', "background-color": ChooseYourUnselectColor, "pointer-events": "auto" }); $('button.btn:contains('+textOfButtonToFormat3+')').css({ transition : 'background-color 50ms ease-in-out', "background-color": ChooseYourUnselectColor, "pointer-events": "auto" }); $('button.btn:contains('+selectedButton+')').css({ transition : 'background-color 50ms ease-in-out', "background-color": ChooseYourSelectedColor, "pointer-events": "none" }); } if(widget.metadata.panels[0].items[0].jaql.level == 'months'){ var textOfButtonToFormat1 = 'Quarters'; var textOfButtonToFormat2 = 'Weeks'; var textOfButtonToFormat3 = 'Days'; var selectedButton = 'Months'; $('button.btn:contains('+textOfButtonToFormat1+')').css({ transition : 'background-color 50ms ease-in-out', "background-color": ChooseYourUnselectColor, "pointer-events": "auto" }); $('button.btn:contains('+textOfButtonToFormat2+')').css({ transition : 'background-color 50ms ease-in-out', "background-color": ChooseYourUnselectColor, "pointer-events": "auto" }); $('button.btn:contains('+textOfButtonToFormat3+')').css({ transition : 'background-color 50ms ease-in-out', "background-color": ChooseYourUnselectColor, "pointer-events": "auto" }); $('button.btn:contains('+selectedButton+')').css({ transition : 'background-color 50ms ease-in-out', "background-color": ChooseYourSelectedColor, "pointer-events": "none" }); } if(widget.metadata.panels[0].items[0].jaql.level == 'weeks'){ var textOfButtonToFormat1 = 'Months'; var textOfButtonToFormat2 = 'Quarters'; var textOfButtonToFormat3 = 'Days'; var selectedButton = 'Weeks'; $('button.btn:contains('+textOfButtonToFormat1+')').css({ transition : 'background-color 50ms ease-in-out', "background-color": ChooseYourUnselectColor, "pointer-events": "auto" }); $('button.btn:contains('+textOfButtonToFormat2+')').css({ transition : 'background-color 50ms ease-in-out', "background-color": ChooseYourUnselectColor, "pointer-events": "auto" }); $('button.btn:contains('+textOfButtonToFormat3+')').css({ transition : 'background-color 50ms ease-in-out', "background-color": ChooseYourUnselectColor, "pointer-events": "auto" }); $('button.btn:contains('+selectedButton+')').css({ transition : 'background-color 50ms ease-in-out', "background-color": ChooseYourSelectedColor, "pointer-events": "none" }); } if(widget.metadata.panels[0].items[0].jaql.level == 'days'){ var textOfButtonToFormat1 = 'Months'; var textOfButtonToFormat2 = 'Weeks'; var textOfButtonToFormat3 = 'Quarters'; var selectedButton = 'Days'; $('button.btn:contains('+textOfButtonToFormat1+')').css({ transition : 'background-color 50ms ease-in-out', "background-color": ChooseYourUnselectColor, "pointer-events": "auto" }); $('button.btn:contains('+textOfButtonToFormat2+')').css({ transition : 'background-color 50ms ease-in-out', "background-color": ChooseYourUnselectColor, "pointer-events": "auto" }); $('button.btn:contains('+textOfButtonToFormat3+')').css({ transition : 'background-color 50ms ease-in-out', "background-color": ChooseYourUnselectColor, "pointer-events": "auto" }); $('button.btn:contains('+selectedButton+')').css({ transition : 'background-color 50ms ease-in-out', "background-color": ChooseYourSelectedColor, "pointer-events": "none" }); } }); To see this demo in action in your own Sisense environment, first create the BloX action using the Step 1 and then, use this dash file (Make sure you have the Sample Ecommerce elasticube available - one of the sample elasticubes that comes with your initial installation of Sisense). Also, check the widgetIDs in the BloX action you created (Step1) and in the script editor of the column chart on the dashboard (Step3). BONUS: If you want to automatically change the date granularity on all the widgets which have a time series slicer instead of grabbing the specific widget ids, then replace the code when creating the action (In Step 1) with the code below: const dategran = payload.dategran; // Holds the chosen granularity 'months' for example var widgets = prism.activeDashboard.widgets.$$widgets; //get all the widgets in the dashboard //for each widget widgets.forEach(myfunction); function myfunction (item){ //checking if the widget has a slicer (valid dimension in Category/X-Axis panels of the chart) and if it does, checking if it contains a date grouping if(typeof(item.metadata.panels[0].items[0]) !== 'undefined' && typeof(item.metadata.panels[0].items[0].jaql.level) !== 'undefined'){ var currentGran = item.metadata.panels[0].items[0].jaql.level; //gettting the current granularity if(currentGran === 'days'||currentGran === 'weeks'||currentGran === 'months'||currentGran === 'quarters'){ item.metadata.panels[0].items[0].jaql.level = dategran //change the level of granularity to the chosen value 'months' for example item.changesMade() //apply changes to Mongo item.refresh() //refresh the widget } } };
