cancel
Showing results for 
Search instead for 
Did you mean: 
intapiuser
Community Team Member
Community Team Member

Introduction:

The below article will provide a BloX template that will help you create a dropdown filter
mceclip0.png
 
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:

  1. Create a JSON file with the code provided below
  2. Open your dashboard and add the dashboard filter you would like to affect
  3. Open a BloX widget. Click on the menu icon -> Import template, then choose the created file -
    mceclip0.png
  4. Refresh your browser
  5. Create a new BloX widget and choose the imported template –
    mceclip1.png
  6. Add the field you would like to filter by under 'Items' section
  7. 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
  8. 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)
  9. 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 –
 mceclip2.png 
10. Please note that the above ID field ("id": "data.filters[0].filterJaql.members[0]") relates to the below
       action path -
 mceclip1.png
  
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 -
mceclip4.png
 
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": ""
    }
}
Version history
Last update:
‎05-17-2024 05:44 AM
Updated by:
Community Toolbox

Recommended quick links to assist you in optimizing your community experience:

Developers Group:

Product Feedback Forum:

Need additional support?:

Submit a Support Request

The Legal Stuff

Have a question about the Sisense Community?

Email [email protected]

Share this page: