--- title: "Uniform Canvas: data types" description: "Connecting external sources to Uniform design system components requires you to use data types. Uniform offers pre-built integration types (like Contentful, etc) or URL-based data types that offer REST APIs. From legacy to a custom microservice." date: "2023-07-20T07:54:33.000Z" url: "https://timbenniks.dev/videos/uniform/006-zbi8h6-fp5c" youtube_url: "https://www.youtube.com/watch?v=zbi8h6-fp5c" playlist: "uniform" image: "https://i.ytimg.com/vi/zbi8h6-fp5c/maxresdefault.jpg" tags: ["composable-architecture", "cms", "api-design", "content-ops", "frontend"] --- # Uniform Canvas: data types Connecting external sources to Uniform design system components requires you to use data types. Uniform offers pre-built integration types (like Contentful, etc) or URL-based data types that offer REST APIs. From legacy to a custom microservice. Watch on YouTube: https://www.youtube.com/watch?v=zbi8h6-fp5c ## Transcript this is Tim from uniform and in this video we will be discussing data types [Applause] [Music] if you want to connect external sources to your uniform design system components you need to use data types and in this video I'll show you two of them the first one is using and pre-built integration let's say into contentful acms integration or you can also do is add any URL to the system that actually has an output for our rest API something Legacy something you've built yourself and then make that into a data type as well so let's start with the contentful one so we go to contentful for the integration and then we now add it to uniform so uniform knows hey this will be a data source that I can get a type from so in this case a type could be a product or a blog post or whatever you have content modeled inside the CMS so let's add a data type for call to actions that's what's in my database so first before we can select the call to action we need the source and the source here is the space ID in your API tokens things like that so let me copy that to over here and it's done this way because now what you can do is you can add another source to another space with another user account and you can add 20 spaces if you want probably don't do that but you can the idea is that this is extremely flexible so now that we know what the source is we need to actually see what will we query will we get assets a query into the system to just return whatever you search for or a single entry or multiple entries where you select the ones you want right now I want one CTA to connect to one hero component and so let's find our call to action let's find the field that has the image so it looks nice in the uniform interface and let's go in a depth of two because maybe there's connected images elsewhere inside the CMS so it finds more and then whatever field we use to search in for the title if you wanted to select it and then we call this call to actions so what we can do is actually hit the save and test so it already queries for you and you say okay let's see what comes out here so this is the API result from contentful and so you can see the title there's the text there's the image data and this can now be attached to components in uniform if you want to go deep on how that works there will be other videos in this series to show you alright so this is the pre-built integration now let's add an API that I might build myself for my articles that queries another system but I've built that endpoint myself so let's add another data type in this case it's going to be an HTTP request and it's going to my own website [Applause] to my API and this is an open API because I just it's going to be a very simple query here so this is my API as my source and what I want is my articles [Applause] and I want articles for my username for def.2 because that's what I'm using as my blogging platform I could actually add another username here to get different articles and so what you can do is make a variable that is called username and you can actually add a default value because for me this is always 10 minutes of course I could have hard coded this in the API but that's not really very flexible and I want a specific per page count to know how many to get back oh not username but a new one [Applause] and let's get three by default so now this is the API call that it's going to be doing and so we can you know have a little test here let's fetch this data and see what comes out well in the result here you have the three latest articles that I have posted so now these data that's in here I can attach them to a list of components in uniform so these are the two types that I wanted to show you today which you can literally grab any data that is open put it here and start using it in uniform so for the people who wanted to know what data types are you can stop the video now you're good to go but I will make it a bit longer and actually show you how to assign these two two components in uniform just to give you a bit of a feeling of how that works so let's actually go to the home page and this is the uniform component starter kit that makes you a base page with a bunch of components and so if the data lives in uniform I can actually do things like this I can actually type anything I want so I can keep it like this hit save use uniforms kind of CMS features and run with it but what I want to do is that this hero here is actually a CTA to a product for example well I have a bunch of ctas from contentful so what I can do is I can click on this little icon here and say connect this to an external Source well I have contentful ctas here well let's connect it and let's see what we have so let's use the fold away frother and so now that's selected you can actually then say okay well which field that comes out of this API response can we then use for the title well there's a title here let's add there you go this is now a dynamic field to that API resource how about we do the same for the description go and let's do the same for the image and what you will see now is that this image doesn't actually fit because of the content that I have luckily the uniform starter kit has a bunch of different options for images right and so the interesting bit here is that some of these fields are now dynamically connected to something in a CMS but this one I can hard code if I want [Applause] and maybe my button I can also hard code [Applause] oh [Applause] this can also be connected to anything that you have and so this is how we're now connected this data type for a call to action to my hero what you can also do is grab this component and make a pattern out of it for specific different kind of things that you connect to it and then for Content editors they just have to choose a specific one put it on so they don't have to go through all these steps if you want to know how patterns work there will be another video in this series that explains all of that so now we also have my articles and you see there's these three cards here well these look perfect for my blog post articles so let's actually make these Dynamic and so what I'm going to do there's actually a container here for the featured components well let's first call these latest articles [Applause] and of course this kind of content is the best to keep in uniform because this is not coming from a CMS that would be out of context in the CMS so that lives here but um let's remove these cards because they are now actually hard coded the connection to my um latest articles that's what makes this very interesting right so what you can do is actually add a loop that Loops over those three items and if you want to know more about loops there will be another video in the series that dives a bit deeper so I'll just quickly select a new resource which are my articles and I want three of them and you see there's already pre-filled which is very nice so now I have now connected my result of these three items to this Loop and so whatever information is in there it can Loop over them and so what I do now I'm adding a card and I can say Okay so the title for this card will be the title of my looped item the description will be the description and now let's grab the image and maybe the bad should be the date this is not going to look super great but you get the gist and so the badge style let's see what the hell what do we have and so essentially we have now created a dynamic list of my latest three articles with the date the title the description and if this list now changes this will change on your web page as well and this is a very powerful way of very easily generating Dynamic data into uniform because you as a Content editor you don't really know where this is coming from and who cares that's what makes this great and again you can make this into a pattern for this component so a Content editor that doesn't want to look at like all these Json things here you can just select these are my latest articles but you can make another pattern that says these are my latest products or this is a search result for something and then they can just choose it so again if you want to know about patterns there's another video in this series that explains them thank you for watching