issue creating a dropdown filter

[Sly]

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 code is not saved on the imported template and also doesnt work once i just try copy it and work on the javascript. 

please kindly assist 🙂 

[Sly]

i have been able to add the template now but once i change the code it still doesnt output the dropdown 

[HamzaJ]

HI @Sly 

It would be helpfull if you could share your blox-script. In your first post it sounds like the JSON is not valid (a comma to much or a ) to little and it reverts back). Seems you have fixed that. If you can share your script I can have a look at the dropdown.

[Sly]

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]

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]

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]

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]

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

}

[HamzaJ]

For me the code and the configuration work. Were you able to make it work?

[Sly]

not at all 😞