Don't miss out Virtual Happy Hour this Friday (April 26).

Try our conversational search powered by Generative AI!

Loading...
Area: Optimizely CMS
ARCHIVED This content is retired and no longer maintained. See the latest version here.

Recommended reading 

Creating UI settings for dynamic content

When you develop dynamic content functionality, you may want the editor to enter some settings when adding dynamic content to a page. The following sections show how to create UI settings for dynamic content in Episerver.

Creating UI settings automatically using PropertyDataCollection

If you just want some simple fields (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 the IDynamicContentBase interface. One member of IDynamicContentBase is:

C#

public PropertyDataCollection Properties
{
    get;
}

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

Creating UI 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:

C#

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

DynamicContentEditControl

The dynamic content settings control needs to inherit from DynamicContentEditControl:

C#

public partial class MyDynamicContentSettings : DynamicContentEditControl

DynamicContentEditControl is an abstract class that supplies your class with one property, DynamicContent, and forces you to implement one method PrepareForSave(). The DynamicContent property gives you a reference to your dynamic content and PrepareForSave() is called when the user clicks OK in the settings UI. The following example shows how they can be used on an edit control:

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

In the example, MyDynamicContent has two properties, Name and Age, which have values from the control located in the markup. Then MyDynamicContent plug-in handles the values and persists the internal state which occurs through the implementation of the State property.

Do you find this information helpful? Please log in to provide feedback.

Last updated: Sep 21, 2015

Recommended reading