Lee Crowe
Mar 9, 2011
  7278
(4 votes)

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 Smile.

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 Smile


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.

Mar 09, 2011

Comments

Bruno Melancon
Bruno Melancon Aug 9, 2012 08:30 PM

How would you fill a dropdownlist if it were part of your ImageLink class?

[MultiplePropertyEntityProperty(Caption = "ImageAuthor",
Type = typeof(EPiServer.SpecializedProperties.PropertyDropDownList),
SortIndex = 100,
Required = true)]
[DataMember]
public string ImageAuthor { get; set; }

Please login to comment.
Latest blogs
Caching & Rendering of metadata from the DAM

For the EPiServer.Cms.WelcomeIntegration.UI 1.2.0 release, we have facilitated the ability to cache and render metadata from assets within the DAM....

Matthew Slim | Jun 2, 2023

Conversion Rate Optimization: Maximizing ROI through Data-Driven Decisions

In today's digital landscape, businesses are constantly looking for ways to improve their online presence and drive more conversions. One effective...

JessWade | Jun 1, 2023

Enhance Your Writing with Suggestions

Are you tired of staring at a blank screen, struggling to find the right words? The Epicweb.Optimizely.AIAssistant Addon is here to revolutionize...

Luc Gosso (MVP) | May 31, 2023 | Syndicated blog

Content Graph - Letting GraphQL do all the hard work for you

Background As we have seen before, setting up Content Graph on the CMS side is pretty easy. However, when it comes to the “head” part of the setup,...

Kunal Shetye | May 26, 2023 | Syndicated blog