And so the example use case we're going to start with a laptop buying guide. So the purpose of this application was to allow the users the end users to be able to pick a laptop across every single brand. So the users of this application can say I'm interested in a gaming computer, specifically Dell, Lenovo, Alienware, and my price is between 700 to 1000. And we can look at performance processor graphics and memory. We can see these are already been filtered down to one choice because of the previous selections. And then lastly, maybe we can pick a hard drive with one terabyte of storage and there we go. We have our Dell inspur on Ay, ay five. So this quickly, helping a user pick a product across all these different vendors is the the value that we can create here and this image here can be a clickable link to take someone to the product catalog. It could be tagged with an affiliate code, or it could just be simply to help someone get to purchasing the right product faster.
So now what to do in the second half of this video, we're going to look at what it takes to recreate this entire application and we'll just make a small snippet of it. So to do that, we're going to create a new app and just so you know, there are templates as starting places. We have an entire template to accelerate the building of these product catalogs much faster than what we're going to do right now. We're going to do the the ground up so you can see how the whole thing comes together. But again, the templates provide starting places for a much faster build out. So I'm going to select a blank app. And we'll title it the laptop Buying Guide.
And then from here, what I will do is put down a split pane and a pain for the left and the right side of the screen. This is to prepare for the left side and the right side. And I'm going to go ahead and copy this HTML here. And on the left side, I will put a text box and paste in the WYSIWYG. That HTML. And I can click here and see the actual HT underlying HTML that we copied over. And then on the right side of the screen, I'll put another text as well and copy this part of the HTML.
Alright, so let's preview that to see and there we go. We've got the answer these questions on the left to find your ideal laptop on the right. So next, we have these categories. And we're just going to pick three of them. What kind of laptop do you need, what's the brand and price and then the recommendation so to do that, let's go back to the edit mode. And let's add a category and we'll call this what kind of laptop Do you want? And then brand price and then on the right side, we're going to add the category of recommendations. So let's preview that and looking good. But we can notice that these categories have this nice pretty card layout. So we can add that by clicking on the category and picking the card layout with this predefined better way to segment the content.
So now that we've added that, there we go, now it's starting to look a lot closer to the end result.
Okay, for this next step, we now need to think about how do we get all this laptop information into the platform. And we don't want to add this directly to the app. What we want to do is now create a spreadsheet. So we're going to create a new spreadsheet called laptops. And we're going to add a first column called Computer Name.
Then we'll add computer image.
And then we'll add the type or the kind of laptop, the brand and the price. So these are our five columns that we're going to fill out. And we'll just go flip back and we're just going to grab three of them. So I'll grab this Acer and put that here in this first row and then I'll put Asus in the second row and lastly we will do this Dell in the third Alright, so from here we can say this is the brand of Acer, the brand, Asus and Dell. And then for the rest of this let's just make these up. So we'll say this is a gaming laptop. This one is mainstream. Also mainstream.
This one has a price between 701,000 701,000 and this one is 1000 to 1400, let's say.
All right. The last thing we need to do is grab the computer images. So let's go back here. We'll grab this image and we can paste that here.
Grab this asis image, paste that here, and then we'll get the del inspiraton image and paste that here. Okay, great. So we've got all this raw data and information that we're building and by the way, we're building this in a spreadsheet because that's easy to manage. This could be data housed in a relational database. It doesn't matter how you're storing it, as long as we have this information. The next step is how we can incorporate it into the app. So let's switch back over to our laptop Buying Guide. And we're going to now add a couple more things. So the first thing we're gonna add is a filter logic. Because in this application, we're going to be doing some filtering. And we'll put the split pane underneath it so that it filters the split pane and everything underneath it. And then we're going to add some data. And we'll pick our laptops spreadsheet, so we can click on that and see the spreadsheet that we've been creating.
So now underneath what kind of laptop do you want, we're going to add a filter and the kind. Let's click here on this and see type brand price. So we'll add type, and then under here, we'll add the filter brand. And then under this we'll add the filter price and it's very important that this matches those columns. And then underneath recommendations, what we're going to do is add a filter for now let's just put computer name. Okay, so, go ahead and preview this.
And we can see the basic structure is now there. So we've got it auto populating all these filters direct from the spreadsheet in our application. Everything is hooked up and ready to go. But now it's time to turn our attention to the formatting of this information. And we can see by the way that if we click gaming, there's the Acer or mainstream Dell. And there we go. So all the filtering is working properly.
But now we have to focus on a couple things. How do we fix the formatting? So first thing, let's get rid of this name here. So that that goes away. Because as you can see, there's only the selections on the other app. So to do that, each of these filters we can hide the text.
So we go ahead and switch that hide text
and the result is now the selections without that text. Okay, starting to look better.
The next thing we need to do is we need to format the images with the name in this type of a format. So let's discuss how that works. If we go back to our spreadsheet, we could actually put a new column called computer. And then we could create all the HTML here in this row. And then instead of calling computer name, we could just have it have all the HTML right here. But the problem is you don't want to do that you want your spreadsheets to focus on the data itself, just the raw information. It's the application where you then focus on how they it's presented.
So what we're going to do is show how in the app, we're going to create a phantom column that doesn't exist called Computer and it's going to be a dynamically derived column from these two columns.
So to do that, let's go back to our application.
And underneath the data node, we're going to create a data derived and we're going to call it computer.
And then this data derived is going to be a data drive text. We have to now tell it, what's the formatting. So I'll switch into HTML mode. Click into this and let's start simple. Let's just put open brackets, Computer Name, enter and then computer. Let's put it actually above it.
Alright, so what we just did is we said take the the column computer image and the column computer name, put them together formatted in this in this way. And then that's a new column derived that doesn't exist in this spreadsheet called computer. And so if we go down here, we can now get rid of the name change that to computer. And if we preview, we can see the beginnings of this new derived column. So it doesn't have the image because it's just the raw text, right? We didn't we didn't tell it how to use the the image link. We just said paste that value here on top and then the name on the bottom.
So now the next step we have to do is to tell it a little bit more information on how to format that. So let's go back into the edit mode. Click into the WYSIWYG, switch to HTML. And then from here what we can do is we can add a little bit more HTML. So we'll do image source equals that computer image.
And then style equals let's do height of 100 pixels and then close that. And then Alright, so we have now created this basic HTML. And when we preview this, we can see all of our laptops now showing up in with more of that formatting. So this here is just a quick look at and this is really just a high level look at the power and flexibility this system has. We are just scratching the surface. There is a lot more customization that you can add in here. That goes way beyond this and we discuss a lot of that in more advanced videos. And again, all of this stuff you're seeing too we have lots of templates and starting places. So the things that I showed you today, you don't have to recreate when you're building this on your own. And we'll talk about that in future videos. And then also finally, as we said, all of these can be clickable links with affiliate codes and there's many different ways that this content can be useful.