Forum Discussion

irismaessen's avatar
irismaessen
Data Pipeline
01-06-2023
Solved

How to create custom action based on a BLOX dropdown filter (+Styling the filter)?

I'm currently using the Wiser Filter widget plugin to display some dropdown filters on a dashboard, but I would like to add some more involved filtering (where I potentially apply filters to two colu...
Blox
Dashboards & Reporting
  • Alek_qbeeq's avatar
    Alek_qbeeq
    01-09-2023

    Hey Iris, 

    You can set global rules for css in the first line of blox: 

     "style": "#select_id {  width: 100%;  border: 1px solid;  border-radius: 15px;  padding: 0.25em 0.5em;  font-size: 1.25rem;  cursor: pointer; background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);}",

    You'll get something like this: 
     

    Regarding custom action -> How do you pass members to the filter object?
    You can try this: 

    prism.activeDashboard.filters.update(
    {
        'jaql': {
            'dim': "[Brand.Brand]",                 // filter dim
            'title': "Brand",                       // filter title
            'filter': {
                'members': [payload.data.select_id] // filterText
            },
            'explicit': true,
            'multiSelection': true,
            'datatype': 'text'
        }

    }, { 'save': true, 'refresh': true }
)



    If you are intrested in some more advanced filter dropdown - where you are able to choose single or multiple items in one dropdown, add dependent filter within dropdowns, be able to control look and feel from design panel, I can suggest one of our most popular plugin
     Advanced dashboard filters 


    Best regards, 
    Alek from QBeeQ

Alek_qbeeq's avatar
Alek_qbeeq
Cloud Apps
01-09-2023

Hey irismaessen 

Could you provde full json example of what you are trying to achive? 

1. I'm not sure what you are reffering as styling select input but you can always use style parameter in Blox 

 "style": "#select_id {  width: 80%; border: 1px solid aqua;  etc;}"

or 

{
    "type": "Input.ChoiceSet",
    "id": "select_id",
    "class": "",
    "displayType": "compact",
    "choices": "{choices:Brand}",
    "style": {
        "color": "coral"
    }
}


2. Within custom action 

 

console.log(payload.data.select_id)

 

should return selected value from dropdown.

//Instead of 
console.log(selectVal);
//try 
console.log(filterText)

 

Always here to help,
Alek from QBeeQ
[email protected]
QBeeQ - Gold Implementation and Development Partner

irismaessen's avatar
irismaessen
Data Pipeline
01-09-2023

Hey Alex,

1. With "styling" I'm talking about styling the actual dropdown box -- perhaps it's a bit of a cliche, but I want rounded corners and some space around the text :). See the attached screenshot for a comparison of the styling of the dropdown box in the Wiser Filter widget and the Default Blox styling.

For code here, the part I want to style is essentially the standard Dynamic Dropdown that I linked in the original post.

Your hint of 'you can apply styles' at least got me looking a bit further into CSS styling code, and I can indeed change the text/border color and the border thickness, but no matter where I put the style block within the Blox JSON, I don't get the rounded corners or more padding around the text:

                                        {
                                            "type": "Input.ChoiceSet",
                                            "class": "addPlaceholder",
                                            "id": "selectVal",
                                            "spacing": "default",
                                            "padding": "4px",
                                            "displayType": "compact",
                                            "choices": "{choices:myFilter}",
                                                "style": {
                                                    "color": "grey",   // this works
                                                    "border": "4px",   // this, too
                                                    "border-radius":"5px" //not this

                                                }
                                        }



--

2. Ah, yes, that's what I was missing re:getting a correct value logged in the console and therefore also used in the filter. So thank you for that. (I knew it had to be something obvious). However, if I apply filterText as a members filter  I get every individual letter applied as a filter instead of the whole phrase. 

I probably could work around that by applying an 'equals' filter but I'd like to get it to work this way.

 


prism.activeDashboard.filters.update(
{
'jaql': {
'dim': filterDim,
'title': filterTitle,
'filter': {
'members': []
},
'explicit': true,
'multiSelection': true,
'datatype':'text'
}
},
{ 'save': true, 'refresh': true }
);

 

Thank you for the help you've already given,

Iris

 

  • Alek_qbeeq's avatar
    Alek_qbeeq
    Cloud Apps
    01-09-2023

    Hey Iris, 

    You can set global rules for css in the first line of blox: 

     "style": "#select_id {  width: 100%;  border: 1px solid;  border-radius: 15px;  padding: 0.25em 0.5em;  font-size: 1.25rem;  cursor: pointer; background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);}",

    You'll get something like this: 
     

    Regarding custom action -> How do you pass members to the filter object?
    You can try this: 

    prism.activeDashboard.filters.update(
    {
        'jaql': {
            'dim': "[Brand.Brand]",                 // filter dim
            'title': "Brand",                       // filter title
            'filter': {
                'members': [payload.data.select_id] // filterText
            },
            'explicit': true,
            'multiSelection': true,
            'datatype': 'text'
        }

    }, { 'save': true, 'refresh': true }
)



    If you are intrested in some more advanced filter dropdown - where you are able to choose single or multiple items in one dropdown, add dependent filter within dropdowns, be able to control look and feel from design panel, I can suggest one of our most popular plugin
     Advanced dashboard filters 


    Best regards, 
    Alek from QBeeQ

    • irismaessen's avatar
      irismaessen
      Data Pipeline
      01-11-2023

      The square brackets around the 'members' filter text!  It's only obvious once you know what the problem is, right?

      This will let me do what I want to. Thank you!

      Iris