Lee Crowe
Dec 22, 2011
  5230
(2 votes)

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

Dec 22, 2011

Comments

Oskar Zetterberg
Oskar Zetterberg Dec 22, 2011 12:12 PM

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

Dec 22, 2011 02:11 PM

Looks nice. Have to try it right away!

Jan 3, 2012 05:44 PM

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.

Bjørn Gustafson
Bjørn Gustafson Jan 30, 2012 11:15 AM

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

Andrew Markham
Andrew Markham May 23, 2012 04:06 PM

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

May 23, 2012 05:17 PM

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

Minesh Shah (Netcel)
Minesh Shah (Netcel) Sep 4, 2013 05:47 PM

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

Minesh Shah (Netcel)
Minesh Shah (Netcel) Sep 5, 2013 10:06 AM

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 comment.
Latest blogs
Plug-in manager is back in CMS 12

Plug-in manager is back in the UI, what is it and how can i use it?

Luc Gosso (MVP) | Oct 6, 2022 | Syndicated blog

Display Child Pages in Content Delivery API Response

The below example will implement an instance of IContentConverterProvider to customise the serialisation of PageData and output child pages in the...

Minesh Shah (Netcel) | Oct 4, 2022

Bring the Report Center back in Optimizely CMS 12

The Report Center has been a part of Optimizely CMS since its first debut in version 5R2 in 2008, but in CMS 12, it's removed! Don't despair! Make...

Tomas Hensrud Gulla | Oct 4, 2022 | Syndicated blog

Customizing Property Lists in Optimizely CMS

Generic property lists is a cool editorial feature that has gained a lot of popularity - in spite of still being unsupported (officially). But if y...

Allan Thraen | Oct 2, 2022 | Syndicated blog