Made withOctober CMSClip

Making Websites With October CMS - Part 07 - Displaying Lists and Details

W

Watch and Learn

Creator on the October CMS channel

Watch on YouTube ↗

41K viewsAug 7, 201610:28 runtime

Learn to build dynamic list and detail pages in October CMS using the powerful Builder plugin. This tutorial walks you through displaying a collection of records, like movies, and linking each item to its unique detail page. You'll master essential Twig templating techniques…

Chapters

#octobercms#clip#cmscrm

Displaying Record Data

To display data from a model record in a Twig template, you can use dot notation. This provides a cleaner alternative to the display column attribute.

Title: {{ record.name }}
Description: {{ record.description }}
Year: {{ record.year }}

Tip
Using dot notation (record.fieldName) is the standard and most readable way to access model attributes within your Twig markup.

Handling HTML Content

When working with fields that contain HTML (like a rich text editor), you need to use specific Twig filters to control the output.

The raw Filter: Use {{ record.description | raw }} to tell Twig to render the HTML tags within the field instead of escaping them. Without this, tags like <p> and <br> will appear as plain text.
The html_limit Function: To create a truncated summary from an HTML field while respecting tag integrity, use the html_limit function: {{ html_limit(record.description, 150) | raw }}. This limits the content to a specific character count without creating broken HTML.

Building List and Detail Views

Creating a classic list/detail interface with the Builder plugin involves two pages and two components that must be linked together.

Create the List Page: Add the Record List component to a page (e.g., movies.htm) to display all records from a model.
Create the Detail Page: Add the Record Details component to a new page (e.g., movie-single.htm).
Configure Detail Page URL: Set the detail page's URL to include a dynamic parameter to identify the record, like /movie/:id.
Configure the recordDetails Component: Set the Model class to your model (e.g., Watchlearn\Movies) and ensure the Identifier Value is set to the URL parameter (:id).
Link the recordList Component: In the Record List component settings, select your newly created detail page from the Details page dropdown and set the Details key column to match the identifier (e.g., id).

Important
The Details key column in the list component (id) must correspond to the URL parameter in the detail page's URL (:id). This is how October CMS knows which record to fetch and display.

Next Steps

The video demonstrates linking records by their ID. A common next step, mentioned as a topic for a future episode, is to use a more user-friendly slug (e.g., /movie/inception) for the URL instead of a numeric ID.

Introduction

Now that we made our site a bit more presentable, in this episode we are going to continue with the builder plug-in. We are going to finish up our list of movies. We are going to link those movies to the single movie pages. Also, I'm going to show you how you can limit the HTML that you get from the description field, how you can display that HTML, how you can display a year and so on. So this is what we are going to be doing in this episode.

Displaying Model Fields with Twig

So this is what our page looks right now. So if we go to movies, we get the list of the movies that we currently have in our database. So Inception, Fight Club, and American Beauty. Okay. So how is this getting outputted?

So if we go right here we can see this command, attribute record display column. We can write this another way. So what we can do is we can just do record dot and the name of the field that you want to display. So we want to display the title of our movie and that field name is name. So we just do record.name. If we save this, go to our page, we get exactly the same thing.

Okay, let's try it with another field. And this time we're going to add a description field. I'm going to write it below this end spaceless Twig tag.

Formatting and Truncating Content

And now if we go to our page, we can see this. As you can see, this doesn't look very good because we need to output our HTML in a raw format so that the browser actually renders these P tags, BR tags and so on. So to do that you would just go right here, put a pipe and say raw. So we are going to be using the raw filter. Save this. And now, as you can see, this looks much better.

Okay, let's just do one more thing to make it a bit more prettier. So, I'm going to above this spaceless right here, add an H3 and at the end the closing of an H3 tag. If we save this right now, go to our page. Now our page looks a bit different. Okay.

One more thing I want to do. I don't want to display the whole description of the movie. I just want to display let's say first 150 characters of that movie. So to do that we are going to use a twig function called HTML. If you go to the documentation, as you can see right here you have this raw filter that we used before. But you also have this HTML function and HTML function has a few options. So you can strip the HTML, you can limit it, you can clean it and so on. So we are going to be using this html_limit function to limit the output of our description field to be 150 characters.

So what you want to do is you just add this record description in braces. So this is the variable for record description and say 150 pipe raw. If we save this right now, go right here, as you can see our descriptions are cut off after 150 characters.

Creating a Dynamic Detail Page

Okay. So let's just explain what this does right here. So what this says, if the details page exist, then output an a tag with the URL to that details page. So the URL of the single movie page and also you have the same thing right here. This is just the closing a tag. So this doesn't work right now because we didn't define the details page and we are going to be doing that right now.

So in our back end we go to CMS, and we add one more page. We are going to be calling that page movie single and it's going to give us a URL of movie-single but we don't want that URL. We actually want to use this URL: so movie slash id. Okay. So the file name is movie-single and the layout is of course going to be the default layout. And what we want to do now is we want to say to this page that this is the details page for the movie.

So we go to components, click on builder and drag this record details right here. Now we have to click on it and we have to set the display column to also be name. But more importantly we need to set the model class. So right now it's rainlab blog category. We don't want that. We want to use watchle learn movies. Click on that. Okay. Save it. And now we should be able to have our details page.

Linking List Items to Detail Pages

Of course, I'm going to click on this component right here and then fork to get the whole code that we need so that we can edit that page as we want. Save this.

Now, of course, this doesn't work just yet because we have to go to our movies page. Click on this record list right here. And then you have this link to the details page. You click on it. And the details page is of course movie-single. The details column will be name and the URL parameter will be ID. So the ID of the movie but I think that the details column should also be actually ID. So we are going to set it to that and just save this.

Let's see what we get now. As you can see you already have these links right here. So, Inception, Fight Club, and American Beauty. And if you check out the URL down here, you can see that it says movie/1, Fight Club is movie/2, and American Beauty is movie/3. So, we are currently linking our movies to the details page by their ID. What we are going to do in the next episodes is I'm going to show you how you can do the same thing but we are going to link it by slug, so not ID. But for now, let's let it stay as it is.

Building the Detail Page Layout

So right now if I click on inception I will just get the name of that movie. But I don't want to get just the name. I want to get the name, the year and the description of the movie. So those are the fields that we currently have in our database. So to do that, I'm just going to go to my code editor. And as you can see, we have this movie-single.htm that we created from our back end. If we click on it, it just says if the record exists, then display the name of the movie, and if it doesn't, then display this not found message.

So, what I'm going to do now is I'm just going to, just like we did for the movie list, we are going to put the title of the movie in H2 text. Save it. And if you check out our page right now, we get inception like this. Okay.

Now, we want to display the year of the movie. And I'm going to put the year in the H4 tag. If we check it right now, you can see that we get 2011. Maybe make this a bit bigger.

Okay. And now I just want to display the description. So I'm going to add a title for the description in H3 tag. And then I'm going to display that description field. Of course, we are going to use a raw filter on it. Save this. And now if we go to our page, we can see that the description has this description. We have the title, we have the year, and we are displaying our movie.

You may wonder why we have such big spaces right here. That's because if we go to the movies and then go to inception, these are because I copied that text right here. So we have actually a big space right here. So if I just do this, save and close and refresh our page, then that space shouldn't be that big.

Conclusion

So this is it for this episode. Remember everything we did here will be available for you on GitHub. The link will be in the description below. If you enjoyed this video, please like it. If you like the content I put out, please subscribe to the channel. Also, you can follow me on Facebook or on Twitter if you want and ask me questions there. And that's it. Thank you guys for watching and I will see you in the next episode.