duallayout - Developer IT

Macaw DualLayout for SharePoint 2010 WCM released!

- by svdoever

A few months ago I wrote a blog post about the DualLayout component we developed for SharePoint Server 2010 WCM. DualLayout enables advanced web design on SharePoint WCM sites. See the blog post DualLayout - Complete HTML freedom in SharePoint Publishing sites! for background information. DualLayout if now available for download. Check out DualLayout for SharePoint 2010 WCM and download your fully functional trial copy! Enjoy the freedom!

Read the article

DualLayout for SharePoint 2010 WCM Quick Start

- by svdoever

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. Create an authenticated web application with hostheader cms.html5demo.local on port 80 for the cms side of the site. Click the Create Site Collection link on the Application Created dialog box and create a Site Collection based on the Publishing Portal site template. 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. Add the following line to the hosts file: 127.0.0.1 cms.html5demo.local Navigate to the site at http://cms.html5demo.local to see the out-of-the-box example Adventure Works publishing site. Download and add the DualLayout solution package designfactory.duallayout.sps2010.trial.1.2.0.0.wsp to the farm’s solution store: On the Start menu, click All Programs. Click Microsoft SharePoint 2010 Products. Click SharePoint 2010 Management Shell. At the Windows PowerShell command prompt, type the following command:Add-SPSolution -LiteralPath designfactory.duallayout.sps2010.trial.1.2.0.0.wsp In SharePoint 2010 Central Administration deploy the solution to the web application http://cms.html5demo.local. 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: Open the site http://cms.html5demo.local in SharePoint Designer 2010. Create a view-mode masterpage html5simple.master with the following code: html5simple.master <%@ Master language="C#" %> <%@ Register Tagprefix="SharePointWebControls" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register TagPrefix="sdl" Namespace="DesignFactory.DualLayout" Assembly="DesignFactory.DualLayout, Version=1.2.0.0, Culture=neutral, PublicKeyToken=077f92bbf864a536" %> <!DOCTYPE html> <html class="no-js"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> <title><SharePointWebControls:FieldValue FieldName="Title" runat="server"/></title> <script type="text/javascript"> document.createElement('header'); document.createElement('nav'); document.createElement('article'); document.createElement('hgroup'); document.createElement('aside'); document.createElement('section'); document.createElement('footer'); document.createElement('figure'); document.createElement('time'); </script> <asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server"/> </head> <body> <header> <div class="logo">Logo</div> <h1>SiteTitle</h1> <nav> <a href="#">SiteMenu 1</a> <a href="#">SiteMenu 2</a> <a href="#">SiteMenu 3</a> <a href="#">SiteMenu 4</a> <a href="#">SiteMenu 5</a> <sdl:SwitchToWcmModeLinkButton runat="server" Text="…"/> </nav> <div class="tagline">Tagline</div> <form> <label>Zoek</label> <input type="text" placeholder="Voer een zoekterm in..."> <button>Zoek</button> </form> </header> <div class="content"> <div class="pageContent"> <asp:ContentPlaceHolder id="PlaceHolderMain" runat="server" /> </div> </div> <footer> <nav> <ul> <li><a href="#">FooterMenu 1</a></li> <li><a href="#">FooterMenu 2</a></li> <li><a href="#">FooterMenu 3</a></li> <li><a href="#">FooterMenu 4</a></li> <li><a href="#">FooterMenu 5</a></li> </ul> </nav> <small>Copyright © 2011 Macaw</small> </footer> </body> </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. Create a WCM-mode page layout html5simplePage-wcm.aspx with the following code: html5simplePage-wcm.aspx <%@ Page language="C#" Inherits="DesignFactory.DualLayout.WcmModeLayoutPage, DesignFactory.DualLayout, Version=1.2.0.0, Culture=neutral, PublicKeyToken=077f92bbf864a536" %> <%@ Register Tagprefix="SharePointWebControls" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="PublishingWebControls" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="PublishingNavigation" Namespace="Microsoft.SharePoint.Publishing.Navigation" Assembly="Microsoft.SharePoint.Publishing, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <asp:Content ContentPlaceholderID="PlaceHolderPageTitle" runat="server"> <SharePointWebControls:FieldValue id="PageTitle" FieldName="Title" runat="server"/> </asp:Content> <asp:Content ContentPlaceholderID="PlaceHolderMain" runat="server"> </asp:Content> Notice the Inherits at line two. Instead of inheriting from Microsoft.SharePoint.Publishing.PublishingLayoutPage we need to inherit from DesignFactory.DualLayout.WcmModeLayoutPage. Create a view-mode page layout html5simplePage.aspx with the following code: html5simplePage.aspx html5simplePage.aspx <%@ Page language="C#" Inherits="DesignFactory.DualLayout.ViewModeLayoutPage, DesignFactory.DualLayout, Version=1.2.0.0, Culture=neutral, PublicKeyToken=077f92bbf864a536" %> <%@ Register Tagprefix="SharePointWebControls" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="PublishingWebControls" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="PublishingNavigation" Namespace="Microsoft.SharePoint.Publishing.Navigation" Assembly="Microsoft.SharePoint.Publishing, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <asp:Content ContentPlaceholderID="PlaceHolderAdditionalPageHead" runat="server" /> <asp:Content ContentPlaceholderID="PlaceHolderMain" runat="server"> The title of the page is: <SharePointWebControls:FieldValue id="PageTitleInContent" FieldName="Title" runat="server"/> </asp:Content> Notice the Inherits at line two. Instead of inheriting from Microsoft.SharePoint.Publishing.PublishingLayoutPage we need to inherit from DesignFactory.DualLayout.ViewModeLayoutPage. Set the html5simple.master master page as the Site Master Page 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. 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. Under Site Actions select the New Page action. Create a page Home.aspx of the default page layout type Html5 Simple Page. Set the new created Home.aspx page as Welcome Page. Navigate to the site http://csm.html5demo.local and see the home page in the WCM display and edit mode. 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. 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 <!DOCTYPE html> <html class="no-js"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> <title>Home</title> <script type="text/javascript"> document.createElement('header'); document.createElement('nav'); document.createElement('article'); document.createElement('hgroup'); document.createElement('aside'); document.createElement('section'); document.createElement('footer'); document.createElement('figure'); document.createElement('time'); </script> </head> <body> <header> <div class="logo">Logo</div> <h1>SiteTitle</h1> <nav> <a href="#">SiteMenu 1</a> <a href="#">SiteMenu 2</a> <a href="#">SiteMenu 3</a> <a href="#">SiteMenu 4</a> <a href="#">SiteMenu 5</a> <a href="/Pages/Home.aspx?DualLayout_ShowInWcmMode=true">…</a> </nav> <div class="tagline">Tagline</div> <form> <label>Zoek</label> <input type="text" placeholder="Voer een zoekterm in..."> <button>Zoek</button> </form> </header> <div class="content"> <div class="pageContent"> The title of the page is: Home </div> </div> <footer> <nav> <ul> <li><a href="#">FooterMenu 1</a></li> <li><a href="#">FooterMenu 2</a></li> <li><a href="#">FooterMenu 3</a></li> <li><a href="#">FooterMenu 4</a></li> <li><a href="#">FooterMenu 5</a></li> </ul> </nav> <small>Copyright © 2011 Macaw</small> </footer> </body> </html>  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!

Read the article

DualLayout OpenSourceFood demo site installation instructions

- by svdoever

We released DualLayout which enables advanced web design with the power of SharePoint. DualLayout and a demo site can be downloaded from the DualLayout product page. This blogpost contains detailed instructions on installing the demo site. The demo site is based on the site http://opensourcefood.com. The demo site requires internet access because it still links to pages and resources of the real site. Execute the following steps to install the demo site: Copy the OpenSourceFoodDemo.zip file to your SharePoint Server 2010 Make sure that the zip file in “unblocked”, otherwise files are assumed from other computer (right-click on zip file, press “Unblock” button if available) Unzip the OpenSourceFoodDemo.zip to a folder of your choice (c:\OpenSourceFoodDemo) Open the SharePoint Start->Microsoft SharePoint 2010 Products->SharePoint 2010 Management Shell Change directory to the unzip folder (cd c:\OpenSourceFoodDemo) Start install script: .\InstallDemoSite.ps1 Answer the questions, default values in most cases ok. A little guidance: Question: Give credentials for the account that will be used for the application pool Answer: use for example same account as used for the application pool of your SharePoint site (lookup in IIS Manager) Question: Give credentials for the account that will be used for the application pool Answer: Use same account you are currently logged in with The demo site is made available through a backup and restore. The SharePoint Server 2010 installation must be patched to a level equal or higher to the update level on the SharePoint Server used to create the backup. If you get errors with respect to restore check http://technet.microsoft.com/en-us/sharepoint/ff800847.aspx for downloading the latest cumulative update.

Read the article

SharePoint.DesignFactory.ContentFiles–building WCM sites

- by svdoever

One of the use cases where we use the SharePoint.DesignFactory.ContentFiles tooling is in building SharePoint Publishing (WCM) solutions for SharePoint 2007, SharePoint 2010 and Office365. Publishing solutions are often solutions that have one instance, the publishing site (possibly with subsites), that in most cases need to go through DTAP. If you dissect a publishing site, in most case you have the following findings: The publishing site spans a site collection The branding of the site is specified in the root site, because: Master pages live in the root site (/_catalogs/masterpage) Page layouts live in the root site (/_catalogs/masterpage) The style library lives in the root site ( /Style Library) and contains images, css, javascript, xslt transformations for your CQWP’s, … Preconfigured web parts live in the root site (/_catalogs/wp) The root site and subsites contains a document library called Pages (or your language-specific version of it) containing publishing pages using the page layouts and master pages The site collection contains content types, fields and lists When using the SharePoint.DesignFactory.ContentFiles tooling it is very easy to create, test, package and deploy the artifacts that can be uploaded to the SharePoint content database. This can be done in a fast and simple way without the need to create and deploy WSP packages. If we look at the above list of artifacts we can use SharePoint.DesignFactory.ContentFiles for master pages, page layouts, the style library, web part configurations, and initial publishing pages (these are normally made through the SharePoint web UI). Some artifacts like content types, fields and lists in the above list can NOT be handled by SharePoint.DesignFactory.ContentFiles, because they can’t be uploaded to the SharePoint content database. The good thing is that these artifacts are the artifacts that don’t change that much in the development of a SharePoint Publishing solution. There are however multiple ways to create these artifacts: Use paper script: create them manually in each of the environments based on documentation Automate the creation of the artifacts using (PowerShell) script Develop a WSP package to create these artifacts I’m not a big fan of the third option (see my blog post Thoughts on building deployable and updatable SharePoint solutions). It is a lot of work to create content types, fields and list definitions using all kind of XML files, and it is not allowed to modify these artifacts when in use. I know… SharePoint 2010 has some content type upgrade possibilities, but I think it is just too cumbersome. The first option has the problem that content types and fields get ID’s, and that these ID’s must be used by the metadata on for example page layouts. No problem for SharePoint.DesignFactory.ContentFiles, because it supports deploy-time resolving of these ID’s using PowerShell. For example consider the following metadata definition for the page layout contactpage-wcm.aspx.properties.ps1: Metadata page layout # This script must return a hashtable @{ name=value; ... } of field name-value pairs # for the content file that this script applies to. # On deployment to SharePoint, these values are written as fields in the corresponding list item (if any) # Note that fields must exist; they can be updated but not created or deleted. # This script is called right after the file is deployed to SharePoint. # You can use the script parameters and arbitrary PowerShell code to interact with SharePoint. # e.g. to calculate properties and values at deployment time. param([string]$SourcePath, [string]$RelativeUrl, $Context) @{ "ContentTypeId" = $Context.GetContentTypeID('GeneralPage'); "MasterPageDescription" = "Cloud Aviator Contact pagelayout (wcm - don't use)"; "PublishingHidden" = "1"; "PublishingAssociatedContentType" = $Context.GetAssociatedContentTypeInfo('GeneralPage') } The PowerShell functions GetContentTypeID and GetAssociatedContentTypeInfo can at deploy-time resolve the required information from the server we are deploying to. I personally prefer the second option: automate creation through PowerShell, because there are PowerShell scripts available to export content types and fields. An example project structure for a typical SharePoint WCM site looks like: Note that this project uses DualLayout. So if you build Publishing sites using SharePoint, checkout out the completely free SharePoint.DesignFactory.ContentFiles tooling and start flying!

Developer IT