NuGet Package for DD4T and Experience Manager

Today I released a NuGet package for Experience Manager and DD4T (.NET). It allows a developer to easily add the required MarkUp to his (View)Models to enable the inline editing features of the Experience Manager from SDL Tridion. Only use this package if you use the DD4T .NET framework!

Install the package using the package explorer:

     Install-Package DD4T.XPM

The installer automatically adds 2 files to the root of your MVC  WebApplication: SiteEdit_config.xml and RegionConfiguration.xml
It also updates the web.config in the ‘Views’ folder to use the DD4T.XPM.XpmWebViewPage as pageBaseType and includes
the DD4T.XPM.HtmlHelpers namespace. After installing the package it’s recommended to restart Visual Studio.

How to use

1) Decorate your Models with the XPM Attributes:

[InlineEditable]
public class ArticleModel
{
[InlineEditableField(FieldName="title")]
public string Title { get; set; }
[InlineEditableField(FieldName="complink_to_article")]
public HyperLink LinkToFullArticle { get; set; }
[InlineEditableField(FieldName="related_articles")]
public List<HyperLink> RelatedArticles { get; set; }
[InlineEditableField(FieldName="publish_date")]
public DateTime PublishDate { get; set; }
[InlineEditableField(FieldName="prio")]
public int Priority { get; set; }
}
[InlineEditable]
public class HyperLink
{
[InlineEditableField(FieldName="link_to")]
public string Url { get; set; }
[InlineEditableField(FieldName="link_title")]
public string LinkTitle { get; set; }
}

view raw
gistfile1.cs
hosted with ❤ by GitHub

2) Create your model and call the ‘MakeInlineEditable’ method

var model = new ArticleModel();
new XpmActions().MakeInlineEditable<ArticleModel>(model, tridionComponentPresentation);
return model;

view raw
gistfile1.cs
hosted with ❤ by GitHub

3) Use the DD4T.XPM helpers to write out the value in the View

@*Start of Component Presentation in View*@
@XPM.StartInlineEditingZone()
@* or for a 'submodel' (Component Presentation in a Component Presentation) *@
@XPM.StartInlineEditingZone(Model.Teaser)
@*Write out MarkUp and value*@
<h2>@XPM.Editable(m => m.Title)</h2>
@*Write out MarkUp and value separately*@
<h2>@XPM.MarkUp(m => m.Title) @Model.Title</h2>
@*Lists*@
@for (int i = 0; i < Model.RelatedArticles.Count; i++)
{
<li>@XPM.Editable(m => m.RelatedArticles[i].LinkTitle</li>
}
@*Region*@
<div>
@XPM.RegionMarkup("PageHeader")
</div>

view raw
gistfile1.cs
hosted with ❤ by GitHub

That’s all.

Regions

Regions are configured in the file ‘RegionConfiguration.xml’ in the root of your webapplication. This file is added by the NuGet installer. In your view you can use the following call to writeout the region MarkUp:

@XPM.RegionMarkup("PageHeader")

PageHeader is the ID of the region as configured in the RegionConfiguration.

Final notes

The NuGet installer adds the ‘SiteEdit_config.xml’ file to the root of your project. If this file is present, the XPM helper methods will write out the MarkUp (If you called ‘MakeInlineEditable’). If this file is not present, the helpers don’t output the MarkUp. Just the value. Of course you want to control the  call to ‘MakeInlineEditable’ based on the environment you’re in: only call this in staging!

This package is developed with .NET 4.5.1 and NuGet version 2.7. I did *not* test it with other .NET frameworks, but I assume it just works.

Happy coding and let me know if you run into issues

2 thoughts on “NuGet Package for DD4T and Experience Manager

  1. This is a fantastic approach, thank you for putting this together. One question: if my view models inherit from a base class, does my base class also have to be decorated with the [InlineEditable] attribute, even if none of the fields in the base class need to be editable via Experience Manager?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: