New features for Contentful in Uniform Canvas

this is tim from uniform and in this video i want to talk to you about the features of the latest uniform canvas release for contentful so we've started by adding multi-space content selection lots of brands have a global contentful space and then a whole bunch of local contentful spaces and so we've now made it so that you can create compositions where you have some global content and some localized content and that just makes things a lot easier we've also added localization for translating compositions and you can do that right into the composition you can even personalize your localization so that also gives you again extra flexibility last but not least we have created reusable component patterns what you see all the time is that people let's say just above their footer have a collection of components they always put there with some messaging well if you have 50 compositions clicking together this pattern is generally a lot of work so with the introduction of patterns you can do that once create a pattern and then reuse it everywhere so how about i show you this on my screen in a demo let's rock all right we are now at the canvas home and so in the settings let's go to the contentful settings and actually add one of our contentful spaces and so we add a source key we select the space we want and we add the environment in this case it's just master and so now that we've created our new connection we can start adding components into canvas that select stuff from the new created connection so let's go to the component library and with a little plus here let's connect or create a new component and so let's make a global hero for the fast forward conference that's happening at the as we speak and so let's call it a global hero and we'll call this a contentful entry because that's actually what it is and the public id would just make entry that's easier in code and then we select a contentful type and with our selected environment connected we can now see that hey there's a hero in there so let's let's set that up and so as you can see this is a contentful entry and there comes like a title parameter from it and so we set that here so it looks great when you're starting to compose with it okay we have saved it and so let's make a new landing page and then add our new global hero and as i said before we wanted to make this because the fast forward conference is happening so let's make this thing called fast forward and also add that as the slug to our website and so of course also the page title and so um i'll just add the the header and the footer that has already been pre-created inside canvas and now it's time to add my global hero and so let's um go into our contentful space and see hey there's actually no global hero here so let's make a new one because the one for fast forward doesn't exist yet and so you can see that now i go into a new tab in content full i'm just going to be typing this here adding it in in the background this has already been connected to your composition so when you close the tab after this we're good to go okay let's add the vertical title here and of course the fast forward logo and so now that this is published or let's click publish there we go when we go back now you'll see okay is everything published yep there it is and you see there is join us here and so we now created this global component and we have a header and a footer so how about we preview this and this is what we just created so we have the header the footer and the hero we are back to our composition for the fast forward page and um let's just continue with composing our page and then we start add localization so let's add a story component that is living in one of our contentful spaces okay so we add the story and then we select it from contentful and we're basically just selecting the english version for now or the default version basically and so now that this will be saved let's preview it all right scroll down there it is so it just came in and this is actually the default version so it's not localized at all and so now if we want to start localizing this stuff we need to go back to our composition and add a localization component to our composition so there it is and so what we can do now when we select this localization we can actually drag the story into its localization slot and then select what language it has and so in this case this was the english us version and so let's add a german version so we add another story go back to contentful and then select the de version and of course you're going to have to give that an option in the locale field as well and now you have made a little composition that is now actually a localized variation and so now you see still see the english one and let's go to the url and actually add de into the url there you go and now what you'll see is that suddenly this is the german version and so that was a super easy way to start composing with different components and make them localizable let's talk about patterns so in the footer generally what you want to do on each composition is actually add a bunch of different messages and so that's what you see what i'm doing here actually i'm adding two messages to my footer but what if i had 50 compositions and i had to keep on adding that that's a lot of clicks so you can now actually select your footer and make this into a pattern so when you click on the three dots here say convert to pattern and then what this does it actually creates you a named pattern that you can reuse so let's call this footer pattern and convert it and so when this is created you can see you can actually no longer edit it here you'll have to edit it in our pattern editor so once you change it once it changes everywhere and so let's go to the pattern editor and oh well i do have to save and now let's go okay and you see here you're now in the pattern editor and you can change your stuff you can add personalization whatever you like it's basically like a little composition and so what if you now wanted to add a new page and add the pattern well here we go so we add a new landing page called my additional fast forward page we go and so now instead of the normal footer i can actually select my footer pattern and there it is and now this is much easier to use if you have lots of patterns and lots of clicks going on normally so there you go