Views: 4297
Number of votes: 2
Average rating:

PageTypeBuilderUI v2.0 Released

As PageTypeBuilder v2.0 has now been released, thank Joel Winking smile, 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 Smile with tongue out


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

    (By Oskar Zetterberg , 22 December 2011 12:12, Permanent link)

    Christmas came early this year for sure. First PTB 2.0 and now this. Excellent work from both of you.

    (By Anders Vestberg , 02 January 2012 19:25, Permanent link)

    Hi,

    Recently installed this via nuget, with no error. However, when clicking on "Match properties with PTB" in Admin mode, I just get:

    The resource cannot be found.
    Description: HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable. Please review the following URL and make sure that it is spelled correctly.

    Requested URL: /util/PTBPropertyMatch.aspx

    Any suggestions?

    (By Lee Crowe , 03 January 2012 17:44, Permanent link)

    This is probably caused by some configuration that is preventing the custom virtual path provider that serves embedded resources working.

    I have added a new version which doesn't contain embedded resources to codeplex and it can be downloaded from here http://pagetypebuilderui.codeplex.com/releases/view/79250.

    (By Bjørn Gustafson , 30 January 2012 11:15, Permanent link)

    Nice job, Lee!

    I missed the tooltip on the properties, though. Perhaps you will include it in the next version? Just add the following code after line 142 in "PropertyGroupPropertyControl.cs":

    label.Attributes.Add("title",CurrentPage.Property[propertyName].TranslateDescription());

    -b

    (By Andrew Markham , 23 May 2012 16:06, Permanent link)

    Hi Lee,

    I have run into issues where the properties are being rendered twice, but only exist once within the page type.

    Any ideas on why this is happening, I am having to delete the page types at the moment and rebuild them...

    Thanks

    Andy

    (By Lee Crowe , 23 May 2012 17:17, Permanent link)

    Hi Andy

    Are you using the custom property group rendering?

    I am not aware of the issue, but then again there are probably very few people using it and it could well be the reason the issue hasn't been raised.

    Can you easily reproduce the issue?

    Lee

    (By Minesh Shah , 04 September 2013 17:47, Permanent link)

    Hi Lee, i am using ProeprtyGroups in EPiServer 6R2 with the Nice rendering of property groups enabled, my container property is set to unique per language although i have some individual properties within the group which should not be unique, for somereason theese properties are still editable although when i try and save i get a database error.

    Any idea on why this is happening ?

    Minesh

    (By Minesh Shah , 05 September 2013 10:06, Permanent link)

    I have also found another issue, when using the nice rendering of property groups the compare with functioanlity no longer works for multiple languages, so if i compare with en-gb to en-us when editing en-gb i cant see the values already entered in en-us, if i remove the custom rendering than i can

  Please login to post a comment