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

Joshua Folkerts
Aug 10, 2011
  11368
(9 votes)

Page Type Tabs For EPiServer

Since I started developing in EPiServer, I have always found how nicely written their framework is.  One thing i have noticed though, is the fact that you really can't hook into their "Create New", "Delete Page" pages.  I have also had an issue that there is not a way to group PageTypes in the admin mode or Create new screen.

I have been working on a project at work where there are a boat load of PageTypes and it has become quite tiresome searching for the right PageType.  You know the PageType exists, you just can't find it in the list.  So I decided to dig into the create new page and find a way to group these PageTypes and allow searching as well in case they do not want to use the tabs.  The only issue that i have found so far is there is no admin/edit interface to group PageTypes but that is okay with me since i am a coder.  I have although created the same thing without using PageTypeBuilder but as mentioned earlier, I am a coder so I chose to use this blog and spend more time with this project.

Using PageTypeTabs

In order to use PageTypeTabs, you will need to make sure you have reference PageTypeBuilder in your project.  This code does use PageTypeBuilder to find the proper PageTypes based on the classes we marked with a PageTypeTab Attribute.

Creating a Tab

   1: public class NewTab : PageTypeTab
   2: {
   3:     public override string Name
   4:     {
   5:         get { return "New Tab"; } // name of tab in ui
   6:     }
   7:  
   8:     public override int SortIndex
   9:    {
  10:         get { return 300; } // default is 100
  11:    }
  12: }
  13:  

 

Adding PageTypeTab Attribute To Our PageType Class

Now that we have our PageTypeTab created, we need to assign it to a PageType by adding an attribute to the PageType class we created using PageTypeBuilder. Below, you will see find the syntax of adding the attribute to the class.

   1: [PageTypeTab( Tab=typeof(NewTab))]
   2: [PageType(Filename = "/NewPage.aspx", Name = "Album Page", AvailableInEditMode = true, Description = "This pagetype is of NewPage.")]
   3: public class NewPage : TypedPageData
   4: {
   5: }
   6:  

Adding Virtual Path Mapping

Now that wasn't so hard now was it?  It is the same process as adding a tab to a PageTypeProperty in PageTypeBuilder.  This isn't by accident, I used some of Joel's framework architecture to make it as common as possible so you don't have to do it another way all the time.

There is one last step to do and that is tap into the CreateNew page URL and show our page instead of EPiServer’s page.  The following code will need to be added to the episerver.config file in order for us to intercept the CreateNew page URL.

   1: <virtualPath customFileSummary="~/FileSummary.config">
   2:     <providers>
   3:         <clear />
   4:         <add showInFileManager="false" virtualName="CreateNewPage" virtualPath="~/Templates/PageTypeTemplates/Overrides/CreateNewPage.aspx" bypassAccessCheck="false" physicalPath="" name="CreateNewPageMapping" type="EPiServer.Web.Hosting.VirtualPathMappedProvider,EPiServer" />
   5:     </providers>
   6:     <filters />
   7: </virtualPath>
   8: <!-- virtualPathMappings are used by "VirtualPathMappedProvider". -->
   9: <virtualPathMappings>
  10:     <add url="~/secure/CMS/Edit/NewPage.aspx" mappedUrl="~/Templates/PageTypeTemplates/Overrides/CreateNewPage.aspx" />
  11: </virtualPathMappings>
  12:  

What We've Achieved (Search built in)

FinalLookOfPageTypeTab

FinalLookOfPageTypeTab_2

PageTypeTabSearch

Get The Files

Aug 10, 2011

Comments

Elena Gonzalez
Elena Gonzalez Aug 11, 2011 04:43 PM

Thanks Joshua!

Aug 11, 2011 05:12 PM

Nicely done! I bet this will come in handy for larger projects!

Joshua Folkerts
Joshua Folkerts Aug 11, 2011 05:25 PM

Very much so on large project, we're working on one with over 40 pagetypes (including widgets) and it makes it so much easier. Thanks for the compliments.

Erik Nordin Wahlberg
Erik Nordin Wahlberg Aug 11, 2011 05:43 PM

I like what I see! This is really handy when different editors uses different page types as well. Any way to extend it so a certain page type can be shown on two different Tabs?

Aug 11, 2011 06:08 PM

Very nice!

Mikael Swawola
Mikael Swawola Aug 11, 2011 08:18 PM

Very good work ! And why not a NuGet package ?

smithsson68@gmail.com
smithsson68@gmail.com Aug 11, 2011 08:33 PM

Really nice!

Joshua Folkerts
Joshua Folkerts Aug 11, 2011 09:20 PM

I definitely can make this so you can add the same pagetype to multiple tabs. The only issue right now is i do remove the pagetypes from the available list and what isn't put under a tab, remains under the default tab. Any ideas how you would like this and i will modify to fit your needs.

Also, I did add it to nuget so hope this helps as well.

BTW, thanks for the compliments.

Aug 11, 2011 09:56 PM

Good stuff! Great way to organize a larger number of page types....and to find the one you want via search.

Aug 14, 2011 10:14 AM

+1 Very nice

Aug 14, 2011 06:47 PM

Awesome work, Josh!

Aug 14, 2011 09:10 PM

Really, really cool! Great job!

Aug 15, 2011 12:55 PM

Excellent work Josh!

Aug 15, 2011 08:02 PM

Great job with a very useful result for editors!

cecilia@nansen.se
cecilia@nansen.se Aug 15, 2011 09:08 PM

Nice!

Patrik Berglund
Patrik Berglund Aug 16, 2011 12:01 PM

Looks great! But how do I install and use it?

I have:
- Copied the dll file to a Dependencies folder and added a reference to the dll in the project.
- Created a new class for the tab
- Added the appropriate attribute to one of my PageTypeBuilder classes.
- Added a virtual path provider, and a virtual path mapping (and made changes to the paths to correspond to where I have EPiServer UI located).

After recompiling everything, I still get to the old page for selecting page types.

I'm running EPiServer CMS 6 R2.

Joshua Folkerts
Joshua Folkerts Aug 18, 2011 06:38 PM

Did you try restarting IIS. I have noticed that sometimes this has been an issue, just open command prompt and type in -> iisreset

Sep 2, 2011 03:21 PM

Great work! Is the source code available? I would like to globalize the CreateNewPage.aspx.

David Sandeberg
David Sandeberg Sep 5, 2011 03:34 AM

Great idea!
I'm running CMS 6 R2 and have the same issue as PaddtSe above. Everything works except for the virtual path mapping that does not seem to take effect. I can browse to CreateNewPage.aspx directly.
Anyone else experiencing this? Is there a solution?

Lars Kolsaker
Lars Kolsaker Sep 8, 2011 02:31 PM

Great work!
Some questions:

1. Which version of PageTypeBuilder have you used ? I am using the the latest version form Joel (1.9.2) and in this version PageTypeBuilder.Discovery.PageTypeDefinitionLocator does not have a parameterless constructor?

2. We are using Composer which already have a virtualpathmapping of newpage
. Any ideas on how to handle that?

lars

Martin Emanuelsson
Martin Emanuelsson Jan 13, 2012 08:44 AM

Great addition to the platform!
One little problem that I've come across though. I've included the classes using Nuget and now I'm trying to declare these tabs in a class library where we have all our PageTypeBuilder classes declared but for some reason this won't build. If I move my PageTypeTab-class to the web applicaiton it works fine, do you know if it should be possible to declare the PageType tabs in an external class library or do we need to move our PageTypeBuilder classes to our web application project? Or am I doing something else wrong?
Best regards
Martin

Ulrik Andersson
Ulrik Andersson Jan 14, 2012 11:06 AM

Looks great but I am unable to use it with CMS 6.0. Is the source code available for this project, since it uses PageTypeBuilder?

Mar 19, 2012 10:20 AM

Nice!
I ran across a problem though. Administrators can only effectively set create permissions on the page types on the default tab. On any other tab, all page types are listed regardless of the permissions and the editors group memberships.

Also, an easy way to rename the default tab to a custom label name would be nice.

Please login to comment.
Latest blogs
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

Optimizely SaaS CMS DAM Picker (Interim)

Simplify your Optimizely SaaS CMS workflow with the Interim DAM Picker Chrome extension. Seamlessly integrate your DAM system, streamlining asset...

Andy Blyth | Nov 21, 2024 | Syndicated blog

Optimizely CMS Roadmap

Explore Optimizely CMS's latest roadmap, packed with developer-focused updates. From SaaS speed to Visual Builder enhancements, developer tooling...

Andy Blyth | Nov 21, 2024 | Syndicated blog

Set Default Culture in Optimizely CMS 12

Take control over culture-specific operations like date and time formatting.

Tomas Hensrud Gulla | Nov 15, 2024 | Syndicated blog