- How to Create Dynamic Content

Introduction

The Dynamic Content functionality was introduced in the EPiServer CMS 6 release. Dynamic Content allows developers to create blocks of functionality in code which can then be utilized later by an editor on a page in the HTML editor. It provides the editor with a way to add and control the same content - rendering the content simultaneously on several pages.

How to Create Dynamic Content

Here we shall demonstrate one way how implement the dynamic content class interface.
The editor will add the name and age property values in the dynamic content settings, these property values could thenbe used throughout the Web site.

Firstly add a class to your solution, in this example the class is named MyDynamicContent residing in the namespace CodeSamples, the MyDynamicContent class will implement the IDynamicContent interface:

namespace CodeSamples
{
    public class MyDynamicContent : IDynamicContent
     {   

   }
}

PropertyDataCollection

The PropertyDataCollection that automatically will be rendered in the settings UI for this dynamic content. We instantiate a PropertyDataCollection - storage for the property:

PropertyDataCollection _properties = new PropertyDataCollection();

Default values

We add two properties, one string called Name and one integer called Age and give our properties default values:

public MyDynamicContent()
{            
    Properties.Add("Name", new PropertyString());
    Properties.Add("Age", new PropertyNumber());
}

State

The State property is used to persist the state of the dynamic content:

public string State
{
    get { return Name + "|" + Age; }
    set
    {
        string[] nameAndAge = value.Split('|');
        Name = nameAndAge[0];
        Age = Int32.Parse(nameAndAge[1]);
    }
}

Accessor

Accessor for the Name property:

public string Name
{
    get { return (string)Properties["Name"].Value; }
    set { Properties["Name"].Value = value; }
}

Accessor for the Age property:

public int Age
{
    get
    {
        if (Properties["Age"].Value == null)
        {                    
            return 0;
        }
        return (int)Properties["Age"].Value;
    }
    set { Properties["Age"].Value = value; }
}

Show in Edit

Get the properties to be shown in Edit Mode:

public PropertyDataCollection Properties
{
    get { return _properties; }
}

Render

When rendering the dynamic content we simply render the values set by the editor:

public string Render(PageBase hostPage)
{            
    return "Name: " + Name + ", Age: " + Age;
}

RendersWithControl

Returning false will make EPiServer call the render method of the class itself.
Note! If you decide to return true from the RendersWithControl method then you need to supply a control to handle the rendering. This control can for example be a standard .ascx control.

public bool RendersWithControl
{
    get { return false; }
}

Adding Dynamic Content in episerver.config

Register the dynamic content control in the DynamicContent section of the episerver.config:

<dynamicContent>
  <controls>
      <add description="Displays a property from any page" name="PagePropertyPlugin"
            type="EPiServer.DynamicContent.PlugIn.DynamicPageProperty, EPiServer" />
      <add description="Age" name="Age"
            type="CodeSamples.MyDynamicContent, EPiServer.Templates.Public" />
   </controls>
</dynamicContent>       

Enable Dynamic Content

In the EPiServer Admin Mode, to enable dynamic content for each property, the editor must enable the Insert Dynamic Content:

Dynamic Content Icon

In Edit Mode select the Edit tab on a page. You will notice this icon:

Dynamic Content Dialog

Clicking on the dynamic content icon will open the dynamic content dialog. The name and age information entered will be rendered on the page.

See Also

For further information see the Tech Note on Dynamic Content. Articles on Dynamic Content can be found on EPiServer World.