logo

NJP

UI Builder - Dynamic Filter on List Component

Import · Apr 28, 2021 · video

[Music] hello in this ui builder bytes video we're going to take a look at how to set a filter on one of the list components dynamically so probably pretty common that you'll want to filter a list based on you know something happening in uh in your page and with the list component so right now i have this list component that shows up in the bulk of this page i have a filter property so if i click on that right now i am filtering active is true and maybe i want to say active is true and the category matches whatever i choose in this category drop-down well right now there's not a way to do anything dynamic at this point so if we were in flow designer i could grab a data pill off from the right and use it over here you know different places in the platform maybe it would be more dynamic but right now in ui builder this part of the filter is not dynamic so i'm going to hit cancel and the way that i can make it dynamic is that i can bind some sort of property to this filter where i can just pass it the encoded query that it's inspect it's expecting so anytime you see a filter in service now all it's doing is creating creating some sort of uh encoded query and you know we'll take a look at what that looks like but you know if i if i look at this right now i have my beautiful header and i have this category drop down where i have software and hardware so i want to be able to hit software and only see software categorized incidents i want to be able to hardware and see the same thing so we have to do a couple of things so most of the time when we do something like this we need to create a client state parameter so i'm going to go ahead and create one of those that says category and it's okay to be a string we'll just end up populating i'm going to save and then there's a couple of things we could do here but the most obvious one is just to instead of using that filter we're going to use a script and a filter and we haven't actually done this any ui builder bytes video yet but i am going to script my filter so i know active equals true and then if i want to add an and i just do this caret and then category equals and then i'm going to say plus and so what we want to do is we want to access the client state parameter so i think that's api dot state dot category is what we called it so i'm going to apply and then the last thing i need to do is actually populate that parameter based on this category field so it looks like that is working because it's showing me all of the categories that are blank because my client's day parameter doesn't have a value yet so let's go and say for these events anytime i select an item um we want the category parameter to have payload value uh so category client state parameter name is the payload.value so let's go ahead and save and then test it so right now that client state parameter doesn't have a value but if i say software it gives me the software categories if i say hardware gives me the hardware categories and again that was all because i used this javascript um the javascript and the filter so more could be going on here you know i could be pulling values from the other places i could also have a client state parameter that is a some sort of query and then i could set that from a script and then bind this client state parameter to the field using the dynamic data binding icon but the most obvious way to do it is just to use the script here thanks for watching

View original source

https://www.youtube.com/watch?v=lzUVJGqse2E