Learn Wized in 1h for Free

hi today I want to build together with you your first WIS and web flow web application and you know a wonderful uh quote basically that I heard from Julian from memberstack was you know he said that the moment and he's not a developer you know he made clear to mention that now multiple times but uh you know what he said was the moment he understood how to build a simple to-do list application in Wist you know the moment he understood that that was the moment when he knew how to build everything every idea that he has in West and I want and he said it took six hours for him to build that to-do list this video here is to help you build that to-do list in less than an hour so you know that you have you know you you can spend your day on doing something else than building a to-do list we're going to get this done in 1 hour and after this one hour you will know all the basics all the fundamentals all the principles of Wis of web flow of databases how to build your own apis and never have to pay a make.com invoice in your whole entire life ever again which is a pretty cool thing because you're going to get basically unlimited usage for $99 with Zano which sometimes is a way better deal um and a database but we're going to build that together we're going to use web flow waste and xano and we're going to build a full stack application today using no code in web flow and we will have 100% design Freedom inside of web flow to do all of those exciting things so we're going to do front end consists out of Wis and web flow webflow is the UI part of our front end WIS is the logic part of our front end and Zano that is the back end that is the database where we store the data and the business Logic the apis now until now you didn't had wiist and you didn't had the back end you only had the logic and webflow and in between member stack you know so the logic and webflow meaning the logic would be make or zapier right doing those things calling doing the API calls but it was only half of the piece of the cake you were only doing something that was like half okay but you know the other half was missing that's why you know bringing in external data rendering custom things didn't work so you know we had to hack things around with CSS including me you know I used to do that too we had CMS items and then we got you know the nice emails from webflow Enterprise asking us to all of a sudden start paying 60,000 a year you know uh I I assume more people than they should know about what I'm talking about so you know we're going to avoid all of that craziness today all that expenses by using wte and we're going to remove reduce our $60,000 web flow invoice because we have a fully loaded CMS that is not supposed to be that full because we store every member in it and we store every like in it and all of those crazy stuff we're going to offload that using WIS and on the back end and we will not need to pay that $60,000 invo because of this and we will not need make and zapier to have us charge a few pennies all the time somebody likes a post we're going to do that basically for free after our maintenance cost is covered which is pretty cool so you know let's start with this right now so we need West and xano xano will be our back endend this will do again the logic meaning the API so you you probably know that as web hooks we're going to build our web hooks in Zano and our zaps but with without zapier we're going to build that in xano it is a professional scalable no Cod backend so here no code don't get scared it is a professional scalable no code back end major industrial leaders are trusting it and it is visual but it uses uh PHP under the hood which is a super complex and Industry broadly used database you're going to get a postgress SQL database with Zano which is pretty cool big Enterprises are using it like even uh seens and uh you know all those big companies and it's fully compliant you have Hippa you have all of those things gdpr which is great so we're going to use this and we're going to use west.com as well which is your logic you know and oh look at that this is actually why I do the video because of exactly this because I want to help you get started and maybe even get some money in the competition so cool that I just saw that over there but you know this is West West is a JavaScript framework that goes on top of webflow to help us build this application with this really the glue in between webflow and your logic on on the back end because until now when we build something in webflow we needed to connect that to zapier to make to whatever now we're going to connect that to to Zano but the way we had to connect that was code right we needed to go to The Forum and do like post and then you know we had to send it to a web hook and then we had to add some code to fetch that response and then we did didn't know how to display that and then we need more code and you know all of the sudden I'm going to see the message uh code side limit reached and then I have to use with EDS and I have to hide them and you know they're always missing I don't know where that mad is where that code what you know it's all over the place so this is the problem that WIS solves WIS helps you add code without writing code of course you can right code in it and it's not as good as their advertising promise is where it says no code I would say WIS is in between no coat and low coat it is a little bit more than no coat which is a long word so they're probably just you know stick with no coat um but I would say it's a little bit more than no coat but a little bit less than L coat so it's a little bit more than no coat and a little bit less than low coat whis is like just slightly there in the middle cuz you have to write some super simple functions but it is super simple and you can learn it in 5 minutes so we're going to use that to bridge in between there and then of course web flow doesn't need any introduction that is the best design tool in there and this is where we're going to start so in here we're just going to start a normal design so I'm just going to add a diff block here and what we're going to build is a to-do list application and I'm going to give you all the hecky web development tips we're not going to use checkboxes but we're going to make diffs look look like checkboxes and so on but you know let's Get Right started here so I'm going to add this diff block here this will be the general to-do list item so I'm going to give this the class of to-do list not uh tfu to do list wonderful I'm going to give it a width of 25 R oh that was more than 25 RAM and a height of 25 Ram beautiful let's just give it some color here beautiful let's add some rounded Corners beautiful and now we're going to add a box Shadow you can never have too much Shadow beautiful let's add a seven in here doesn't that look miraculous wonderful now we're going to give it a slight border it is perfect and you know while we're already on it we may need to reduce a little bit of the Shadow beautiful like this is this will win the web Flow Design award ah beautiful so let's add uh no two Ram is too much let's do one R padding on all sides so that we can render the list items in here if you are concerned about the word rendering and list items and I didn't mention CMS is because we're not going to use CMS we're going to store this on our own database and save thousands of dollars by doing so we still don't have to write code but the design experience in the editor is a little bit different because if you use webflow CMS it renders the items inside the editor but as you can see right now in this example we're only going to add one list item and then we're going to move to the wiiz dashboard and then we will see that those items are being rendered on the site because you know Wiis is a separate company than web flow it's a separate tool right the same way as you cannot which you can because of their app but before the web before the member stack app you couldn't see your member stack members in the web flow dashboard same with WIS you cannot see what whis is doing if you're not on the live side or in the WIS that's board if that makes sense um but you know this is no bad at all so let's call this list item and we're going to design our list item right in here let's make this white let's give it some nicely rounded corners and while I'm looking at that we may want to make those Corners a little bit more rounded so they look even beautiful wonderful let's add some decent padding uh not border border Corner not padding padding needs to happen now so let's add one REM one REM one REM one R wonderful and now we're going to add a heading in here just like that and make sure to select oh H3 looks good okay perfect let's change that to uh let's do this thing this is the favorite thing that web developers do we're going to call this too item we're going to add this crazy those are by the way called uh curly brace we're going to add those crazy curly braces in here because this will be dynamic content like tokenized text basically uh you don't need to don't remember those words you you will never use them in your whole entire life uh so uh doesn't matter so here we go we have that and while we're already on it uh you know we are already system UI but that is a little bit too bold let's make this Timeless thin to normal beautiful so now here we have that so I'm not going to add a check box here because when you do things dynamically we need to make manage state so you know that is sounds may maybe more high level than it is but meaning that we will save those things in our database if it is true we need to make sure that the checkbox already when I open the page is checked at true right so it is possible doing this with HTML but you will find that working with Native HTML components like HTML tables radio buttons is a pain and you know this video is here so that you won't spend six ours building this so we're going to do what web developers love to do let's simplify things by making them not accessible and you know we can make them accessible later on you know we can we can hack our way around that that it is easy for us to do and accessible but for this simple demo we're just going to we're going to take convenience over accessibility I'm sorry but you know I'm going to do first of all need to do this inside here as a flex Flex to the side and I need to do a space between beautiful and now while we're on it let's uh Center this beautiful and now I'm just going to add give this a height of uh two R perfect and a width of two R so it becomes a box now I can design this and let's just call this uh checkbox which it is not really a checkbox but you know it looks like a checkbox it's a div so we're going to give this like a slight background so it looks really good we're going to make the corners round give it a very subtle very subtle border and now here comes the magic now when we build things now as a web application we can work with combo classes to add interactivity so I'm going to go to the check boox and add the combo class of checked look at that and now I need to you know update this sty a little bit you know make this maybe a little bit more gray so I know that this is checked look at that so now we have this is unchecked and when I click on it this will be checked and I see oh yeah that is checked and I don't have an SVG but you know you could add a photo of a of a check in here which I sadly do not have right now um or actually let's go to reloom icons and let's do this right now so we can even have it properly so let's go to check here we go okay so how do I do this because my recording bar is right over their button to check this let's see to download this okay we cannot use reloom oh I have to zoom in okay okay now I got the downloaded that SVG perfect so let's add a photo on the checked State let's add this in here and oh here we go and now we have this checked you know and now also we can just you know change background color a little bit and make this a little bit more decent cuz you know now we have a different indicator that it was checked that looks good so now I have this not checked and this is checked so this is our little fake checkbox beautiful look at that checked and not checked great perfect so now what we want to do is we want to go to uh to to add a little transition so on the default State when it is not checked we're just going to add a you know transition of all properties and let's make this like uh 400 milliseconds is always a nice one so oh it will not affect because it's a background image so uh never mind no transition so here we go this is checked and unchecked beautiful we start like that so now we have we have our list item our heading and our fake checkbox so now is the thing now is the question how do we get this thing to work so first of all now we need to configure those things in wte so we're going to go to publish this now to our domains and we're going to connect our webflow project to our whis project right now so let's copy this URL of our webflow site and go to WIS now inside the WIS dashboard we want to click on new project and we're going to paste our URL right in here we're going to copy this code that WIS gives us they call it the embat and we're going to move now go go to the side settings of your webflow project now we're going to go to the custom code section you need to have a plan or have an agency plan to add this so please feel free to upgrade your account if you don't want to upgrade your account it is completely fine adding this in the body or the header of your side code too that is how you can access and test around with WIS for free without having to pay for webflow now you want to click on create project and now WIS will be connected to your webflow site and you will see your webflow site inside of Wis now if I go to x-ray mode nothing is happening right cuz no elements are recognized by way wiist now WIS will not work I can't do anything right I cannot add an action here cuz you know uh no element is is recognized so what we need to do is WIS works by something called attributes if you know finu attributes and you know whs is made by finu they have their love to attributes so they're going to use attributes to make WIS work in your web flow project so let's go back to the web flow project and let's add some fun attributes here and web is loading a little bit today okay okay perfect now it's loading so now let's think about the functionality of what we're trying to build here we're trying to render a list and while I'm while I'm already looking on that I may want to do that Flex down and give it 0.5 REM space perfect so what we're trying to do is we're trying to render a list here and also we may want to make the scrollable beautiful so we're basically essentially trying to render a list of tasks in here so in order to do that we need to add attributes to the active elements think of it like this the elements that we want WIS to do things with need to have WIS attributes so of course we need to have this item because we want to render a list of it so we need to add you know a Wiis attribute on this item the way we're going to do that is we're going to go to settings and we see this section called custom attributes we're going to click on the plus and add an attribute the name will be WS that is w i z e d and the value can be anything this will be the name that this element will have let's call this list item now you can name them however you want just no spaces you can do list minus item or you can do list and then Capital IEM so camel case call it however you want list item and then we're just going to go to The Heading because it doesn't give us any value if all the list items just say to-do item we also need whiz to update the text of you know the task that we want to do to do so we're going to go to settings custom attribute plus WIS and let's call this item text just like that and then the checkbox we want WIS to add the combo class of checked if something happens with this element so what we need to do is we need to oh we need to go to custom attributes add the Ws attribute of checkbox just like that and Wis will now recognize those elements when I'm going to publish this on my site and we can do funky stuff with it so let's just wait till this loads and then we are ready to move over to WIS and you know go over that a little bit and then we can start building the data structure for this to add the logic to it and it looks like web flow is taking a little bit to load let's see what's going on here did it send that already okay web flu is taking a little bit today this is out of my hands it is internet am I connected yeah interesting so at the risk of losing all attributes Let me refresh and fingers crossed beautiful attributes are still there so now let's just publish this and let's hope this works yes it worked perfect so now let's go to Wiis and right now we see oh no nothing happened so we need to go to this reload icon and click on here now if I go to x-ray mode we see see that now all of the sudden something happened WIS is recognizing those elements and now we will be able to do cool stuff with them and this is where I'm going to do the cut because now we want to start building the database in order to do that we we will be needing xano so I'm going to go to my Zano account and I'm going to click on ADD table and I call this to do list project oh to-do list project and then I will do uu ID this is just for security purposes this is how you want to call those rows I like to use uu IDs CU you know every row has a unique ID and then it says add basic crud operations this is basically not what we want for this one um we're going to create an API Group from scratch here so to-do list project uu ID add table and now we can create a table to uh for our to-do list so let's call this task there will be our task and then we're going to click on the plus and we're going to go to Boolean this is like a checkbox this is the technical term and we call this a check box so I can now add a record and say by milk check and uh go to the office yep made it check and then we can say cancel Hulu not done yet um uh learn CLI Client First learn Client First H have to admit not checked and then we can do get member stack all the time and get waste of course and here we go so you get the idea this is now our database which is just a spreadsheet this is super simple so let's open a new tab with Zano that makes it way easier to work with it and now we need to create the logic the API the API will be the way how we interact with this database so let's just give it the same name as our database and uh yeah you want to have Swagger turned off or private requires token just don't make it public um for security reasons otherwise everybody will be able to call your API super easily and now we go to this button saying add API endpoint and we want to go to it start from scratch so what this does is we're going to create a web hook URL basically that we can call and get data from so let's call this get tasks get tasks and since we're going to take data from our database this is a get operation if we were to send data this would be post the other ones are not important um get and post so we're getting data right now so this is a get operation so now let's actually you know we don't need an input cuz it will just always provide the same static data but you may require inputs and then use them throughout your application but this is not needed in this example so we're going to go to the function stack on the plus and we are going to go to quiry all records so we're going to get all records and now I'm going to search for my table here we go and I don't need to Define any custom query I'm just going to go to save and now when I run this you see that I have all my to-do tasks this is it we just built logic to query our database so now if you go one step back we want to go to copy base URL this is where we will connect with this specific API Group that we created for this database in here so now we're going to go to WIS and on the top here we're going to create an app what we're doing right now is we're connecting this group with WIS so WIS can call all our endp points let's call this Zano too list oh Zano to-do list beautiful and now we're going to go to rest because Zano is a rest API you look at the web hook symbol everything that is not in this list will be the web hook symbol and we're going to write return so every time in WS we see this function editor pop up we need to write return because we are using JavaScript Expressions here so when when I want to return High I need to write return open quotes End quotes High then this will turn it into high this is all the JavaScript you need to know if you want to use WIS now we're going to paste our URL in here and this is perfect we can uh save this this is our group URL we're going to close this and you may ask you may ask yourself why group URL um if I were to go to my endpoint and copy the endpoint URL that's up here um you see that the endpoint URL contains you know the path get tasks but we will be using this get get tasks part in our requests inist because otherwise we would have to add a separate app for every uh endpoint Group which you know gets the project cluttered so you know we're going to add return open close quotes then the endpoint URL and this will turn it into the endpoint URL and that can be used beautiful now let's go to the request and let's select the name get tasks beautiful and now let's go to Zano and let's copy this path this is the endpoint path related to our endpoint group and we are going to go to app Zano return open close quotes paste this is our path here we go now we're going to look into the method this is a get method because we're getting data so we need to use get in WIS because WIS needs to do the get too because that is the type of the call now when we run this we are going to get data now if you were to have inputs in here let's say we want to have any input let's say we want to send the input of name potentially and we're going to publish this now I can still run this but for example if this would be um required and this is just as a side note this is not needed for this thing what we're doing here today but if this would be required and I'm going to re you know reload everything it will say know doesn't work because name is not in here so then I would have to go to the URL parameters and type in name and now I need to write return and I can do hey hey will be my name and then when I run this it will work I will get the data and if I go to the request history I will see that when I refresh takes a little bit sometimes that I passed on the name of hey but we again we don't need hey as a name but I just still want you to know this CU I think this is maybe beneficial but now if I pass on that name without having the name required it will just do nothing we'll just send empty data but just so that you know so we're going to get the data now you may ask yourself okay we have this list data now let's already start rendering the list right because you know otherwise that list is pointless so let's go to x-ray mode and let's click on the list item now we have this attribute list list item and we want to render a list of the data that we're getting from the database we're going to go to settings and we're going to go to render list that's how we're rendering a list and again we have to write return this is render list from from array array is a code word for list so as you can see here if I were to render the list from this this which is already data this is the array we're going to get all the data from which we want to render the list now you need to look for this uh square brackets if we have an open square bracket and a closed square bracket this is an array meaning a list and from this you can render a list because in this square bracket open square bracket closed there are multiple with those curly braces those are objects you see we have this object comma object comma object comma object uh comma and so on and so forth contained in square bracket square bracket and this is a list this is probably most of the times when you see this 0000000000 1 one one one this is the one above the first zero this will be what you need to do so we're going to look this is my tip here first zero the one over the first zero this is the one that you need and now if I'm going to reload this page and you know process this request we should be r rering the list but before that before we can render the list we need to assign a variable for index which is an iterator variable I don't have one yet so the list is not going to be rendered I need to click on this plus and let's call this iterator and I write of course always return we don't need to do quotes when we do zero because then we're going to pass on the Zero as text but we want zero as number there is a difference between numbers and text in JavaScript W so if I were to do something like this this will return zero as text but we need zero as a number so we can work with it on a mathematical programmatical level so I'm going to close this and the moment I assign the V iterator and then you know we see oh that item disappeared what happened because now we're actually rendering it dynamically we get some content flashing but you know we're rendering dynamically so the moment right now this request runs we're going to get our list which is pretty neat so far but now like on page load how do we get like how do we load this so this is where the difference between element and event actions comes in let's go give it a plus and let's call this load t s this will be a request that will load tasks this will not be element this will be event events are things that are happening on the page itself so we're going to add a trigger for page starts loading loading we're going to add a plus and we're going to go to the action perform request get tasks and now as you can see every time I go on the page you know those are getting rendered just like that beautiful but now they just all say to-do list item to-do list item or to-do item to-do item Todo item so what we do is we're going to go to the first to-do item this one and we're going to go to settings in the element action attribute is already applied and we're going to go to set text that way we're just going to use plain text here and we can set the value I can write return and I can do like hey for example but now if I reload they are all going to say hey I want them to you know every item in my list has a different name right and you know I'm getting all those different names in here so how can I get the dynamic name for the current item so the first step of doing that is to go to my request this request will you know get the data this is the thing that we're going to run so I can look into the data that I'm getting from my request visually and look look for the name and we see we have ID createit ad task this is the name I want to show this here so I'm going to click here and I'm going to click on buy milk now as you can see if I'm going to close this they all are going to say buy milk which is better because now we have Dynamic data that is coming from the database here from our API endpoint serving the information from our database but it is all the same because now here comes our iterator in the game we have a number we see if I have zero it will say buy milk but number one will say go to the office and number two will say cancel Hulu so if I'm going to set this to three it will say learn client first if I'm going to set this to four that will not exist because we don't have four but if I set this to two it will say cancel Hulu and one will say go to the office and so on so what if there would be a magical way of iterating over those Dynamic input fields to make them work with a dynamic rendered list from our list like if there would only be a thing such as that oh wait there is remember we assigned this iterator variable and we linked into this list under the variable for index section this will now get handy because if I'm going to set the text in here in those brackets where there used to be a number I'm going to add my iterator variable important it needs to be the one that is linked to the list if it is the one linked to the list as you can see right here it will then show the dynamic items the dynamic names for the list items so now my question is why is this one not working and that may be something interesting to look into let's reload and we see buy milk go to office cancel Hulu learn Client First get waste now for some reason there is an error that I cannot explain to myself so let's go to the data store and let's actually do some little bit of a debugging so as we can see I have four four doesn't have a task in here which is interesting let's go to our endpoint let's make sure everything is okay oh for some reason that that got cleared up I have no idea why but let's go to get member stack here we go and that should fix it get member stack here we go so that is working now so you know something happened on there so we're going to render this list right here that is rendered that is working so now we need to do cool stuff with it and the cool stuff that we can do here is using more actions in ws and but even before we do the cool stuff we want to check the ones that are currently being checked right because we have check check check we have three checked so let's go to x-ray mode and let's go to the checkbox and we have the attribute applied on it and we can set an action so there is this action called set class which is cool so I'm just going to go to my webflow project and I need to get the name of my combo class that want to add so that is checked so let's type in checked and let's verify with the iterator again so I'm going to write return and I'm going to go to my data from the you know from the request that I'm getting back and I go to the checkbox value I'm going to add that in here and again same game as with the text we're going to add the iterator now if I'm going to reload we see that the ones checked on the database are the ones now being showed as checked but how can we uncheck them like I want to click this and I want to uncheck it now here comes the cool thing because now we made a get request meaning we are getting data from the database and displaying this on WIS which works fine but now we want to do something where you know we want to you know listen to an event happening inside of Wis and then send it to the database take this information that we gathered in WIS that happened on the front end inform the backend about it ask the back end to do this change and then send us the updated data back and we're going to do this right now so this was get now we're going to go with post posting data back to our back end which is pretty cool so let's go to the back end to the endpoint and let's add another endpoint and let's go to start from scratch this will be a post because we're updating data and then we're going to go to um we're going to say this um we're going to call this check just like that save and now we have a post end point now we need an identifier because the goal here is to say you know you know record a 984 C 83 DC and so on I want this to be true this is what we want to do so now we have this ID field and we have this cool number so let's build an endpoint where we can send the number because every task has this uu ID and is in exible and where we say you know this one I want this one to be checked or I want this one not to be checked let's build this logic so let's go to run uh no let's go to inputs let's go on plus let's add text it may seem intimidating or intriguing not intimidating intriguing to add The UU ID thing because you're adding a uu ID but a uu ID is actually a specific data type which you don't want to use you want to use text so let's call this U ID let's click on Save and now when I run this I will be able as you can see in the quotes as always in the quotes add this number now we're getting nothing back cuz nothing is defined so now is a good time to uh do [Music] an update oh they call it edit edit record so now I want to go to my to-do list project and you see I have this field Name ID I have my field value I need to go to the input this is the input right the input I made up here and I can select The UU ID which I selected and now I want to update the checkbox value pretty cool so you see I'm updating this record right at least I'm not passing on any data so now I want to add a Boolean so let's call this check so this is like the checkbox this is the Boolean is the data format of a checkbox I have true or false so let's set this to True right so what we can do now is when I go to the checkbox value I can added the value in here the value and this is updating the current record so this is updating this one which is not checked right now right this is now unchecked so if I'm going to go back here and this will be true so we will be checking this so I want to update in this edit record the checkbox field with the new Boolean sent over so I'm going to save this if I run this you will see this will be now updated to true and if I reload this we see oh yeah that is true it went all the way down cuz Zano has her new filtering thing which drives me insane but that worked up by milk is now true so that works so this is what we want to do we're going to pass on a true or F false value and we're going to pass on the ID of the task and therefore we're going to update this now we're only returning one task which is completely fine so let's do this like this so let's go to publish and let's go to uh let's call copy the check the path and let's add another request in here so let's go to webflow H to to W sorry let's go to requests let's add this check request let's go to Zano let's write return quotes check this is a post and now we have URL parameters and body if you're going to do a post please put the things that you would normally put in the URL parameters in the body ideally so we need to pass on two values uu ID and check so I'm going to add uu ID right which will be return and I'm just going to leave this blank for now because I want to show you some super cool magic that W is doing for you and then I'm going to add check this will be return right so now now we have those values and I could technically hardcode them in but right now we have this request and we can call this endpoint that we build here now from WIS so let's just add some static data in here for now so that we can test with it let's add quotes here we go and let's add uh I need you don't need quotes for data type so if this is true you will not need to add quotes you should not and now you see I will update this record and get this updated data back so what we need to do now is when I for example click on any of those uh you know of those check boxes I need to register where I clicked on and the cool thing is WIS is basically doing this for me I don't need to set you know any data or recognize where this was clicked on I can just simply you know go to my element here and I can add another action on on event click prevent default and I can run an action to perform the request of check I don't need to do more I don't need to pass on any data so now it will not work work it will come back as you know no data provided but if I click this and reload if I click this you see that we are going to update this we're going to perform this request on click right so it will just you know we'll just always send the same thing nothing will change but when I click any of those you know it will update the request so now the cool thing is WIS is able to recognize where I clicked on now this is a very complex thing in web development and WIS is doing that for us so think of it like this when I go to the check and I have my uu ID which you know every every of those tasks being rendered here is dynamic you know like this one is starts with seven this one starts with five let's go to this uu ID and let's again add our iterator that will make it Dynamic so the cool thing is and this is cool if I click on cancel Hulu right cancel Hulu is checked if I click on go to the office and reload go to the office uh will be checked because WIS is registering where I clicked on sending that to the back end and then telling the back end yes make this item true which is super cool but we don't always want this item to be true because if I click this again you know it's true you know but how do I go to false so what we can do is but the cool thing is actually with when I perform the request let's say I perform the request triggered from this action let's say I click on this the third item let's take a random number I click on the third item and when I click on the third item and this request in which cons making sure it uses the V iterator that is linked to the list I click on but when I click on this item inside a list you don't even need to apply the iterator on this item but if any item in this list item that has the V iterator assigned on top of it is clicked and you know I link it back to you know the ID that you know was this list where this list was rendered from and I add my iterator on here and I click on it it will take the ID of the third item when I click on the third item on when I click on the fifth item it will take the ID of the fifth item and so on and I only need to add this V iterator you don't even even need to know how how this works you just need to know they are all Sy together and this is why WS is no code right you don't have to worry about those things so I'm just going to add the the iterator in here and then it will make sure that it will click the right item right in here beautiful so now I want to do the same thing with here too I'm going to take my checkbox value I'm going to update that number with the V iterator so we always get the item that I click on and I want to do I want to uh reverse this so the way I do that is right now this is true right but when I add a you know an exclamation mark it will be false so I will reverse the current state and then I will send that on the database and have this equal the new state so when I click on buy milk and reload you know buy milk is not done which is cool and when I click on cancel when I click on everything basically everything now will be undone so now we always need to refresh no we don't so let's Implement that logic to have this refresh for us so we want to add an action that will be refresh list and this will be refresh the list this will need to be an event and we can listen for an event called request finishes so every time the check request finishes we want to perform the request to get all tasks because we update the task and then we can call our initial request to load this tasks again to give us the updated information so now when I click on buy milk buy milk will be checked when I click on get WIS WIS will be checked when I click on get member stack member stack will be checked if I reload this beautiful get Client First Client First will be checked go to office office will be checked and then when I you know actually I'm leaving right now so I can check this again it will be unchecked and then you know it will rearrange that list that is Zano being crazy so what we want to do is we maybe want to arrange this list that the which is actually what we want to do we want to have the unchecked items on the top so this is you know it's it's organizing that because based on timestamp based on when it was done we're going to update this so this is how we're going to build like a super simple uh to-do list right so this is actually happening by timing so let's update this I want in every instance the checked items to be on top so what I want to do is I want to add um let's see if I can do this in here I can sort the output but when I go to my response here I can add a filter so let's go one step back I have my response in here as a variable so I can add a filter to this to this you know this this data that I'm returning from here I can add a filter I can add sort and then I can do path check right we called that oh checkbox so this will be path check box and checkbox we keep this as it is and ascending or descending we probably need faults I assume let's see oh absolutely wrong thing I was at the wrong Endo that was my mistake don't do this go and publish go to the different endp that is rendering the list this has relevancy to it and now go on response add filter sort we're going to sort oh sort this click on sort then we go to H we look for checkbox for the checkbox item and we are going to try false if not it's true for the Sorting mechanism let's run this and we should have all now we only have true on top we just want to reverse that so let's go to return and the sword filter we're going to change the ascending or descending to True which probably means ascending they should just have us put the word in there yeah now so now all faults are on top beautiful let's publish this and here we go so now we're rendering this list when I click on cancel Hulu it will be automatically organized so only the undone tasks are on top so you can see if I were to do it like this but if I now have unchecked Client First Client First will be over the one that was done because you know it will be sorted and then when I do this it will automatically arrange so only the checked items are uh being rendered and there is a small delay when I click on this item until it is checked because it is going to the database coming back and then doing another call asking the database and coming back again so there is a little lack what you can do you can fix this again this is uh super simple I can add another onevent click because right now this list is being being rendered from current data but it takes a little bit to go to the back end and come back until we update the data but what we can do is something we call Progressive updating and we can update the current data only on the front end before the data was updated on the back end to make it look like it updated instantly until the content refreshes until it then shows the actual state that is represented on the back end so this was a lot of words this is a little bit of JavaScript but let's do this so I will have to go to run function and you know let's update this so very simple let's write return and you know let's go on you know the current task item in my list right so this is the checkbox V iterator we need to take the V iterator so it's the dynamic one and then we're going to do exactly what we did in our request so let's go to the request for check and what we did here is we are reversing the current state and we're going to close this right so now when I go to the checkbox function here the the checkbox value because the cool thing is the data in here can be modified so if I have this equal zero right like this will not work cuz it's a bull right but if I do this uh false I I will be able to update that state probably it doesn't look too promising but uh let's see so I tried to reverse that that may only work in my mind though let's see let's see if this happens if this works it works but we're going to get content flashing uh it works instantly maybe not the best way of doing approaching this uh it's triggering it now two times oh now I know what I do now I know what I'm doing wrong here you see this is troubleshooting 101 because now I update the current state before it goes to the back end I am updating the state twice so think of it like this I click on it and this only works good like you see this will not work at all so what is happening I click on it immediately because whis is super fast I click on it immediately WIS is making this true and then in our let's say it was false now I click on it WIS is making it true and then on my request I take the current state which is true and I'm making it false so therefore it's not updating it okay so now I'm going on the check and I'm not reversing it because then we would be double reversing it and now this works instantly look how fast and cool this works and here you go I can you know check get member stack and then get member stack will be down here uncheck by milk look how great this works and it is automatically rearranging I can go check go to the office and it's all the way down I can go get member stack it's all the way down buy milk it's all the way down cancel Hulu all the way down learn Client First all the way down get whis all the way down now everything is done I uncheck those instantly and we are updating the current state which it is rendered from you know which I just showed you using the run function meaning what we're doing here is on click of this element we're getting this item's value and then we're getting this items value again reversing it and having with the equal sign having this equal the new state the new value of it right so think of it like this if this is true right if this item is true I will take this item again reverse it so make true false and then with this equation here have false equal true or true equal false right this is reversing its current state cuz with the equal sign I'm setting its new content so therefore when I make this get member stack it will update this and since we're already updating this here in this request I just need to send its new value to which is probably making sure to already update that before you fire off the request and then when I click on it immediately it's it's updating that it doesn't need to go to the back end and come back to represent the front end change we're progressively changing that now a downset is if if your server is down they will just make a check but they will not check it but uh this is another issue to worry about you you don't need that you know like sometimes even Facebook has that issue uh you know but this is the way this is the industry Norm of doing those things and it's working great look at that and this is fully built in webflow and now you can finally build web applications that are fully interactive in web flow and it's not like we're just doing funky stuff on webflow I'm looking at the database get member stack buy milk go to office get WIS I refresh my database all of that is updated right so now I uncheck everything and now in my database in real time everything is unchecked and now I check everything in here as you can see and now in my database everything is checked look at that isn't that amazing this is your first web application built in WIS and web flow and now for the next video this is the basics now after this you can build everything and in the next beginner mini course course this is really a c crash course in the next crash course we're going to add member stack in there and we're going to build our first AI SAS business in less than an hour so let's Get Right started and uh yeah see you in the next video thank you so much for watching thank you so much for spending one hour together with me right here learning ws and web flow and web application development you just learned a tremendously valuable skill here because now you can turn your ideas into reality thank you so much for watching please let me know in the comments if you have any questions I'm here day and night to help you and please let me know if you have any ideas for other videos or if there's anything specifically that you're struggling with or you would like to see a video about I'm always here and happy to help thank you so much for your time I really appreciate that and see you tomorrow

Channel: NoCode ProCode

Views: 2,184

Keywords:

Id: gvVjR0pSndU

Length: 63min 57sec (3837 seconds)

Published: Mon May 20 2024