Category Archives: Custom Properties

Make your PropertyNumber a bit wider

The default style for PropertyNumber in EPiServer is often a bit short if you have number larger than 999 and it also aligns the text to left. An easy way around this is to use EPiServer PropertyControlClassFactory.

Just create a “PropertyNumberWideControl” that inherits PropertyNumberControl and override CreateEditControls to modify the style as you feel like.

namespace Some.Web.SpecializedProperties.Controls
{
public class PropertyNumberWideControl : PropertyNumberControl
{
public override void CreateEditControls()
{
base.CreateEditControls();

base.EditControl.Style.Add("width", "100px");
base.EditControl.Style.Add("text-align", "right");
}
}
}

There are now two ways to make this control override the default PropertyNumberControl.

1.
In Web.Config, find <episerver.baseLibrary><classFactories>. In that node you might find this <add type=”EPiServer.Core.PropertyControlClassFactory, EPiServer” id=”PropertyControlFactory”>, if not add it. Then you have to register your new control and that it should override the old one: <register type=”EPiServer.Core.PropertyNumber, EPiServer” mappedType=”Some.Web.SpecializedProperties.Controls.PropertyNumberWideControl, Some.Web” />.

<episerver.baseLibrary>

<classFactories>
.....
<add type="EPiServer.Core.PropertyControlClassFactory, EPiServer" id="PropertyControlFactory">
<register type="EPiServer.Core.PropertyNumber, EPiServer" mappedType="Some.Web.SpecializedProperties.Controls.PropertyNumberWideControl, Some.Web" />
</add>
</classFactories>
</episerver.baseLibrary>

2. You can also override the control with code. To do that, take a look at this post from Ted Nyberg.

Quick way to create checkboxlist / dropdownlist properties

In EPiServer there is a easy way to create a checkbox list property by extending some existing classes.

In this example I will fetch the children for the start page and display them. In a future blog post I will show you how to do the same with a dropdown list control, and also show you have to extend this with Settings for properties to make the properties much more dynamic and useful.

Check box list / multiple choice property

1. Create a new class and make that class extend EPiServer.Core.PropertyMultiValue. This class should also have the attribute PageDefinitionPlugIn to be recognized as a property.

[PageDefinitionTypePlugIn(DisplayName="Custom CheckBox list")]
public class PropertyCustomCheckBoxList : PropertyMultipleValue
{
public override EPiServer.Core.IPropertyControl CreatePropertyControl()
{
return new PropertyCustomCheckBoxListControl();
}
}

2. Create the property control and extend EPiServer.Web.PropertyControls.PropertySelectMultipleControlBase

public class PropertyCustomCheckBoxListControl : PropertySelectMultipleControlBase
{
}

3. Now we need to populate the property with some data. In the control class, override the method SetupEditControls and do some magic

protected override void SetupEditControls()
{
// Get children to start page
foreach (PageData page in DataFactory.Instance.GetChildren(PageReference.StartPage))
{
// Create list item
ListItem li = new ListItem(page.PageName, page.PageLink.ID.ToString());
// check if list item is selected
li.Selected = ((PropertyMultipleValue)PropertyData).IsValueActive(li.Value);
// add item to checkbox list
this.EditControl.Items.Add(li);
}
}

4. That’s it. Everything else is handled by the classes you extend. By the way, the value of the property is saved as a comma separated string.

MultiPage Property to EPiServer 5

I know there is a great MultiPage Property on EPiCode, but sometimes I want to use a bit more simple MultiPage picker, and not be able to choose to link documents and other pages etc. So when I had some spare time a few weeks ago, I wrote my own multipage property.

To make the property as powerful as possible I’ve added the oppertunity to specify the startnode when you add a page, and there is also a possibility to choose wich PageTypes you are allowed to use. If you leave the help-text blank you will be able to add all pagetypes and the startnode will be the start page. Defining these values in help-text may not be the best way to go, but it’s the easiest way if you want it as dynamically as possible. I usually change where to define these values in my projects, etc a settings page or web.config, but in this case the help text is wonderful. 🙂

If the editor tries to add an invalid page type, the following msg will appear.

To get the selected pages when you code, just use this line

PageDataCollection pdc = Obg.SpecializedProperties.Util.MultiPage.GetPageDataCollectionByPropertyValue(CurrentPage["MultiPageContacts"]);

You can download the file here: MultiPage Property (binaries)

In this dll, my DropDown Property is also added.

Feel free to give me feedback on these properties or you want the source code etc.

Custom property – DropDown

Made my first customized property today, and because I loved it so much in 4.6, the ice breaker was a DropDown property that takes values from the help-text.

Values in help text can be typed in two ways:
“Shown text:value” or just “value” eg. “value1;Shown text:value2”

[Serializable]
[PageDefinitionTypePlugIn]
class PropertyDropDown : EPiServer.Core.PropertyString
{

public override EPiServer.Core.PropertyData ParseToObject(string value)
{
PropertyDropDown prop = new PropertyDropDown();
prop.String = value;
return prop;
}

public override EPiServer.Core.IPropertyControl CreatePropertyControl()
{
// Create an instance of MyCustomPropertyControl that is used
// for displaying the property.
return new PropertyDropDownControl();
}
}

class PropertyDropDownControl : EPiServer.Web.PropertyControls.PropertyDataControl
{
DropDownList dd;

public PropertyDropDown PropertyDropDown
{
get
{
return PropertyData as PropertyDropDown;

}
}

public override void CreateEditControls()
{
dd = new DropDownList();
this.ApplyControlAttributes(this.dd);
Controls.Add(dd);
this.SetupEditControls();
}

public override void CreateOnPageEditControls()
{
dd = new DropDownList();
this.ApplyControlAttributes(this.dd);
Controls.Add(dd);
this.SetupEditControls();
}

protected override void SetupEditControls()
{
dd.Items.Clear();
string[] values = PropertyDropDown.TranslateDescription().Split(';');
foreach (string value in values)
{
ListItem li = new ListItem();
if (value.Contains(":"))
{
li.Text = value.Split(':')[0];
li.Value = value.Split(':')[1];
}
else
{
li.Text = value;
li.Value = value;
}

li.Selected = li.Value.Equals(PropertyDropDown.Value);
dd.Items.Add(li);
}

if (dd.Items.Count == 0)
dd.Items.Add(new ListItem("No values found", ""));
}

public override void ApplyEditChanges()
{
base.SetValue(this.dd.SelectedValue);
}

public override void ApplyOnPageEditChanges()
{
base.SetValue(this.dd.SelectedValue);
}
}
}