PageTypePropertyGroup for PageTypeBuilder v2

Some time last year myself and my colleague Mark Everard were discussing features that we thought were missing from PageTypeBuilder. 

We concluded the most important feature to us that was missing was the ability to have reusable groups of properties that could be re-used on Page Types.

So as I have a abundant amount of time durning my daily commute I implemented the necessary changes with the help of Mark to add the new PageTypePropertyGroup’s feature.

Last week I had a word with Joel and he suggested I implement the necessary changes into the latest version of the source.

Yesterday Stefan Forsberg blogged about this feature and Joel has released the Page Type Builder 2 Preview 1.

Although the PropertyGroups’s are fairly self explanatory and easy to use I just thought I would blog about using the functionality as a couple of the properties relating to some of the attributes were not exposed

Usage

If for example I had an Image Link component that I wanted to use on various page types I would first create an ImageLink class that will implement the interface PageTypePropertyGroup.  You will notice that the properties within the class will be implemented in the same way by decorating the properties with the PageTypeProperty attribute like the following:

   1:  public class ImageLink : PageTypePropertyGroup

   2:  {

   3:      [PageTypeProperty(

   4:          EditCaption = "Image Url", 

   5:          SortOrder = 0, 

   6:          Type = typeof(PropertyImageUrl))]

   7:      public virtual string ImageUrl { get; set; }

   8:   

   9:      [PageTypeProperty(

  10:          EditCaption = "Link Url", 

  11:          SortOrder = 10, 

  12:          Type = typeof(PropertyUrl))]

  13:      public virtual string LinkUrl { get; set; }

  14:   

  15:      [PageTypeProperty(

  16:          EditCaption = "Alt text", 

  17:          SortOrder = 20, 

  18:          Type = typeof(PropertyImageUrl))]

  19:      public virtual string AltText { get; set; }

  20:  }

We can then add the ImageLink property groups properties to a page type in the following way:

   1:  [PageType(

   2:      Name = "[Public] PTB Property groups",

   3:      Filename = "~/MultiplePropertyExample/Pages/PTB.aspx",

   4:      AvailableInEditMode = true)]

   5:  public class PropertyGroupsPageType : TypedPageData

   6:  {

   7:      [PageTypePropertyGroup(

   8:          EditCaptionPrefix = "Image link one - ",

   9:          StartSortOrderFrom = 400)]

  10:      public virtual ImageLink ImageLinkOne { get; set; }

  11:   

  12:      [PageTypePropertyGroup(

  13:          EditCaptionPrefix = "Image link two - ", 

  14:          StartSortOrderFrom = 500)]

  15:      public virtual ImageLink ImageLinkTwo { get; set; }

  16:   

  17:      [PageTypePropertyGroup(

  18:          EditCaptionPrefix = "Image link three - ", 

  19:          StartSortOrderFrom = 600)]

  20:      public virtual ImageLink ImageLinkThree { get; set; }

  21:  }

You will see in the code sample above that when adding the property group to the page type you will need to decorate the property with the PageTypePropertyGroup attribute.

The PageTypePropertyGroup has the following two properties:

• EditCaptionPrefix – This defines a prefix which will be added to the edit caption.  If the code above was used an example of a rendered edit caption would be “Image Link one – Image Url.
• StartSortOrderFrom – This property is used to define the starting sort order for the property group.  If a value for this property has defined the FieldOrder for the property will essentially be the value of PageTypePropertyGroup.StartSortOrderFrom + PageTypeProperty.SortOrder.

Once the code is compiled and PageTypeBuilder works it’s magic the following properties will be available:

The properties can be accessed from the CurrentPage in the following way:

   1:  <%=CurrentPage.ImageLinkOne.ImageUrl%>

   2:  <%=CurrentPage.ImageLinkOne.LinkUrl%>

   3:  <%=CurrentPage.ImageLinkOne.AltText%>

Feedback

Please feel free to email or twitter myself with any feedback @croweman