Uniform Canvas: Dynamic Pages

this is Tim from uniform and in this video we will discuss uniforms Dynamic Pages feature [Music] [Applause] Dynamic pages are a thing of everyday life you might have a thousand products and so apart on the URL segment actually signifies this is that product and then in the code of your front end you generally based on that identifier query a bunch of systems and then just build one page that works for a thousand products or Rock posts or whatever and so this is really very much a technical Adventure your Tech team has to gobble together all the data map it and put it into one place however content editors might actually want to change this page or maybe make specialty Pages for specific products every time that has to happen they have to ask the developer hey can you do this but then the developer is too busy with their Sprint or whatever right time is of the essence and you want to just be working fast together with everybody and so in uniforms Dynamic Pages system you can actually utilize uniforms visual workspace to build your own Dynamic based template and then just assign it to this URL segment that I was just talking about and do it all yourself so let's go into the browser and I'll show you how it's done all right so we're in our site map or project map in uniform here and as you can see I have a product and then here you can see there is a slash store and then Star product and this is essentially the dynamic bit in the URL that identifies which product it is and it all goes to this one template so when we hit edit here you can have a look at how this is configured so the path segment is dynamic rather than static and it's a composition that goes to our product composition and this is specific composition in uniforms canvas where you can drag and drop sources together and make it all work and so once you actually have a look at this page here this is now A visual representation of a product and you can see there's already some content here because generally when you want to make a page that's Dynamic you need a data source there's another video in this series that talks about data sources and data type you can find it in the comments so when we have a look we can say manage our data sources and so we have inside contentful where in this demo I have my products we have product by slug entry we now made it Dynamic by clicking on slug here and then it finds this product piece that is actually also in the URL here so when we click this we can actually now just find it and put this in here for the data source to have something so you can completely copy edit this page do whatever you want to do you can select anything from that data source and just make your page and so if I would were to select another one let's say this one go to my slug hit this one and put it in you'll see that the data source changes and my content changes and of course when you're in your live project you don't have to manually type that in but this literally is just whatever you link to this is the slug of your coffee maker in your Bim system essentially that is just that little product space here and so you can completely visualize how you want this to work right we can say I may want six columns here or I want two columns and you can basically build your page with the data that you have okay so this is done now this is relatively simple if you have a thousand products they all work this way now this is your template you can adjust it any way you like but what if there's another specialty coffee maker product that you actually want to use just one composition for that is extra special all what you can do is in that same product map or project map you can add in the same space you just make your JavaScript specialty um coffee maker and if you I already did it because it's easier to show when you hit edit on this one you can see this is actually a static one that is literally looking for that specific part of the URL so when I hit this now you see there's actually no little product bubble here and when we look at my data resource and I hit it you see that I've actually typed in that slug that I got from my Bim system and in this case this is actually contentful where it lives so I've now hard coded specifically for store slash Java drip specialty coffee maker this is now my composition and now I can kind of change it up right I might want to have a custom eyebrow text or I want to change some colors or add anything I want and now because this URL I'm Gonna Save that um actually lives in the same place but it's static it overrides that product one and so you now have 999 product ones and then when you hit the store javador specialty coffee maker it actually hits this composition so now you can add any composition you want to any URL or leave it and then it catches it in the dynamic product template and there you go now you as a marketer or a content creator can create your own compositions that are fully Dynamic and you can also even make things like it understands query parameters for maybe pagination and there's a whole bunch of cool things you can do with this um thank you for watching and happy building cheers [Music]