How do I create a dependent filter on a table?

Hi all, I have a table of data in skuid, where I want to use two dependent filters. I’ve tried following the steps here,… , but I didn’t really understand the Javascript part, so could do with a hand there.

Basically, we have a list of projects, categorized using tags (which are actually a multi-picklist field in Salesforce, call Focus Areas).

Because there are so many potential areas, we want to group the focus areas into sections, to make filtering easier.

I need the first filter (currently says marketing) to affect the results of the second filter (focus areas) to show / hide options. There is no relationship between focus areas, and focus area grouping in Salesforce because of the inability to have dependent multi-picklists, which is why we have turned to Squid.

I think that I need to write some Javascript that says

If filter A has “marketing”, show these options in the picklist “automation, crm, analytics” etc. Is anyone able to help? I don’t know code, and bought into the “no coding ever” part of the pitch a bit too well!!

Hey Laura!

Thanks for your question - I understand the “no coding ever” sentiment!  I thought through your problem and with our new filter set component in Brooklyn, we might be able to make something work with no code.  Are you on Brooklyn currently?  If so, try this:

1.) In a responsive grid or panel set (anything with two columns), put a filter set in each column.

2.) Set up a “filterable default off” condition in your model that you’ll use in your focus group filter.

2.) Setup the first column filter set with the “Marketing” filter you have above.

3.) For the second column, add multiple filter sets, one for each type of dependent set of focus groups.  You can populate these filters manually or from a model, however you have your data model configured.  Conditionally render each of these filter sets based on the “Model Field Value” of the field you are filtering on in your “Marketing” filter.  

Couple of things to note here, when conditionally rendering, it’s just looking to the first row in your model field value.  So this method wouldn’t work if your first filter had a “Select All” option (because you would only get the dependent filter based on your first row).  If you do have a “Select All” option, you might need a couple line JS snippet to check the value of the filter, and I can help you with that. 

Good luck!