The Design Manager is a new feature of SharePoint 2013 Server that allows you to easily create you SharePoint branding artefacts (Master Pages, Page Layouts, CSS,…) and to package these artefacts in such way that they can easily be deployed to other environements (Test, Production,…).
There is a clear overlap between the SharePoint Designer functionalities and the Design Manager functionalities.
Let’s take a look at how the Design Manager works and then we will see if we can leverage it from Visual Studio.
If you did activate the publishing features as requested in the previous post then the Design Manager is avalailable:
One time (bug?) this menu item was not visible, but in any case you can find the Design Manager menu item right here:
Now, let’s click the Design Manager menu item, and click on Edit Page Layouts:
next click on Create Page Layout.
Fill in the PageLayout Name, the Master Page (to make sure the associated PlaceHolder will be managed in the Page Layout), and the content type you want your Page Layout to be associated with :
Click ok. A generated Html page will show up in draft mode :
The benefit of this is that you can use your favorite html editor(many people like Dreamweaver) page to modify the Page Layout and the modification will be reflected in an associated .aspx page which is generated behind the cover.
Indeed, let’s map this gallery to new drive with Windows :
Now you will be able to see the 2 generated pages in in Windows Explorer; don’t modify/touch the aspx page, only modify the html page and a new aspx page (the real layout page) will automatically be generated (the same logic apply if you create a Master Page with the Design Manager).
Let’s open the JobPostingDM.html page with your favorite html editor (in my case I will use Visual Studio).
The page is a mixture of pure html code and commented aspx
For instance in the html file, remove the following selection that displays the Title field in the Page Title:
As soon as you do it, the modification will be reflected in the associated aspx page:
Now, let’s create a new Page Content from our new JobPosting page and you will see that everything works as expected.
When saved, the page looks like this:
There are no fields labels.
So update the html file with the following spans :
When you make any modification to the html file, don’t forget to Publish a Major version of the file (in the Master Page and Page Layouts gallery).
Save and redeploy the package with Design Manager
Go to Design Manager, and select option 8 : Create Design Package
Click Create, this will generate a User Solution Package that you can download on your workstation and redeploy to another Site Collection. Let’s downoad it.
After this, create a new test site collection (Choose one based on the publishing features like the Portal).
Upload and activate the generated package. The Job Posting Page layout content type and the associated Page layout are available !
So you dont really need to redeploy them by creating a Custom Solution Package with Visual Studio. You can use the generated package or you can customize it.
To figure out what this package looks like, create a new (SharePoint) Visual Studio Project and use the SharePoint 2013-Import Solution Package template :
When requested, specify the Solution Package you did download.
After that, a project containing the following artefacts will be generated:
Basically, all (related) Page Layout content types (including our JobPosting content type) have been generated :
Our Customized page layouts are also part of the project:
The associated elements.xml file provides the CAML module instructions to upload the pages :
There are more artefacts than jist the Page Layout stuff : for instance we also get the Custom Device channels artefacts & lists, the custom master pages, the custom Composed looks.
You can of course remove what you want from the project and only keep what you need.
So I really thing that using the Design Manager approach is more productive than creating everyting from scratch as we did in the previous post. Only Time will tell…Don’t hesitate to share your experience.