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)

Get The Files