EPiServer : The Simple Way To Add An Image Or A Dropdown Picker to A Dynamic Control

In this tutorial, I will show you how to create a Vimeo/Youtude Dynamic control.  Had a requirement from our client to allow them to be able to drop an image or Vimeo or YouTube video anywhere on their EPiserver 6 R2 site.   In order to achieve this, I created a simple EPi server Dynamic Control.  I had experience adding simple text boxes into a dynamic control before but I had a struggle to find a good tutorial about adding more complex types.  In this code example I’m only giving a very simple version of the finished control, so don’t judge me!

Dyncamic Control Screenshot

Images

Out of the box Epi-server will display any control that inherits from the EPi Core PropertyData type.  Luckily, out of the box give you a load of stuff for strings, numbers etc..  so this one was pretty easy to resolve.  All you have to do is add a public property within your user control that is of type ‘PropertyImageUrl’.  To get the URL to display in the control you use the Value property :

       
public PropertyImageUrl ImageUrl { get; set; }
protected void Page_Load(object sender, EventArgs e)
{
try
{
if (ImageUrl != null)
{
imageToDisplay.ImageUrl = ImageUrl.Value.ToString();
}
}
catch (Exception ex)
{
Logger.Error(ex);
}
}

Dropdown

Getting a drop down is a lot less obvious to figure out than adding an image.  The problem with displaying a drop down is setting the initial values when the form loads.  Most tutorials I came across on the net only explained how to create controls that allow you to dynamically add to the list, which was overkill for my solution; I either needed left or right.  I spent ages looking at the PropertyDropDownList but all of the information I found was directed at using it with PageTypeBuilder.  In the end I had to create a custom control.  First, I created the actual control class, this has to extend from PropertyString as we’ll use the string.value method later to get the selected value. Also, if the control doesn’t inherit from ‘PropertyData’ (PropertyString does) it wouldn’t show in the UI to the user.

[Serializable]
[PageDefinitionTypePlugIn(DisplayName = "Dropdown list for image alignment ")]
public class AlignmentList : PropertyString
{
public override IPropertyControl CreatePropertyControl()
{
return new AlignmentControl();
}
}

The next step is to create the ‘AlignmentControl’ to deal with storing and retrieving the actual data.

public class AlignmentControl : PropertyStringControl
{
private DropDownList _alignmentControl;
public override void CreateEditControls()
{
_alignmentControl = new DropDownList();
// Could change to dynamically add these, in this example it's always static
_alignmentControl.Items.Add(new ListItem("Right Align", "img-right01"));
_alignmentControl.Items.Add(new ListItem("Left Align", "img-left01"));
ApplyControlAttributes(_alignmentControl);
Controls.Add(_alignmentControl);
SetupEditControls();
}
protected override void SetupEditControls()
{
if (!string.IsNullOrEmpty((string)AlignmentList.Value))
{
_alignmentControl.SelectedIndex = _alignmentControl.Items.IndexOf(_alignmentControl.Items.FindByValue((string)AlignmentList.Value));
}
}
public override void ApplyEditChanges()
{
AlignmentList.Value = _alignmentControl.SelectedItem.Value;
}
public AlignmentList AlignmentList
{
get
{
return PropertyData as AlignmentList;
}
}
}

The control is pretty basic, in the CreateEditControls I create a new Drop Down List and add the list items I care about.  If you want to make this more dynamic, you could pass in a page reference to a settings class or something similar in the control class and pass it down.  The rest is just basic getter and setter stuff.  I hope this helps save you some time.  Download the source code here.

EDIT : If you get an ‘Index Out of bounds error’ pop in the editor when you’re developing your dynamic property,  it’s because you have no public properties set for the form to read.

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

More Posts