Creating a New PageBuilder Page from Your website

1. Log into your website.
2. Open the PageBuilder menu and choose File > New Page. The Add New Page wizard appears.
   

   

3. Click on your choice of template. It is highlighted and shows a check mark on it.
4. Click Next. The wizard shows fields to define your new page.
   

   

5. Enter a title in the Title field, enable Content Searchable, and choose a taxonomya content-level categorization system that uses one-to-many relationships to create a scalable organization of content. A taxonomy lets you create a navigation system that is independent of the folder structure.. By default, the Manual Alias matches the Page Title.

   IMPORTANT: You should use automatic aliasing in most cases because you cannot standardize an aliasing pattern with manual aliasing. Automatic aliasing standardizes alias naming. See Creating Automatic URL Alias Rules for information about automatic aliasing.

6. Click Next. The wizard shows Metadata and Summary information that you can enter. See Also: Writing a Summary for Content; Working with Metadata
   

   

7. Click Finish. A confirmation dialog box appears.
   

   

8. Click OK to start editing the page.

Creating a New PageBuilder Page In the Workarea

Prerequisite

You must have wireframes already created in a folder. See Assigning the PageBuilder Wireframe to a Folder.

1. Click on the Pages folder (or one of its subfolders) where you want to add the new page.
2. Choose New > Page Layout.

3. The Add New Page screen appears. (Because only one template is assigned to the folder, it appears as the default.)

   

   

4. Click Next. A new screen appears, which lets you assign a title, Taxonomya content-level categorization system that uses one-to-many relationships to create a scalable organization of content. A taxonomy lets you create a navigation system that is independent of the folder structure., and aliasing information to the page.
   

   

5. Enter a title in the Page Title field
6. By default, the Manual Alias matches the Page Title.
7. Click Next. The following screen appears, which lets you assign metadata and a summary to the page. See Also: Writing a Summary for Content; Working with Metadata
   

   

8. Click Finish. A confirmation dialog box appears. Click OK to start editing the page.
   

   

Step 1: Add New Column and Set Column Widths

NOTE: If your developer sets dropzone column widths programmatically (as explained in Setting a Dropzone’s Column Width Programmatically), you cannot add a column as described here. Many developers disable this option because it gives end users liberty to resize columns when you may want to standardize your layout. If your developer has disabled this option, go to Step 2.

Add a second column to the right of the top one. Then, set the width of both columns.

1. Click Add Column (). A new column appears to the right of the existing one.
2. Set the left column width to 35%. To do this:
   1. Click Resize ().
   2. Enter 35 into the New Width field.
   3. Change the measurement to Percent.
   4. Click Save.
      

      

3. Set the right column to 65% width by clicking the pencil icon, changing its width to 65 Percent, and clicking Save.

Step 2: Insert New Content Block Widget into Right Column

When the columns are set, insert a ContentBlock widget into the right column.

1. From the PageBuilder tool bar, open the widget menu (). It shows widgets that the administrator assigned to the page wireframe in Creating a PageBuilder Wireframe.
2. Drag and drop the Content Block widget to the right column. The Content Block Control appears in the column.
   

   

3. Click Edit (). The Editing Widget screen appears.
   

   

4. On the Folder tab, choose Root > Mainsite > Content > Products > Software and click New to place the new content in the Software folder. The Edit Content screen appears.
5. Add a Title.
6. In the content area, enter some text and click Publish.
   

   

   When published, the content appears in the column.

   

   

7. If you want to edit content on this page, click the Access Point (). A menu displays.
   

   

Step 3: Insert a List Summary Widget into Left Column

After you insert content in the right column, insert a List Summary widget in the left column.

1. From the PageBuilder menu, open the widget menu (). Widgets assigned to the page wireframe in Creating a PageBuilder Wireframe appear.
2. Drag and drop the List Summary widget into the left column. The List Summary widget appears, displaying a list summary for content in the root folder.
   

   

3. Click Edit (). The Editing Widget screen appears.

   

   

4. On the Folder tab, choose Root > Mainsite > Content > Products > Software.
   

   

5. Clicks Save. The List Summary widget shows the Summary information from the content in the Software folder.
   

   

6. From the PageBuilder menu, choose File > Check In. You can review the page in Preview mode and make sure it is formatted properly.
   • Choose View > Preview Layout to see the page in a browser.
   • Choose View > Mobile > iPhone, iPad, or Droid to see the page on a simulated mobile device.
7. When the page is complete, choose File > Publish from the PageBuilder menu.

Creating a PageBuilder Wireframe

You first create a wireframethe architecture of a Web page containing columns, dropzones, and layout information.. Next, define the dropzonean area on a Web page where you can drag and drop a widget., one or more areas of the page on which a content creator drags and drops widgets. The relationship between a wireframe, a dropzone, and a widgetWidgets are mini-applications that you place on a Web page using PageBuilder; a widget provides either specific functionality (calculators, search, social bars, etc.) or areas into which you can add content (content blocks, list summaries, collections, and so on). is illustrated below.

To create a wireframe that contains one dropzone:

1. Open the website in Visual Studio.
2. Choose Web Site > Add New Item to add a new Web form to the site.
3. Select Web Form.
4. Set the Name to PageLayout.aspx, the Language to Visual C#, and check Select master page.
   

   

5. Click Add.
6. When prompted to select a master page, choose from the directory siteroot/components/templates.
7. Register the user controls directly below the @Page directive (at the top of the file).

   <%@ Register Assembly="Ektron.Cms.Controls" 
   Namespace="Ektron.Cms.Controls" TagPrefix="CMS" %>
   <%@ Register Src="~/Workarea/PageBuilder/PageControls/PageHost.ascx" 
     TagPrefix="PH" TagName="PageHost" %>
   <%@ Register Src="~/Workarea/PageBuilder/PageControls/DropZone.ascx" 
     TagPrefix="DZ" TagName="DropZone" %>
   <%@ Register Assembly="Ektron.Cms.Widget" 
     Namespace="Ektron.Cms.PageBuilder" TagPrefix="PB" %>   

8. Add code for a PageBuilder Menu (PH: PageHost) and Dropzone. To do this, locate the ContentPlaceHolder1 and enter this code.

   IMPORTANT: When inserting the following code, begin the <ColumnDefinitions> statements with the TagPrefix on the widget assembly registration line (PB in the example above). Do not use IntelliSense when entering <ColumnDefinitions> statements—it may insert an incorrect prefix.

   <PH:PageHost ID="PageHost1" runat="server" DefaultPageID="937" 
     SelTaxonomyID="94" /> 
     <DZ:DropZone ID="Middle" runat="server" AllowAddColumn="false" 
       AllowColumnResize="false"> 
     <ColumnDefinitions> 
      <PB:ColumnData width="100" columnID="0" unit="pixels"></PB:ColumnData> 
      <PB:ColumnData width="100" columnID="1" unit="pixels"></PB:ColumnData> 
      <PB:ColumnData width="100" columnID="2" unit="pixels"></PB:ColumnData> 
     </ColumnDefinitions>
     </DZ:DropZone> 

   With the PageBuilder menu (PageHost) and Dropzone in place, the template looks like this when you are logged in and ready to configure a PageBuilder page.

   

   

   This control lets a content author drop widgets on the page. It also provides the save/check in/publish functions, and lets the author preview the page when it is published. The content author uses a Dropzone control as a placeholder, into which you insert widgets. You also can use it to insert additional placeholders as needed.

   The pagelayout.aspx code now looks like this.

   

   Best Practice

   Assign an appropriate value for the SelTaxonomyID property. See Assigning a Default Page to a Wireframe and Assigning a Default Taxonomy Category to a Wireframe.

9. Open the code-behind page, PageLayout.aspx.cs.
10. Add a reference to the PageBuilder namespace by adding the following line after the last using statement.

    using Ektron.Cms.PageBuilder.

11. Inherit the PageBuilder class instead of System.Web.UI.Page. To do this, change:

    public partial class PageLayout : System.Web.UI.Page

    To:

    public partial class PageLayout : PageBuilder

12. Add the following code after the Page_Load event to handle errors and notifications.

    public override void Error(string message)
    { jsAlert(message);
    }
    public override void Notify(string message)
    { jsAlert(message);
    }
    public void jsAlert(string message)
    { Literal lit = new Literal(); 
      lit.Text = "<script type=\"\" 
      language=\"\">{0}</script>"; 
      lit.Text = string.Format(lit.Text, "alert('" + message + "');"); 
      Form.Controls.Add(lit);
    }

    You do not need to use the jsAlert system defined here. But if you do not, you must add overrides to handle errors and notifications.

    The code page for pagelayout.aspx.cs looks like this.

    

    

13. Save the PageLayout.aspx and PageLayout.aspx.cs files.

Creating a PageBuilder Master Layout

A Master Layout is a special type of PageBuilder template that may include a special kind of dropzonean area on a Web page where you can drag and drop a widget. called a Master Zone. A Master Zone is only editable by users assigned to the Administrators group or the MasterLayout-Create role. All other dropzones on a Master Layout template are called Layout Zones. Anyone can edit them.

An example use of this template is: a department head reserves one Master Zone on the department pages for content that only the department head may edit. Content authors may drag and drop a widgetWidgets are mini-applications that you place on a Web page using PageBuilder; a widget provides either specific functionality (calculators, search, social bars, etc.) or areas into which you can add content (content blocks, list summaries, collections, and so on). into other dropzones, but cannot edit the Master Zone.

Adding the Wireframe and Widgets into Ektron

An Ektron administrator uses the wireframe that a developer made, and determines which widgets will be available to the wireframe.

1. In the Workarea, choose Settings > Configuration > Template Configuration.
2. Click Add New Template to System. The Add a New Template screen appears.
   

   

3. Click Browse () and navigate to PageLayout.aspx, the wireframe you created earlier in Creating a PageBuilder Wireframe.
4. Click the PageBuilder Wireframe check box, which indicates that this template may be used to create a PageBuilder page. Widgets that can be applied to the template appear. Ektron provides many standard widgets. See Widget Reference.
   

   

5. Click any of the widgetWidgets are mini-applications that you place on a Web page using PageBuilder; a widget provides either specific functionality (calculators, search, social bars, etc.) or areas into which you can add content (content blocks, list summaries, collections, and so on).s (for example, ContentBlock or ContentList). The background color changes indicating that they are selected.
6. Click Add New Template to System.

Assigning the PageBuilder Wireframe to a Folder

Create a folder for the content that appears on the new page by performing these steps.

1. Choose Workarea > Content > Folders. The View Contents screen appears.
2. Choose New > Folder.
   

   

   NOTE: You should keep content and PageBuilder pages in separate folders, so you can later create and configure a folder called “Content.” The content folder will contain content blocks, assetan external file, such as a Microsoft Word document or image, stored in Ektron. It can be managed like native Ektron content.s, and sub-folders.

3. On the Proerties tab, type Pages in the Name field.
4. On the Templates tab, if Inherit parent configuration is checked, uncheck it.
5. Select the template that you created in Adding the Wireframe and Widgets into Ektronas the default (and only) template for this folder. This ensures that only PageBuilder pages can be created in this folder.
6. Click Add () to the right of the pull-down menu. PageLayout.aspx is added to the list of page templates.
7. Create a corresponding content folder. However, instead of assigning pagelayout.aspx as the template, assign a template for creating Ektron content.

Assigning a Default Page to a Wireframe

You can assign a default page to a wireframe. If you do, and a site visitor enters a URL with a path to that wireframe that lacks a query string ID, the default page appears. The following example explains this feature.

• The following URL returns PageLayout ID 1036 in the PageBuilder folder:

  http://siteroot/cms400developer/developer/PageBuilder/PageLayout.aspx?pageid=1036

• The following URL returns the Page Layout page identified in the PageLayout.aspx file’s PageBuilder menu user control DefaultPageID property.

  http://siteroot/cms400developer/developer/PageBuilder/PageLayout.aspx

  (Note lack of query string parameter)

To assign a default page to a wireframe:

—Show how—

1. In the Workarea, create a PageBuilder page that will be used as the default pageid for a wireframe.
2. In Visual Studio, open the wireframe file assigned to that folder.
3. Find the PageBuilder menu user control (circled below).
   

   

4. Add a new property, DefaultPageID.
5. For the property’s value, enter the ID of the page you created in Step 1.

   Here is an example of that line with the DefaultPageID property added.

   <ucPageBuilder:PageHost ID="ucCms400Developer" DefaultPageID=”1035” runat="server" />

6. Save your changes.

   To continue the above example, if someone opens a browser and enters http://siteroot/cms400developer/developer/PageBuilder/PageLayout.aspx, he is redirected to

   http://sitroot/cms400developer/developer/PageBuilder/PageLayout.aspx?pageid=1035

Assigning a Default Taxonomy Category to a Wireframe

While creating a new PageBuilder page in the Workarea, the user can assign one or more taxonomya content-level categorization system that uses one-to-many relationships to create a scalable organization of content. A taxonomy lets you create a navigation system that is independent of the folder structure. categories that are set in the page’s folder properties. See example below.

As a developer, you can assign a default taxonomy category to a wireframe. If you do, and the user creating a page using that wireframe makes no changes, the default category is assigned to the page. However, the user can change the taxonomy when the Add New Page screen appears.

NOTE: Default taxonomies are applied only when a user logs into a website and adds a new page -- they are not applied when creating new pages within the Workarea.

To assign a default taxonomy category to a wireframe:

To continue the above example, the next time someone creates a page based on that wireframe, taxonomy ID 13 will be the page’s default taxonomy category. If desired, the user can change it by navigating to the Taxonomy tab and assigning different or additional categories.

Setting a Dropzone’s Column Width Programmatically

To set a dropzonean area on a Web page where you can drag and drop a widget.’s column widths programmatically:

1. Add the following Register statements to the page’s <head> tags.

   IMPORTANT: The Widget and Dropzone assemblies must have the same Tag Prefix. See example.

   <%@ Register Assembly="Ektron.Cms.Widget" 
     Namespace="Ektron.Cms.PageBuilder" TagPrefix="PB" %>
   <%@ Register Src="~/Workarea/PageBuilder/PageControls/PageHost.ascx" 
     TagPrefix="PB" TagName="PageHost" %>
   <%@ Register Src="~/Workarea/PageBuilder/PageControls/DropZone.ascx" 
     TagPrefix="PB" TagName="DropZone" %>
   <%@ Register Assembly="Ektron.Cms.Widget" 
     Namespace="Ektron.Cms.PageBuilder" TagPrefix="PB"%>

2. Within the page’s <body> tags, add the following code. The following example adds 3 columns of 100 pixels each.

   <PB:DropZone ID="Middle" runat="server"> 
   <ColumnDefinitions> 
     <PB:ColumnData width="100" columnID="0" unit="pixels"></PB:ColumnData> 
     <PB:ColumnData width="100" columnID="1" unit="pixels"></PB:ColumnData> 
     <PB:ColumnData width="100" columnID="2" unit="pixels"></PB:ColumnData> 
   </ColumnDefinitions>
   </PB:DropZone>

Set width to an appropriate number. For the unit, the options are

• pixels
• percent
• em

If you set a dropzone’s column widths programmatically, you must also set the AllowAddColumn and AllowColumnResize properties to false. If you do not, users working with widgets can add columns and adjust column widths on the page, but their changes will revert to these settings when they try to save.

Overriding the Default Folder Where New Pages are Saved

By default, when a site user creates a new PageBuilder page from an existing one, it is saved to the same Ektron folder. For example, consider this folder/content structure.

-Root (folder id 0)
--Products (folder id 20)
---PageLayout: “Omaha Mailorder Steaks” (content id 35)
--Services (folder id 30)

If you are viewing content id 35 and click New Page or Copy/Save as, the new page is saved to that content’s folder (Products, folder id= 20).

NOTE: When you create a new page layout from the Workarea, you first select a folder then begin creating the page layout.

Use the PageBuilder control’s FolderID property in the .aspx page to override the default and specify an Ektron folder to which new pages are saved. Here is an example of that property:

<ucPageBuilder:PageHost ID="ucPageHost1" FolderID="25" runat="server" />

When a user is working on a page that hosts this PageBuilder control, and he saves a new page, it is saved to folder id 25.

Setting a Cache Interval

Use the CacheInterval property to cache a page and its widgets that represent Ektron server controls, such as a Collection widget. This property sets the amount seconds for which data is cached. The default is 0 (zero).

<ucPageBuilder:PageHost ID="ucPageHost1" CacheInterval="25" runat="server" />

Letting Users Add Columns to a Dropzone

Use the AllowAddColumn property to let users add columns to a dropzone.

<ucPageBuilder:DropZone ID="ucDropZone1" 
  AllowAddColumn="true" 
  AllowColumnResize="true" runat="server" />

For example, a Dropzone initially contains one column, but the page creator wants 3. If this property is set to true, this change is possible. This property’s default value is true.

NOTE: If you set dropzone’s column widths programmatically (as explained in Setting a Dropzone’s Column Width Programmatically), the user cannot add a column, regardless of this setting.

Letting Users Resize a Dropzone

Use the AllowColumnResize property to let users change the width of columns in a dropzonean area on a Web page where you can drag and drop a widget..

<ucPageBuilder:DropZone ID="ucDropZone1" 
  AllowAddColumn="true"  AllowColumnResize="true" runat="server" />

For example, column width is 100% by default. A page creator wants to change it to 50%. If this property is set to true, this change is possible. This property’s default value is true.

NOTE: If you set dropzone’s column widths programmatically (as explained in Setting a Dropzone’s Column Width Programmatically), the user cannot add a column, regardless of this setting.

AcmeBooksMasterPage.master

<%@ Master Language="C#" AutoEventWireup="true" 
  CodeFile="AcmeBooksMasterPage.master.cs" 
  Inherits="AcmeBooksMasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>Acme Books</title>
  <asp:ContentPlaceHolder id="head" runat="server">
  </asp:ContentPlaceHolder>
</head>
<body>
  <form id="form1" runat="server">
  <div>
    <asp:ContentPlaceHolder id="ContentPlaceHolder1" 
      runat="server">
    </asp:ContentPlaceHolder>
  </div>
  </form>
</body>
</html>

PageLayout.aspx

<%@ Page Language="C#" 
  MasterPageFile="~/AcmeBooksMasterPage.master" 
  AutoEventWireup="true" 
  CodeFile="PageLayout.aspx.cs" 
  Inherits="PageLayout" Title="Untitled Page" %>
<%@ Register 
  Assembly="Ektron.Cms.Controls" 
  Namespace="Ektron.Cms.Controls" TagPrefix="CMS" %>
<%@ Register 
  Src="~/Workarea/PageBuilder/PageControls/PageHost.ascx" 
  TagPrefix="PH" TagName="PageHost" %>
<%@ Register 
  Src="~/Workarea/PageBuilder/PageControls/DropZone.ascx" 
  TagPrefix="DZ" TagName="DropZone" %>
<%@ Register 
  Assembly="Ektron.Cms.Widget" 
  Namespace="Ektron.Cms.PageBuilder"
  TagPrefix="PB" %>
<asp:Content ID="Content1" 
  ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
  <PH:PageHost ID="PageHost1" runat="server"
    DefaultPageID="937" SelTaxonomyID="94" />
  <DZ:DropZone ID="Middle" runat="server" 
    AllowAddColumn="false" AllowColumnResize="false">
    <ColumnDefinitions>
      <PB:ColumnData width="100" columnID="0" unit="pixels"></PB:ColumnData>
      <PB:ColumnData width="100" columnID="1" unit="pixels"></PB:ColumnData>
      <PB:ColumnData width="100" columnID="2" unit="pixels"></PB:ColumnData>
    </ColumnDefinitions>
  </DZ:DropZone>
</asp:Content>

PageLayout.aspx.cs

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using Ektron.Cms.PageBuilder;
public partial class PageLayout : PageBuilder
  { protected void Page_Load(object sender, EventArgs e)
      {}
    public override void Error(string message)
      {jsAlert(message);}
    public override void Notify(string message)
      {jsAlert(message);}
    public void jsAlert(string message)
      { Literal lit = new Literal();
        lit.Text = "<script type=\"\" language=\"\">{0}</script>";
        lit.Text = string.Format(lit.Text, "alert('" + message + "');");
        Form.Controls.Add(lit);
      }
  }