In this lesson, you will learn how to add a new date property to blog posts.

Outcome

Content editors can specify the publication date for a blog post. Blog posts are displayed with the most recent publication date appearing first.

Takeaway

Learn how to:

• Add a new property to a Document Type

• Edit a Template to display the new property

• Sort a list of items by a new property

Steps - Part One

1. In the Settings section, expand Document Types.

2. Click on Blogpost. This is the Document Type that defines the fields for this type of page.
3. The Document Type contains 2 groups: Content and Navigation & SEO.

   • At the bottom of the Content group select Add property.

   • This opens the Property Editor dialog window.

4. Give the property a name: Publication Date.

5. Give the property a description: The date of the blog post. This is the date used to display the most recent posts first.

   • Always try to add a meaningful description to help your editors.

6. Select Select Property Editor to specify what type of data is being stored.

   • Select the Date Picker icon since we need a standard date.

7. Enable the field in the validation section to make it mandatory.

8. Click Add to close the dialog and save the property.
9. Select the Reorder option near the top-right of the window.

   • Drag the new property after Page Title.

   • A logical order to your properties will make things easier for your editors.

10. Click I am done reordering near the top-right of the window.

11. Select Save the Document Type. A confirmation message appears confirming that the Document Type is saved.

In Part Two, we displayed a nicely formatted publication date on the blog post page.

Finally, in Part Three we shall change the blog listing.

Steps - Part Three

1. In the Settings section, expand the Partial Views > Components > LatestBlogPosts folder.

   • Select Default.cshtml.

2. Scroll down to find the foreach loop.

3. Declare a new publicationDate variable as the first thing within the loop:

   Copy

   var publicationDate = post.Value<DateTime>("publicationDate");

4. Locate the blogpost-date element a bit further down and change it to use the new variable:

   Copy

   <small class="blogpost-date">@publicationDate.ToLongDateString()</small>

   • The ToLongDateString() method is called on the publicationDate variable to format it as a long date string.

5. Redefine the blogposts variable before the first div tag - this will be used for sorting the posts:

   Copy

   @{
       var blogposts = Model.BlogPosts.OrderByDescending(x => x.Value<DateTime>("publicationDate")).ToList();
   }

   • Because we are sorting by a custom property we need to use the generic Value method.

1. Locate the @foreach loop, and change Model.Blostposts to the variable created above: blogposts:

   Copy

   @foreach (IPublishedContent post in blogposts)

2. Save the partial view - a confirmation message should appear confirming that the Partial view has been saved.

Now view both the Blog overview and the blog posts themselves in the browser to confirm that all is working as expected.

Summary

Nice job! In this lesson, you've learned what a Document Type is and how to add a new Property to it. You've also learned how to change Templates and sort by custom Properties.

@using Umbraco.Cms.Core.Models.PublishedContent
@using Umbraco.Extensions
@model Umbraco.SampleSite.Models.LatestBlogPostsViewModel;
@{
    var blogposts = Model.BlogPosts.OrderByDescending(x => x.Value<DateTime>("publicationDate")).ToList();
}
<div class="blogposts">
    @foreach (IPublishedContent post in blogposts)
    {
        var publicationDate = post.Value<DateTime>("publicationDate");
        <a href="@post.Url()" class="blogpost">
            <div class="blogpost-meta">
                <small class="blogpost-date">@publicationDate.ToLongDateString()</small>
                <small class="blogpost-cat">
                    @await Html.PartialAsync("~/Views/Partials/CategoryLinks.cshtml", post.Value<IEnumerable<string>>("categories"))
                </small>
            </div>
            <h3 class="blogpost-title">@post.Value("pageTitle")</h3>
            <div class="blogpost-excerpt">@post.Value("excerpt")</div>
        </a>
    }
    @if (Model.BlogPosts.Count() < Model.Total)
    {
        <div class="pagination">
            <nav class="nav-bar nav-bar--center">
                @if (Model.Page <= 1)
                {
                    <span class="nav-link nav-link--black nav-link--disabled">Prev</span>
                }
                else
                {
                    <a class="nav-link nav-link--black" href="@(Model.Url + "?page=" + (Model.Page - 1))">Prev</a>
                }
                @for (int i = 1; i <= Model.PageCount; i++)
                {
                    <a class="nav-link nav-link--black @(Model.Page == i ? " nav-link--active" : null)" href="@(Model.Url + "?page=" + i)">@i</a>
                }
                @if (Model.Page == Model.PageCount)
                {
                    <span class="nav-link nav-link--black nav-link--disabled">Next</span>
                }
                else
                {
                    <a class="nav-link nav-link--black" href="@(Model.Url + "?page=" + (Model.Page + 1))">Next</a>
                }
            </nav>
        </div>
    }
</div>

Back to Lessons

In we added a new property to the Blogpost Document Type. Now in Part Two, we're going to display that instead of the default creation date.

Steps - Part Two

1. Find the blog posts on the Blog in the Content section.

2. Add publication dates to the blog posts.

   • Remember to publish your changes!

   • As this field is flagged as Mandatory you now can't save a post without it.

3. Go to the Settings section.

4. Expand the Templates folder.

5. Navigate to the Blogpost template.

   • This is the template that is rendering the full page view of a blog post

6. Find the element with the blogpost-date class and change it to use a nicely formatted Publication Date, i.e.:

7. Click Save to save the template. A confirmation message appears confirming the Template is saved.

8. View the blog post page in the browser. Navigate to the page in the Content tree and select the link on the Info tab.