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 },Using BloX To Dynamically Change A Dimension
The goal is to allow users to dynamically choose a dimension. The below script will work with a table or a pivot table, but it can be modified to work with other widget types as well. Step 1 Create a BloX widget with the below script. It will consist of a simple drop down input and an action button. { "style": "", "script": "", "title": "", "showCarousel": true, "carouselAnimation": { "delay": 0, "showButtons": false }, "body": [ { "type": "Container", "items": [ { "type": "TextBlock", "id": "", "class": "", "text": "Choices", "style": { "margin-left": "100px", "margin-right": "100px" } }, { "type": "Input.ChoiceSet", "id": "dropdownVal", "class": "", "displayType": "compact", "value": "1", "choices": "{choices:colName}", "style": { "margin-left": "100px", "margin-right": "100px" } } ] } ], "actions": [ { "type": "Modify Pivot", "title": "Change Dimension" } ] } Please note: In the above example, the drop down choices are coming from the field 'ColName.' The values in ColName exactly match the target field names in the ElastiCube. The drop down choices could be input manually, but they must exactly match the target field names in the ElastiCube. Step 2 Create a table, or pivot table. In this example, I have added two columns. The title in the example is 'Test Widget Title.' Step 3 Using the console, determine the widget index and target panel. First, open the developer console and type: prism.activeDashboard.widgets.$$widgets You will see a list of all widgets on a dashboard. Look for the correct title or widget type. Note the widget index (it is 6, in this example). Second, navigate to: prism.activeDashboard.widgets.$$widgets[6].metadata.panels There, note the index of the panel we would like to modify. In this example, we want to modify a column, that is the first object in panels (index = 0). Finally, open 'Items.' Each item is a field that was added to the columns panel in the target widget. Note the index of the field we want to change. In the example, we want to change the second column (index = 1). Step 4 Create a custom BloX action to target the correct panel item and change it to the user input value. Use the below script for the action: //Variable that stores the user's input var dropdownInput = payload.data.dropdownVal; //Variable that stores the target widget var widget = prism.activeDashboard.widgets.$$widgets[6]; widget.metadata.panels[0].items[1].field.id = "[Exports." + dropdownInput + "]"; widget.metadata.panels[0].items[1].jaql.dim = "[Exports." + dropdownInput + "]"; widget.metadata.panels[0].items[1].jaql.title = dropdownInput; widget.metadata.panels[0].items[1].jaql.column = dropdownInput; //Refresh widget widget.refresh(); The following lines will need to match the incidences from step three. var widget = prism.activeDashboard.widgets.$$widgets[6]; widget.metadata.panels[0].items[1].x You can see the above custom action changes four things about the panel item. Please note: the below lines must match the table name where the field resides. Replace it with the appropriate table name: "[Exports." That's it! Apply all changes and the drop down filter should change the field in the second column of the table! If you wish to change a dimension in a different chart, be sure to look for the correct panel in step 3.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.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.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 IFrame
Introduction: The Dynamic iFrame template contains an iFrame element whose hosted page's URL is set by data, fetched from the Elasticube, or contains it. Since the URL is data-related, the content of the iFrame would be sensitive to filters. Please note: It is recommended to use this template with single-selection filters, or with a limited number of possible items. Installation Instructions: 1. Download the attached template. 2. Extract the json file into your BloX template directory: C:\Program Files\Sisense\app\blox-service\resources\templates Note: If a template of the same name already exists, make sure to rename the file name. 3. Refresh your browser. 4. Create a new Blox Widget and open the Templates menu under the design pane. 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 panel with the relevant fields that contain the URL, or its components. When adjusting the template to yout use case, please note: Any change in panel item names should be reflected in the card editor. The suggested source URL consists of a fixed part and a dynamic part. You can use this approach to refer to different entities within the same base URL. In our example, these are different pages within Wikipedia, but those can also be different accounts in Salesforce or different tickets in Zendesk, provided the appropriate id's. If the field contains the full URL, you may use it alone in the iFrame's SRC attribute:Blox Dropdown Placeholder
By default, BloX will use the first element in your dropdown as the default text in the dropdown box. Instead of this value, this method adds a different default non-selectable value. Steps For Implementation Add the addPlaceholder class to your Input.ChoiceSet Add the following script to the script of your BloX widget $('.addPlaceholder').prepend('<option value=\"\" disabled selected>Select Filter</option>') You can update the text "Select Filter" in the script above to customize the placeholder text.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 }); } })BloX - Dropdown list as a dashboard filter
Introduction: The below article will provide a BloX template that will help you create a dropdown filter The ‘Dynamic Dropdown’ snippet allows you to populate your dropdown list with a list of values from a specific field (for example, list of Brands). The structure of the attached template is 3 columns, with 3 containers (in order to place the 3 components in one row, and not one below the other). Instructions: Create a JSON file with the code provided below Open your dashboard and add the dashboard filter you would like to affect Open a BloX widget. Click on the menu icon -> Import template, then choose the created file - Refresh your browser Create a new BloX widget and choose the imported template – Add the field you would like to filter by under 'Items' section Widget's editor section: Replace the "Brand" in: "choices" with the exact field name you have placed in the panel in order to get the list of values (you can use ctrl+f to find it). For example: "{choices:Brand}" with" {choices:My_Field}" Replace the "Brand" of "filterName": "Brand" with the exact name of the dashboard filter you have added and want to affect Optional: Go to the widget's 'Filters' tab and toggle off the "dashboard filters" so it will not affect this widget (this way you will be able to see the entire list of values anytime) If you would like to display a specific value as a default one (instead of the first value in your list), you can write the exact name of the value here – 10. Please note that the above ID field ("id": "data.filters[0].filterJaql.members[0]") relates to the below action path - CAROUSEL In order to show the widget’s components only once, and avoiding a stacked view according to our number of values, we are showing the carousel but hiding the arrows - Additional Configuration: If you want BloX widget to be populated with the current filter value, please try to use the script below. You need to update filter index if it is not the first filter on the dashboard in …dashboard.filters.$$items[x]. widget.on('ready', ()=>{ $(`widget[widgetid="${widget.oid}"]`).find('select').val(widget.dashboard.filters.$$items[0].jaql.filter.members[0]) }) DynamicChoiceDropDown.json: { "card": { "style": {}, "script": "", "title": "", "titleStyle": [ { "display": "none" } ], "showCarousel": true, "carouselAnimation": { "showButtons": false }, "body": [ { "type": "Container" }, { "type": "ColumnSet", "separator": false, "spacing": "default", "columns": [ { "type": "Column", "width": "170px", "items": [ { "type": "TextBlock", "size": "small", "weight": "regular", "wrap": true, "text": "Choose a Brand", "style": { "color": "black", "padding-left": "10px", "margin-left": "10px", "backgroundColor": "white" } } ] }, { "type": "Column", "spacing": "none", "width": "175px", "items": [ { "type": "Container", "spacing": "none", "width": "150px", "items": [ { "type": "Input.ChoiceSet", "id": "data.filters[0].filterJaql.members[0]", "class": "", "value": "Reseller", "displayType": "compact", "choices": "{choices:Brand}" } ] } ] }, { "type": "Column", "spacing": "none", "width": "175px", "items": [ { "type": "Container", "spacing": "none", "width": "80px", "items": [ { "type": "ActionSet", "margin": "0px", "padding": "0px", "actions": [ { "type": "Filters", "title": "Apply", "data": { "filters": [ { "filterName": "Brand", "filterJaql": { "explicit": true, "members": [ "" ] } } ] } } ] } ] } ] } ] } ], "actions": [] }, "config": { "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": "none", "buttonSpacing": 20, "actionsOrientation": "horizontal", "actionAlignment": "left", "showCard": { "actionMode": "inline", "inlineTopMargin": 16, "style": "default" } }, "spacing": { "default": 5, "none": 0, "small": 20, "medium": 60, "large": 20, "extraLarge": 40, "padding": 0 }, "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": 49, "imageBaseUrl": "" } }
