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.
Only if this switch is present and set to true, the XPM markup will be generated in your HTML sources.
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 Configuration Switch
In you web application's web.config, add the following line inside the configuration / appSettings node:<addkey="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;
usingDD4T.ContentModel;
usingDD4T.Core.Contracts.ViewModels;
usingDD4T.Mvc.ViewModels.Attributes;
usingDD4T.ViewModels.Attributes;
usingSystem.Web.Mvc;
publicclassArticle : IViewModel
{
[TextField(FieldName = "title")]
publicstring 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.
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):
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):
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:
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:
In other words, what will for at this moment:
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.
@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;
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.