Wized features speedrun! | Part I

[Applause] [Music] that's sweet nice okay what's up everyone hello hello hello another technical live stream today and I'm excited because today we're talking about all the features from whis okay so today we're gonna do a speedrun of me trying to explain you what it's possible to do with WIS so all the different features that are built into WIS but before doing that let's just say hello to everyone oh I see already a bunch of comments here hey the good to see you hey Greg I wish you a happy Friday to all of you guys and we're gonna wait about three minutes so in about three minutes we're going to start in meanwhile feel free to share how was your week how are you doing hey heyy how's it going for those who you who don't know whsb that channel that you see here commenting he has a lot of resources related to WIS and I love his resources you should go and check them out if you're interested in WIS and if you're watching this live stream you probably are so don't miss that out okay cool how was your week guys you can love to know how is everyone doing y nice okay so a couple minutes and we start this is how long has it been since we did the last open YouTube live stream I think it was three weeks ago something like that so okay good so today we're doing this live streaming again and then any more technical Advanced INB questions that you have from today next week we're going to do a more in depth fin plus session where we're going to grab any questions that you have and you'll be able to just ask me anything so feel free to if you're a f plus user remember that you can attend those live streams I I always miss people there sometimes we're a lot of people in the fin plus live streams and sometimes people um we are not that many which is still good because then you less people has have more attention from me I can dedicate more time to everyone but I encourage everyone want who is a fin plus user to come there because you can I think that you can learn a lot and and it's something that you have you should take advantage of it Marco who was the person you just recommended for resources it's that channel called WIS daab so gab can you show a comment from yesin from WIS daab there yeah that one that one who saying amazing go ahead and check out that YouTube channel because it's amazing he has a lot of videos related to Wiz hey Samuel good to see you okay nice one more minute and then we are going to dive into WIS and all the features that you can use today how about we we start sharing the screen so gab if you can please share the screen nice okay so the idea today is that we have about F 5 55 minutes and in those 55 minutes I want to do a speedrun trying to explain you all of the features from WIS I don't know if we'll have enough time so here you can see how I have my my own checklist of things that I want to talk about today and this is just uh I'll clarify about what we're talking but you can see how there's a lot of things now I want to make it clear today I am not going to tell uh to show you how how to build X and Y and Z today this is not a live stream where we're doing hey we're gonna build a dashboard or hey we're gonna build a Marketplace or whatever we are not doing this today today we're taking a different approach because today I'm going to explain to you all The Primitives all the features that are in Wiis so then you can use them as a building block to create whatever you want okay so today I'm not focusing on a specific goal of building something in particular I'm GNA explain you the tools that you have inside west so you can build anything with it does that make sense if yes I don't know if you can get thumbs up in here but you probably can leave a like in the in the in the YouTube video already so hey okay um we are gonna just start hey Andre good to see you okay great so I'm just here in the in in our landing page and let's just start by doing a quick overview of of what Wiz is and essentially if you don't know it already WIS is a tool that allows you to add any kind of interactivity on a webflow site so webflow site it's a static site you have HTML you have CSS maybe you have some animations with interactions but that's it um essentially it's a static site and nothing special it's going on there West it's the layer that you would usually require um using JavaScript to make your site interactive so if you're trying to build any kind of interactivity either if it's something very small like a form that when submitted does a cool animation or something big like a full client dashboard a full marketplace like whatever you want to build a web app you can do all of that using either custom JavaScript if you build your self using either a JavaScript framework if you are exporting the HTML and CSS some people do maybe I I build a site I designed it in W in Waffle sorry but then I I want to write my own web application using react some people do that or you can use WIS and whs it's like a JavaScript framework that is specifically designed for wlow so WIS it's a layer that goes on top of a wlow site to make it interactive to convert it to a web application okay so now that we know what is WIS you can if you want to check this landing page feel free to do it but let's log in and let's start diving into all the features that you get when using WIS we're going to create a project from scratch and I will try to go I'll try to be as fast as possible but trying to at least explain things because otherwise this stream is going to be pointless and essentially if you have any questions if you think that I'm going too fast with something if you think that I did not explain something well let me know okay I I'll just take a step back and address it again but I think that we are good I Glenn I agree build anything yes of course and thank you Glenn H good to see you here hey himansu nice okay you guys can also leave a like on the video though it really helps us yeah thank you Gabe yeah of course nice okay so we are now already in the dashboard in my case I have a lot of projects because I test a lot of things but you probably if you're starting from scratch you don't have anything so in the dashboard you essentially just need to know there are two things there are projects and there are workspaces so in my case I have two workspaces which is these Zex workspace and these Wiz tutorials that I use to store tutorials of course and then I can also be a collaborator of other workspaces because in WIS you can collaborate inside any any in any workspace and any project inside that workspace but in my case I have my own workspaces so I'm just going to use it and I'm going to create a new project so let's see how what it takes to create a w project in my case I already have some things pre-built in we flow so I don't bore you with all the building and designing uh you know I everyone knows that I'm an amazing designer so you don't need to spend some time love watching that I already built it I have my own wlow project but you probably want to create a WL project first before creating a wish project so I've got my own wflow project here and let's just create the project in WIS I'm going to call this uh speed run like that and what it's going to ask me it's the staging domain okay so for now I'm going to skip this and I'm going to choose the next version okay right now it's not the default but soon it's going to be the default version so if you're following with me just focus on the next version which is going to be the default version in a few weeks from now um so the first thing that I want to do is just copy these scripts this is what is going to power your wlow side so when you polish this on wlow this scripts are going to load waste and it's going to it's what's going to convert your site from a static site to web application you'll see now so let's copy this let's come here and in my case I'm going to go to site settings I know that I have the fin Chrome extension but let's not assume that everyone does so I'm G to go here to custom code let me zoom in and when the custom code section loads which looks like it's taking a while thank you wlow and if not we're going to use the finer extension come on now thank you okay so we're going to slap those scripts that we just copied here from the project creation inside the head code you can always do it in the footer but I recommend you do it in the head with it's already Smart IT loads it synchronously it's not going to block anything it's not going to affect your page performance so publish this side nice it's already publishing and let's go back to the designer nice one last thing that I'm missing now it's giving the staging domain which in my case I'm just going to copy it from here so copy link address boom that's it so in my case if you want to visit this after the the the live stream it's stream dwiz DPed run. flow.io so you have to add the wef flow.io domain that you're using for your project okay so that's it create a project and this is going to send us to the configurator nice cool Okay so we've got a fresh new Wiis project there's nothing here we're going to do now a quick overview of everything that we got in the configurator but before doing that let me see if I have any questions hey Iran nice to see you uh har is asking I need to make a website from which anyone can book a movie ticket and SE can we do yes we can do that in a future so today I'm going to explain you harsh how to you know how to use wlow as a tool so you can start thinking how you would create this movie ticket uh booking system okay nice okay Tori good to see you nice benia good to see you I thought this would be the aadam stream it's gonna happen next week or in two weeks from now we're we're gonna confirm it okay but it's coming don't worry nice okay and cyen good to see you can you also show how to use Ed code with this later if you on okay no worries okay um am I Frozen um am I still rolling I think am I I am right I think I do nice okay so let's first of all scan what's going on here in the configurator because we've got a lot of buttons but let's try to understand everything that's going on so first of all exactly like webflow we've got here our site so in wef flow you can design this site inside the canvas and in WIS we also have a canvas where you can also see the site and you can interact with it nice so let's start here from the top bar here in the top bar we've got a bunch of buttons the first one that we are going to find is these Pages drop down if you work with wlow this is going to be very familiar with the pages drop down that it's also existing here in wlow so essentially right now I just have one single page so it's not like I can show you much but you can see here all the pages and you can navigate through them and those pages are going to load here in the canvas makes sense nice so next button here we've got a Reload button okay this reload button is just meant for reloading the page so imagine that for any reason you want to test something when the page loads you can always reload the page from here okay so you you quickly just hit it reloads the page nice nice okay so next button here we've got the canvas and inside this canvas we can set up a bunch of things first of all we've got navigation so imagine that you are navigating through your site here if you want to go back and forth you can do it through the canvas controls so you can go back you can go forward or again this button does exactly the same one as the one that I have here it's just a way of re reloading the canas but there's one additional thing and it's that you can also load each page with qu parameters because remember that in West we want to build web application with it and quer parameters a nice part is it's a nice feature from webflow from browser sorry from the websites that we can use in our advantage when building web applications so imagine that for example I want to use something like I want to load a site with I don't know ID 1 two 3 4 we can do it here and now the canvas here it's going to load using that specific ID in the query parameters okay so anytime that you want to test something with query parameters you can do it through the canvas controls going to remove this and let's move on nice okay so next button we're going to switch to the right here and we've got the xray I'm going to click it and you're going to see that nothing is happening now the reason nothing is happening now is because xray will always show you the elements the WIS elements the elements that we are interacting with in our web application okay so now you're going to think probably like okay but what should I do like nothing is happening here um there's just one thing that you need to do in your webflow project when creating web apps in West and that's actually two things the first we already did it was slapping the script text in the project that's okay we did it the next thing is that you need to identify which elements you want to work with when you are creating a wiz project so imagine that for example we're going to do this in a second but imagine that for example we want to dynamically change these elements text this means that first of all we need to tell WIS that this element exists we need to identify this element somehow okay so the way that we do it let's jump into the we flow project the way that we do it is by um adding an HTML attribute to the elements that it's very simple it's just wte and then you can add any name that you want in this particular case I'm just gonna say my cool text okay you can write it however you want you can do my cool text like this you can do my cool text you can do my cool text it's completely up to you there are no restrictions here okay in my case I like using snake case which is using underscores so I'm going to use it but completely fine if you want to use a different naming system it's completely up to you okay so I've added this custom attribute remember that you just need to select the element go to the settings panel in wflow and then in the custom attribute section you can add wiist and the name of the element now if we go back to the configurator next to the x-ray mode we've got another button that's called refresh attributes this button essentially what it does is it rescans your we flow site looking for attributes because right now if I activate x-ray you can see how still we cannot see the element but if we refresh the attributes now that we've got a full scan of the project and we open X-Ray cool look at that we've got the element nice so any element that has been identified as a WIS element you can now interact with it in inside WIS and obviously it's going to show up here in x-ray so we're going to show I'm going to show you later but essentially in x-ray you can click on any element to create an action like that look at that now I'm creating an action for my cool text but I don't want want to get ahead of this so I'm going to remove this and let's continue looking at the buttons here so first of all we've got undo redo button very convenient so I could go back or I could just move forward very nice um then here we've got the saving status okay same as waffo so nothing special anytime that you make any changes in the project we are going to automatically save it for you so you don't need to worry about you know constantly hitting to save the project nice and next button here preview it's just going to essentially send me to the waffle site the live site which is loading a bit slow now I don't know why okay cool like that so preview you can always go and visit your webflow site and the last button that we've got here in the top bar is the publishing okay and the publishing feature in West Works a bit different of webflow you can always publish to a custom domain okay anytime that you want to ship something live to a custom domain you can publish it exactly like you do in wlow so you come to the publish you select the domain and then you go ahead and publish but anything that it's development so anything that it's staging it's published automatically so you'll see now but when I start creating actions and requests and stuff inside wh you don't need to be constantly publishing to be able to test it in the we site that is automatically handled for you okay so publishing it's always going to be automatic you can see how he was published uh a few seconds ago or publishing to the live side so shipping stuff to production that happens manually you click on it you publish you go live okay okay great so any questions so far let me see the the comments here blank and Ray yes loving your video oh yeah yeah where that yes makes great videos I thought hypens weren't allowed in attribute values he so that was a thing of the past you can now use any any name it's completely fine so if if you prefer to use a different naming convention for West elements it's completely fine feel free to do it great okay so now that we know about the top bar let's check the sidebar okay everything related to managing our project has happens here on the sidebar so first of all first panel we're going to have my apps and we're going to talk about this later but essentially the apps are going to be the Integrations with services like rest apis or Firebase or subbase or um whatever you want to uh use okay if we keep adding more Integrations that's also going to be available here in my apps okay and all apps are then used by requests we'll see that later so next thing it's actions and actions define all the actions that happen on your site that can go from something very basic like changing an elements text for um to something very complex like waiting for the bits to be loaded and then on their specific condition doing uh X Y and Z like all the interactivity all the actions that happen on your site are going to be defined in this panel the next thing is requests so anytime that you want to communicate with the server so if you want to send some data if you want to load some data if you want to mutate data whatever you want to communicate with your server it's going to happen here in requests and then we just got some settings for the project in this particular case we've got you know we can see the usage we can see um if we want to delete branding if you got a A paid plan for that we you can TW the domains you can if for any reason you can uh you want to grab again the embed code so script tagt you can find them here we also have backups that we do automatically for you and you can preview a backup right now I don't have any but we can check it later so you can preview a backup you can restore a backup very convenient you can share a project with a read only link also very convenient by the way let's just enable it and send it here in the chat in case that somebody wants to check it out I'm giving this to you gab so if you can send it to the YouTube channel that would be nice and then you can enable if you want to clone a project so people can just start a project cloning yourself um yours and then you can delete a project of course okay nice so next thing it's going to be the data store this data store it's one key piece of your project because it contains all the data of your project okay so anything related to storing the current state storing whatever the user inputed storing specific cookies storing um the data that was uh submitted through a form like anything related to the data that currently defines your application it will be handled from here and don't worry we're going to see how things can be created and interacted with inside here okay so for now I'm just going to move on but we'll see each one of these uh sections later then we've got a debugger and the debugger is entally what a tool that we've got inside w to tell you when something doesn't look right so if for any reason an attribute is missing or if for any reason you have set up the wrong script text or anything that we can uh find out that it's not correct the debugger is going to tell you okay so keep an eye on the debuger in case that there are something uh some things uh highlighted there next thing you can always get in touch with our support team we've got a full team of people willing to help you and these are real people so we don't have a a iBot we've got real people behind this chat who you can ask anything okay that's the power of is and we don't make you pay for it just feel free to ask us any question our team will be very happy to help you with it next thing you can always click and access our documentation directly from here so anytime that you want to read about specific topic here you can just access it through the documentation button in here and the last thing it's that we've got a dedicated videos panel so inside this panel we've got a b a few tutorials that you can just check out because I think that there's some cool things in there so you can open a video you can even keep working on the project but while watching the video which is convenient and we'll keep adding more and more videos in this panel so I recommend that everyone checks it out and the last thing you can change the dark mode or light mode okay completely up to you I'm going to leave it as light mode nice okay so let me just check if I'm doing well here we've talked about all of this nice nice nice reload canas x-ray add refresh attributes nice nice okay we're going quick sidebar overview okay so it's time to start building stuff it's start to it's time to start uh looking into what you can do with W before doing that let me check the comments here love love how easy it is it is yeah it is very easy okay video life is lit yeah yeah it's very convenient and some sometimes people doesn't doesn't realize that there's the the videos panel there so that's why I'm telling you I recommend you check it out Urban pixel is asking do we have to integrate a calendar app if we are creating a booking system a multi-service business like a Veterinary Veterinary Clinic with multiple services or will the calendar be built inside west um probably it's not going to be built unless it's a plugin we are working on a plugin system maybe it's going to be a plugin but you can always you don't have to wait for plugin to come because I cannot tell you right now if if there's a a date for that but you can always interact with any third party libraries with West That's The Power of West that it's not only um it not only gives you what it's already built in here but it's also extensible it's developer friendly we've got a full JavaScript API that you can use to interact with like a calendar uh Library if we have time I'll talk about that but first of all let's go and start creating stuff so as I mentioned before we can always rely on x-ray so let's start by creating a few actions so I've got my cool text here let's do something with it so first of all here I'm going to create an action all I did was just click on the X-ray here so I've got this button nice and inside here we can Define whatever actions we want for this specific element okay um so let's just start by doing a very simple set text so you can see here I've got my element selected and I'm setting text I can decide what type of text I want to set in this particular case just plain text all good and all it's left now it's defining what should the value of the text B so now the scary part happened and it's we opened the function editor now stay with me don't worry for now let's do this return hey like that okay I'm going to explain this in a second but look at this check what happened now we already have our text here so everything happens dynamically in West you don't need to be refreshing you don't need to do anything we just change stuff here and now we've got our application automatically updated with the new state nice so very basic action we are setting text and in this particular case we are setting just this string nice so now let's talk about the function editor every time that you need to define a value in WIS whatever reason setting text setting a class name rendering a list uh showing or hiding an element uh creating a variable whatever everything that uh every time that you define something something that expects you to return a value you are going to find encounter this function editor okay this is a JavaScript function you can write any real JavaScript Insight here and it's going to expect you to return something from it that's it if you understand this concept you already know 80% enough for writing stuff inside the function editor inside these functions you can do whatever code you want whatever and then you want to return something and that thing that you return is what's going to be always used as the value like that now this is very simple I know we're just doing this uh return one let's just go back and say hello world like that but like this is hardcoded like we just have a string here how we how do we make this Dynamic right so now let let's talk about reactivating wiist let's talk about what happens when things are more dynamic right so to do this later I'm going to do a a full walk through of the data store but for now let's create a variable so I can show you exactly what what I'm talking about let's create a variable and in this particular case I'm going to say um count okay this variable is going to be a counter so we can increment it for example and the initial value in this case you can see how again this is expecting a value so I need to return something from the function this initial value it's going to going to be zero that's it so if we go back to my action remember that you don't need to be navigating here you can always open xray and click on the elements if we go back to my action and check this in here um Let me refresh one second I want to check something yeah we're good okay so if we come here and edit this function now I can access my variables from here so look at this this function provides me with all the data that I showed you from the data store which we have here so we've got variables we've got navigation cookies Secrets input field forms we'll talk about everything but the key part is that we've got access to all of these things inside our function so we've got the cookies data we've got the forms data we've got the inputs data navigation data requests data trigger data varable data Etc okay so in this particular case I want to access the variable that I just created so I'm going to say V Dot and you can see how waste it's smart is already telling me hey you've got a variable that's called count so you might want to use this so I'm going to use this v. count and now check it check this out now we are using the value from the variable nice I know I know that it's not very mind-blowing because we just have a number zero here but now we are using a dynamic value that's the key part we're using a variable and that variable it's D Dynamic so to to see what what I'm talking about let's create another action okay so I'm going to go back to wlow and I want to also start using this button here so let's create a WIS attribute for the button and let's going to say increment like that let I'm going to change this and it's not going to be no longer my cool text it's going to be uh count display so we we we've got meaning meaningful names throughout our application which makes sense um okay nice so now first of all I'm going to refresh I'm going to rescan the project and we're gonna see something hey look at that we've got the debugger telling us hey you defined an action with a cool text but we're we cannot find that so you might want to check it out that's the cool thing of the debuger it's going to tell you when something goes wrong so let's fix this issue let's go back here and in this case I want to use the my count display okay I'm also going to change this toon display just to make things organized like that cool and we're back to square one nice um looks like there's something wrong here because it should be updated so I'm going to look at that but this should be clear I'm going to check it later maybe we going again refresh just for the sake of not having that uh error show up there okay nice cool I'm gonna fix that later so cool display here now let's open xray and we can have already an action for the increment button let's see here I'm going to click on it increment nice so what I want to do now is when I create uh when I click on the button I want to update the variable that's it so I'm going to come back here to actions we are targeting the increment element and I'm going to say on event we can listen for any event I'm going to dive deep dive into this later but in this case I'm going to use a click event okay and what I want to do is I want to set a variable so anytime that you've got an event happening if it's an element or if it's a page event we can always then do actions after that so we can perform a request we can set a cookie we can set a variable we can navigate to something or we can just run a function so in this case I want to set a variable nice and this variable is going to be vount and what I want to do is I want to take vount and I want to increment it by one now remember what is happening here in the function editor the function editor is expecting me to return something and that return that something it's got to be count plus one right because I want to increment it by one so all I have to do is say return whoops v. count plus one that's it so when it's zero it's going to return one when it's one it's going to return two blah blah blah so nice looking nice so look at this that's it now we're making things Dynamic okay that's the beauty of West that everything is reactive so if we go back to the count display remember that all we are doing it's telling West hey this element should always be populating the text with the value of vount that's it you don't need to worry about listening for when vount changes uh getting the value of vount rendering the element um like you would do normally with JavaScript if you were building this yourself you don't need to do it w it's your JavaScript framework that does it for you so in this particular case because we're stating that we want to use vount for the text when we increment that text it's going to be rendered again does that make sense I'm going to check the the the comments here the preact signals it's powerful well we use uh we use signals they are not preact signals but we use signals for this yes which is very performant there's one live stream that I talked about this if you're interested in how West was built you can always go ahead and check out that live stream theore is asking is there any way to copy and paste all attributes in wlow any app or extension which can do that um not sure so we've got a a West app that help you adding attributes to elements but I think that that's a with can talk about it in a different live stream because today I'm not gonna have time but yeah there are extensions for that nice okay so I guess that's something like that variable in we flow Marketplace uh oh okay nice so Benish you're asking if there's some kind of marketplace where you can just copy variables and stuff like that that's going to come that's in our road map it's not right now existing but we're going to have things like this where you can just grab a third party created functions or actions or variables stuff like that it's going to come nice okay so let's move on we've got here set text function editor reactivity set variable nice and set text Dynamic Okay cool so let's keep doing stuff with it so how about we do some visibility so I'm just going to go again to this element remember that inside an action so right now I have an action for my count display you can create as many subactions you want okay and it's always going to be free for you like you don't need to worry about how many actions you add inside here we don't count those those actions you just need to worry about the amount of actions that you have in this side panel okay that's important so here in actions um we right now we have the text but let's do some more conditional logic let's say that for example we want to set the visibility of this element and I want it to be visible whenever ever B count is less than 10 or less than 100 less than 10 whatever like that so right now it's hidden you can see it I know if we refresh this it's visible but if I click now when I go and I go higher than 10 this element is being hidden and the reason is because we have set visibility defined like this set visibility you define the condition when the element should be visible nice so let's move on let's do something else let's do um set sty and let's do something like I don't know what could we do let's do fun size and let's do return and I want to have the B count Rams like that so check this out this is something new that I didn't explain before but this is Javascript as always this is a way that this is called it template literal in JavaScript and it's a way of creating a string with a value inside it okay you can you can look it up it's called template literal like that okay so if we do this now we are setting the font size of this element based on the amount of B count I know that it's not very convenient but that's how it works let's actually start not from zero let's start with one in the variable so um so we can see the element initially nice click click click nice cool okay more things let's do also in this same element action we are setting the text we're setting the visibility we're setting the style so in this case it's font size but you can use any any custom sty it's up to you let's also add a class so let's set a class and the class name it's going to be I don't know what class name could have used from Client First like text color prom no text color alternate what is that no text color secondary oh my God I don't have anything text color no text uh uh what what can I do Tex St muted yeah let's do this texti muted for example okay so let's go back to W to West I want def find the class name called uh text style muted and how about we say hey I want you to add this class to the element whenever count it's higher than five so we can see it so now we've got got that let's let's start clicking click click click and now we've got the class attitude so we could expect it but you can see how the the the the the text color changed a bit nice okay more things so we've got set visibility set sty set class set text oh yeah we can talk about setting text um because there are more ways of setting text but hold on let me check so set class what else what else set HTML attribute we could do that too so we can update a any attribute same as you would do for example inside wlow doing custom attributes you can also do it with whz but it's going to be dynamic so imagine that we want to do data um count and this data count want you could be vount for example so anytime that vount changes the data count attribute it's going to change so if we preview this so I can show you guys with the elements here and we inspect the element like that check this out we've got data count here like that and if we keep incrementing look at that look at that so this data count it's again reactively changing based on the count because we defined it in waste nice great okay what else we can do more things we can do um add a parameter to a link although we don't have a link we could render a list although I'll talk about it in a second and we can do more on events let's go back to the text in here and let's do just so I can show you let's do instead of V count for a second let's do some markdown so let's do hey like that and instead of using PL text now I want to use markdown and look at that what's going to happen now is that this is now an H1 so if you're not familiar with markdown you probably don't care but you can use markdown to render stuff so maybe you want to do something like title one whoops sorry Title One and some text and title two and some more text and let's do a link link and this link it will be like this so this is markdown this is not something um made up by West the markdown it's it's a a way of defining text with this syntax in here so now that we've got this mark down here look at that we've got all of that so it's very convening when you're rendering data from a server ET when it's a rich text or we could do some HTML for example and maybe from this HTML we want to return HTML like H1 title and H1 like that and now that we are using HTML like that here we always going to see the the HTML rendered very convenient nice okay cool but let's go back to PL text let's just give it a return V count like that nice and remember that always going to be um uh updated for you automatically okay let me check the comments here uh don't forget to mention the hidden feature for the event oh yeah yes I'm going to talk about that later okay some decoration suggestions here sometime we wanted to do complex stuff so we need to use custom code correct um you can always use custom code inside west nice okay cool if you have any questions remember that you can ask them and I'll I'll I'll just try to address them okay so let's move on here I've got this set sex HTML attribute error parameter I'm I'm going to skip it because I don't have a a a link TCH to find but essentially you can also if you're interacting with an element that it's a link you can also change qu parameters of a link or you can also interact with input and forms so let's go to the next section here and let's check this form populating we can interact with single inputs so a single input or you can interact with entire forms with West so let's go and in wlow and Define these things I'm going to Define this input settings custom attributes this is going to be West and it will be um whatever my input I don't know like that and we also want to define the form okay so when you interact with entire forms you want to select the form element okay it's important not the form block the form element so I'm going to select this form element and custom attribute again with in my form for example cool let's publish this go back to W refresh attributes nice and now in x-ray we've got this cool so my input let's create an action for it and let's say that we want to dynamically add a input value to it like that so return hey cool so now that we've got this look at that my input now contains my value right so I can also for example use anything Dynamic from WIS so if I have my V count for example like that now I've got this single input and check this out anytime that I change this it's also going to change here because I'm referencing vount everything is reactive in wte um very powerful cool so we've got this single input that's being populated automatically with my value nice later I'm going to show you how to interact with the input value so right now we are populating the input but we can also read the input value because if I change something here I maybe I want want to you know get this this value and work with it okay cool or we can interact with entire forms now when working with entire forms it's a bit more different because it's not going to expect let me open xray it's not going to expect you to uh return a single value it's going to expect you to return all the values from all the elements in the form so I'm going to say set form values here and what we need to do is we need to return a again always we always return stuff remember that you can always do whatever and then return anything so you don't need to start by returning something it's completely up to you but I'm going to return here and what I want to do is return an object so in in JavaScript we can create an object we can define an object by opening brackets and closing brackets and inside this object we want to Define keys and values the keys are going to be the name of the inputs and the values are going to be the values of the inputs so if you go to the WAFF site and we inspect what we have here we've got a text field we've got an email email field and we've got a checkbox like that so the the text field for the name it has a name of name for the the email field for the email we've got a name of email and the checkbox has a name of professional don't ask me why I just came up with this name okay so we want to populate this form dynamically what we do is we grab these names and we put them inside this object so I'm going to say name it will be Alex good to meet you email it's going to be Alex add example.com and professional it's going to say true it's going to guess that I'm professional okay um you you have to define the the values depending on the you know the the type of input that you have for example the checkbox it's going to be either true or false but the name or email are going to be the name H sorry are going to be strings because we're dealing with strings in this case so if we check this now we should have our form populated with our data in here nice okay any questions so far I think not good okay great so we're populating inputs we're populating forms let's just jump into list rendering that's the last key part of uh basic actions so laser rendering here I want to grab this and I want to replicate it multiple times depending on whatever data I have right so let's first of all Define this element here let's go back back to West that's the and going to call this West equals to uh list item okay I'm not going to be creative here that's it so I want to grab this list item and this list item is going to be the template for all the items that I'm going to render in the list does that make sense so here let's refresh the attributes nice let's check out X-ray and we''ve got the list items going to create an action for it and the setting it's going to be render list like that so when you define a list there are two things that West is going to ask you the first thing is that you need to pass it the data which you know you're going to render the list from and this data it's going to be always an array you need to have an array with multiple items it can also be maps and sets but I'm not going to go deep into that so I'm just for now I'm just going to create something very basic I'm going to say uh return an array and this array it's going to be one two and three like that okay um another cool thing that I forgot is that you can always inspect if you're writing the right code here by inside the function editor clicking on the play button and this it's going to tell me what it's being returned at from this specific function and in this case I'm doing it right the other cool button that we've got here is this is um predy in case that you want to predy some code imagine that I I mess up the formatting in here it's looking very ugly you always can predy the code using this button nice Okay cool so now that we've got an array with multiple items exactly three items I want to render this this list actually we're rendering the list but I need to do something extra I need to Define a variable for index and that will make sense in a second so first first of all let's create this variable I'm going to use a new variable I'm going to call it I could be whatever it could be index it could be blah blah blah completely up to you so I'm going to say I and you don't need to worry about initial value at all just for the sake of keeping things understandable I like to start with a zero but it really doesn't matter you can completely omit this initial value so now that we've got this I thing now if we reload the page rendering a list requires requires reloading the page um nice so you can see how now we have three items cool so we are dynamically rendering this item based on the data that we've got here so if I go to this item here we've got this one two and three now of course this doesn't look right because I have the elements rendered I have my list rendered but now what I have to do is also Define how do I populate each one of the items right in this particular case I just have a single text element for each item on the list so I want to populate one two and three for each item so what I have to do is instead of first of all uh hold on X-ray let's open this so first of all instead of having this in here for convenience I'm going to put it in a variable so let's move this back to a variable and now first thing first time that I'm showing you the data store let's create a variable here and this it's going to be uh list data whatever okay and we are going to pass this array in the initial value so whenever we reload the page you will see how the initial value here it's my array that I just created so let's go back to my action of the list item and in here instead of using this array let's use B do list data nice and now that I'm referencing my list data and I also have a variable that defines the index of each item so this this item it's going to be the index zero this item is going to be the index one this item is going to be the index two Etc you'll see now where I'm heading so what I can do now is I can add another thing for example like set text and this set text I want to grab the specific text for each item and that's where the variable for index comes because I can say return V do um list data and then using square brackets which is a JavaScript thing you can open square brackets and I can say you could say for example just give me the data of the first item and if we do this now what's going to happen is that we are going to get just the data of the first item right but we don't we don't want to hardcode that we don't want to define the data just of one item we want to define the data of each item so here x-ray list item instead of doing this which is zero would be the first item in the array I'm going to say V do I like that and now because this b. I will be dynamic it will be updated for each item this it's going to represent the dynamic data of each item inside the variable I think that this is the most confusing like overall the the thing that might be a a bit more tricky when working with but once you you get this once you get that accessing the data of a specific item in a render list it's done using the variable for index that's it you have now now like full control you have freedom of doing anything and look at that now we've got one two and three because this is going to be index zero this is going to be index one this is going to be index two and wi handles that for us using the varable for index does that make sense cool okay I'm gonna I'm going to check the the chat here if there's people with questions so how toes set file with set form values you can set a file with set form values but you need to grab that file first so it's it's a bit more advanced but uh well actually I don't know if you can update a file using JavaScript I'm going to say that I will confirm about setting files into forms in another live stream okay because I want to double check before giving you the wrong the wrong wrong info Andre ler is that is saying I have implemented over 400 actions in one of my wiiz projects I'm interested in exploring different methods to consolidate multiple text actions each with varying attributes into a single action yes nice we can do these kind of things uh in another live stream because I have still a lot of things to talk about and one of the things that I wanted to do was exactly that I had another section of more complex element actions and in there I had had an example of using the T keyword so I have realized that we are still missing quite a lot of things here because we've done this and this and this and this and this and we are yet to talk about all of this oh my God so many things okay so we'll see in the next live stream probably you can merge actions yeah there are small ways of of merging actions um can one create a new static page or weff CMS item using WS for example user submits a form that creates a CMS item you can do it but you cannot do it just with WS you can do it with ws and a server and that's one of the things that I wanted to talk about today but I just realized that they didn't have enough time and it's that with WS not only you can interact with elements on the page you can also send data and retrieve data from servers so imagine that for example somebody submitt a form and you want to create an item you would have a server that it's not managed by West West it's completely uh just managing the website it's not managing what's happening in the back end so you would create your server and inside that server you would Implement an endpoint that gets the data and then ships that data to wlow okay but that's that's uh a topic for another live stream because obviously today we are almost done already nice with wlow logic it's far simple yes I mean there are things that you can do natively with wlow so you probably want to stick with WAFF like for example using WAFF logic to create a CS item that's very convenient uh yeah thank you Yen you can set fals due to browser security issues that's probably true I need to double check that but I think that you're right J I think you're you're right a wkd Alex you should add that accessing an object property using square brackets is the same as using a dot just that if the property you want to access is dynamic you have to use square brackets yes that's a good point G can we screen share again I want to um emphasize on that so if we go to the list rendering here list item in this particular case we using square brackets because it's a dynamic variable or because it's a numeric so usually the way that you access things in objects in JavaScript it's in two ways you can either do a DOT and then you can see all the properties and methods of the object or you can do square brackets and you can do the same thing so if I open this here you can see how I can get the same thing like that and when you use Dynamic variables you always have to use square brackets I know that it's it might sound scary but it's just that's it all you need to know now of JavaScript to use wi is that you need to return stuff using the return keyword it's that you can access the data store like objects so here if I had anything I could do c dot whatever or I do my input you can see how I have my input or F do my form and I can even access each of the fields of my form look at that I'm always using the dot notation in this case or whoops or like that if you're using a dynamic variable you use the square annotation that's it then you can go more in Dev of course you can um use custom logic like if true else whatever and here you could return different things like hey or return blah in this case it's all true is always going to be true so it's always going to return this but you could say for example let's something different let's do if B count it's higher than five let's return to high else whoops else let's return the list data like that so if else is are it's another basic thing that you can do inside west it's also JavaScript but you can do Dynamic conditions based on what whatever you want to do so in this case for example I'm rendering list I have this but now if I go and click click click click click look at that too high and the reason is because we have a a dynamic condition here that displays the tech sets the text so returns text dynamically based on this condition in particular okay nice so I know that um there are many more things that I want to talk about and I've got this list here so I think that next Friday we're doing a SE a second live session and because I started doing this live for everyone I think that next session it's probably going to be also open session so it's not going to be a Fu plus session it's going to be an open session here on YouTube and the next session we're gonna go deep into questions for any FY plus user who wants to have a session oneon-one with me or one on many but like a private session with me okay um so gather those questions that's uh you can ask them in that upcoming session so I think that for today that is it I'm gonna say goodbye to everyone I appreciate a lot everyone coming here hopefully you learned a couple things from West and you can start using those small building blocks to create cool things in your we projects and as I mentioned next live stream next Friday it's going to be the second part it's going to be these missing pieces here so see you next Friday if you haven't already please leave a like or share this video it helps a lot and it's did have a good weekend everyone goodbye yeah ex is GNA [Music] come [Music] oh

Channel: Finsweet

Views: 1,478

Keywords: finsweet, web app, cms bridge, webflow apps, attributes, products, free products

Id: bz9Bqee9Wfk

Length: 63min 46sec (3826 seconds)

Published: Sat Mar 16 2024