Materialize CSS UI Web App - Google Apps Script Web App Tutorial - Part 3

now I really didn't want to turn this into a web development tutorial but I've realized that sooner or later I'm gonna run into things that I'm gonna need so maybe it's best to implement some web development stuff now so there is less headache going forward and what I'm gonna do in this video I'm just gonna implement a UI framework materialize and for those who are familiar with web development it's kind of like bootstrap I could have used bootstrap but I'm gonna use this just because it's more fun so basically this will give us some pre styled things so things like form elements and stuff like that so if I go under forms here I look at for example text inputs see these are pretty nicely styled inputs so it doesn't look that ugly so that's kind of what I'm gonna do so I'm gonna implement this to make this things look decent so to start I'm gonna go to materialise CSS calm first we need to implement the basics so we're gonna go on to get started it's gonna bring us here I'm gonna scroll down I'm just gonna use CDN to implement this that's gonna make my life easier and for everybody else otherwise this is gonna get again too complicated so what I need to do I need to include the CSS in my project I'm gonna copy that line right from there go to my app and this should be in my head section so I'm gonna go here and paste that right there that's good I'm gonna go back here there is this JavaScript I'm gonna copy that I'm gonna go back to this and I'm gonna implement that right here right above the of our JavaScript that goes in there save and then we'll scroll down a little bit we may need a couple of other things so here I already did this but I did it with that CSS link so we don't need that so we will probably at some point need this icons so let's do that so I'm gonna copy that icon style and go back here and we're gonna implement that right above this it's basically copy paste job so far anybody should be able to do that go back here and there's this meta tag we need for responsive pages so copy that go back here and this is gonna go in here someplace save it and I think that should do it yeah so that's the overall implementation of this so I just added this links to this CDNs for all of this stuff we need to be included script goes in the bottom style sheets go on top in our head section let me open the app thing so now you can see how things are starting to look different already we have this different looking input boxes so now we can start building the rest of this so first of all I don't need this hello I'm gonna get rid of that so luckily we didn't do all that much in HTML mostly it's just two input boxes and there is this select and that's pretty much it so I'm gonna go here on the left so other forms I'll scroll down until I go to text inputs to stop my text inputs if I scroll down a little bit here we go so we have this piece of code that's already showing us some examples of how we can do different things with this different text inputs right and all the stuff now for me I just need this stuff on top I'm just gonna grab see this is that input box with all the styling with a div and everything that goes around that and there's the second that's the last name see we have first name and last name kind of side by side here and they're in the row so I'm gonna just copy this from here through here so see if starting from this row until the end not including this next row I'm gonna copy that go back to my app and I'm just gonna just push this down a little bit so it doesn't get on the way and paste that code I'm gonna save that let's just take a look and see what this looks like if i refresh see we have this first name thing and the last name thing so there's this kind of cool effects that come with this stuff so here we have this div box so basically this is a row class that creates a new row and in here we see have two divs this is the first column this is the second column in this row and then we give the size of the column here so the total length of the size is 12 so if we want half-and-half that's 6 and 6 so we go here s 6 that's the first one and s 6 is the second also there are two columns both size six so that should be half and half which is what we get right now now if we go back here and do something like four and eight so this should total to twelve usually right so if I do this see now there is this four and eight one third and then we have two I'm fine with six and six half-and-half I'm gonna just create another div on top here this div is gonna have can tainer class and then I'm gonna close that after this whole thing is over over here now I'm gonna try to tap this in so I'm going to select this hit tab and see that doesn't work awesome so we have to do a lot of space work I guess here so I'm just gonna leave it like this that's fine this should be usually indented for a good practice but it doesn't work well so we'll just keep it the way it is so if I hit refresh see that container kind of pushes this in a little bit so it doesn't go all the way from left to right it's a little better organized now so this thing says placeholder I don't really want that so we're gonna just do the same as this one that's just last name so I'm just gonna remove this placeholder out of that and I'm gonna save that so if i refresh now we should have first-name lastname and our user is gonna know what to enter now this is our input boxes remember I used to do the other two input boxes the way I did before but now I'm just gonna use these two input boxes instead because there's just style better so to make that happen all I have to do see I have this ID for my input box I just have to match with whatever IDs we had for our input boxes before now my ID for the first first name input box both FN if you remember so I'm just gonna go here FN and this label is for this input so we need to match that ID for that too and then the same way we need to do for last name so I'm gonna go Ln copy that go back here and I'd be Ln for LN save it so that should be that refresh so that should be first last name so at this point because I made an alternative input box for these two I don't need these anymore because now we have this framework stuff now if i refresh this that stuff should be gone now the next thing should be that drop-down thingy remember with that application over here so let's try to do this drop down so to do that I'm gonna go documentation for the website and under forms we're gonna scroll down until we find select so this is our C select box I'm just gonna choose that for our drop-down and I'm gonna scroll down and find whatever they gave me for this that's the code for it that's the first one C then it's the second one basically this is the example of what we should expect and this is the HTML we need for it so I'm just gonna grab the first one I'm gonna copy that I'm gonna go back to my own thing and then right below these two columns now we need probably another row for this to send it right below this to on the next line so that means we're gonna need another div with a class of copy and paste actually I'm gonna copy this and we're going to paste this ending for this div now this div belongs to this container now as we start writing more HTML this is gonna get confusing so I'm gonna write a comment for HTML to know what this div is for so I'm gonna do an HTML comment which is just this weird thing in HTML you have to do and we'll say closed and thinner you should usually do like closing comments for these thieves as well to see what's happening right so why not do that so I'm gonna do this close bro and this one also it's gonna close the row so some comments don't really do anything just for us to know what's going on here now inside of this row I'm gonna need some of that stuff which is here so this see it says s12 which goes through the whole thing it's a column that goes through the whole row so I'm gonna copy that will probably not do the whole row but we'll see so I'm gonna go back and inside of that row I'm gonna paste that column boy does this look ugly in this editor so I'm just gonna paste this in to make it half decent somebody mentioned in comments that tab works you can see definitely doesn't work here so I tried it so I'm gonna say this let's just see what this looks like before anything else so I'm gonna go here refresh so there's this materialized selecting so dropdowns they have to be initialized for them to work so if I scroll down I'm hopefully gonna find that see they have to be initialized with JavaScript so I'm not using jQuery so I'm just using this I'm gonna copy that and this is JavaScript so it needs to go in our JavaScript so I'm gonna go back here I'm gonna go page Jas and we'll just put it I'm just gonna put it on top here in our script tab definitely doesn't work so save so this options for now I'm just gonna get rid of it we don't have any options so let's take a look now we have it initialized so now we should have a drop-down see and this is our old drop-down so we'll go back here and do this so we don't really need all this value stuff so this also not necessary so for us if you just look here see this is that select box with three options so if we look at our so we have this select box with four options but it looks identical so I'm just gonna copy what we had and just replace these options I'm just gonna keep this thing on top that says choose your option and just paste the rest in here and I'm gonna say choose your app for our select remember we had an ID so if I we did this ID app for our select so now we need to do it for this select box here here we go that's our ID so I'm gonna save this this select goes through the whole thing I don't want to keep it that long I'm just gonna cut it down to 1/2 so we'll just do 6 instead of 12 and now if i refresh it should be here later on maybe we'll add something to this side and this should probably be our own text that is where we're gonna put our application thing so I'm gonna scroll down see this label application and that means we also now don't need this whole thing because we just made a new one which is much better here we go finally we need to do this run it thing which should be our button so let's go check out what type of buttons we have available here so I'm just gonna go under probably components see buttons so here we don't need all this a tags that those are links and I assume we should be able to add that same like class to our button element and it should work without using a link element or anything but let's just pick something from here and test it out right so for example let's look at maybe this one that icon is on the Left look at me now I'm thinking about which one looks better so I'm gonna copy that we're gonna go to our own thing that button is gonna go below this row and it needs to be in its own gross so that means we need to create a row for this and that's gonna go here and we're going to close that row by closing that and indent this a little bit so that's a hyperlink right now I don't want to use a hyperlink so I'm gonna start testing this as a button instead do we really have to have stuff and see if it's able to just style buttons the same way right so I'm gonna change it to button element save it I'll go back and refresh this thing here we go now we have a button it has this cool effect and this icon which we should be able to change now we want this thing to say send or run it or submit whatever the text is gonna be so I'm gonna go back here and grab our text and we're gonna put it in this button which is gonna go right here see we don't want to do this I tagged this I think is what gives us this icon now we want the text to change which is this text it says button so I'm gonna replace it with our own text now this button has to have the ID we had it because we use that ID later on with our JavaScript there's our ID and now that should be our button I don't need this anymore this button is gonna have this icon let's see what's a better icon to choose for this instead of doing this crazy icon so I'm gonna go here and find icons under components I included this already on top of my project just to refresh your memory I did that right here so I don't really need to redo that here see it gives us some icon it shows us what we can do with sizing the stuff but now it gives us different icons that are available let's see so what we want to do maybe we'll do this plus in the button go back and now what I'm gonna do instead of saying cloud it's gonna be that thing so this is automatically just gonna replace this text with the icon so if i refresh see there's this plus now run it I don't know if it should be the plus but you get the idea so you can't just choose any icon you like from here and whatever looks good for you should be fine and you could also just remove that icon if you don't want the icon at all maybe I'll do this so that's gonna be this thing refresh that's our button now I'm gonna also change the color for that button so with materialise changing colors is super easy for stuff and all I really have to do is go here and under getting started CSS there this color so now if I scroll down there's our color grid so we're gonna just select some color for this I'm just gonna choose this that says blue dark and three so all I have to do is just copy that part I don't need the actual code or maybe I'll just go with the purple thing that's fine I'm gonna copy this or it's not purple is it anyways so go back here and change this all I have to do just add the class to this button to make it that color now go back here refresh there it is now we have this cool button with this new look for our application now our application should still work the same way now first of all let me just steal something out and try to send it and then we'll go check if everything works Linda Brown and we'll choose an application hit run see something didn't work here as it used to we used to be able to clear this but now it doesn't work because now we're using this other thing so we're gonna have to figure out how that we clear the box but for right now I just want to open my Google sheet to make sure this actually worked here you go I opened it all fine we see how we got all the information entered so that's cool so now we have a whole new UI implemented and we can just choose this and run it now what I want to do I just want to see how I'm gonna change this back to the original after it's sent so what we gonna do we're gonna just go here and basically when somebody submits it we'll try to get this back to this first option so we'll try to select the first option from this app to do that I'm gonna go back to my JavaScript and if you remember the way I was doing that I was just trying to set the value to blank so I'm gonna take this and I'm gonna still get the app ID and the app ID would be remember that same select box this and this should have this thing called selected index and we should just set it to zero and zero like in JavaScript arrays would be the first one so I want to go back and remember pick the first option from the list which is this one but because we're in materialise we need to also refresh the whole materialized thing so it resets this because it does a lot of JavaScript stuff to actually make this look the way it looks so to reset that we have to basically just initialize this thing all over again this element see how we initialized all the select elements here now we just copied and pasted it but this line is what initializes it I don't really need the instance so I'm just gonna copy that and I'm gonna go below and we need to initialize the element and the element is this now to not repeat myself for this reason I'm going to just it's kind of too late isn't it it I already have it repeat it but that's fine I'll just do it here so I'll just do var my app equals two and I'll just grab this to a variable that element then we'll take that my app and set the selected index to zero and then we'll pass that to this initialize function again to reload the form so we're gonna save this let's see hopefully this works so I'm gonna go back and refresh this thing it leaves a bet last name and we'll choose numbers click run awesome so that resets good so now let's just check and make sure it works yep nice so here we go now we were able to implement initialize on our script on our webpage whatever this is and now it should look decent and we should be able to use some of the features it has in our advantage going forward and that should be enough for this video thanks for watching please subscribe and I'll see you the next one

Channel: Learn Google Spreadsheets

Views: 99,370

Keywords: Materialize CSS, MaterializeCSS, Web, App, ui, user interface, Google Apps Script, Tutorial

Id: yu-nNEPw83k

Length: 25min 11sec (1511 seconds)

Published: Sat Jan 12 2019