Loading...

All project content is available for reading, but you need to be a member of the project for Subversion checkout of source code, or to create/modify any information.
Login if you are a member. Apply here to request membership (open to all).

MultiPagePropertyPlus

MultiPagePropertyPlus is a new multipage property designed to be more customizable than existing solutions. It utilizes the flexibilty of PageTypeBuilder and class attributes to give the programmer far easier control over how multipage properties are handled in the CMS. The obvious advantage is hence that allowed sub-pagetypes and the allowed number of subpages in a property can be controlled in very few lines of code. Sorting of pages is also handled in the GUI.

Hence the programmer gets access to powerful features and the users get a slicker interface.

Screenshot of the MultiPagePropertyPlus as it appears in the CMS.

In the image above you can see how the property looks in the CMS. It creates a dynamic page tree by looping through the site structure, and adds all relevant pages. Only allowed pages are enabled. This is controlled by the programmer by using attributes. Everything in the GUI is handled in JavaScript.

Once the user ticks off pages, they will immediately appear in the list below the page tree. All multipage manipulations are done using JavaScript. This leaves a single postback event (save/publish), which is good for a slicker and more efficient user interface.

The arrows will dynamically move a page up or down, the 'X' removes it altogether.

Usage

The code was designed to be as simple as possible to implement. Even the CSS and the images are dynamically created. Thus the code also relies on the System.Drawing namespace under Windows Forms to function properly.

Ideally the programmer only needs to do three things to get the code to work:

  1. Change the namespaces in the four code files (.aspx/.cs, and not the .js file of course). This is currently set toYourNameSpace.Web.CustomProperties. Change it to whatever suits your project structure.
  2. Set up the proper reference to the dynamic image generator, PageTreeImage.aspx. This is done in the functionsetupCss() in the file PropertyCustomPageTree.cs. Look for the line:
    const string autogenImagePath = "/YourPath/PageTreeImage.aspx";
    
  3. Set up a reference to the JavaScript file, CustomPageTree.js. This is done in the function setupJs() in the filePropertyCustomPageTree.cs with the following line:
    Page.ClientScript.RegisterClientScriptInclude("customPageTreeJs", "/YourPath/CustomPageTree.js");
    

Once these steps are completed, you can start using the code. Here's an example, using a property calledSelectedPages:

The image above demonstrates how the multipage property can be used. A new property of type EPiServer.Core.PropertyString called SelectedPages is created. This will hold our multiple pages.

Second, note that the PageTypeProperty attribute has "Type = typeof(PropertyCustomPageTree)".

Finally, note the attribute called CustomPageTreeParams. Here you can set if pages are allowed to be sorted or not, the maximum number of sub-articles a page can have and so on. You can also set which types of sub-pages are allowed. All these are powerful features that allows for a better user experience and an easier job for the programmer.

The property will hold a list of page ids that can be manipulated at will.

Here's an example of how to loop through the page ids and add them to a PageDataCollection, for instance in a Page'sOnLoad? event:

protected override void OnLoad (EventArgs e) {
    base.OnLoad(e);

    // Create a new PageDataCollection , loop through the page ids stored in MultiPagePropertyPlus, and add them all to our collection. Finally bind them to our repeater: 
    PageDataCollection pdc = new PageDataCollection (); 
    if (CurrentPage["SelectedQAItems"] != null && CurrentPage["SelectedQAItems"].ToString() != "") {
        string prop = CurrentPage["SelectedQAItems"].ToString(); 
        string [] pageIds = prop.Split(','); 
        foreach (string pageId in pageIds) {
            PageData pd = DataFactory.Instance.GetPage(new PageReference(int.Parse(pageId))); 
            pdc.Add(pd);
        }
    }
    QAndAs.DataSource = pdc; 
    QAndAs.DataBind();
}

This is what the bound repeater could look like in the aspx file:

<asp:Repeater ID="QAndAs" runat="server"> 
	<HeaderTemplate >
		<div id="QAArea">
	</HeaderTemplate >
	<ItemTemplate >
		<div class="questionAndAnswer">
			<div class="question">
				<h2><EPiServer:Property PropertyName="Question" ID="QuestionItem" runat="server" /></h2>
			</div>
			<div class="answer">
				<EPiServer:Property PropertyName="Answer" ID="AnswerItem" runat="server" />
			</div>
		</div>
	</ItemTemplate >
	<FooterTemplate >
		</div>
	</FooterTemplate >
</asp:Repeater >

Note that MultiPagePropertyPlus now also ships with a handy-dandy static function called:

PropertyCustomPageTree.GetPagesFromPageListString(string commaDelimitedListOfIds)

Not only will this return a PageDataCollection with the pages contained in the property, but it will also filter out pages that may not exist anymore, i.e. if a page is first selected, then deleted from the structure elsewhere. The original string property will still contain all the ids.

<add the module run-time (.epimodule for installable modules or .zip for source code) as an attachment to this wiki page. Attachments can be downloaded without people needing to register on EPiCode.>

Support

Tickets for this component:

No results

Ask a question

Requires login.


Report a bug

Requires login.


Add a feature request

Requires login.


Requirements

Runtime:

  • EPiServer CMS 6 (not tested in other versions, although CMS 5 should work)
  • Internal EPiServer jQuery
  • PageTypeBuilder
  • System.Drawing from Windows Forms (to dynamically create images)

If you want to change and compile the source code:

  • Visual Studio 2008 SP1
  • <if you use post-build events for deploying runtime files> Unleash IT (See PostBuildEvent for more information)

Pricing

This module is not free. The current price is NOK 5.000.

This module is however free for personal and development use. For all other deployments a license is required.

To order, send an email to info@bvnetwork.no with the following information:

  • Customer Company Name
  • Partner Company Name (when delivered to customer by partner)
  • Neccessary invoicing details (contact person, address etc.)

MultiPagePropertyPlus is licensed per EPiServer site. One license is required for each site that has the module installed.

Download

Contributed by

Peder Ydalus - http://www.bit-kit.com

Additional comments can be addressed to: peder@bit-kit.com.

Attachments