Forum Discussion

Sly's avatar
Sly
Data Storage
09-30-2022

issue creating a dropdown filter

Hi i have been trying to create a dropdown filter for over 600 campaigns but seem to have an issue once i have imported the template as it defaults back to the Blox template "Welcome to Blox" the cod...
AI & Machine Learning
Blox
Sly's avatar
Sly
Data Storage
09-30-2022

Hi HamzaJ  thank you for your willingness to assist. 

Please see below my script and the items field is called "name". 

{
"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 Campaign",
"style": {
"color": "red",
"padding-left": "10px",
"margin-left": "10px",
"backgroundColor": "red"
}
}
]
},
{
"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:name}"
}
]
}
]
},
{
"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": "{panel:name}",
"filterJaql": {
"explicit": true,
"members": [
""
]
}
}
]
}
}
]
}
]
}
]
}
]
}
],
"actions": []
}
HamzaJ's avatar
HamzaJ
Data Integration
09-30-2022

Hi Sly 

This is incorrect:

"filterName": "{panel:name}",
 
It should not be dynamic it should be the name of the filter. In this case it should just be "name":
"filterName": "name",
 
Make sure that on a dashboard-level the filter is defined the same way
 
  • Sly's avatar
    Sly
    Data Storage
    09-30-2022

    Thank you HamzaJ. 

    please note i have changed it and now this is my code:

    {
    "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 Campaign",
    "style": {
    "color": "red",
    "padding-left": "10px",
    "margin-left": "10px",
    "backgroundColor": "red"
    }
    }
    ]
    },
    {
    "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:name}"
    }
    ]
    }
    ]
    },
    {
    "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": "name",
    "filterJaql": {
    "explicit": true,
    "members": [
    ""
    ]
    }
    }
    ]
    }
    }
    ]
    }
    ]
    }
    ]
    }
    ]
    }
    ],
    "actions": []
    }
     
    In regards to the dashboard level, im not too sure if this is what you mean. 
     
    please see attached image where image 1 is on the main dashboard with a filter and image 2 is the dilter on the blox widget 
     
    and the output is still empty 
     
    • HamzaJ's avatar
      HamzaJ
      Data Integration
      09-30-2022

      Hmm...

      I copied pasted your code and for me it works. I can pick an option, press apply and the filter gets adjusted (in the dashboard, in the widget it does not work). 

      Btw. where is the drop-down in your image? Did you center it? If you do not see it all, try adjusting the configuration-page in the widget editor.

      • Sly's avatar
        Sly
        Data Storage
        09-30-2022

        i think that might be the issue i do not need an image in my drop down. 

        please see below what code is in my configuration:
        {
        "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": ""
        }