PageTypeBuilderUI v2.0 Released

As PageTypeBuilder v2.0 has now been released, thank Joel , I have now made PageTypeBuilderUI v2.0 available.

PageTypeBuilderUI v2.0 contains the following new features:

• Built against PageTypeBuilder v2.0
• Will now show mismatches when PTB page types or page type property definitions do not appear in the EPiServer database.  This is usually caused by somebody deleting a property they shouldn’t or page type updating being disabled.
• Custom property group rendering which will be described in more detail below.

PageTypeBuilder v2.0 has property groups as one of it’s new features.

One of the changes I have knocked together for v2.0 of PageTypeBuilderUI is custom rendering of property groups within edit mode.  I am aware Anders Hattestad has done similar things with his Itera.Objects project. But to keep my mind occupied on my daily commute I decided to implement something similar which would fit in with PageTypeBuilder’s property groups

Now lets get to the point

If I added the following code somewhere into my solution:

  1: namespace EPiServer
  2: {
  3:     using Core;
  4:     using Security;
  5:     using SpecializedProperties;
  6:     using PageTypeBuilder;
  7: 
  8:     [PageType("3905865A-3C95-4707-98B2-1F2B98E2EA46",
  9: 	    Name = "[Public] PTB Property groups",
 10: 	    Description = "PTB Property groups",
 11: 	    Filename = "~/Templates/Pages/PageName.aspx",
 12: 	    AvailableInEditMode = true)]
 13:     public class PTBPropertyGroupsPageType : TypedPageData
 14:     {
 15:         [PageTypePropertyGroup(
 16:             EditCaptionPrefix = "Image link one - ", 
 17:             Tab = typeof(FooterTab), 
 18:             StartSortOrderFrom = 100 )]
 19:         public virtual ImageLink ImageLinkOne { get; set; }
 20: 
 21:         [PageTypePropertyGroup(
 22:             EditCaptionPrefix = "Image link two - ", 
 23:             Tab = typeof(FooterTab), 
 24:             StartSortOrderFrom = 200)]
 25:         public virtual ImageLink ImageLinkTwo { get; set; }
 26: 
 27:         [PageTypePropertyGroup(
 28:             EditCaptionPrefix = "Image link three - ", 
 29:             Tab = typeof(FooterTab), 
 30:             StartSortOrderFrom = 300)]
 31:         public virtual ImageLink ImageLinkThree { get; set; }
 32: 
 33:     }
 34: 
 35:     public class ImageLink : PageTypePropertyGroup
 36:     {
 37:         [PageTypeProperty(
 38:             EditCaption = "Image url", 
 39:             Required = true, 
 40:             DisplayInEditMode = true, 
 41:             Type = typeof(PropertyImageUrl), 
 42:             Tab = typeof(TabOne),
 43:             SortOrder = 100)]
 44:         public virtual string ImageUrl { get; set; }
 45: 
 46:         [PageTypeProperty(
 47:             EditCaption = "Link url", 
 48:             DisplayInEditMode = true, 
 49:             Type = typeof(PropertyUrl),
 50:             Tab = typeof(TabTwo),
 51:             SortOrder = 110)]
 52:         public virtual string LinkUrl { get; set; }
 53: 
 54:         [PageTypeProperty(
 55:             EditCaption = "Open in new window", 
 56:             DisplayInEditMode = true, 
 57:             Type = typeof(PropertyBoolean),
 58:             Tab = typeof(TabThree),
 59:             SortOrder = 120)]
 60:         public virtual bool OpenInNewWindow { get; set; }
 61:     }
 62: 
 63:     public class FooterTab : Tab
 64:     {
 65:         public override string Name
 66:         {
 67:             get { return "Footer"; }
 68:         }
 69: 
 70:         public override AccessLevel RequiredAccess
 71:         {
 72:             get { return AccessLevel.Edit; }
 73:         }
 74: 
 75:         public override int SortIndex
 76:         {
 77:             get { return 100; }
 78:         }
 79:     }
 80: 
 81:     public class TabOne : Tab
 82:     {
 83:         public override string Name
 84:         {
 85:             get { return "Tab one"; }
 86:         }
 87: 
 88:         public override AccessLevel RequiredAccess
 89:         {
 90:             get { return AccessLevel.Edit; }
 91:         }
 92: 
 93:         public override int SortIndex
 94:         {
 95:             get { return 110; }
 96:         }
 97:     }
 98: 
 99:     public class TabTwo : Tab
100:     {
101:         public override string Name
102:         {
103:             get { return "Tab two"; }
104:         }
105: 
106:         public override AccessLevel RequiredAccess
107:         {
108:             get { return AccessLevel.Edit; }
109:         }
110: 
111:         public override int SortIndex
112:         {
113:             get { return 120; }
114:         }
115:     }
116: 
117:     public class TabThree : Tab
118:     {
119:         public override string Name
120:         {
121:             get { return "Tab three"; }
122:         }
123: 
124:         public override AccessLevel RequiredAccess
125:         {
126:             get { return AccessLevel.Administer; }
127:         }
128: 
129:         public override int SortIndex
130:         {
131:             get { return 130; }
132:         }
133:     }
134: }

I would end up with the following:

• A tab named ‘Footer’ which requires Edit permissions.
• A tab named ‘Tab one’ which requires Edit permissions.
• A tab named ‘Tab two’ which requires Edit permissions.
• A tab named ‘Tab three’ which requires Administrator permissions.
• One PageType named ‘[Public] PTB Property groups’.  The PageType code definition has three Image link properties which are based on an ImageLink type which inherits PageTypePropertyGroup.  The following property definitions will end up being added to the page type:

When viewing in edit mode the properties will appear like this:

If you would like the properties to be rendered in a friendlier format you need to add the following settings to the web config:

  1: <?xml version="1.0" encoding="utf-8"?>
  2: <configuration>
  3:   <configSections>
  4:     <section name="pageTypeBuilderUI" type="PageTypeBuilderUI.Configuration.PageTypeBuilderUIConfiguration, PageTypeBuilderUI" />
  5:   </configSections>
  6:   <pageTypeBuilderUI enablePageTypeUpdating="true" enableCustomPropertyGroupRendering="true" />
  7: </configuration>
  8: 

If I then removed the tab definitions on the PageTypePropertyAttribute’s set against the ImageLink Property group page type properties and viewed the Footer tab in edit mode you would see the properties presented in the following way:

If I then add the tabs back on to the ImageLink Property Group page type properties and checked the Footer tab in edit mode again the properties will be displayed like the following:

As the ‘Tab three’ tab requires Administrator access if I log in as a user who does not have Administrator permissions the ‘Tab three’ tab will disappear like below:

How it works

When the enablePageTypeUpdating and enableCustomPropertyGroupRendering attribute values have been set to true an initialization module will add new properties to the page type.  These properties are of type PropertyGroupProperty and are responsible for the custom rendering of property group properties.  The module will also set the other page type properties to not show in edit mode.  It is possible to modify the custom rendering property control used by setting the full type name in the customRenderingControlType attribute.

The image below shows you what property definitions will appear on the page type when custom property group rendering is enabled.

***** Points to note *****

The custom rendering code assumes that the EditCaptionPrefix defined in the PageTypePropertyGroupAttribute will end in either a “-“ or a “:” and does a substring at this characters.

Installation

The easiest way to install PageTypeBuilderUI is to install it from the EPiServer nuget feed once it’s up there.  The assembly can also be downloaded from codeplex.

Feedback

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