Learn how to build dynamic templates with HubDB tables in HubSpot CMS. The tutorial covers testing configurations, using template partials, and replacing WordPress PHP with HubSpot markup to store and display data.
With our three homes in our HubDB table, we can now create a dynamic template to display that Data. With the HubDB template provided in the CMS boilerplate, the HubDB template provides us with four testing configuration variables. And you can set testing to true or false. And you can set a testing table ID and a testing row ID for testing individual rows or your individual page template. And then finally you can set the page level. And 0 is like the WordPress archive page. And 1 in this instance will be like the WordPress single post. And we handle all of this logic to set the appropriate variables in these two or in this if statement right here. And then we set rows to this HubDB table function with the table ID that's handled up top. Then we have our markup. And in our markup we have these conditions based on the page level. So the markup for the top level page or the archive page is here, and then the single post is right here. Now, in the wild, you're gonna get pretty crazy with a lot of this markup, so we probably need to break these out into partials. So I've gone ahead and created a property listings folder that will house our property listings hubdb template, and we'll put our partials in here as well. I've named our two partials Level 0 and Level 1. And in our, in our template, we need to go ahead and copy over everything from the Hub DB template. So I'll highlight it all and copy it over. And then what I will do is I will go ahead and copy everything inside of the the page level IF statements, and I'll copy it over into the partials. And here we are. I've already done that actually, and I've done that for the level one as well. So what I need to do now is replace all of this markup with the include tag and point it in the right direction. So I'm going to use the include tag to type without all caps. My computer's having a hard time. It's been working hard today. All right, include level zero HTML. Copy this and I'll do the same replacing all of this markup. Now get level one right there. Now, finally, I have to set my table ID and row ID to test. And I also need to extend the correct base HTML template right now because I moved from this directory into another directory. I need to go ahead and update my path. And let's grab our table ID and our row ID from the previous video. Our table ID is here. And we'll grab our 8, 6, 7, 5309 ID from here let's start testing with the top level first. And I'll go ahead and press save. I have the HS watch command going. So it's uploading to a theme called PTHubDB. And in the design manager I found the property listings hubdb template. Let me refresh. Everything looks right. I'll go ahead and preview it. This is the best way to test the template in HubDB is to preview it and it looks like something is wrong and I'll make sure everything's saved and everything's good. So let's try to dig into what's going on. Oh, our include tag is missing a forward slash and I have the page title with three listings in an unord. Well, with the three listings in the unordered list provided in the template. And then let's test level one. I'll refresh. Really cool. Alright, so I'm provided with a table that gives me a label, a name and then values. This is going to be. This is going to come in handy. So what I could do is add some CSS to where this doesn't get squished. I'll wait to do that though. You don't want to watch me do the boring stuff. Let's get down to the nitty gritty. What we need to do is replace our WordPress PHP with Hubble. And so I need to go and copy over our WordPress PHP and I'll go to the homes archive of our template. And I can see we're getting a template part here with the page header. So I'll open up this page header and basically what I'll do is I will copy this over and just boil it down to the little bit that we need. I will do that off camera. One thing that we can also do is get the archive from the home. The archive homes. And we're getting the template parts content of homes. Okay, so I'm going to copy paste everything into level one and then start replacing stuff. I'll copy from here, go to level one and I'll just go down and what I can do, you know what, we're going to use an article in the singular instance and I'll get rid of all of the PHP that I don't need and add that class in there and then I will continue. I'll call this H1 because in this instance it's the page title. And what I can do is type in row up here, I can see row and it gives me the column name which I can reference. So I'll look at row. The row name is 8675309 Drive. So you could. You could do this if you wanted to. You might like that as a PHP developer. I'll go ahead and click refresh basic 75309. It gives me the name. That's great. Or you could do it like this if you're more of a JavaScript developer. And I get the name there too. So I'm going to go ahead and do this for all the php now that you've watched me and now that you've seen how bad my PHP is, let's move on. And I'll go ahead and pause the video. And it looks like my Mac is going to sleep on me, so I need to find a charger. So this is a good place to pause. And I'll come back with all of the completed markup and I can walk you through my thought process and all the things that I did sa.
