Archives

Archives / 2011 / March
  • 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

    9. Open the site http://cms.html5demo.local in SharePoint Designer 2010.
    10. 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.
    11. 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
    12. 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
    13. Set the html5simple.master master page as the Site Master Page:
      SNAGHTML3b2bb9ee
    14. 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.
    15. Under Site Actions select the New Page action. Create a page Home.aspx of the default page layout type Html5 Simple Page.
    16. Set the new created Home.aspx page as Welcome Page.
      SNAGHTML3b50cd15
    17. Navigate to the site http://cms.html5demo.local and see the home page in the WCM display and edit mode.
      imageimage
    18. 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
    19. 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
      1. <!DOCTYPE html>
      2. <html class="no-js">
      3.     <head>
      4.         <meta charset="utf-8" />
      5.         <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
      6.         <title>Home</title>
      7.         <script type="text/javascript">
      8.             document.createElement('header');
      9.             document.createElement('nav');
      10.             document.createElement('article');
      11.             document.createElement('hgroup');
      12.             document.createElement('aside');
      13.             document.createElement('section');
      14.             document.createElement('footer');
      15.             document.createElement('figure');
      16.             document.createElement('time');
      17.         </script>
      18.         
      19.     </head>
      20.     
      21.     <body>
      22.         
      23.         <header>
      24.             <div class="logo">Logo</div>
      25.             <h1>SiteTitle</h1>
      26.             <nav>
      27.                 <a href="#">SiteMenu 1</a>
      28.                 <a href="#">SiteMenu 2</a>
      29.                 <a href="#">SiteMenu 3</a>
      30.                 <a href="#">SiteMenu 4</a>
      31.                 <a href="#">SiteMenu 5</a>
      32.                 <a href="/Pages/Home.aspx?DualLayout_ShowInWcmMode=true">…</a>
      33.             </nav>
      34.             <div class="tagline">Tagline</div>
      35.             <form>
      36.                 <label>Zoek</label>
      37.                 <input type="text" placeholder="Voer een zoekterm in...">
      38.                 <button>Zoek</button>                
      39.             </form>
      40.         </header>
      41.         
      42.         <div class="content">
      43.             <div class="pageContent">
      44.                 
      45.     The title of the page is: Home
      46.             </div>
      47.         </div>
      48.     
      49.         <footer>
      50.             <nav>
      51.                 <ul>
      52.                     <li><a href="#">FooterMenu 1</a></li>
      53.                     <li><a href="#">FooterMenu 2</a></li>
      54.                     <li><a href="#">FooterMenu 3</a></li>
      55.                     <li><a href="#">FooterMenu 4</a></li>
      56.                     <li><a href="#">FooterMenu 5</a></li>
      57.                 </ul>
      58.             </nav>
      59.             <small>Copyright &copy; 2011 Macaw</small>
      60.         </footer>
      61.     </body>
      62. </html>
      63. <!-- 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!