DualLayout for SharePoint 2010 WCM Quick Start

DualLayout for SharePoint 2010 WCM is a solution to provide you with complete HTML freedom in your SharePoint Server 2010 publishing pages. In this post I provide a quick start guide to get you up and running quickly so you can try it out for yourself. This quick start creates a simple HTML5 site with a page to show-case the basics and the power of DualLayout. We will create the site in its own web application. Normally there are many things you have to do to create a clean start point for your SharePoint 2010 WCM site. All those steps will be provided in later posts. For now we want to give you the minimal set of steps to take to get DualLayout working on your machine.

  1. Create an authenticated web application with hostheader cms.html5demo.local on port 80 for the cms side of the site.
    imageimage
  2. Click the Create Site Collection link on the Application Created dialog box and create a Site Collection based on the Publishing Portal site template.
    imageimage
  3. Before we can click the site link in the Top-Level Site Successfully Created dialog we need to add the new host header cms.html5demo.local to the hosts file.
    SNAGHTML3954428f
    Add the following line to the hosts file:

    127.0.0.1        cms.html5demo.local

  4. Navigate to the site at http://cms.html5demo.local to see the out-of-the-box example Adventure Works publishing site.
    SNAGHTML3accaba4
  5. Download and add the DualLayout solution package designfactory.duallayout.sps2010.trial.1.2.0.0.wsp to the farm’s solution store:
    1. On the Start menu, click All Programs.
    2. Click Microsoft SharePoint 2010 Products.
    3. Click SharePoint 2010 Management Shell.
    4. At the Windows PowerShell command prompt, type the following command:Add-SPSolution -LiteralPath designfactory.duallayout.sps2010.trial.1.2.0.0.wsp
  6. In SharePoint 2010 Central Administration deploy the solution to the web application http://cms.html5demo.local.
    SNAGHTML3af89a0a
  7. Navigate to the site at http://cms.html5demo.local, and in the Site Settings screen select Site Collection Administration > Site collection features and activate the following feature:

    8. image_thumb3

  8. Open the site http://cms.html5demo.local in SharePoint Designer 2010.
  9. Create a view-mode masterpage html5simple.master with the following code:

    html5simple.master
    1. <%@ Master language="C#" %>
    2. <%@ Register Tagprefix="SharePointWebControls" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    3. <%@ Register TagPrefix="sdl" Namespace="DesignFactory.DualLayout" Assembly="DesignFactory.DualLayout, Version=1.2.0.0, Culture=neutral, PublicKeyToken=077f92bbf864a536" %>
    4.  
    5. <!DOCTYPE html>
    6. <html class="no-js">
    7.  
    8.     <head>
    9.         <meta charset="utf-8" />
    10.         <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    11.         <title><SharePointWebControls:FieldValue FieldName="Title" runat="server"/></title>
    12.  
    13.         <script type="text/javascript">
    14.             document.createElement('header');
    15.             document.createElement('nav');
    16.             document.createElement('article');
    17.             document.createElement('hgroup');
    18.             document.createElement('aside');
    19.             document.createElement('section');
    20.             document.createElement('footer');
    21.             document.createElement('figure');
    22.             document.createElement('time');
    23.         </script>
    24.  
    25.         <asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server"/>
    26.     </head>
    27.     
    28.     <body>
    29.         
    30.         <header>
    31.             <div class="logo">Logo</div>
    32.             <h1>SiteTitle</h1>
    33.             <nav>
    34.                 <a href="#">SiteMenu 1</a>
    35.                 <a href="#">SiteMenu 2</a>
    36.                 <a href="#">SiteMenu 3</a>
    37.                 <a href="#">SiteMenu 4</a>
    38.                 <a href="#">SiteMenu 5</a>
    39.                 <sdl:SwitchToWcmModeLinkButton runat="server" Text="…"/>
    40.             </nav>
    41.             <div class="tagline">Tagline</div>
    42.             <form>
    43.                 <label>Zoek</label>
    44.                 <input type="text" placeholder="Voer een zoekterm in...">
    45.                 <button>Zoek</button>                
    46.             </form>
    47.  
    48.         </header>
    49.         
    50.         <div class="content">
    51.             <div class="pageContent">
    52.                 <asp:ContentPlaceHolder id="PlaceHolderMain" runat="server" />
    53.             </div>
    54.         </div>
    55.     
    56.         <footer>
    57.             <nav>
    58.                 <ul>
    59.                     <li><a href="#">FooterMenu 1</a></li>
    60.                     <li><a href="#">FooterMenu 2</a></li>
    61.                     <li><a href="#">FooterMenu 3</a></li>
    62.                     <li><a href="#">FooterMenu 4</a></li>
    63.                     <li><a href="#">FooterMenu 5</a></li>
    64.                 </ul>
    65.             </nav>
    66.             <small>Copyright &copy; 2011 Macaw</small>
    67.         </footer>
    68.     </body>
    69. </html>


    Note that if no specific WCM-mode master page is specified (html5simple-wcm.master), the default v4.master master page will be used in WCM-mode.
  10. Create a WCM-mode page layout html5simplePage-wcm.aspx with the following code:
    html5simplePage-wcm.aspx
    1. <%@ Page language="C#" Inherits="DesignFactory.DualLayout.WcmModeLayoutPage, DesignFactory.DualLayout, Version=1.2.0.0, Culture=neutral, PublicKeyToken=077f92bbf864a536" %>
    2. <%@ Register Tagprefix="SharePointWebControls" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    3. <%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    4. <%@ Register Tagprefix="PublishingWebControls" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    5. <%@ Register Tagprefix="PublishingNavigation" Namespace="Microsoft.SharePoint.Publishing.Navigation" Assembly="Microsoft.SharePoint.Publishing, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    6.  
    7. <asp:Content ContentPlaceholderID="PlaceHolderPageTitle" runat="server">
    8.     <SharePointWebControls:FieldValue FieldName="Title" runat="server"/>
    9. </asp:Content>
    10. <asp:Content ContentPlaceholderID="PlaceHolderMain" runat="server">
    11. Title: <SharePointWebControls:TextField FieldName="Title" runat="server"/>
    12. </asp:Content>


    Notice the Inherits at line one. Instead of inheriting from Microsoft.SharePoint.Publishing.PublishingLayoutPage we need to inherit from DesignFactory.DualLayout.WcmModeLayoutPage. 
  11. Create a view-mode page layout html5simplePage.aspx with the following code:
    SNAGHTML3b358f44

    html5simplePage.aspx
    1. <%@ Page language="C#" Inherits="DesignFactory.DualLayout.ViewModeLayoutPage, DesignFactory.DualLayout, Version=1.2.0.0, Culture=neutral, PublicKeyToken=077f92bbf864a536" %>
    2. <%@ Register Tagprefix="SharePointWebControls" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    3.  
    4. <asp:Content ContentPlaceholderID="PlaceHolderAdditionalPageHead" runat="server" />
    5. <asp:Content ContentPlaceholderID="PlaceHolderMain" runat="server">
    6.     The title of the page is: <SharePointWebControls:FieldValue FieldName="Title" runat="server"/>
    7. </asp:Content>


    Notice the Inherits at line one. Instead of inheriting from Microsoft.SharePoint.Publishing.PublishingLayoutPage we need to inherit from DesignFactory.DualLayout.ViewModeLayoutPage. 
  12. Set the html5simple.master master page as the Site Master Page:
    SNAGHTML3b2bb9ee
  13. Set the allowed page layouts to the Html5 Simple Page page layout and set the New Page Default Settings also to Html5 Simple Page so new created pages are also of this page layout.
    image
    Note that the Html5 Simple Page page layout is initially not selectable for New Page Default Settings. Save this configuration page first after selecting the allowed page layouts, then open again and select the default new page.
  14. Under Site Actions select the New Page action. Create a page Home.aspx of the default page layout type Html5 Simple Page.
  15. Set the new created Home.aspx page as Welcome Page.
    SNAGHTML3b50cd15
  16. Navigate to the site http://cms.html5demo.local and see the home page in the WCM display and edit mode.
    imageimage
  17. Select Switch to View Mode under Site Actions to see the resulting page in view-mode. Select the three dots (…) at the right side of the menu to switch back to WCM-mode.
    SNAGHTML3dfe1804
  18. Have a look at the source view of the resulting web page and admire the clean HTML. No SharePoint specific markup or CSS files!
    Clean HTML in page
    3. <!DOCTYPE html>
    4. <html class="no-js">
    6.     <head>
    7.         <meta charset="utf-8" />
    8.         <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    9.         <title>Home</title>
    11.         <script type="text/javascript">
    12.             document.createElement('header');
    13.             document.createElement('nav');
    14.             document.createElement('article');
    15.             document.createElement('hgroup');
    16.             document.createElement('aside');
    17.             document.createElement('section');
    18.             document.createElement('footer');
    19.             document.createElement('figure');
    20.             document.createElement('time');
    21.         </script>
    23.         
    24.     </head>
    25.     
    26.     <body>
    27.         
    28.         <header>
    29.             <div class="logo">Logo</div>
    30.             <h1>SiteTitle</h1>
    31.             <nav>
    32.                 <a href="#">SiteMenu 1</a>
    33.                 <a href="#">SiteMenu 2</a>
    34.                 <a href="#">SiteMenu 3</a>
    35.                 <a href="#">SiteMenu 4</a>
    36.                 <a href="#">SiteMenu 5</a>
    37.                 <a href="/Pages/Home.aspx?DualLayout_ShowInWcmMode=true">…</a>
    38.             </nav>
    39.             <div class="tagline">Tagline</div>
    40.             <form>
    41.                 <label>Zoek</label>
    42.                 <input type="text" placeholder="Voer een zoekterm in...">
    43.                 <button>Zoek</button>                
    44.             </form>
    46.         </header>
    47.         
    48.         <div class="content">
    49.             <div class="pageContent">
    50.                 
    51.     The title of the page is: Home
    53.             </div>
    54.         </div>
    55.     
    56.         <footer>
    57.             <nav>
    58.                 <ul>
    59.                     <li><a href="#">FooterMenu 1</a></li>
    60.                     <li><a href="#">FooterMenu 2</a></li>
    61.                     <li><a href="#">FooterMenu 3</a></li>
    62.                     <li><a href="#">FooterMenu 4</a></li>
    63.                     <li><a href="#">FooterMenu 5</a></li>
    64.                 </ul>
    65.             </nav>
    66.             <small>Copyright &copy; 2011 Macaw</small>
    67.         </footer>
    68.     </body>
    69. </html>
    71. <!-- Macaw DesignFactory DualLayout for SharePoint 2010 Trial version -->


    Note the link at line 37, this link will only be rendered for authenticated users and is our way to switch back to WCM-mode.

This concludes our quick start to get DualLayout up an running in a matter of minutes. And what is the result:

  • You can have the full SharePoint 2010 WCM publishing page editing experience to manage the content in your pages.
  • You don’t have to delve into large SharePoint specific master pages and page layouts with a lot of knowledge of the does and don'ts with respect to SharePoint controls, scripts and stylesheets.
  • The end-user gets a clean and light HTML page.

Get your fully functional, non-timebombed trial copy of DualLayout and start creating!

3 Comments

  • Hi,

    I'm evaluating this solution in my farm. It works great!

    I tried deploying the solution in a sandboxed evnironment but didn't work. Do you have any version that work with sandboxed solutions?

    Thanks!

  • I really like your blog.. very nice colors & theme.
    Did you design this website yourself or did you hire someone to do it
    for you? Plz respond as I'm looking to design my own blog and would like to know where u got this from. cheers

  • I'm really impressed with your writing skills as well as with the layout on your weblog. Is this a paid theme or did you customize it yourself? Either way keep up the nice quality writing, it is rare to see a great blog like this one nowadays.

Comments have been disabled for this content.