Dynamic Content in EPiServer CMS 6 R2

This is a short demo of how you can use the new simpler way to implement Dynamic Content with a ordinary User Control and some Plug-In attributes.

DynamicContentPlugIn is the simplifying solution

First add a normal User Control or EPiServer User Control if you want to be aware about the Current Page.

HelloDynamic.ascx.cs

using EPiServer.DynamicContent;
using EPiServer.PlugIn;

namespace EPiServer
{
    [DynamicContentPlugIn(DisplayName = "Hello...", 
      ViewUrl = "~/HelloDynamic.ascx")]
    public partial class HelloDynamic : EPiServer.UserControlBase
    {
        public string Firstname { get; set; }
        public PageReference FeatureArticle { get; set; }
    }
}

DynamicContentPlugIn will auto register the Dynamic Content control and wrap wrap all handling of settings, rendering and state handling. There is no need to register the class in episerver.config or to implement IDynamicContent.

All public properties inheriting from PageData will be used as settings. Properties with primitives as type like string, int, bool but also PageReference will be converted to PropertyString, PropertyNumber, PropertyBoolean respectively PropertyPageReference.

HelloDynamic.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="HelloDynamic.ascx.cs" Inherits="EPiServer.HelloDynamic" %>
<h1>Hello <%= Firstname %>!</h1>

How to add a Custom Settings Editor for Dynamic Content

If you do not use the Url and Area parameters of the DynamicContentPlugIn attribute you will get the default settings editor that just show all Properties in a list.

HelloDynamic.ascx.cs

    [DynamicContentPlugIn(DisplayName = "Hello...", 
        ViewUrl = "~/HelloDynamic.ascx", 
        Url = "~/HelloDynamicEdit.ascx", 
        Area = PlugInArea.DynamicContent)]
    public partial class HelloDynamic : EPiServer.UserControlBase

HelloDynamicEdit.ascx.cs

using EPiServer.DynamicContent;

namespace EPiServer
{
    public partial class HelloDynamicEdit : DynamicContentEditControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                Firstname.Text = Content.Properties["Firstname"].Value as string;
            }
        }

        public override void PrepareForSave()
        {
            Content.Properties["Firstname"].Value = Firstname.Text;
        }
    }
}

Inherit from DynamicContentEditControl and implement the method PrepareForSave() to move the values back from your user interface to the Property collection of your Dynamic Content class. Note the use of IsPostBack to prevent overwriting of changed values.

HelloDynamicEdit.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="HelloDynamicEdit.ascx.cs" Inherits="EPiServer.HelloDynamicEdit" %>
<h1>This is a custom editor</h1>
<p>Hello <asp:TextBox ID="Firstname" runat="server" />!</p>

Translating the User Interface for Dynamic Content

You can use the DisplayName and Description parameters for the name and instructions for editors. Use LanguagePath parameter together with translations in the lang-folder.

    [DynamicContentPlugIn(DisplayName = "Hello...", 
        ViewUrl = "~/HelloDynamic.ascx", 
        LanguagePath = "/dynamiccontent/hello")]
    public partial class HelloDynamic : EPiServer.UserControlBase

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<languages>
   <language name="Svenska" id="sv">
      <dynamiccontent>
         <hello>
            <name>Hej…</name>
            <description>En beskrivning…</description>
         </hello>
      </dynamiccontent>
      <pagetypes>
         <common>
            <property name="Firstname">
               <caption>Fornamn</caption>
               <help>Vad heter du?</help>
            </property>
         </common>
      </pagetypes>
   </language>
</languages>