Sitecore HTML Fieldrenderer Cheat Sheet

In my field use cheat sheet I promised that I would deliver another post about rendering fields in the view using HTML helpers. Well, here we are! For most of the field types that I outlined in that post, there are HTML helpers that allow content authors to modify these fields in the experience editor. There are a few exceptions: reference fields, multi-select fields, and checkbox fields don’t render directly to HTML. However, text fields, image fields, and others render handily, and with options to modify how they render.

The basic way to render a field in the view is to insert the following in the view:

@Html.Sitecore().Field(“title”)

In addition to single, multi-line, and rich text fields, this basic HTML helper will render Images, Links, and date fields. The HTML helper also accepts parameters to customize the markup, in different ways for different fields. I’ve outlined a few of the basic parameters below.

Images

For Image fields, you can specify dimensions. You can either use w and h to specify width and height, or mw and mh to specify max width and max height. There are a couple of other image parameters as well: “as”, a boolean for “allow stretch” which is the opposite of maintaining aspect ratio. There’s also “bc”, for “background color”, which accepts color names and hex codes. This background color is used when aspect ratio does NOT change and there’s blank space to fill.

Example:

 

@Html.Sitecore().Field(“imageField”, new {w=160, h=160})

Links

Link Fields and image fields can both accept css classes as parameters. This class will be included as part of the rendered markup. The “class” parameter needs to be entered with an @ symbol before it, as the word “class” is a reserved word in c#.

Example:

 

@Html.Sitecore().Field("link", new { @class = "red-link" })

Date

For Date fields, you can customize the formatting of the date with the “format” parameter. 

Example:

 

@Html.Sitecore().Field("post date", new { format = "MMM dd,yyyy" })

Other Items

If you have a multi-list field, or a reference field, unfortunately you can’t use a fieldrenderer. Honestly, it wouldn’t even make sense. Nobody needs to output a list of unusable GUIDS. HOWEVER: You can use HTML helpers with the fields inside the referenced items.

Let’s say you have a multi-select field, and it contains a selection of items that have title fields. You want to render each one of these titles, and you want the titles to be editable in the experience editor. The first thing you would do in the backend is get a list of items from the multi-select fields(see my previous post, the field reference cheat sheet). Then, you could simply pass this list through the model to the view. In the view, you can iterate through this list, rendering a title for each item in it.

All you need to do is insert a reference to the item in question as a parameter in the field renderer, like so:

 

@Html.Sitecore().Field(“title”, item)

And that loop might look like this:

 

foreach(var item in Model.ListOfItems)
{
     <h1>
          @Html.Sitecore().Field(“title”, item)
     </h1>
}

And there you have it! Our MVC Fieldrenderer cheat sheet.