ElencySolutions.MultipleProperty v1.0 Released

Introduction

About two and a half years ago during some down time at a previous agency I decided to build a control which allowed you to easily create custom properties that comprised of other properties.

I did this in an approach similar to PageTypeBuilder by allowing you to decorate entity classes and properties with specific attributes.

This was probably around the same time in which the Itera.MultiProperty was being developed.

Just recently as I have a lot of free time during my commute to and from work every day I decided to revisit the project again and enhance it.

How it works

To create custom properties using ElencySolutions.MultipleProperty you basically create your entity objects and decorate the class and properties with various attributes.

You then create a class which inherits MultplePropertyBase, supply the class some generic arguments and hey presto you can edit your entities.

The property class will serialize the entity objects to xml using the DataContractSerializer and will return the deserialized entity value from the Value property.

Working with ElencySolutions.MultipleProperty

I am not going to document a complete usage guide in this post but I will show a few code samples and screen dumps. 

You can find a usage document here and also download a code sample here.  

To use the code sample just copy the MultiplePropertyExample folder within the zip file into a local public templates site.  The Sample is dependent on PageTypeBuilder.

The sample contains some entity classes, property classes and a couple of PageTypeBuilder page types.

The sample demonstrates how you would go about building an image gallery.  One page type demonstrates a single gallery with multiple images where as the other page type demonstrates multiple galleries each with multiple images.

Code Samples

The code below will show a simple example of how you would create an image link property using ElencySolutions.MultipleProperty. 

For more of an in depth example please download the sample code.

Below is an example of how you would define an ImageLink entity object.

   1:  using System;

   2:  using System.Runtime.Serialization;

   3:  using Core;

   4:  using ElencySolutions.MultipleProperty;

   5:  using SpecializedProperties;

   6:   

   7:  [Serializable]

   8:  [DataContract]

   9:  [KnownType(typeof(ImageLink))]

  10:  [MultiplePropertyEntity(AllowNullEntities = false)]

  11:  public class ImageLink

  12:  {

  13:      public override string ToString()

  14:      {

  15:          return MultiplePropertyHelper.SerializeObject(this);

  16:      }

  17:   

  18:      [MultiplePropertyEntityProperty(Caption = "Image url", Type = typeof(PropertyImageUrl), SortIndex = 100, Required = true)]

  19:      [DataMember]

  20:      public string ImageUrl { get; set; }

  21:   

  22:      [MultiplePropertyEntityProperty(Caption = "Image caption", Type = typeof(PropertyString), SortIndex = 110, IsInformationProperty = true)]

  23:      [DataMember]

  24:      public string ImageCaption { get; set; }

  25:   

  26:      [MultiplePropertyEntityProperty(Caption = "Image link url", Type = typeof(PropertyUrl), SortIndex = 120)]

  27:      [DataMember]

  28:      public string ImageLinkUrl { get; set; }

  29:   

  30:      [MultiplePropertyEntityProperty(Caption = "Open in new window", Type = typeof(PropertyBoolean), SortIndex = 130)]

  31:      [DataMember]

  32:      public bool OpenInNewWindow { get; set; }

  33:   

  34:      public ImageLink()

  35:      {

  36:          // initialise all properties

  37:          ImageUrl = string.Empty;

  38:          ImageCaption = string.Empty;

  39:          ImageLinkUrl = string.Empty;

  40:      }

  41:  }

Once the entity object has been created you can then define your property in the following way.

   1:  using System;

   2:  using ElencySolutions.MultipleProperty;

   3:  using PlugIn;

   4:   

   5:  [Serializable]

   6:  [PageDefinitionTypePlugIn]

   7:  public class PropertyImageLink : MultiplePropertyBase<ImageLink, ImageLink>

   8:  {

   9:  }

To use the property within a PageTypeBuilder PageType class you would define it in the following way.

   1:  using EPiServer.AdvancedCustomEditing;

   2:  using EPiServer.Filters;

   3:  using PageTypeBuilder;

   4:   

   5:  [PageType(

   6:      Name = "[Public] Page Type One",

   7:      Description = "Page type one",

   8:      Filename = "~/NonExisting.aspx",

   9:      DefaultChildSortOrder = FilterSortOrder.Index,

  10:      AvailableInEditMode = true)]

  11:  public class PageTypeOne : TypedPageData

  12:  {

  13:      [PageTypeProperty(

  14:          EditCaption = "Image link",

  15:          Searchable = false,

  16:          Type = typeof(PropertyImageLink),

  17:          Tab = typeof(ContentTab),

  18:          SortOrder = 100)]

  19:      public virtual ImageLink ImageLink { get; set; }

  20:  }

Screen dumps

Below are some screen dumps of what an editor would be presented with when using the custom properties.

Screen Dump One – Image Gallery Sample

Screen Dump Two – Image Galleries Sample

Screen Dump Three – Property Copying

Setup and Installation

To use ElencySolutions.MultipleProperty you will need to reference the ElencySolutions.MultipleProperty assembly from your web application project.  You will also need to add a reference to System.Runtime.Serialization.

The assembly is dependent on EPiServer CMS 6.

The assembly and sample code can be downloaded from codeplex.

Further information

The usage guide contains more information about using the assembly but I have listed some additional features of the assembly here.

• Label text for the various buttons and properties can be translated by defining the language settings in the relevant language file and also by defining the Translation Key attributes.
• Property Settings can be programmatically set against various properties refer to the usage guide for more information
• Properties can be copied to other pages if enabled through the relevant attribute.  A new version of the page will be created.
• The MultiplePropertyBase class implements IReferenceMap to make sure all links etc. are re-mapped correctly when importing and mirroring.
• The DataContractSerializer is used for all serialization.  The reason I have used this is because it support more types and is better supported than the XmlSerializer.

Conclusion

I know there are assemblies out there that do the same thing but I wasn’t that keen on how I had to work with them.  Therefore I created one that suits my needs .

Give it a go if you like and I hope you will find it useful.

Feedback?

I am always eager to receive feedback good and bad. 

Please feel free to email or twitter me with any feedback @croweman or comment on the blog post

Disclaimer

Although I have tested the assembly and am happy with it’s functioning there may well be little bugs that I have not spotted.  Please give it a thorough test before releasing it to the production environment and log any issues on codeplex.