Play Video

Wix Code Tutorial – How to Filter a Dataset and Remove Duplicates From Dropdown List Using Velo

Want to know in-depth details on how to set up your own filter and non-duplicated dropdown list using Wix??
Well stay tuned and listen in for complete details on how you can do in easy steps.

Like & Subscribe, Share with your friends about how awesome Wix is!

If you have any questions, leave it in the comments below. Also, let me know if there are any other things that you would like for me to address in future tutorials!

————————
Don’t know how this works? This is the video for you!
——————————————————————————–
Comment below for other tutorials you all would like to know about Wix, Wix Editor X, Wix Editor, Wix ADI, and more. I appreciate all the support.
——————————————————————————–
What Was Covered:
– Add Repeater
– Add User Inputs
– Add Database Connections
– Setting up database connections
– Connect Repeater to database collection
– Create code using Velo (Corvid) to display filtered items
– Create code to get distinct values for the dropdown list
– Test the code using the preview mode

The code is available via the website to tag along with the tutorial. To check it out go here: https://bit.ly/3dBB4Jp
——————————————————–
Subscribe:
Creatively Nino – http://bit.ly/2NRVy6o

Nino Media – http://bit.ly/2RoiJHi
————————————————
More Wix Tutorials:

– Wix Tutorials for Beginners
This Wix playlist will have multiple Wix tutorials uploaded EVERY WEEK of 2020! Comment below for any Wix troubles you may have.
http://bit.ly/3aA8mb3

– Wix Tutorials 2020
http://bit.ly/2Rpa8V8

– More playlist here
http://bit.ly/2Rpa8V8

– Website
https://bit.ly/3dBB4Jp

more to come in the future!
——————————————–

today I’m going to show you how you can set up a drop-down list of reoccurring items in your database like a category or what have you and return all non duplicates into that same drop-down list by using corvid what’s up you guys thanks for tuning in with your boy and you know I got a tutorial for you guys today on how you can set up non duplicate values in a drop-down list so let’s get started so right now I am actually in my development
mode so you’re gonna have to turn that on and that’s what you go up here to development mode if you don’t have it turned on already if you have it turned on it’s gonna show you turn off like it’s showing me right now so just click that button right there alright in this tutorial example I have articles here and countries ok so I just have basically articles about the country then these countries have articles alright so I just created these
databases real quick as you can see and then all you have to do here is actually do everything in the page code so first off I just started off with like these two simple things here you have the search by keywords and then search by content ok continent alright so I’m gonna go here and I’m gonna add a repeater and this repeater is what I’m going to use ok so I just want to first like get everything connected and together in the repeater first so
once this okay yep once this repeater comes up I’ll move this over here put it under here just like that alright now I need to get me some the data collection on here so what I’m gonna do here is I’m gonna go to content manager and I’m going to go to articles and I’m gonna add that articles data set alright so go to settings here choose articles read only 12 to just be displayed created new to old alright so I got that now I just need to hook up
this repeater to my data set so how I do that is click on the repeater I say connect to data alright then I choose the data set articles data set now I want my image to be connected to the image source that I have in my database so I click here as image so that image is gonna go in there now I need some information about this image which I will put here the article title and the tooltip is gonna be the article title as well this is not going to
be linked because I don’t have anything else for it to go to okay so let’s go back here I don’t need to change anything with this button so I’m not going to anything with this text I’m going to consider let’s see which text am I gonna do I’m gonna do this one I’m gonna start off with that and that’s just gonna be the title alright or no you know what let’s make it the country I’ll just make it the country all right and then I’ll go back to my
other ones here I’ll go here and I will name that let’s see let’s see oh see oh see that’s content okay and then I’ll actually go back since we’re doing continent I’m gonna change that text back to contents in that country alright so this would be continent so you guys can get the gist of what continents are showing alright now I do want to just add up a little bit more stuff to this so this labels gonna be connected to the country just so we can
give a little bit of background of what country that is okay so let’s see we have this we have this that’s another button that we don’t need to use all right so I’m pretty much set up right now with this articles database alright so what I want to do now is I want to go down to my page code all right on second thought I’m going to go ahead and switch this around a little bit all right and instead of making this continent I am going to change that
to the article title and then this will be the article information in there okay so I just go back here now I want this to be the country so I’m gonna go here and change that to country which I have alright and I’m gonna make this nothing well I mean I’ll just put the content rich text there doesn’t bother me a bit all right so once I got that straight I’ll go here to my page code and this is where the magic happens all right so make sure that
you have named everything the way that you wanted to be named all right right here I have data set 1 and then here I have the search group and this is the S keyword and the s continent okay so that means search by keyword and search by continent all right so I want to just start off with a filter okay so we’re going to start off with a filter and get that filtering process working right now all right so what we’re gonna do is we’re gonna say let
last filter keywords okay then we’re gonna say let last filter continent all right and then we’ll add some other stuff in between there but right now we’ll just have that alright so now I just want to create a function and I’m going to call that filter alright and that filter will have in it keyword and then I’ll have content alright so inside of here I’m gonna do a if statement so this will check to see if my last filter is equal or not equal to
the keyword that I had put in here all right so I’m gonna say last filter keyword this is not equal keyword all right how easy was that now we’re gonna put an or parameter in there and we’re gonna say last filter continent and guess what we gotta see if it’s not equal to continent all right this is just checking to make sure that this is putting in the filter and not putting in something that was already there okay so now inside of here what
we’re gonna do is we’re gonna create a new filter so let new filter equal wicks data and I’ll go ahead and put that up there as well so that it won’t show up as as an error or a bug all right so we’re gonna go up here to the top and we’re going to import well let me just go ahead and just use this easy thing right here import waves data all right no I’m gonna have to maximize this so that you guys can see everything on the screen all right so
once we have that what we’re gonna do is we’re gonna check and see if that okay so I might have to bring this down again all right so what I’m doing here is I’m creating an if statement inside of here for the filter itself so if there is an item or if you have typed in an item and key words all right so you’re gonna check keyword all right if there’s an item in this search box all right then what we’re gonna do is tack on the filter for that all
right so we’re gonna say new filter filter dot contains okay and then we’re gonna go to article title that’s just one of my name of the fields in there okay and then we’re going to put the string keyword all right and then we do the same thing for our drop-down all right so we do the if statement for a continent all right if the continent is there right here just drop down if the continent is there what we’re gonna do is we’re gonna do a new
filter equals new filter dot guess what contains all right contains and then I’m gonna do it based upon my filled name which is continent and I’m going to label it as continent all right so once you have that then you want to actually set the filter to the database all right so we’re going to go ahead and do data set one got set filter okay we scroll down right there and then we’re gonna put in a new filter all right so that actually helps us get
through our troubles right so now once you feel finished that filter okay what we want to do here is take that keyword there or that continent and apply it to the last filter keyword and the last filter continent all right so we’re gonna have to put that there so we’re gonna do last keywords all right which I think I’m going to change that to word so it can be consistent no no sorry I’m gonna change this to be consistent all right so we can make
consistent throughout this whole thing all right keywords keywords all right equals keywords all right and then we’re gonna do last continent equals continent all right just so that we can check it again next time to see if it does not equal each other all right if it equals each other then there’s no point in running the filters that’s why we have that parameter up here okay so boom we already got one part of it down now this is just to filter
the data set okay we haven’t even got to the non duplicate non duplicate items so we’re gonna get there just just as quick but right now we have to lay out the foundation I’m showing you guys how to lay out that foundation to build up a nice filtering process okay so next what we want to do here is we want to load up the content continents okay and by that what we’re gonna do here is we’re gonna create a function and we’re gonna call it load
continents now we’re getting to the juicy part that we all came here for this video all right so we’re gonna say load continents we don’t need a parameter it’s okay if the parameters still there just make sure that you don’t use it all right so wicks data and then we’re gonna say dot query the query that we’re gonna the query that excuse me the query that we’re going to filter through or to find is countries okay we’re gonna go through countries
all right and then once we have that we’re going to set some limitations to this okay so we’re gonna set the limit to a thousand all right a thousand results that you can possibly get from the query okay the max possible results which I have a thousand items in countries okay the countries data set alright and so what I’m doing here is I’m just laying down the foundation to take out the non duplicated items and just return all of this distinct
items just remember that word distinct okay because we’re about to use it all right so I’m gonna put this into ascending order based upon the continent okay and then I’m going to go ahead and put distinct on here and distinct is going to be looking at continent alright you don’t have to worry about the options you can definitely go ahead and check those things out and the wicks references API references but right now we don’t need to use it
alright so just go ahead label the field so this is the field parameter okay that you’re pulling from inside of countries alright once you get that distinct you want to then get those results okay so what we’re gonna do here is we’re gonna put some parentheses around here and we’re gonna say results okay and then we’re going to go ahead and do this press Enter just to space it out I’m just gonna get rid of that okay and and tab over all right so
what we want to do here is now put this into an array of items okay and what we’re gonna do is we’re gonna map those items on to what can fit for these options okay so what do I mean by options I mean options as in when you go to that drop-down which is s continent all right and you go to dot options these are what sets or gets the drop-down okay and we’re going to be setting that drop-down based upon the value and the label okay but in order to
get the value in the label all fixed up correctly we have to pull the results in and map it to make sure that the value and label are the same value okay so let’s go in here and we’re going to go ahead and say let distinct lists equal and then we’ll bring in another function okay and this function is going to be is is going to be a mapping function okay and I’ll show you guys what I mean by mapping function because this mapping function is used
to build like this option list that I’m about to display for the S continent okay so in order for you to filter by those non duplicate values alright so what we’re gonna do here is we’re gonna pull in results dot items okay and then we’re gonna say dot map alright it’s gonna give you a function already you might as well just get rid of that stuff cuz we don’t need it right now all right what we’re going to do is we’re going to say cur which this
is in my place right now what I have to do and it’s just a alias value that you’re putting here I could put it as just element which I’ll just keep it as element all right and then what you can do here is put that element in here all right so what we’re gonna do here is say let’s see we’re gonna say return and we’re gonna return just that object okay and that object is gonna be label element okay so we’re putting that element in there for label
and then also we’re gonna say comma value and we’re gonna put guess what the element in there again all right once we got that in there then we’re able to push that or map it into this distinct list okay this distinct list will then be used to pipe in to our options all right but before we do that we need to have some type of value that will deselect the selection that you have made and so what we’re gonna do here is create distinct alright and
we’re gonna say dot unshifted gonna add a new item to the beginning of the list all right and what we’re gonna do here is we’re gonna say value is equal to nothing okay that means whatever it’s searching is gonna be equal to nothing so is basically you are saying like when you’re filtering you’re filtering nothing okay and that’s what it’s gonna come up in a second once I show you guys more to this alright so then you go here and you say label
alright and your label is going to be all alright this means all continents alright we can’t even go even further and say this all continents for our users to see okay and for them to to use alright now we want to go ahead and make that now we want to push that array into the options for s continent alright so we’re gonna go ahead say options and we’re gonna set that to distinct lists all right boom now we have our load content now we want all of
this to load when the website loads so what we’re gonna do is we’re gonna go up to you two on ready function what I’m gonna do here is I’m gonna wait until no no let’s just go ahead and just do this we’re gonna load the continent okay so we loaded the continents now what we need to do here in order to make everything work is to get the search by keywords figure it out alright so what I mean by that is we’re gonna have to go in here and do a on
key press event alright so we’re gonna do that but before we do that I’m going to go ahead and create a timer alright and I’m gonna call this on time it doesn’t really matter what you call it but you just have to call it on time okay or any other alias of parameter that you want to come up with alright so that is what I call it it’s gonna be on time now or on time I need to go ahead and do the key press event so I’m gonna get that key press event
we’re gonna shrink this down a little bit so it can be right on top of it or space out a little bit alright so in this key press okay we’re gonna check and see if on time has anything okay so if on time has anything all right we’re gonna go in there and we’re gonna clear that time out all right cuz we’re making a time out in order to capture every single typed up word okay so we’re gonna say clear time out and we’re gonna just put inside the
parentheses on time all right then we’re going to go ahead and say on time equals undefined so that it specifically is undefined for the next set time all right now get to the juicy part of this keyword press all right now we want to set the timer okay and so we’re gonna do on time is equal to set timeout and that set timeout is going to be looking just like a function but instead what we’re gonna do inside there is we’re going to use the filter
okay and we’re going to filter that by the s keyword alright and we’re gonna say dot value in order to include that and we’re going to have in here last filter continent alright this is because the last filter continent you’re going to be using because it’s already been set up here okay now what we want to do here is we want to add the time so we’re gonna do five hundredths of a second so that means a half a second alright so half a second when
you’re typing in the keywords will then start filtering by that keyword value okay mind you that last filtered continent if you start typing in keywords it’s going to do it by a blank so that means the blank item is gonna go in there that means that that the if statement up in the filter will not run for continents all right so here we are once we finish with that what we want to do now is to do an on change event for this s continent drop-down
list okay and then after that we should be wrapped up and ready to go all right I shouldn’t have said that alright so anyways what we’re gonna do here is we’re going to minimize this so I can get straight to the full list all right I’m gonna say on change I’m just gonna click enter alright so for this on change event what we’re gonna do here is we’re going to make that a filter okay and we’re gonna do it based upon the last filter keywords
alright and then the continent okay the S consonant value which we had set by the distinct and that’s how we made the non duplicate value alright so we’re gonna say s continent alright don’t forget the value and once we have figured all of that out it was time I think right now to go ahead and test it out I think everything is good nice and put together let me just review that real quick here’s the full code alright just so you guys can get a
glimpse at it I’m gonna put this code on to my website so definitely check the description below i have a link to my website where you can find this code there alright so that looks pretty good just going to minimize that alright it seems about right ok so now all I want to do is go ahead I’m going to save this first all right and then I’m going to preview it okay so we got our information here oh wow this is a lot of information that I put in
here all right so we have all this information sweet juicy information about each of our places here okay you got Uganda Australia Mexico all right so let’s go ahead and click on search by continent let’s see if it did it awesome so now we have is Africa Asia Australia all the distinct values okay and we have all continents so let’s go ahead and check and see if this filter works so I want everything from Australia all right so boom everything
from Australia is here all right this is Australia all right and then we’re gonna see Africa how many things are in Africa got three things oh actually five things in Africa all right Egypt Tasmanian Morocco and Uganda nice these are all articles from those areas nice so it’s definitely working now if I want to get more in detail like say for instance I just search for shoes right so I go in here and I search for shoes so I’m gonna go in here and
say shoes and it should give me that oh I forgot and that’s a good thing that I checked that okay so reason why is based on what I have chosen inside of here is not to be that what I mean by that is let’s go back here and we’ll see that we’re actually doing it based off the article title all right so this article title is what we’re actually looking at so that’s why I didn’t pick it up now I want to show you guys that all of these countries back
here and in my dataset is now going to show up here all right so all of these are duplicates you see that so you have duplicate euros you have duplicate Australia’s ages North America’s Africa and it all consolidated that by using that one parameter which is distinct all right so I hope you guys enjoyed this definitely give it a shot if you have any questions drop it below thank you so much for watching guys if you like this video hit that like
button subscribe if you aren’t already and I’ll see you in the next video ciao