Create UI settings for dynamic content

4 min

🚧 Caution Dynamic content is deprecated in Optimizely Content Management System (CMS 12). Use blocks instead. While existing solutions will continue to work, you should not build new solutions on this API. It will be phased out in the future.

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 user interface settings for dynamic content in Optimizely.

Create UI settings automatically using PropertyDataCollection

If you want some simple fields (any field that is a property in CMS), you can use a PropertyDataCollection that automatically is rendered in the settings for this dynamic content. When you create a dynamic content plug-in, you inherit from the IDynamicContentBase interface. One member of IDynamicContentBase is:

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.

Create UI settings with a user control

If you want more advanced settings or more control, you can load your user control. Add 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, 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 user interface. The following example shows how you can use them 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.