filter representation in form of "pills" above table

  • 1
  • Question
  • Updated 4 months ago
  • In Progress
Any ideas on how to implement something like this...

Photo of Conlan O'Rourke

Conlan O'Rourke

  • 3,280 Points 3k badge 2x thumb

Posted 4 months ago

  • 1
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
It might get a bit hairy depending on how many options you have, but I'd try a button set where each button is rendered based on whether it's condition is active (using a snippet returns true condition, I'm guessing), and the button's action is to deactivate the condition and query the model.

You could probably come up with some kind of dynamic solution, but it would require a lot more coding... and a button set gets the job done.
Photo of John Dahlberg

John Dahlberg, Champion

  • 2,442 Points 2k badge 2x thumb
You can access conditions using merge syntax:

{{$Model.OpenTasks.conditions.0.value}}

Here's the documentation:  https://docs.skuid.com/latest/en/skuid/merge-syntax/global-merge-variables.html#model

For removing the selection, I can think of a few approaches.  You could play around with the css on buttons and use the action framework to update the source model, which would be fairly declarative. 

You could also use a template to display the condition and then publish an event, then have an action sequence kick off once the event is received - something like this: 

<div onclick="pubEvent()">{{$Model.Task.conditions.1.value}}</div>
<script>
function pubEvent() {
var filter = {
    filterName:'Name1',
    filterValue:'Value1'
    };
skuid.events.publish("RemoveFilter", [filter], { scope: skuid.constants.EVENT_SCOPES.GLOBAL });
}
</script>


Lastly you could use templates to invoke a snippet to update the filter conditions, similar to methods used in this post:

https://community.skuid.com/skuid/topics/filtering-multiple-models-using-a-single-set-of-filters-glo...
Photo of Conlan O'Rourke

Conlan O'Rourke

  • 3,280 Points 3k badge 2x thumb
Thanks Matt and John. These are really helpful to point in the right direction...through creative use of declarative means of course. I'll take a stab, and I come up with any good, replicable solution, I'll be sure to post back here on this thread.
Photo of John Dahlberg

John Dahlberg, Champion

  • 2,442 Points 2k badge 2x thumb
Here's a simpler syntax for publishing an event:

onclick="skuid.events.publish('RemoveFilter',[{name1:'value1',name2:'value2'}], { scope: skuid.constants.EVENT_SCOPES.GLOBAL })"


name1 & name2 are event parameters that can be leveraged by the action sequence.