on - edited on by
Liliia_DevX
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
- 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).
- 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 -
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": ""
}
}