- How to Create Dynamic Content UI Settings

Creating Dynamic Content UI Settings

When developing dynamic content functionality you may well want the editor to enter some settings when they add the dynamic content to a page. There are two different ways you can create UI settings for dynamic content in EPiServer - either by creating a PropertyDataCollection or with a User Control.

Automatically using a PropertyDataCollection

If you just want some simple fields, actually any field that is a property in EPiServer, you can use a PropertyDataCollection that automatically will be rendered in the settings UI for this dynamic content. When you create a dynamic content plug-in you inherit from an interface called IDynamicContent. One member of IDynamicContent is:

public PropertyDataCollection Properties
{
    get;
}

Any PropertyData in the collection will be rendered for the editor to see and change. The collection will also be updated with any changes the editor makes.

[GuiPlugIn(Url = "~/MyDynamicContentSettings.ascx", Area = PlugInArea.DynamicContent)]
public class MyDynamicContent : IDynamicContent

 
For an example of using PropertyDataCollection see the example code in - How to Create Dynamic Content.

Creating Settings with a User Control

If you want a more advanced settings UI, or just want more control, you can load your own user control. That is done by adding an attribute to your dynamic content, and supplying a Url attribute:

[GuiPlugIn(Url = "~/MyDynamicContentSettings.ascx", Area = PlugInArea.DynamicContent)]
public class MyDynamicContent : IDynamicContent

DynamicContentEditControl

The dynamic content settings control needs to inherit from DynamicContentEditControl:

public partial class MyDynamicContentSettings : DynamicContentEditControl

DynamicContentEditControl is an abstract class that supplies your class with one property, Content, and forces you to implement one method PrepareForSave(). The Content property will give you a reference to your dynamic content and PrepareForSave() will be called when the user clicks on the OK-button in the settings UI. Here is a sample of how they can be used on an edit control:

public override void PrepareForSave()
{
    ((MyDynamicContent)Content).Name = NameTextBox.Text;
    ((MyDynamicContent)Content).Age = AgeSelector.Value;
}

In the example above MyDynamicContent has two properties, Name and Age. They are given values from the control located in the markup. Then MyDynamicContent plugin should then handle the values. It is also the responsibility of MyDynamicContent to take care of the persisting of internal state. That is done through the implementation of the State property.

See Also

Articles on Dynamic Content can be found on EPiServer World.

For further information see the Tech Note on Dynamic Content.