Home > .NET, C#, EPiServer > Create Composer page type and content function using PageTypeBuilder 1.2

Create Composer page type and content function using PageTypeBuilder 1.2

Introduction:

Page Type Builder (a.k.a PTB) by Joel Abrahamsson is one of the most popular Open Source projects for EPiServer CMS developers. It helps increase developer productivity when creating EPiServer solutions. See http://pagetypebuilder.codeplex.com/ for information and links.

EPiServer Composer: Using a very few main templates combined with independent inner templates and functions, you can use EPiServer Composer to create custom pages with features not available before. EPiServer Composer  gives you notably more flexibility than the standard version of EPiServer CMS.

http://world.episerver.com/Download/Items/Extension-3/EPiServer-Composer-4-Beta/

I take a look into  new version of PTB is released (PageTypeBuilder 1.2) and tried to create Composer page type and content function by using PTB. Everything work well together. As many of you might know that in previous version, we have some issues in using Page Type Builder and Composer though (Stefan Forsberg pointing this out). In latest version, Joel Abrahamsson was made changes in API to check null in DataFactory_LoadedPage to play nicer with Composer.

In this sample, I just want to show how to create new Composer page type and Content function by using Page Type Builder. Beside that there is a trick to put Composer property in existing Tab of EPiServer CMS. You can refer to PageTypeBuilder home page in CodePlex on how to create new page type using Page Type Builder (http://world.episerver.com/en/Articles/Items/Introducing-Page-Type-Builder/)

1. Create new page type

using Dropit.Extension.SpecializedProperties;

using PageTypeBuilder;

namespace EPiServer.Templates.Demo.Pages

{

[PageType(Filename = "~/Templates/Demo/Pages/TestPage.aspx", Name = "Test page type", AvailableInEditMode = true, Description = "Test page type")]

public class TestPageType : TypedPageData

{

[PageTypeProperty(Type = typeof(ExtensionContentAreaProperty), DisplayInEditMode = false, Searchable = true, UniqueValuePerLanguage = false, Tab = typeof(ComposerTab))]

public virtual string MainArea { get; set; }

[PageTypeProperty(Type = typeof(ExtensionPageProperty), DisplayInEditMode = true, Searchable = true, Tab = typeof(ComposerTab))]

public virtual string ExtensionPageProperty { get; set; }

}

}

Create new page type by using TestPage.aspx file as template page. Most important things is the required properties of Composer page type ExtensionPageProperty.

In the sample, I create a page type that look the same as Composer wide page (in Composer sample package) with only one content area. Here you can see that I used ExtensionContentAreaProperty for MainArea and ExtensionPageProperty. The Tab agrument was assigned to ComposerTab, I will explain about this later in this post.

– The template file look like that:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestPage.aspx.cs" Inherits="EPiServer.Templates.Demo.Pages.TestPage" MasterPageFile="~/Templates/Demo/MasterPages/MasterPage.master" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainRegion" runat="server">

<!–

The page contains only one single Extension content area: MainArea.

Using divider functions for designing the layout

–>

<div id="StageArea" class="StartPage" style="min-height:100px;">

<Extension:ExtensionContentArea runat="server" ID="MainArea" Description="MainArea using all available space" />

</div>

</asp:Content>

And the code behind:

using System;

using Dropit.Extension.Core;

using PageTypeBuilder.UI;

 

namespace EPiServer.Templates.Demo.Pages

{

    public partial class TestPage : TemplatePage<TestPageType>

    {

        //Add a ExtensionPageHandler for enable Composer

        private readonly ExtensionPageHandler _extensionHandler;

 

        public TestPage()

        {

            _extensionHandler = new ExtensionPageHandler();

        }

 

        protected override void OnInit(EventArgs e)

        {

            base.OnInit(e);

            //It’s important that _extensionHandler initialized after base.OnInit.

            _extensionHandler.Initialize(this);

        }

 

        protected void Page_Load(object sender, EventArgs e)

        {

 

        }

    }

}

2. Create new content function

using Dropit.Extension.SpecializedProperties;

using PageTypeBuilder;

 

namespace EPiServer.Templates.Demo.Pages

{

    [PageType(Filename = "/composer/functions/text.ascx", AvailableInEditMode = true, Name = "Test Article Function", Description = "Test Article Function")]

    public class TestContentFunction : TypedPageData

    {

        [PageTypeProperty(Type = typeof(ExtensionFunctionProperty), DisplayInEditMode = false, Searchable = false, UniqueValuePerLanguage = true, Tab = typeof(ComposerTab))]

        public virtual string ExtensionContentFunctionProperty { get; set; }

        [PageTypeProperty(UniqueValuePerLanguage = false, Searchable = false, DisplayInEditMode = false, Tab = typeof(ComposerTab))]

        public virtual bool NeverUsedProperty { get; set; }

        [PageTypeProperty(UniqueValuePerLanguage = false, Searchable = true, DisplayInEditMode = true, Tab = typeof(ComposerTab), EditCaption = "Heading text")]

        public virtual string Heading { get; set; }

        [PageTypeProperty(UniqueValuePerLanguage = false, Searchable = true, DisplayInEditMode = true, Tab = typeof(ComposerTab), EditCaption = "Body text")]

        public virtual string MainBody { get; set; }

    }

}

Here I use the same template file of Article content function from Composer sample package. Note that we define required properties from Composer and its type.

3. Put page type properties into an existed Tab in EPiServer CMS

Create new class inherited from PageTypeBuilder.Tab. Find the tab that you want to put your properties (Edit Tabs section under Page Type of EPiServer CMS Admin mode)

image

In this sample, I will put all properties to Extension tab.

using EPiServer.Security;

using PageTypeBuilder;

 

namespace EPiServer.Templates.Demo.Pages

{

    public class ComposerTab : Tab

    {

        #region Overrides of Tab

 

        public override string Name

        {

            get { return "Extension"; }

        }

 

        public override AccessLevel RequiredAccess

        {

            get { return AccessLevel.Edit; }

        }

 

        public override int SortIndex

        {

            get { return 1000; }

        }

 

        #endregion

    }

}

Must return exactly the value of Extension Tab (Name, Required Access Level and the Sort index). If we don’t return the same value of Extension tab, then PageTypeBuilder will create new one.

After all, compile the project and go to Admin mode of EPiServer CMS. You can see new page type for Composer page type and content function appeared. New page type and content function also automatically registered in Composer Admin mode. Now you can using new page type and new content function in Edit mode and View mode.

Enjoy Composer and Page Type Builder!

Advertisements
  1. Nicklas
    June 24, 2010 at 7:28 pm

    Nice post mr.Le

  2. Ian
    July 6, 2010 at 8:56 pm

    Hey Dung,
    Ace post, I found it very useful, I haven’t used composer with PTB before, how would you go about getting a handle on a PageTypeProperty in text.ascx based on your example?

    Regards,
    Ian

  3. Ian
    July 6, 2010 at 9:10 pm

    Further to my post, just to clarify, in terms of seeing the property with intellisense in the code behind.

    Thanks a lot

  4. June 12, 2013 at 8:42 am

    offered by various China wholesale stores on our site.
    In case you have an exclusive favor for vintage jewelry, the on-going promotion
    on vintage deco jewelry available for purchase online at
    AliExpress.com may be valued at

  5. July 3, 2013 at 1:36 am

    Hi there would you mind stating which blog platform you’re working with? I’m
    going to start my own blog soon but I’m having a tough time deciding between BlogEngine/Wordpress/B2evolution and Drupal. The reason I ask is because your design seems different then most blogs and I’m looking for something
    unique. P.S Apologies for being off-topic but I had to ask!

  6. July 6, 2013 at 11:02 pm

    Thanks for every other informative website. The
    place else may just I am getting that type of info written in such an ideal way?
    I’ve a challenge that I’m just now working on, and I
    have been on the look out for such info.

  7. July 13, 2013 at 4:48 am

    Having good feedback from customers is vital in maintaining a business in profit.
    There are various car insurance companies that offer
    low insurance quotes or rates for females and teen drivers.
    Key factors to make sure remain the same for comparison include bodily injury liability, property damage
    liability, medical payments, collision and comprehensive limits, and uninsured motorist coverage.

  8. July 19, 2013 at 4:44 am

    The way to shop for sports car insurance on the internet is
    to find a specialist insurance broker. Drivers under the age of 25 typically pose high risk of being at-fault in accidents.
    Now, the compulsory is the standard amount of excess or deductible given by the insurance companies on The higher the
    deductibles, the lower the premium.

  9. July 22, 2013 at 4:50 pm

    Follow all the news about Pets, Education and Child Health by subscribing to
    my articles. Taking the time necessary to comparison shop, will allow individual
    policy holders the savings they hope to find. And, some may believe they wouldn’t benefit from buying life insurance.

  10. August 8, 2013 at 5:27 am

    But instead of digging a moat or installing a cannon on your driveway, you need a good Home Insurance policy.
    These plans allow you to have coverage until such time that you qualify for
    coverage from your new employer’s medical plan. A home insurance policy, offered by a reputed insurance firm, will provide coverage for:
    -.

  11. September 2, 2013 at 5:45 am

    5,000 of home office equipment, but be aware – you may need additional cover
    for specialist items such as expensive audio visual equipment, photocopiers
    etc. One of the best ways of buying the correct health insurance policy
    is to look for the policy quotes online. Do you just want a death benefit to pay for your funeral.

  12. September 21, 2013 at 8:51 am

    By providing one-day automobile insurance coverage, insurance coverage corporations space doing their finest to stop peolle from driving uninsured.

    In this case, iit is their fault, nobody but theirs, simply because they should’ve learned
    from their mistake the first time. The various options that one will be presented with
    will include third party coverage and comprehensive coverage.

  13. September 26, 2013 at 12:27 am

    However, this can create some interesting predicaments when tthe policyholder dies since the insurance company is typically notified of the passing of the policyholder by
    a beneficiary. But also with vehicle financing which many people need as paying cash for a car is out reach for many, the
    finer clause is that one require car insurance prior which will
    get the car.Who are the mothers of Putin,
    Obama, and Luthdr King.

  14. August 18, 2014 at 3:59 am

    I’m truly enjoying the design and layout of your website.
    It’s a very easy on the eyes which makes it much
    more enjoyable for me to come here and visit more often. Did you hire out a developer to create your
    theme? Superb work!

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: