Render Lists / Delete List Items & Manage List Iterations from Dynamic Data in Wized

hi today I want to walk you through all the basics of rendering lists and you know having those Based on data coming from your database and then using actions on specific list items let's say we click on the delete button on the third item and then we take this specific ID for this third item and we're going to make an API call to the back end and only delete this record which is pretty cool so we're doing Advanced functionality with lists today and we're going to go through it and it will be super easy and super easy to understand great for intermediates and even beginners so let's get started right now um just to make this video not go one hour I have already pre-built the web Flow Design but it is pretty simple I just have the holder which will hold all the items I have the item in here that will be the list item I have the text for the list item and a button that will you know trigger the certain action to delete a specific list item so the first step is we need to add wite attributes now the item component will be the ones where we want to render it multiple times because we want this to be like the template item for our list so I'm going to go to the settings section here and see this custom attribute section I'm going to click on plus and I'm going to type wi and also if you don't want to advertise wite all across your side code just type w so then nobody will know that you're using WIS at least not the ones that don't know of Wis which is sometimes cool because you know if it's built in WIS your competitor may get the idea that they can rebuild the exciting thing that you did and I have to say for everything I built myself I use W because it makes it harder to figure out that I'm using WIS as a little shortcut to make it easier and when I export my code I have nothing to do with WIS anyway so I'll use I like to use W but best practices is still WIS just as a little side note so I want to call this WIS list item so let's do list um and then I do item so you can name it however you want you can also do list minus item that works also now in m 2 only um so we have list item so because I need to add a wiist attribute so this list item can get recognized so actually let's do the step by step and we have that in here now as you can see if I were to go back to WIS refresh my attributes we see that this list item is recognized because I have added the wiist attribute now I can also have this be W and if I publish this again as you can see and I reload it will still be recognized as a list item so I can also use W just so that you know so let's go to The Heading let's click on Plus for the custom attribute and let's add W as well and let's call this list item text list item text I'm going to publish this and now if I reload we see the list item text has been recognized as well this is how we add our elements in wte now the last thing that we need is the delete button let's add W oops W I like it because it's shorter to type um and then let's just call this delete item perfect let's publish this publish the selected domains and now if I reload we see this has been picked up too now sometimes if you do longer attributes um this is a pain really like working with the WIS configurator because it like overlays on your elements um especially if you have more complex builds it it's really a pain how they build it with the x-ray mode it's like that sometimes you have like this attribute text over this attribute text over this attribute text and we do you don't know what like where to click you want to click here it opens this so so uh just be aware that uh x-ray mode for full working is very immature as of right now um so I like to go actually into the actions and you know like just find them manually in here but this is it so far so now all the elements that we need to add functionality to or we need to add certain event listeners to meaning like when something happens a click a hover we can do something they have been added and they get recognizable using the X mode and wst now what we want to do is we want to render the list from something so this is where we go to the back end now we want to build a simple database so let's go on database let's go to add table enter data manually let's call this uh test render list video Let's do uu ID that is a more secure way of doing that and uh let's create create a new API Group you can just do that here I call it I call it you know the same as I call this one and let's also add basic crud endpoints I'm not a fan of the pre-built xano endpoints but they are very handy for this example so let's just go to the database here and let's give it a plus we only need a text fi so I'm clicking on text and let's call this task just like that and you know let's add some data to our database manually so let's do cancel WIS for example and then re uh activate wi and then let's do a buy Wist merch and then uh check with Discord okay okay so we have some tasks we have some things um that you know starts to populate our um data that we want to reflect on the front end so if I duplicate now this tab I'll just do this because in Zano we're working across multiple sections I want to go to the API section here right here and now let's go command F let's put this in here and there we go so now we have our crud end points we have get this will query all test render list video icon uh video records so if I go on run and debug and run this you see I will get all of them which is great so first of all I want to copy the base URL all those end points here are in a folder this folder is called test render list video so I want to copy the URL the endpoint URL for this folder that is assigned to this specific API Group and add it as an app to my WIS project let's call this Zano list for example just like that and now I'm going to type in return quotes and I'll paste this URL in here this is perfect this is the URL only to our folder right if I were to open this URL on the internet I would go to Swagger which is an unprotected way to um you know access my endp points I could just go to the get one in here and click on try it out and then uh you know click on execute oh this is not the get I need to get all um that is this one so I could go to this endp point and try it out and click on execute and you know I would get the data from my backend which this is why you have to be very careful if you use WIS whs is exposing all your end points in their source file this is why you want to turn off Swagger right so let's actually do this together what we want to do is we want to click on the three dots here go on settings and a Swagger we want to move this to disabled you don't need that if you're not building the next open AI you won't need it and now if the user tries to uh visit this link it will say sorry we could not find what you're looking for which is exactly what we want to return because we don't want people to test our end points and get too easy access to them which should be already protected but then this is where we add later later on authentification if needed but this is we don't have to worry about it I just wanted to add as a little side note in here but what we want to do is now since we have added that group we want to go to the endpoint we want to work with this is the one that will give us all the the tasks or all the things to do so I'm copying this path here for this endpoint in Zano you'll find it up here and I will go back to W I will create a request let's call this get all for example example and let's go to the Zano app and in the return section here I'm adding quotes again and I'm only adding the path meaning in the app I have the first part and in the second pad this is like the main URL basically for this API Group and then I have slash get all records and so on this is how I get then the full endpoint they have a modular way of you know structuring the urls and let's go back to Zano and this is a get endpoint as we can see here so let's change this to get I don't need to pass on any parameters and I can run this and I'm getting the data now as you can see in in WS so once I got this data now I want to render a list so let's click on list item here I can just simply go to x-ray mode click on list item it will automatically create um an action for this list item I'm going to go to settings I'm going to go to render list and then it says render list from array now this is where the code comes in I have to write return and let's expand our request that we run right here and I want to go to the item containing an array now let's zoom in a little bit so we see there is this do data and this starts like with the square bracket and it ends with this square bracket if it starts with the square bracket and ends with the square bracket it's an array so click on this array perfect let's zoom out and then if I run this we see we have the square bracket here the square bracket here this is a list now let me show you what I mean by that let's go and you don't need to do this uh Json pedify perfect let's go on here oops um make this pretty as you can see we have a list we have this square brackets right here and we have this object this is like a data type that contains this item and then we have a comma and we have an object containing again multiple data sets in it and we have a comma and we have this you know this object in here containing multiple data in it the comma and so on so this is this is a list in terms of JavaScript so if I run this I have this list now if I reload nothing is being rendered because I still have to add an iterator so let's go to our variables and let's call this variable iterator we need to add an iterator and you can call it whatever you want that will start at zero just like this that will start at zero and we need to reload otherwise this very is not getting updated so now we have a zero we need a variable that is just like like an empty variable basically with just a zero in it so that then whis can actually render the list and now as you can see if I reload there is no item anymore because there the list is being rendered based on the iterator but uh there is no data so the moment the data comes we get the list rendered and actually you also want to affect the HTML if you r lists you want to do Flex down and then you can add your uh 0.75 Ram Gap in between those items and this will be then considered by WIS because WIS is manipulating it based on the HTML guidelines that you have set inside of um webflow that if then the data gets rendered we will have the certain spacing in between those as you can see but now we have those rendered which is good they all have static content still and it's doesn't have the good Dynamic content in it but it's still getting rendered which is a good sign so this is great and we have those rendered but why do we need the v. iterator we need the v. iterator if we want to render multiple items we need to have the iterator variable because this will help us this needs to be assigned in order to render the list this is how WS works but let's say you want to set the text for the third item how does WIS know that this is the third item so we need to have a variable which is like a data placeholder assigned to every list item so this will be zero this will be one this will be two this will be three and then we say the text for three is the text for three and so on let me actually show you what I mean by that so if I go to list item here and I go to set text so I have a created a new action plain text and I would just write return and I would just add the iterator in here by the way it needs to be the same iterator that is assigned to the template list item when you render the list this is v. iterator and this needs to be be v. iterator 2 you will see that if I render the list we will see 0 1 2 three this will give every item a unique ID so that we can make you know we can track it we can understand this is this specific item this is very important if we want to delete a specific item because think of it like this I click on item two now I want to get the data from item two and then use it to delete it in the database but in order to do that I need to understand which item was clicked on this is where the iterator is needed so just so that you have the background and we're going to use the iterator right now inside of brackets as you can see here to render a specific list now this is not fully ready yet so let's just copy this part here and you know let's keep in mind that we copied the iterator so now when we go in here in the data field we see we have also like those little brackets that we just saw we have zero this is how Zano senses the data they use the iterator system too so we have Zer 0 0 0 this is all the data belonging to the the first record which starts at zero and we have dot task which is canceled wi and then the one one one11 we also have task reactivate wst so we want to use the ones that are do task but if I just set it as you know zero. task all of them will say cancel Wiis so keep in mind our iterator if I assign the iterator which will like actually let's go even one step back if I do one all say reactivate WIS if I say two and run this always say buy WIS merch and so on so we need this Dynamic number let's actually add another experiment if I were to add the iterator in here just like after the text using a plus we will see that it will say cancel with zero cancel with one cancel with two cancel with three so I'm just going to take this Dynamic number that will count up oops that will count up and use it to get a specific record so for the first one it will have zero and therefore it will get the the task for cancel wst and for the second one it will have one and therefore it will get the task for reactivate WIS and for the third one which is two here it will get the one for by Wist so it will always apply this right and then we see cancel WIS reactivate WIS buy WIS check WIS Discord why let's even keep in mind that let's add a quote in here to have some space add a plus and the iterator right this will add the number so we have cancel WIS zero reactivate WIS one by WIS merge two it will use the iterator th this number here is a dynamic iterator that always counts for each cloned item up and we use this counting up number here to get the specific task from the from the data that already has those numbers assigned to it to then get the specific item because if this would be zero again all would say cancel Wiis if this would be one I would say reactivate wst if this would be two I will say byst merge but if the first one is zero the second one is one the third one is two and the fourth one is three using the dynamic counting up number that is assigned and in increments with each list item I'm going to get the text cancel Wist for the first one reactivate Wist for the second one buy Wist merge for the third one and check with Discord for the fourth one this is how you render a list and how you maintain this Dynamic level of content assigned to it now this is all cool but we can also do events assigned to it so let's go on the delete item and let's actually create a variable here that just says um the delete lock this is just like an example delete loog just like that let's reload this the delete log is empty and again I have to run the request in order to render the list because it's the list is based on the data coming from the request we're going to fix that later on but let's just do another thing so now when I click on x-ray and I click on delete from and I can do onevent click just like that I'm just going to do an action for run function for now or let's actually let's do a set variable for now I'm going to do the delete lock and I'm just going to write return and I'll take the ID so you can see here the ID which is the number I can use it in the database to delete it the ID and now I can use the iterator again because the the link will be performed on a cloned item so if I add the iterator in here H where did it go here we go the iterator it will then depending on which one of those iterations I click on will lock the specific variable so let's make sure the list is rendered let's look at the delete lock now v. delete lock if I click on cancel WIS it will start with 44 if I click on reactivate WIS it will start with 55 if I click on buy Wist merch it will start with 092 and if I click on check with Discord it will be D12 and if I click on WIS cancel WIS again it will say 44 and then reactivate WIS 55 right so it will only it will now thanks to the iterator get the dynamic value assigned to the specific item that was cloned using the way whis manipulates the the Dom using JavaScript so once we know you know like track this specific value in here we can then make an API call to delete it and we don't even need to do that because waste things for you in doing that now the issue is to documentation is pretty bad so you don't know that it thinks for you but now here I am telling you that it thinks for you so let's do this experiment and let's actually go to our delete record so our delete record in Zano which is part of the CR endpoint is test render list item and then you know the ID of the delete item so let's copy this let's add another request here we go let's go to requests request here we go and I'll be calling this um let's just do this delete just like that let's call this delete the app will be zanol list and I'm going to write return and I'll put this in quotes So now this part will not work so I have to remove this part this will need to be replaced by the ID so I have this part and I'm going to add a plus and now I'm going to make you stunt right because wi and I cannot explain it because I don't know how it fully works because her documentation is pretty bad but I found that it works and I can show you that it works and I can give you some of my explanation how I think it may work even though I'm not sure if how I think it may work is actually how it works on the back end how they built this thing CU they're not fully transparent and how everything works but if I'm going to add now the ID in here for this variable that represents the ID and I go to this number here and replace it to the iterator right if I click on this item and then perform the request based on that it was clicked on this item it will automatically add the ID to this request for the item that was clicked on like I don't even know how WIS knows how this is connected there is no logical way for me to understand how this connection works I just know that if I do it like this it will work so uh maybe the wi team can do better explanation and the method is delete and that is basically it so let's see I will receive a uu ID actually maybe we need to change this to text but I'm not fully sure let's see oh no we don't get any response so that is probably it so let's go to request history did that work what I just did oh yeah that worked okay perfect so we got that item deleted so that is already set up let's see if it worked let's reload the request yeah it worked so let's see let's click on buy WIS merch and we want to delete that let's click on it here we go and this is 092 we see this was when I click on the delete button you know we lock this this um this ID assigned to the item that it was rendered on and we locked 029 it starts with 029 so by WIS merge that was deleted or hopefully was deleted now from the database should start with 092 and this comes when I go to the request section because I have this ID and it has the iterator assigned to my request so technically if I click on it to then perform this request which oh I have to add this request still on here it should then delete it so actually let's click on here let's go on event click perform request delete now how WIS should work is if I click on this item here and this request here for delete was triggered onclick of a specific dynamically rendered list item and the data I use in my request here uses data that is is the that the list rendering where the list click happened on is based on and is assigned to the same iterator that where the the list in WIS is based on if I click on two it will log to and delete to and sent to to the back end to have it deleted now it's not fully transparent to me how it works you know sometimes in wi you have to figure it out yourself but this is what I figured out so let's reload and let's see if this works in practice let's actually reload the data here to get the list so now let's go to the delete keep in mind when we click on buy wi merch it should be 09 something so let's click on delete it deleted Let's see we clicked on bu WIS merge it should have deleted it if I reload and run the get all request it has deleted it beautiful so and now if I go to request history and reload that let's go on this one and I go to the input oh I think that's it's request headers I maybe response headers let's see oh no it's not but um it it deleted the one that I wanted to because you know I pass on the parameter it the parameter is passed on in the URL and not like in a body or something like this because it's a delete request so this is very interesting because if I click on a specific item in a list wi has it set up that let's say I click on uh check with Discord D12 is locked right here this is just like to help you understand it but then more importantly the request is then proceeded for delete and the data send on is um you know uh D12 and if I go to my database we have D12 D12 is deleted so let's actually do some more experiments let's um let's add cancel WIS again just like that and let's do buy MacBook okay perfect and let's go to our request and let's make it that the response of the request is the input so the variable that will oh no like the input here so to make it easier for us to to double check and to understand how WIS works right because I think it's very crucial to get this and oh I need to first get all okay so we got all now and let's actually go even on here and you know let's even delete like the on event I can just click on setting and click on delete because I don't need that anymore that was just to illustrate that we get different data as I click on different list items so let's go to cancel wi that's the one in the middle I think that's the one best to double check cancel W or what was it yeah cancel Wist so the cancel Wist item starts with one CD one CD so in my delete request when I perform the delete request it will now also return me the ID that I inputed so 1 CD should happen should be visible in here when I click on cancel with so let's click on cancel W and it will show me the result that I inputed in 1 CD and now if you go to the database we have one CD if I reload 1 CD was deleted now this is pure magic I think and it's nice that whis does it for you because again if this request here right um the delete request includes any dependency any variable that is present in the process of rendering this list right and you have an on event to any of those items inside this list item right and I click on this and it performs a certain request if this certain request includes again coming back to it any dependency for you know the data that was the list rendered from and it includes the V iterator that was assigned to the list that was being rendered if I click on two it will use the two in here to get the ID from you know two in this case which is the third item from two to get the ID um 679 to then send that to the back end so let's do the example um let's reload let's make sure you know everything is up to date and let's do it again so the last item here is 67 nine we know this because you know when I render the list in here on the list item right here let's actually copy this again and let's go to Json prettyy just to understand this Json prettyy and I make it pretty we see the second item is this ID it's it starts with 67 9 right and that's by MacBook 679 so when I go to my request here for delete and I click on the second item which should be 679 I will send the data that was sent in here using the iterator because I clicked on the second item and this is a dependency that the list was rendered from or that is contained in the list that is being rendered it will add this specific ID of the list item I clicked on and when I reload and perform the get all request we see that bu MacBook was delet it and that this because of I passed on this specific ID to the API to delete it which is pretty interesting now one little critique towards the Wiis documentation is it's not fully clear how this works in Wiis or what the technology behind it is I just know that it works but I not explain to you how it works or how those pieces fall together cuz it's not really transparent to me how their technology works but I just know that it works and you can count on it that it works in this example now one thing that will make our life way easier is we want to add an action that when I reload the page it automatically gets the gets the latest request so let's call this um initial load initial load I do an event based action and I do page starts loading I do perform request get all so now when the page starts loading I'll be getting my get all request just like that here we go so I'm rendering those items and now when I delete an item the item has been deleted right if I go back to my database that item is gone but it's still not reflected on the front end so I also want to add another request called let's do this uh refresh to then be event based when request finishes and the delete request finishes to then perform the request again to get all items and now this is gone because the the leete request has been successfully finished and now there's is nothing left in my database so let's actually do zero 1 [Music] 2 three oh three and so on and let's reload and now I have some numbers in here those are not the iterators those are numbers that I just added in the in the database here but now when I delete one one is deleted right and when I delete three three is deleted and when I delete zero zero is deleted and when I delete two two is deleted and this is how you delete specific items from a list that is rendered in WIS and then reflect this change on your database and we're passing on the ID to do so and the nice thing about Wiis I think something that we learned is things that happen in action get communicated to specific dependencies as you can see here where you know we base like a specific specific Dynamic value in here based on the iterator that is assigned to the list as well so when I click when I add the placeholder for the ID that would be 1 2 3 4 5 and I add the iterator in there like I would do it for example with set text but then for the ID if I click on this element and then based on this click on the element perform the request to make the API call any data in this request that is based on this specific element and includes the V iterator will will get the data for the specific item I clicked on because the click on event on this specific rendered list item triggered this request which I hop I did enough effort to make it understandable for you even though I don't fully understand it yet um but I hope that this video really helped you understand or at least helped you figure out how to render lists and how to delete specific list items from those lists and then how to make everything work on your back end so that you can wipe out the database just like this uh thank you so much for watching thank you so much for all your support for all your wonderful comments they really keep me going in this office with uh 95 degrees uh and I'm sweating I'm sorry uh and you know your wonderful comments and your wonderful feedback and your wonderful emails keep me going so so thank you so much for all your encouragement for all your support I love doing those videos even in 95 degrees so thank you so much for watching I really appreciate it I hope that W soon will have better documentation so we don't have to ask CAD gbt all the time but thank you so much for all your support I really appreciate it also thank you so much to the wonderful whs team for all their encouragement not so much for the documentation but for the good intent behind the documentation I'm just joking but uh thank you so much for everything I really appreciate that and see you tomorrow bye-bye

Channel: NoCode ProCode

Views: 382

Keywords:

Id: uhyKyZvibcI

Length: 36min 38sec (2198 seconds)

Published: Wed Jun 19 2024