Kentico CMS 7.0 Developer's Guide

Adding portal engine functionality to ASPX templates

Adding portal engine functionality to ASPX templates

Previous topic Next topic Mail us feedback on this topic!  

Adding portal engine functionality to ASPX templates

Previous topic Next topic JavaScript is required for the print function Mail us feedback on this topic!  

When developing or maintaining a website built on ASPX page templates, one of the drawbacks is that the code of a page must be modified manually every time you wish to change its design. It is possible to add flexibility to ASPX templates by defining areas that may be edited directly through the browser in the CMS administration interface, just like when using the Portal engine development model. Depending on their configuration, these areas allow Web parts or Widgets to be used on ASPX page templates.

 

This is achieved by placing the following elements into the code of a page template:

 

<cms:CMSPagePlaceholder ID="plcZones" runat="server">
    <LayoutTemplate>

 
        ...

 
        <cms:CMSWebPartZone ID="zoneCenter" runat="server" />

 
        ...

 
    </LayoutTemplate>
</cms:CMSPagePlaceholder>

 

The CMSPagePlaceholder control creates an area on the page that behaves in a way similar to a portal engine page template. You may place multiple controls of this type onto a single page.

 

The <LayoutTemplate> element defines the layout of the area. This is typically done by specifying a table structure or a CSS‑based layout applied through HTML elements (e.g. <div>, <span>, etc.).

 

The layout may contain multiple CMSWebPartZone controls, which represent fully functional portal engine zones. You can configure every zone to serve as either a standard web part zone or any type of widget zone. Users may manage these zones when editing pages based on the page template on the Edit -> Design tab of CMS Desk. When web part or widget content is added to a zone, information about it is stored in the database along with the respective page template object, not in the actual code of the ASPX page.

 

 

InfoBox_Exclamation

 

CMSPortalManager control required!

 

In order for portal engine functionality to be possible on pages using ASPX templates, the CMSPortalManager control must be present. Usually it is located on the master page set for the template.

 

Some master pages may use the older CMSPageManager control, which does not support web part/widget zones. If this is the case, you need to replace the control before adding any of the elements described in this topic.

 

Page templates with this type of content also require additional configuration in Site Manager -> Development -> Page templates. You need to set the Template type to ASPX + Portal page in order for the Design tab to be available when editing pages using the given template in CMS Desk.

 

devguide_clip1543

 

Example

 

The following example demonstrates the creation of a simple ASPX page template with zones that users can design via the portal engine:

 

1. Build a new page template according to the guide in the Creating a new ASPX page template topic. When writing its ASPX code, place the following inside the <asp:Content> element:

 

<cms:CMSPagePlaceholder ID="plcZones" runat="server">
    <LayoutTemplate>
        <table width="100%" cellspacing="0" cellpadding="0">
            <tr valign="top">
              <td width="50%">
                <cms:CMSWebPartZone ID="zoneLeft" runat="server" />
              </td>
              <td width="50%">
                <cms:CMSWebPartZone ID="zoneRight" runat="server" />
              </td>
            </tr>
        </table>
    </LayoutTemplate>
</cms:CMSPagePlaceholder>

 

This code defines two editable web part zones in a basic two column table layout.

 

2. When registering the page template in Site Manager -> Development -> Page templates, select the ASPX + Portal page option for the Template type property.

 

3. Go to CMS Desk and add a Page (Menu item) document to the content tree using the new page template.

 

4. Switch to the Design tab of the new page, where you can see two web part zones.

 

5. Expand the menu (WebPartZoneMenu) of the zoneLeft zone, select Configure Properties and switch the Widget zone type property from None to Customization by page editor.

 

This zone now serves as a widget zone for page editors.

 

6. Add (NewAttribute) some web part to the ZoneRight zone, for example Text & Images -> Editable text.

 

devguide_clip1544

 

7. Open the Page tab, where you can manage the editor widget zone on the left and enter content into the editable text region displayed by the web part on the right. Try placing some widgets onto the page using the Add widget (WidgetAddEditor) button in the top left corner of the widget zone.

 

devguide_clip1545

 

The example demonstrates how to use web parts or widgets to build the design of pages based on ASPX page templates. This approach combines the standard architecture and development process of ASPX templates with the flexibility and user‑friendliness of the portal engine.