filter representation in form of "pills" above table

Conlan O'RourkeConlan O'Rourke ✭✭✭✭
edited September 21, 2018 in Questions
Any ideas on how to implement something like this...

image

Comments

  • Matt SonesMatt Sones 💎💎💎
    edited July 23, 2018
    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.
  • John DahlbergJohn Dahlberg ✭✭✭✭
    edited July 23, 2018
    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...

  • Conlan O'RourkeConlan O'Rourke ✭✭✭✭
    edited September 21, 2018
    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.
  • John DahlbergJohn Dahlberg ✭✭✭✭
    edited July 24, 2018
    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.
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!