Loading...
Area: Optimizely CMS
Applies to versions: 12 and higher
Other versions:

Adding editing attributes

Recommended reading 
Note: This documentation is for the preview version of the upcoming release of CMS 12/Commerce 14/Search & Navigation 14. Features included here might not be complete, and might be changed before becoming available in the public release. This documentation is provided for evaluation purposes only.

This topic describes how to add editing attributes for content rendering in a template, when working with Optimizely CMS.

How it works

When you work with content data in Optimizely CMS, the default way to render content in a template is to use the PropertyFor helper, @Html.PropertyFor (see EPiServer.Web.Mvc.Html.PropertyExtensions.PropertyFor in the class library), which is responsible for adding the required HTML to be editable in the content editing view.

However, if you render your content some other way, make sure the output contains the HTML attributes that the content editing view requires.

Applying edit attributes to an element

The best way to add the required attributes for editing is to use the EditAttributes html helper. Add a wrapping HTML element around the rendered content and call EditAttributes on it.

Applying full refresh properties

Some properties can affect the rendering of several parts of the page. For instance, you may have a boolean value on your page type that enables/disables several panels. To get a correct preview of such a property, you would need to do a full refresh of the page.

To make a set of properties force a full reload on change, use the html helper FullRefreshPropertiesMetaData

The following example shows how to use these methods in a template:

@Html.FullRefreshPropertiesMetaData(new[] { "ShowBanner" })

<h1 @Html.EditAttributes(x => x.Heading)>
  /* Render the Heading property, unless it it empty, then use PageName as fallback */
  @Model.Heading ?? @Model.PageName
</h1>

@Html.PropertyFor(x => x.CurrentPage.MainBody)
using System;
using EPiServer;
using EPiServer.Core;
using EPiServer.DataAnnotations;

namespace CodeSamples
{   
  [ContentType]
  public class MyPageType : PageData
  {
    public virtual string Heading { get; set; }
    public virtual XhtmlString MainBody { get; set; }
    public virtual bool ShowBanner { get; set; }
  }
}
Do you find this information helpful? Please log in to provide feedback.

Last updated: Jul 02, 2021

Recommended reading