November Happy Hour will be moved to Thursday December 5th.

Lee Crowe
Dec 22, 2011
  5976
(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
Video Guides: Image Generation Features in Optimizely

The AI Assistant for Optimizely now integrates seamlessly with Recraft AI, providing advanced image generation capabilities directly within your...

Luc Gosso (MVP) | Dec 1, 2024 | Syndicated blog

DAM integration new major version, performance improvements and Library Picker folder selection

As you might already have seen we have decided to delist the EPiServer.CMS.WelcomeIntegration version 1.4.0 where we introduced Graph support....

Robert Svallin | Nov 29, 2024

Adding Geolocation Personalisation to Optimizely CMS with Cloudflare

Enhance your Optimizely CMS personalisation by integrating Cloudflare's geolocation headers. Learn how my Cloudflare Geo-location Criteria package...

Andy Blyth | Nov 26, 2024 | Syndicated blog

Optimizely SaaS CMS + Coveo Search Page

Short on time but need a listing feature with filters, pagination, and sorting? Create a fully functional Coveo-powered search page driven by data...

Damian Smutek | Nov 21, 2024 | Syndicated blog