Implementing Experience Manager in DD4T 2 .NET

This post describes an implementation of Experience Manager (XPM) for DD4T 2 .NET using the CIL (REST) providers in SDL Web 8. The implementation would be basically the same in a more standard architecture where the Tridion Content Delivery stack would be used.

XPM Configuration Switch

In you web application's web.config, add the following line inside the configuration / appSettings node:

    <add key="DD4T.IsPreview" value="true" />

Only if this switch is present and set to true, the XPM markup will be generated in your HTML sources.

Models Ready for XPM

In order for XPM utility methods provided by DD4T out of the box to work, the models must:

• implement interface DD4T.Core.Contracts.ViewModels.IViewModel;
• annotate their Tridion fields with attributes;

The code below shows a simple model that is XPM ready:

using DD4T.ContentModel;
using DD4T.Core.Contracts.ViewModels;
using DD4T.Mvc.ViewModels.Attributes;
using DD4T.ViewModels.Attributes;
using System.Web.Mvc;

public class Article : IViewModel
{
    [TextField(FieldName = "title")]
    public string Title { get; set; }

    [RichTextField(FieldName = "summary")]
    public MvcHtmlString Summary { get; set; }

    public IModel ModelData { get; set; }
}

Notice the attributes TextField and RichTextField mapping the Tridion XML names to the model properties.

Also, the model declares property ModelData of type IModel inherited from interface IViewModel. It must be assigned either a DD4T.ContentModel.IComponentPresentation or DD4T.ContentModel.IPage object.

XPM Code for the Views

The following code will enable XPM Javascript output in your Razor Views. Several Page View and Component Views must be edited to enable XPM markup.

Page View

The following code snippet must go in a Page View at the end of the HTML document, just above the ending of the </body> tag.

@using DD4T.Mvc.ViewModels.XPM

if (XpmExtensions.XpmMarkupService.IsSiteEditEnabled())
{
    @Html.Raw(
        XpmExtensions.XpmMarkupService.RenderXpmMarkupForPage(
            Model, "http://tridion-cme.com"
        )
    );
}

You can notice the if statement surrounding the XpmExtensions output. This is required at the moment of writing this post because the method RenderXpmMarkupForPage does not check the enable status of XPM. (This should change in a subsequent DD4T release).

The code above should generate the following HTML output (or similar):

<!-- Page Settings: {"PageID":"tcm:9-259-64","PageModified":"2016-08-04T14:43:31","PageTemplateID":"tcm:9-264-128","PageTemplateModified":"2016-10-18T12:37:03"} -->
<script type="text/javascript" language="javascript" defer="defer" src="http://tridion-cme.com/WebUI/Editors/SiteEdit/Views/Bootstrap/Bootstrap.aspx?mode=js" id="tridion.siteedit"></script>

Component View

The following code goes in the Component Views. In order for the XPM logic to work properly when moving/delimiting Component Presentations, make sure to surround your CP output by an HTML tag (usually div).

@using DD4T.Mvc.ViewModels.XPM;

<div>
    @if (XpmExtensions.XpmMarkupService.IsSiteEditEnabled())
    {
        @Model.StartXpmEditingZone()
    }
...
</div>

The StartXpmEditingZone method is defined in class DD4T.Mvc.ViewModels.XPM.XpmExtensions and is an extension method for object based on interface DD4T.Core.Contracts.ViewModels.IViewModel. This implies your 'model' must be implementing interface IViewModel.

You can notice the if statement surrounding the StartXpmEditingZone output. This is required at the moment of writing this post because the method does not check the enable status of XPM. (This should change in a subsequent DD4T release).

The code above will generate the following HTML (or similar):

<!-- Start Component Presentation: {"ComponentID" : "tcm:9-266",
  "ComponentModified" : "2016-10-18T13:28:10", "ComponentTemplateID" : "tcm:9-264-32",
  "ComponentTemplateModified" : "2016-07-26T10:26:25", "IsRepositoryPublished" : false} -->

Text Field

The following code outputs special HTML markup that enables XPM in-line editing for a text field:

@using DD4T.Mvc.ViewModels.XPM;
@model Article

<h1>
    @Model.XpmEditableField(m => m.Title)
</h1>

Extension method XpmEditableField outputs the XPM HTML markup as well as the value of the model field.

There is another extension method, XpmMarkupFor, that only outputs the XPM HTML markup. This is perhaps better suited for outputting XHTML rich-text fields, where we can do more processing on the rich-text value before outputting it.

The code above will generate the following HTML:

<h1>
  <!-- Start Component Field: {"XPath":"tcm:Content/custom:Content/custom:title"} -->About Us
</h1>

Embedded Field

Outputting XPM markup for in-line editable embedded fields, single or multi-valued, is a bit trickier. The code looks similar to the following snippet:

@using DD4T.Mvc.ViewModels.XPM;
@model Article

@foreach (EmbeddedParagraph paragraph in Model.Paragraphs)
{
    <span>
        @paragraph.XpmMarkupFor(m => m.Text)
        @Html.Raw(paragraph.Text)
    </span>
}

Notice the construct on the embedded paragraph of type EmbeddedParagraph. We use the XPM extension method XpmMarkupFor on the paragraph model itself.

The code above generates the following HTML output:

<span>
    <!-- Start Component Field: {"XPath":"tcm:Content/custom:Content/custom:paragraph[1]/custom:text"} -->
    Text <b>goes</b> here
</span>

Conclusion

At this moment, if you followed the steps so far, you will have a working XPM implementation without the need of republishing anything. One thing that at this moment still doesn't work is Session Preview.

In other words, what will for at this moment:

• Enable/disable XPM functionality on a Page in your website;
• Move/Reorder Component Presentations on the Page;
• Add existing Component Presentation on the Page;
• Create new content and add it to the Page;

For short, all editorial functionality of XPM will be there.

What will not work at the moment is Fast Track Publishing, also known as Session Preview, also known as Update Preview. But, more about that, in the next post Enable XPM Session Preview in Web 8 using Microservices.