EPiServer multi page select property

In EPiServer

Why?

EPiServer sports numerous properties that aid both developer and web editor alike. There’s everything from XHTML fields to simple select / not selected properties.

But there comes a time where the web editor wants to select one or many items already available in the tree structure, and sort them.

Let me give you an example:

You create a wonderful site with pages representing contact objects. Now, the editor wants these contact objects to appear in the right column on the standard page. The editor also wants a page called “contact listing” where they can add one or many contact objects, and sort them.

Now, you could use a multilink property which allows the web editor to select any page. This is not very user-friendly. Neither is it sortable.

Holy no-property-is-suitable, Batman!

Edit: It’s actually called the LinkCollection property and it is sortable. Thanks to Ted for setting the record straight!

 

Solution

Okay! Let’s see what we can do about this.

We don’t want to create a custom property that isn’t reusable. Because, let’s face it, we’re all pretty lazy and want to focus on the cool development!

So let’s create a custom property which can be inherited by your own custom implementation that sports all this cool functionality!

The class and user control structure looks like so:

MultiPageSelectBase class

This is the class which your custom implementation will inherit from. It contains two methods that are particularly important:

Abstract method GetPages() – being abstract, you must implement this method in your custom implementation since the base control doesn’t know what kind of pages you are looking for!

The GetSelectedPages() method allows you to access the value of your property on standard page. You cast the property to your custom implementation of the multi page select property. E.g.

 

By then calling customProp.GetSelectedPages() the pages defined in the property are retrieved and made available! E.g.

MultiPageSelectBaseControl class

This is the class that is responsible for rendering the property in EPiServer’s edit mode. It dynamically loads the ASP.NET AJAX user control MultiPageSelectEditControl.ascx which is displayed for the web editor.

Important: You must define the path to the user control in the class. By default it is set to this: _editControl = (MultiPageSelectEditControl)Page.LoadControl(“MultiPageSelectEditControl.ascx.ascx”);

So, if your user control is in a folder called “Templates/Units/” you must set the path to “Templates/Units/MultiPageSelectEditControl.ascx”.

 

How to use it

The sample files included in the project are self-explanatory. But I’ll have a go at it here as well.

Create a class and give set the Serializable attribute on i t. Also the EPiServer PageDefinitionTypePlugIn attribute must be set. This standard for custom properties.

Now inherit from the class MultiPageSelectBase and override the abstract method GetPages()

In the GetPages() method you implement your own logic for finding the pages that should be available in the property for the web editor. I’ve included a Toolbox class that implements a GetPagesOnpageTypeID method. I would recommend implementing a Constants class to keep track of your PageType IDs.

Here’s the sample code:

And that is all you need to do!


End result

Here’s a screenshot of how it looks for a web editor:

Download it!

Here’s the source code. It also contains a sample implementation.

DBLOG.EPiMultiPageSelectProperty.zip (43,49 kb)

 

Credit

I would like to give my thanks to colleague Anders Olmås which is the co-author of this solution. Thanks!

daniel
daniel
Developer
Recent Posts
  • Nice work! Although the [b]LinkCollection[/b] property provides editors with the possibility of [b]sorting[/b] the page list you don’t get this nice additional feature of being able to filter what [i]type[/i] of pages can be added!

    Anything that can make editors’ lives easier is great – so thanks for sharing!

  • Ah, right you are. Thanks, Ted! πŸ™‚

    And good job on the Gravatar. πŸ˜‰

  • Looks very interesting! Great work!

Contact Us

We're not around right now. But you can send us an email and we'll get back to you, asap.

Not readable? Change text. captcha txt

Start typing and press Enter to search