BloX - Dropdown list as a dashboard filter | Blox

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": ""
    }
}

intapiuser

Posted 3 years ago·Last reply 1 year ago

6 comments

PaulN052

·1 year ago

Hi Liliia_DevX,

Thanks for sharing these various code segments. I went ahead and tested out your updated version and got it to work in my environment. However, I'm looking to have just the drop down act as the filter. I would like to edit the following code so that I can just select the choice from a drop down list of specific dates, so that my list of items within the blox widget update accordingly (not at the dashboard level). This is the following segment that I am trying to enhance. Thank you.

{

"type": "Input.ChoiceSet",

"id": "data.filters[0].filterJaql.members[0]",

"class": "",

"displayType": "compact",

"choices": "{choices: Category}"

}

Liliia Kislitsyna

Admin1 year ago

Hi Astroraf

To make the original template work as you described, please ensure you disable the dashboard filter for the Blox widget, as illustrated in the screenshot below. Otherwise, your Blox widget list will be filtered accordingly, and you might not see the full list of values.

Regards, Lily

Rafael Ferreira

·1 year ago

Hi Liliia_DevX,

Thank you for the solution, when I pick an option, and then want to use another option, is there a way to achieve this?

I am just thinking about what clients would want out of this filter option from BloX and what we can show them.

Liliia Kislitsyna

Admin1 year ago

Hi Astroraf ,

Please try to use the template added below along with the dashboard based on the "SampleECommerce" ElastiCube. Choose "Category" from the "Category" table.

{
    "showCarousel": true,
    "carouselAnimation": {
        "delay": 0,
        "showButtons": false
    },
    "body": [
        {
            "type": "Container",
            "style": {
                "justify-items": "center",
                "align-items": "center"
            },
            "items": [
                {
                    "type": "TextBlock",
                    "spacing": "medium",
                    "size": "large",
                    "text": "Choose a Category",
                    "style": {
                        "text-align": "center",
                        "font-weight": "600"
                    }
                },
                {
                    "type": "Container",
                    "spacing": "small",
                    "items": [
                        {
                            "type": "Input.ChoiceSet",
                            "id": "data.filters[0].filterJaql.members[0]",
                            "class": "",
                            "displayType": "compact",
                            "style": {
                                "align-self": "center"
                            },
                            "choices": "{choices:Category}"
                        }
                    ]
                }
            ]
        }
    ],
    "actions": [
        {
            "type": "Filters",
            "title": "Filter!",
            "data": {
                "filters": [
                    {
                        "panelName": "Category",
                        "filterJaql": {
                            "explicit": true,
                            "members": [
                                ""
                            ]
                        }
                    }
                ]
            }
        },
        {
            "type": "Filters",
            "title": "Clear",
            "data": {
                "filters": [
                    {
                        "panelName": "Category",
                        "filterJaql": {
                            "explicit": true,
                            "all": true
                        }
                    }
                ]
            }
        }
    ]
}

It works a bit in a different way because it has a "Clear" button to clear selection before applying a new one. I've tested it on L2023.11. Hope it helps to achieve your goal.

Best Regards, Lily

DRay

·1 year ago

Hi Astroraf,

Let me see if Liliia_DevX can help with this.

Rafael Ferreira

·1 year ago

Hi intapiuser ,

Thank you for the script and the example for this Blox dropdown, unfortunately, I cannot click on the button or make any selections. Do you know why this would be? I am using the exact script you provided and saved the template as a JSON file. When the template shows up I can pick and use what field I want the filter option to be but when I apply this filter Blox Widget, I cannot make another selection.