Build a Conference App with Glide

hey guys Jack here in this video we're going to be doing a deep dive into building our conference template from scratch now if you're new to glide and haven't covered the kind of fundamental topics relevant to building apps I suggest that you start with our getting started series and perhaps some of the tutorials on learn to glide page because this isn't a beginners tutorial it starts a little bit further down the line into some slightly more advanced topics now on screen you'll see the different sections of the video now and the different topics that we're going to be covering so you can use this to skip to the relevant section that's right for you so we're going to start off this video just by doing a quick overview of the app so that you can see the different techniques and the structure of the app in the way that it's built and then we're going to dive into building all of these things from scratch so right away on the home screen we see that we have a custom image up at the top that we designed and put in an image component and then three inline lists using our new tiles layout with horizontal scrolling and we have three kind of types of things we have speakers talks and categories and these are our different lists of items and each of these is of course clickable so if we go to one of them let's go to Kristina here on her page we can see information about her and then the actual talks that she's in and talks can have one speaker or two speakers and this is something that we cover a lot in this tutorial where we have perhaps one speaker or perhaps two speakers and we have to think a little bit about how we make that work in terms of relations in glide so if I click on one of those talks that has two speakers we see that we have the same sort of thing that's going on information about the talk the time the ability to save it to your favorites and then we see the two speakers that are in there and of course we can click on those and go to those speakers but we also have inline lists here which are saying which categories these relate to so this talk is in four categories Design Systems Web Design cloud and security and if we go to one of those we can click on that and we go to that actual page there and then we have all the talks that are in that category so there's a ton of stuff in this app where things are relating lots of stuff relating to each other and this is a kind of exercise in thinking about how can I have things in multiple categories and perhaps two speakers and really kind of exercise your your ability to use relations in the data editor if we go through the different tabs we have basically the same things but kind of their own pages so the speaker's is a nice fullscreen view of the speakers and you could of course search people talks is the same sort of thing with an ability to save your own favourites talks I haven't signed in so that won't be working yet we have categories the same thing and then we have an info page which has a number of other things that would be relevant for a conference we have some kind of information number email we have a map where people can locate themselves on a map in relation to the different locations of that conference and then we have the schedule like at the bottom there and this is just a calendar layout for an inline list so each of these is of course clickable and when we go to it we see the information just like we would if we visited the talk from the talks page so then we're also using the app menu up in the top left we click on that we can see we have a number of other pages we have that same schedule in a full page just for convenience if people want to find it in the info page there they could find it up in the app menu we also have a list of all the rooms that are being used so people can browse those and we also have a conference chat which is just simply just a normal chat tab and then we have one final thing which is completely optional obviously if you all of this is optional it's just the kind of rather rich template for you to be able to use and kind of make your own but we have a submissions page where people can use the forum button to submit ideas for the conference speaker submissions and kind of general feedback and we'll go through each of these and how we built those it's kind of a thing that would be probably quite were relevant to a conference app cool so that's an overview let's dive into building all of this from scratch okay so we'll start with the spreadsheet so what I'm going to do is I'm going to call this new conference app and I'm going to start populating the sheets that I need for the different types of data so we have speakers we have talks we have buildings we have rooms and we have categories of talks as well so what I'm going to do is I'm going to set up those tabs so those are our collections of things that we have our lists of things but we also want a home page and we want a contact page and actually we kind of need to create separate tabs in sheets you can do it without it but I'm just to be super clear I'm going to create for myself two more tabs I'm going to call this one home I'm gonna call this one contact and you have the information in each of them so let's populate each of these with our data so speakers first so let's have a look at the data that's contained in our speaker's sheet so we have speakers name image title bio Twitter and website and we also have something called the UUID and I tend to put this on a lot of my list of items and it's all kind of it's what's called a unique identifier if you look at the code that's in here it's totally unique compared to all the other ones right now this is a topic that we can't go over too much here but there is information other documentation about this but suffice it to say this is a way of Glyde being able to recognize this row and not get lost one of the things that can happen sometimes if you're building an app with Glide is that your rows move around perhaps you add new ones you delete old ones or maybe you move the order of them and this is a way for Glide to know exactly where your row is on what that row is so that things like favorites and also comments can kind of reliably stay on the same item information about this in our documentation which you can have a look at so let's look at the data that's contained in talks sheet we have the same unique key talk title image speaker 1:and to date room description of the talk and then the categories category one two three and four for that talk now these columns here I just want to bookmark so because they're going to be really important later we've got speaker 1 and speaker 2 next to each other and in category one through four next to each other whenever you have a name followed by a number and then the next column is that same name followed by the next number glide recognizes those has an array column so it's an array of columns and what that pulls it in as is one single column if that doesn't make sense don't worry but we're gonna look at this and it's integral to building this app today so then we have categories and in categories we have the same UID category name and then the category image and this one's a lot simpler because really categories don't have much information it's more that things belong inside of them so they can just kind of be placeholders then we have buildings this conference is held in two main locations the main building and Block B and similarly they just have a bit of information and then we have our rooms as well so if I copy and paste that in we can see UUID name room image and notes we're going to leave our contact and home pages and we're going to customize those later but let's add this now as a new app in glide and see how it all appears okay cool so we've got our four tabs we've got speakers talks categories and buildings let's have a look through them we're missing our rooms okay so one of the things that glide does when you import a sheet which has more than four tabs on it is that it hides one of them in the menu so we can see that our rooms are now up here and if we had even more tabs they'd be going down here as well so I'm gonna pull buildings and rooms out because we're not going to show them in here but keeping speakers talks on categories there I'm going to quickly change the tab icons so that they're more appropriate okay so if you're following along and building your own template along with this video now is a good time to do everything that I've just done set up the kind of fundamental parts of your data in your sheet import it into glide and sort ocular tabs and then come back okay so we're going to dive into the tiles layout now tiles is an incredibly versatile layout inside of blyde you can really customize and make the feel and look of your app very unique to what you're you're after so let's do this on a speaker's tab so we're on the speaker's tab here and I'm gonna head over to the properties panel and choose tiles now if we scroll down we can see that there are quite a few settings that we can dive into here and there's a lot of things that you can customize but first of all we're going to start with the fundamentals which is our data and assigning the right properties to the right columns in our sheet so we're in the speaker's tab so all of these drop down menus here are going to show us the columns that are in our speakers tab and then these columns or the values in these columns are going to appear in the different parts of these tiles so we have the title currently that's set to the title person so for example Marie Rao is the UX vc CEO and that's her title but we don't want that we want her name cuz there's a lot clearer so let's change it to speaker because that's all of our speakers names the details is UUID which is really not appropriate so we could have their empty or we could have it on perhaps their title so whatever their title is and that's a bit more sensible now so you can see all the different speakers their name and then what their kind of specialty is right and then the image is correct underneath now we can get into the actual customers a customization of this layout with tiles so we can ignore images URL because the only other option there is map from address and that allows you to show a map in the tiles but we're not doing that it's just in just an image so then we come to the tile shape which is a really important one to get your head around so we can see here that we're looking at kind of rectangular shape which is a three to one ratio and it's taking our image right and it's cropping it down to that so that they all look kind of nice and neat but we can choose a number of different kind of crop ratios right and we've got vertical ones and horizontal ones and square one as well and then we can also choose how many tiles per row so if I just play around with this if I chose square now all of our speakers would be really big because each of them has they fill up the entire row but we can add two tiles per row or three tiles Pro or four tiles Pro and that starts to get a little bit smaller well it gets a little bit small for the text anyway so I think I'm going to stick with probably two per row and I'm going to choose this three for vertical layout I kind of like that now underneath we have padding and this controls how much space we have between our items I tend to like things close together and certainly the look that you saw in our template was close together closer together so I'm going to choose a tight padding and then you can still see that our corners of the images are rounded naturally or at SRI or automatically and we can turn that off by going to sharp corners but we still have this kind of text under each one and I don't know about you but doesn't look that good for me I love text when it's inside of an image and this is what the tiles layout allows us to do if we go down to the textile sesh section we can see that we have two options here we have a position below which is currently where the text is or a position overlay and as soon as I click that we get this really nice kind of overlay where the image gets slightly darkened so that we can see the text really clearly now that's great in a like straightaway but actually I think I might change where that text is located and I think before we probably had it in the bottom left or the top right I can't remember let's leave it at the top right for now underneath that we have text size we can go small medium or large I think medium was fine and then we can also do this nice thing which is all caps we could turn all of the text into or rather the text of the the titles into all caps cool so we've sorted out the layout for our speaker's tab but we still need to do it for our other two tabs talks and categories if you're following along go and do that now with all of yours and come back cool so we've now got our three tabs we've got speakers talks and categories laid out with our tiles like what we need to do now is start connecting these items in the data editor to really show how you can link multiple different lists of items to each other and interrelate them and a conference is a a perfect perfect use case for that if we go to each item at the moment we can look at the information for that speaker but then we can go out again and look at talks and look at the information for that talk or need some work that page and then categories the same thing but if we go to each of those things we can't see what talks our speaker is doing we can't go from a talk to it's speaker and we can't look in a category for all the talks that live in that category so what we want to do is start doing that in the data editor so let's head over to data on the left and we can see that we're seeing a mirror of our sheet or our spreadsheet and what we want to start doing is connecting these via relations so the first one we want to do is we want to we want to show what talks a speaker is doing so we want to show on each speakers page what talks they do so we can see here that we've got the name speaker on the speaker's page and then on the talks page we can also see that we've got a column called speaker right so that's the thing that we're going to relate it to we're going to relate the speaker in this sheet with the speaker in this sheet but I want you to notice something interesting that we spoke about earlier which is that array column so let's look at our sheet here our new conference app and let's go to the talks tab we can see here that we've got these two columns speaker 1 and speaker 2 now let's look at how that shows up in guide in the talks sheet we just have one column now but the values from both columns have been merged into one column so if we look at the talk state of UX got Joe Hampton and Evan brown state of UX Joe Heaven Joe Hampton and Evan Brown so what Glide is done is taken that array of two columns and put it into one column here and we can see that we have an array column now which merges all of those together and the same with category we have this really busy single column here category column which is a combination of all four of these categories and this is a really important thing too be playing with because some of our talks like the Kino have one speaker and other ones have two speakers and you can have more you could have as many speakers as you like really this is the same with categories we've stuck with two speakers maximum here and I think it's four different categories maximum for each talk so let's head back to the speaker's table and let's add our relation column where we're going to pull in the talks of the current speaker so we're going to call this talks and we're going to leave it as a relation type column type and we're going to relate where items with a value in speaker so this column here matches the value in the talk sheet so we can see here that we've got a number of columns that we can choose and we've got speaker 1 and speaker 2 and then this speaker column which is our array a column which kind of pulls them all together and if I click that we can see that we've got them coming back but we need to do one more thing which is make this and match a multiple relation if I click this again you see that we've got more talks so if we don't match multiple we'll be bringing back just the first talk each speaker is doing but for some speakers like if you look at Murray Rao she's doing the keynote but she's also doing other ones and if I click match multiple you see that a number of her other talks just popped up there so we're done now with that relation if we hit done we can go now over to our speakers and we can create an inline list which pulls in all the talks that they're doing so I can head over here I'm gonna click inline list and it's recognized that we've got a relation column and it's pulling in the correct talks but we need to customize it a little bit because it looks a bit strange at moment I'm going to use tiles layout pretty much everything in this tutorial because I really like it and I'm gonna make it look similar to the ones that we did before and then the final thing I need to do is to make sure that the properties are connected correctly so we've got the talk title going to the title and then we are going to have let's have nothing for the details so we just have the talk title there and I might make the text a little bit smaller so that it fits a bit better that works good great nice cool so if you're following along go away now and have a go at your first relation try and put in practice what we just did there and when you come back we're going to do all the other relations so you can really get your head around multiple category relations cool so we also want it the other way round we want it so that when we go to the talks and we click on a talk that it has a list of the speakers that are speaking at that talk but the way we do that is we do that on the talks table in our in the data editor so let's go over to the data editor and let's go to the talks table we're here already and let's add a new relation column that pulls in the speakers so we're gonna call this speakers relation leave it as relation column type and we want to relate items where the value in speaker which is our array column not one of these two but both of them our combined column match the value in speakers and then the speaker themselves so their name right and we're going to match multiple as well so if we don't match multiple we'll just show that only Joe is speaking in state of UX but if we match multiple we bring back Evan as well who's also another speaker so we hit done and now we can go and create our relation or inline list now I said relation first but that was a mistake because a relation component just brings back one item whereas we want an inline list so we can bring back potentially two or more items so inline list we're going to be using a lot of inline lists in this app it's found our speaker's relation and what I'm going to do is the same tiles layout that I'm doing for all the others cool and then I'm going to take off the title of this list because I think it's obvious at the moment we've got speakers relation which is the default title of our data editor column but actually we don't need that in here so if I delete that you're gonna see a delete from here cool so I'm going to make sure that we have a number of other components that represent the talk page correctly like the time and date I'm gonna click add a new component choose basic text and then I'm gonna choose from my column the date so we can then move that up above the speakers here what else is in our sheet if we go over here we can see that in our talks we have date room description description we missed that out let's add a basic text component and connect description cool and let's pull that up as well so we've got the talk the date and the description and then we've got our two speakers and if we click on one of these people we're going to go to their page and then on their page we see their talks and if we go to that talk we see the speakers then we click on that speaker we see their talks and this is the really valuable thing about relations is it allows people to just move through these different topics and bits of information that you've set up so that's two relations speakers two talks and talked two speakers so if there's something that in your app that's similar if you're doing a conference app it's gonna be exactly the same sort of thing go away and do that now and set that up and then we'll do the rest of it okay so we've got speakers relating to talks and talks relating to speakers what we need now is talks relating to categories and categories relating to talks because I want to go to a talk and see what category it's in and then go and visit that category and similarly I want to see a category and see all the talks that belong in that category so let's go and do that now let's head to the data editor and I'm going to head to the talks table first and I'm gonna add a column that connects these categories that we've listed in this sheet with the actual categories in the categories sheet so I'm going to hit add column I'm going to call it category relation as usual you can call this whatever works for you it doesn't matter we've got relations the column type and we want to relate items where the value in our category array column so that's all the categories that this that each of these talks belong to match the value in categories and then the category name and you see here we brought back one but we want to match multiple and hit done so that's done now now I'm going to go over to categories and I'm going to create the relation for the other way around so that we because we were kind of getting quicker at doing this now so I'm gonna hit add column and I'm going to call this talks that belong in this category now that's kind of a long-winded name but sometimes you might want to name these columns just for you these don't have to show in the app you could name them for you to help you understand how things are relating to each other like the purpose of this column it's quite a useful thing to do sometimes if you just call it category category two or something like that you can get a bit lost after a while especially if your app or your data models getting a bit complex so let's relate items where the value in category so this column here matches the value in the talks sheet in the category array column and again we need to match multiple bring all of them back and we hit done cool so we've got our category relation here in the talks table and our talks relation here in the categories table almost done so let's head into the app and let's go to the talks tab and let's click on one of the talks and let's add an inline list we've already got one for the speakers going on down here but we want another one for the categories so inline list and guide is recognized that we've got two relations we're already showing the speaker's relations so it's showed us the category relation it's selected that which is great but we want our standard tiles layout so I'm going to do that quickly now one of the things that we haven't looked at yet in the towers layout is the orientation I kind of skipped over that because it wasn't relevant on the pages that we were looking at but if we look here we've got a category relation underneath here and it actually makes the page go down quite far and depending on your design decisions you might actually not want it to take up that much scrolling space you might just want it to be kind of an optional choice for people to see all of it here we we force the user to see all the categories that it's in because the categories push the page down and make it longer but we can change the orientation to be a horizontal scroll so if I click this button over here we can see that the list now becomes horizontal scrolling lists like this and I kind of like that it's a bit more neat and tidy everything's kind of kept together a bit better and talking of design actually the padding now between now that we've chosen the orientation of horizontal on this list here the padding we don't have a padding option just because of the nature of it so actually what I'm going to do is I'm going to go back to the other inline list and I'm gonna change the padding on that and introduce some more padding so it kind of fits a little bit nicer and sort of slots in with the inline list below it cool so now let's go to our categories I'm gonna click on one of these and I'm gonna add an inline list now it's already recognised that relation which is great talks that belong in this category we could choose the tiles layout that we've been using a lot but I'm actually going to use the calendar because we haven't been using that yet and this is a conference with events at specific times so we kind of want to show the calendar occasionally otherwise it's just all about prettiness and we kind of want it to be practical people to see and it's my thinking at least that if someone's going to a specific category they're quite action orientated they're not just browsing they're trying to say okay I want to find all the talks they're in this category I might be wrong about that but it's kind of the way I think about it so the last thing we need to do is delete the label because that was the label just for us and the data editor you could leave a label but actually it looks great without and now when we click on these we go to the talk we see the speakers we see the categories we get rid of that title there category relations so let's click on that get rid of the label so that's really cool so we're on it we're on a talk here we click in a topic click on a topic there and we can kind of just basically move around the app now however we want so speaker we see there talks click on the talk see the speaker and the categories click on a category see this bit over talks click on a talk see the speakers so you get the idea this is the interrelation thing that we were after so if you're following along do that now with your app put all of this together all the relations so that everything's working you can kind of go on this infinite journey because if you notice actually if I'm in I'm currently in the speaker's tab right but I'm actually looking at a talk and that's because of these relations right you can visit all items through one tap we could even get rid of the talks and categories tabs themselves I happen to like them for the kind of user experience if someone's kind of really definitely clear that they want to look at the categories they can click on that tap but within each tab you can view all kind of different areas so go away and do that now and then come back and we'll start doing the home page where we put all the tiles layouts together and then we'll get started on the contact page and then the kind of forms as well all right so now we need to add our contact or information page and this is going to be a tab bottom right here that people can click on to get phone number email directions etc etc kind of a just a really handy useful page for the conference so if we go over to our sheet we can start putting in the raw data that will go in our contact or I'm going to rename this info so we got number email Twitter address and then there'll be other things that we'll add to the page that don't need to be in this sheet let's head back to Glide and let's add a add that tab that's over here in the hidden tab section let's pull it up into the main app so it's in the right and let's change the icon to an info icon okay great cool so it's done a pretty good job of finding and and laying out things in the way that we want we've got an email component going connecting the email address we've got a link component connecting the twitter address but we have got a title component connecting the address and number which isn't quite right so I'm going to delete that I'm gonna add a basic text component for the number and I'm gonna have the action be phone call so people can call it really quickly so let's not have the address actually let's have the two buildings on a map so people can orientate themselves so if you imagine you're kind of going to the conference you're like okay I need to be in this building where is this building and we won't use this be able to like click on a location button find themselves on the map etc so quite useful so the way that we do this is not with a map component but with an inline list component because a map component only shows one location whereas an inline list with the map layout can show many locations so I'm gonna add an inline list and I'm gonna choose the source buildings which is our buildings sheet which has the two buildings in it right now we're just saying it is a list at the moment I'm just going to delete this label here in fact I might change it to locations and I can actually change this from a list layout to a map layout and then both of our locations here in San Francisco for the conference are on a map we can click on them we can see Block B in the main building as well and we could of course add more inline lists to this page let's add another inline list which is the schedule so we want to connect the source of talks and then we want to let's scroll down it's just showing down here as a list we want to choose calendar and if we scroll down again we can see it the properties are slightly mismanaged here so we want to change the title to be the talk and if we scroll down again we can see that that's looking pretty good there so on our info page we have an email Twitter number locations and then the schedule so we could call this sketch so that people can have all of that on one page now it's tiny bit unfriendly we kind of could do with perhaps the thing at the top that says welcome give us a show if you have any problems call this number you know just a friendly friendly bit of text so best way to do that actually is to use a rich text component and I really like the rich text component because you can actually just right inside of glide so if we look at the properties here or the kind of data we have two options for the rich text component we can either pull the text from a source column in our sheet or we can just write the text there ourselves which is really useful so if you're in the build that you don't have to go back to the sheet and write stuff in a cell so I'm gonna just move this component right at the top so we know where we're writing it at the moment it's empty but I can start writing markdown so I can write welcome to you xvc 20/20 please give us a call if you have any trouble great and you can use markdown you could kind of turn some of these into big titles there or things like that we've got more information about markdown in our documentation if you want to learn how to do that but one thing that I didn't mention that is really vital is that if we look at each of these pages here we look at the layout of the whole screen itself we've got a tiles layout on this screen tiles layout on this screen tiles layout on this screen but if we go over to the info one the whole layout of that screen is a details view and that's how we're able to not show a list of items but many different components with lots of different inline lists that's very important if you're not sure what I'm talking about there we've got a tutorial on using detail screens in our documentation so go away now and finish off your info screen and come back and we will get going with the home screen okay so the app is now really starting to take shape so let's start work on our home screen we're just gonna pull a lot of this together so we want a blank home screen to kind of work with so that we can add an image component and then some other inline lists so I'm just gonna say we need some data in this so I'm just gonna say home and I'm just gonna call it you xvc this is not going to appear on our app that it's just so that Glide can see that we've got an empty tab now we can add this home tab right up at the top of our tabs here so that we have a nice Home tab there on the left and I'm going to change the icon to be a globe because this is a global home for the conference so and what we need to do is we can see one list item here and this is kind of what we're talking about just before the just at the end of the last section that we don't want a list of items because here we're seeing a list of one item we want this to be a details screen so we're head to layout we change the style to be details and now we have a page to play with with lots of inline lists so I'm going to delete this title here and the first thing to do is I'm going to add our image component with so we can put our custom image in for our conference so I'm going to hit add new component search for image add image then click and drag my image onto this so we've got an image component now hosting our comprehensive edge that our ratio is not quite right so let's change the fill the area to show the whole image and that should be fine cool so let's start adding our inline lists I'm going to hit add inline list and we want if you remember the home screen that we worked on we want three inline lists so I'm going to start with this first one and I'm going to connect it to speakers right we want to show all the speakers and we want it to be in a tiles layout and we want it to be horizontal so that way it's scrolling to the right and it's not taking up loads of real estate on the actual screen itself so let's customize that how we usually do with non rounded corners with a three to four vertical ratio two tiles per row and let's make sure that the name is inside of the tile on the bottom left or top right I always forget which one and let's sort out our properties so we want the title to be the speaker's name and the details to be their kind of job role or what they do fantastic great so we've done that let's add another inline list and do the same thing for our talks so we connected the inline list with the values in our talks sheet we scroll down we can see all of them there again we need to sort out a property so the title of the talk needs to be the talk we don't need details we don't need a caption we don't need an image because actually we're going to be changing this layout to the tiles layout now we can see all of our talks appearing in tiles and we want to change it to the horizontal orientation with multiple inline lists using tiles layout you have the opportunity to make them look different not the same so I'm actually going to make these a little bit smaller but still the horizontal so you get this nice kind of feeling of three different inline lists that look and behave or look and feel slightly different so let's choose a square and let's make it two per row two tiles per hour actually let's not do square I think we did something else what did we do before I think we did four by three that was it great and we don't want rounded corners and we want text in there up at the top right let's see what happens there don't design systems actually the text needs to be in the bottom left great fantastic so we've got that and then we want one more inline list for our categories so let's add one more inline list and we want that to connect to our categories let's change it to tiles layout and scroll down so we can see what's going on there that looks the properties look good so let's just change it to horizontal scrolling again let's make it square and let's make it three tiles per row now so you kind of have this this kind of sort of cascading feel you've got big speakers medium sized talks and small categories and let's make everything inside of the tire as usual cool so that's looking all right actually what we need to do is get rid of probably the titles of each of these inline lists because we don't really need them so I'm going to delete home from there you can the delete home from there and I'm gonna delete home from that so now we have this kind of fairly clean minimalistic home page with all of our inline lists showing our items and if we click on any of these it's going to be customized in the same way that we customized our lists on each tab because glides clever like that kind of works out what you've actually done previously in terms of design and then applies that to this these lists here so as our home page and there's one tiny thing that a lot of people miss with the inline list is you can actually click see all on those inline lists and be taken to essentially the same page that you'd see if you're on a tab so if we're on the speakers here we can kind of scroll through and click on each individual speaker or we can click see all and see all of them in one go just like if we had clicked on the speaker's tab beforehand okay great so that's our home page go away and customize your home page with multiple in line lists designed slightly differently and try out that horizontal scrolling so you don't get this huge kind of vertical list of everything let's take a look at the finished template to kind of work out what we need to do just to finalize some things so if I go up to the app menu we've got all of our tabs done down at the bottom here our app menu has a scheduled submissions rooms and chat I'm gonna leave rooms because this tutorial will get too long but you basically just need to do the same thing with relations that we did with speakers and talks except that rooms are now going to live inside of or relate to buildings and then you'll have to show an inline list of all the rooms in the buildings and you I think you get the idea now so the main thing that we're going to work on is just very briefly the schedule because that's very easy to create and then a submissions page where we have these different performs okay so let's go back into the app that was in progress okay so if we open up our app menu we can see that I've added the in there very easy you just click and drag the chat tab in there and I've renamed it conference chat so we're done with that what we need is two tabs so we need the schedule and then we need a tab where we can put some form buttons to submit some forms so the schedule if you think about what that is it's literally just the list of talks in date and time order we've seen it already on the info page but we have already used the talks tap right but the beauty of this is that we can actually use the sheet as many times as we want in many different tabs if I explain what I mean a little bit more so if we go up here and we click new tab what we can actually do is we can choose the sheet talks again and present that in another tab but in a different way so if I call this schedule now it's exactly the same information that's showing in talks but we've called it schedule and we can put something like a a calendar on it right so it looks and feels like a schedule and then if we go back we can pull that schedule into the menu so it feels like a very different thing now if we go to that schedule the only thing we need to do now is change this list layout to a calendar layout so if we go to layout and then calendar and then sort out our properties as usual talk we've got our our schedule very very easy to do and if we click on one of these blood it's going to remember the design that we had for our talks layouts and it's going to give it to us there which is really cool ok so what we need actually now is a submissions page we want a blank page that we can put forms on so you could do this by creating a blank page based off of an existing sheet in your spreadsheet but I and then deleting all the components but I like just for my own brain just to make it really easy to create a new kind of basically empty sheet a bit like what we did when we created the home page and I'm going to call this submission Paige right and I'm just gonna put some text in here like submission or whatever and I'm going to put whatever just syntax so that Clyde sees it so if we go back down to tabs and we reload sheet we will have our submission page and if we pull this up to the top of the app menu will now see that here submission page and if we click on it we'll go to that page now let's check out the layout we are on details view so that means we're just seeing one screen which we can add components to and what I'm going to do is I'm going to delete this top title here so it's a kind of a roundabout way of creating a blank page but it's kind of one of the ways of doing it that's kind of quite clear so now what we need to do is add some components to mimic what we had on the template where you have a submission form for feedback about the conference and like a speaker submission as well so let's just start with one of these and see here we go so I'm gonna click new component form button right and you can actually if I instead of clicking the form button I could just add a button and then change the action to form and now it's a form button alright but we've also just for convenience in our components list put the form button as a component there as well so it's basically the same thing it's just a different way of getting to it so I'm gonna change the design to slightly transparent one and I'm gonna say speaker submission right now the way to start editing a form is actually to open the form so I'm going to click the form and now we're in editing the form so the first thing we have to decide is where these submissions are going to go to and actually we haven't set up a sheet in our new sheet here there is one in our template but we haven't set up a new sheet for our submissions to go to we've got a blank page to hold our submissions but they're slightly different so I'm going to create a new tab and I'm going to call it speaker submissions and what's the kind of information I guess that's what we need to think about what's the kind of information that people are going to submit about speakers so name a speaker experience and we could just say notes and suggested talk titles right and then we might want to submit other information about this submission like kind of the email of the person who submitted it so you could put email and then you could also put date of submission okay cool so let's leave those as is and let's go back to glide let's reload our sheet and we'll be able to submit or rather go to this submissions page now open the form and choose that new speaker submissions sheet has the the destination for this and it looks at all of our columns and it gives us some simple text entry components right so I'm going to keep all of these maybe experience as a bad idea I'm going to get rid of that we're just gonna have name notes and suggested talk titles now there's something that you should know about when you're using forms and that's called special values so we could ask for the user's email and then the date of submission but that's kind of a bit weird wouldn't it be nice if actually the form could do that for them and it can if we've logged into this app the the glide we'll know the users email and it will know obviously the date of submission so let's delete these two components here and let's choose two new special value and these special values appear in edit screens add screens and also form screens here so this is not something that you usually see in your normal components list it's only to do with kind of adding editing and using forms so we want to submit the current date and time of this submission so if I submit it now it's gonna log the time and date now so in the future someone can look at that and be like okay they submitted the form at that time so I'll do that and we need to choose where that is being mapped to so currently it's gonna go to our experience column we don't want that we wanted to go into the date of submission : and then let's sort out the users email as well users email address and that wants to go into email as well now the way that this will pick up the users email is we can change our sign-in settings so if we go to settings here and we choose privacy this is where we can decide how we want our users to be able to access the app at the moment it's public so Glide won't be able to pickup the users email address so we'd have to choose something like public with email right which would mean that anyone in the world can use it they just have to give their email at the beginning and then glide can match a whole load of stuff to that person it can be a bit more of a personalized experience they can favorite people in the app sorry favorite talks in the app they can favorite speakers then they can you can make it a lot more of a kind of personalized app so we're gonna leave it public at the email and we're going to go back to the layout here continue with this this is basically everything that we need let's test it out I'm going to submit myself cuz I'm great is my reasons and glides 101 it's Michael very original here submit and if we go over to I think here we can see that we've got a name we decided not to use that anymore so I'm gonna get rid of experience the notes suggested talk title the email and then the date of submission has been done so that's the basis of how you do forms right and you saw in our template let me just get back to it that we had kind of a nice bit of rich text up at the top explaining kind of the information about what to do with speaker submissions then we also did a personalized forum for topic ideas when we open our got topic title and we've also got some kind of like gdpr type opt-in stuff here it's basically saying I'm happy to be contacted about this submission and the way that you do that let's go back to our in progress app is if we click and form again we'd add a new check new component called checkbox click ok and we need to create a new column which is basically we could say happy to be contacted and if we go back to glide reload the sheet we'll be able to pick that column in the chat box happy to be contacted and we could also add a description so and we could leave it like that so when someone submits something and then clicks ok they're submit will see in our sheet that they are happy to be contacted whereas this one wasn't happy to be contacted right so go away now and create the different forms customize them depending on the needs of your submissions page you saw in the main template we had three different types of forms that might be overkill you might just need one simple one here and set it up how you like and then come back ok so that's a slightly pared down version of the full template that we're giving you access to but wanted to make it kind of relatively bite-sized and not going for things too much so we left out rooms and buildings and those relations but that should be pretty clear to you so we've got home screen we've got speakers we've got talks categories a really useful info page all of those items apart from the info page into relate to each other and then we've also got an app menu with a handy scheduled feedback and submissions with forms in there and a conference chat where everyone can get chatting so hope this has been useful if you have any other ideas for future tutorials or templates that you want to see built from scratch you can always reach out to us at hello at Glide apps com catch you soon

Channel: Glide

Views: 26,608

Keywords:

Id: Drpjh2CJSpA

Length: 49min 21sec (2961 seconds)

Published: Wed Nov 27 2019