Complex field types

In this tutorial we will look at the two more complex field types Tree List and and Image field.

We are going to update our home page to contain a list of featured news articles. Beneath the news item I have create a few news articles:

A news article has the following fields:

  • Abstract - Single Line Text
  • Page Title - Single Line Text
  • FeaturedImage - Image
  • Date - Date
  • Main Body - Rich Text

The model for out News Article is shown below, for this model I have added the attribute markup so that you can see what it looks like, however for this model it isn't needed:

using System;
using Glass.Mapper.Sc.Configuration;
using Glass.Mapper.Sc.Configuration.Attributes;
using Glass.Mapper.Sc.Fields;

namespace Glass.Mapper.Sites.Sc.Models.Content
{
    [SitecoreType]
    public class NewsArticle 
    {
        [SitecoreField]
        public virtual string Title { get; set; }

        [SitecoreField]
        public virtual string Abstract { get; set; }

        [SitecoreField]
        public virtual string MainBody { get; set; }

        [SitecoreField]
        public virtual Image FeaturedImage { get; set; }

        [SitecoreField]
        public virtual DateTime Date { get; set; }

        [SitecoreInfo(SitecoreInfoType.Url)]
        public virtual string Url { get; set; }
    }
}

Notice that for the FeaturedImage field we use the a special Glass.Mapper type Glass.Mapper.Sc.Fields.Image. There are variety of different field types for handling the more complex field types in the Glass.Mapper.Sc.Fields namespace.

We need to update the home page to have the additional featured News field:


Next we update our home page model to contain a property that will contain a list of news articles:

using System.Collections.Generic;
using Glass.Mapper.Sc.Configuration.Attributes;
using Glass.Mapper.Sites.Sc.Models.Content;

namespace Glass.Mapper.Sites.Sc.Models.Landing
{

    public class HomePage
    {
        public virtual string Title { get; set; }
        public virtual string MainBody { get; set; }
        public virtual IEnumerable<NewsArticle> News { get; set; }
    }
}

Notice that to map a Tree List we just make a property that has an IEnumerable of the type we want returned. This would be the same for any Sitecore field that stores a list of Guids, e.g. Multi-List, Tree List, Checkbox List.

All that remains to be done is updating the ASCX page to render out the selected news articles:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="HomePageSublayout.ascx.cs" Inherits="Glass.Mapper.Sites.Sc.layouts.Site.Landing.HomePageSublayout" %>
<div class="hero-unit">
    <h1><%=Model.Title %></h1>
    <%=Model.MainBody %>
</div>

<div class="span6">
    <h3>Featured News</h3>
    <ul class="thumbnails">
        <% foreach (var news in Model.News)
           { %>
        <li class="span3">
            <div class="thumbnail">
                <img src="<%=news.FeaturedImage.Src  %>" alt="<%=news.FeaturedImage.Alt %>">
                <h4>
                    <a href="<%=news.Url %>">
                        <%=news.Title %>
                    </a>
                </h4>
                <p><%=news.Abstract %></p>
            </div>
        </li>

        <% } %>
    </ul>
</div>

If we compile and run the website we should see that our featured articles and images render nicely below the hero unit:


That completes this tutorial, you have seen how you can use an image field and also load items linked via fields.