Working with Dropdowns using Wix Code

hi there welcome to the week’s code today tutorial with Andrea scurvy Bay that’s me today we are going to do some working with drop towels there’s a lot of questions on how to use drop downs and this is as the other tutorial for pure beginners who wants to know how to work with drop towels so as you can see in front of us we have an empty page here with just a text label we have enabled the developer tools under the code menu and what we are
going to do now is that we are going to click the Add button we are then going to go to user input and choose the drop down here we’re going to drag that out onto our page like this and first of all we are going to click these settings and here you can choose how the text will be shown when it’s loaded so you can show no text a placeholder text or an item from the drop down we are going to show placeholder text with the text make your choice just
like that we are going to unclick the required for this demo then we can manage the choices these are the four choices we are going to work with a data collection in this case so I’m not going to leave this here I’m going to delete them because if something goes wrong with the page the data set doesn’t get loaded or some other error in any way the default values will be visible in the drop-down and we do not want that to happen the next thing I
always recommend is that you rename the drop-down property ID and you have that in the property panel if you don’t see the property panel you can go to tools and you have the property panel here so you can have that visible for you so we are going to just rename this to my drop-down just like that you can name it anything you want and then we are going to first of all drag in data set so go to database and data set we click the plus icon and add
a data set then we click manage data set and then we choose our demo data collection we have it as read-only and these are the number of items to display in the drop-down there is maximum in vick’s of a thousand records so you better know that so if you have a lot of records more than a thousand I would recommend you do some filtering or you have several dropdowns sorting order here is from new to old in the database and we might want to sort on
title instead in this case so we just add that as a sort option here and then we click the drop down again and the connect to data icon and as you can see the demo data dataset is here and I can connect the value to that but in this case we want to connect the drop-down list items so we’re going to choose the demo set down here we don’t need it up here the difference between these two as you might want to know is that if you use these to connect
to data set and value that value will be connected to the currently selected record in your data set this is of course useful when you are making a form and you want to connect a certain value in the drop down to a certain value in your data set so we choose to connect data set here to populate the list and we choose the title and as you can see here it says labels and values connective this is a as it is but I would like it to be that we can
choose which field we want as label and which field we won’t ask values for the drop-down this is not an option here so when we do like this and we click preview on the page we will see that there’s a lot of fruits a meteor from my data collection so if we go back to the editor here and you can see the demo data it looks like this title price and category name so when we when we change or choose a value in the drop-down you must use the events
here so in the properties panel here I will use the unchanged click the plus sign and hit enter that means that we get some code here and what will happen when we choose a value in the drop-down in this demo I will just console.log the value so you can see that like this my sorry typo here like this my drop down my drop down and it’s the dollar W naught W dollar and the value so what I will do now is just to console.log which means that I’m
writing it to the developer console so if you will see here in the developer console when we make a choice here it will print out the choice I made so as you can see it’s printing out any choice I make here so but the problem for you is that you want the title the pepper steak or the unco or the orange strawberry to be shown in the drop-down but you want to get the price as new value so whenever someone chooses in your drop-down you want to see
which price the actual product or item has okay so I’m going to give you a couple of functions here I will make sure that these function are properly viewing for you and let’s see if I can do like this drop down drop down demo and I hope this is big enough for you and let me close this one sorry for that so as you can see here I hope you can see it and let me make it as big as possible I created a function called populate drop down and it takes
the parameter of collection name what is thus then is that it queires that collection gets the result and as you can see here on line eight it loops loops through the items from the data collection and it creates the label with the title and the value with the ID so in this case we want the price to be as the value of the drop down and then it pushes that new item to the old items array and returns it so this function I using this function all
over the place so if we go back to our editor here and I do the same here I choose to show the price as the value and then we will reconnect or disconnect the drop down like this so now as you can see it’s not connected to a data source so this data set we can delete so now if we preview it has no choices at all okay so when the page loads we want to populate this drop down and the drop down is still called my drop down and it’s the options
parameter that holds the values so what I’m going to do now is that I’m going to populate the drop down and I’m going to enter their collection name and as you can see here in my database folder here it’s demo data and then I’m going to do like this so when we preview the page now oops sorry I need to await this and that’s because this is a promise so I need to wait for this function to be done before I can set the options and using a weight is a
really good thing in JavaScript in general but it requires the parent function to be a synced so this unready function will be a sync to be able to use a weight so if we click preview again here you can see oops the value parameter of item at index zero cannot be set to value oh sorry so the value parameters needs to be of type string not number it’s a number in our database so this is easy to fix we just go like this to string and double
parenthesis that means that this value here the price which is a number will be converted to string so preview the page again and as you can see now it’s still the same it’s not ordered and we’re sorted in any way we can fix that but when I click to a different icon the different items here you can see here in the developer console that it’s the prices that are shown here so now we can have one thing from an item as the label and one thing as the
value of the drop-down so this function is really really really good if we go down here to the function again and you want to sort it you use that dot ascending and then you can go title that means that it will sort the results from the data collection ascending a to said from the values of the title field so if we click again you can see the sorting is back in order as in apple banana and code and so on okay that’s a quick one for you to use the
function public drop down I made here to be able to populate drop downs with any choice you would like so let’s extend this function by using a new parameter called value field so what do I mean by this well you will not mmm you do not want to create different populate drop-down functions depending on which field you want as the value so we can do this by taking the value field in brackets from the item like this and then we can also do the two
string because if it’s a string it will not pay an attention to this if it’s a number it will convert it but this is the way to get a dynamic value from an item by using brackets so this means that here in the populate job down we will need to tell the function what field do we want as the value so if we type in title here and we do a preview you will be able to see that it’s printing out the title because the title is the value just in the
sample when we connected with the dataset so if we use price here we will try that and as you will see price is a number but it will be converted to a string and it works really good so now we can use this function and in several ways in our pages and tell the function what data collection do you want to query and what field do we need to have as a value I also have a field called category so if we name that obviously that field name oh sorry
it’s category name so am i bad so it’s category name and we do a preview again and you can see when I hit banana it says fruit when I hit hotdogs it says made strawberry fruit and so on so it’s a very easy and dynamic way to use this kind of functions with it I also made a function similar to this one but that will filter data and as you can see if we do like this so you can be able to see it in a larger way you can see that we are sending in a
collection name and a filter field and a filter value and we should of course extend it to the value field as well so as we did below here the value field will be here and it will also be converted to a string so this function public drop-down with filter is also extremely useful for you because it queires the collection name by the filter field and the filter value so you can use this to filter out data from any data collection and get that to
your drop-down so let’s copy and paste this one here and let’s replace that with this one and let’s try and make a new call here for our drop-down and like this and we have the populate drop-down with filter like this and its first of all it’s the collection name then it’s the filter field and then it’s the filter value and then it’s the value field we want back setup as the value in the drop-down so the filter field here we can try to make that
the category name and the value that I want is the fruit so I only want the drop-down to contain the fruits from my demo data collection and the value I want that to be the price so if we run this code we okay method the block cannot set to null or identified okay so that didn’t work populate drop down and finish the demo data and category name fruit and price so it’s the filter field filter value equals filter field value field so demo data
category name fruit done don’t have that can your name fruit okay so probably it’s because I use lower case fruit and not the fruit that I actually have so if you if you do like this you can see that it will work it’s only fruits in here and if I go back and change this to meet and do a preview again you will see there’s only meat in my drop top so it’s a very neat function to use whenever you are working with dropdowns in general because you can
reuse the same function over and over and over again we can if we want to skip this upper case lower case thing because if I do like this meat I won’t get any records back at all but I can always do like this that the filter value I do to lower case like this and then I need to make sure that all the values in the database is also lower case to work or upper case so it’s a very good common way to do when you work with data that you don’t mix
upper lower cases in anyway so that’s just a tip to do like that if you are sure your values is lower cased okay so the last thing in this little drop down session is that I’m going to take these two functions here that we have made I’m going to take them away I’m going to go to my back-end folder and I’m going to click the plus sign and add new web module and I’m going to call this utilities module like this I’m going to clear out this and I’m
going to import or paste my functions that we just made it complains about week’s data so we need to make sure that’s imported correctly and as you can see now we have the functions in a back-end module like this so if I go back to the page and want to use these two functions I will need to import them and I don’t need the week’s data anymore here but I do sorry I do need to write import square brackets the function name and the from back end and
you Tilly taste module so this way I’m importing the function populate with drop-down populate drop-down with filter and I’m also going to get the other one you can make you know all the functions comma separated in this way so you don’t need to have them on separate lines so when I preview the code now you will see I have the populate drop-down with filter demo data weights and I preview it and I can find because I probably have made a typo you
you tin you Tilly I’m really bad at typos utilities module okay I made a typo I’m sorry for that so let’s pivot it will work much better now okay so now you see this works exactly the same way as the other but there’s very little code here in the actual page as you can see we have very few lines of code in a page and we have our functions here in the backend module instead so this is a really good thing to do because you can reuse the functions
on all your pages in your site just make sure you copy this import line and paste that into your pages and then you can use the populate drop-down or the populate drop down filter any way you want in all your pages it’s saves code it’s generic and it’s working really really fast as well doing it as a back-end module so let’s try it once more we have the pepper steak meatballs and to go hotdogs and everything and we go back and we click preview
again and we will get the fruit strawberry apple banana everything like that so thank you very much for watching this small tutorial and I hope that you have seen good enough today and I will be back with a new small tutorial tomorrow happy coding