Me & My SharePoint [FrontEnd]

© Christian Stahl – All about SharePoint branding & customizations

Design Manager in SharePoint – Part IV — October 31, 2013

Design Manager in SharePoint – Part IV

Welcome to the fourth post in my series about the Design Manager in SharePoint 2013. Please read the previous posts before you read on.

Design Manager in SharePoint 2013 – Part I
Design Manager in SharePoint 2013 – Part II
Design Manager in SharePoint 2013 – Part III

If you followed the previous post you probably have a branding up and running in your developer machine or maybe in SharePoint online.

Snippets

So what is snippets? It’s a special markup that lets you add .net and SharePoint controls directly in your HTML page. You can add web parts, user controls or just any kind of .net control in your layout. It gives a way to separate code from the design. Ok, let’s take a closer look at the snippets. Go to the preview page and click at the Snippets link in top of the page. Let’s take a look at one of the snippets around, the snippet for the global navigation:

1

This snippet generates 3902 characters and if you just take this as it is you will have to work with a heavy cluttered HTML page not least in the fact that you’ll need a number of snippets onto the page. Well, let’s do something about it and clean it up to readable code. Take not that you don’t have to clean this up because SharePoint strips out the comment tags and all unnecessary stuff in this snippet, but if you working in the HTML document with your favorite text editor, the code over all with be easier and more semantic if you clean the snippets.

2

The corresponding master page that’s in sync with the HTML page will contain this:

3

So what can be cleaned up and what’s about all this SPM, MS and ME comments?
SPM = SharePoint namespace registration, you don’t have to use this close to the snippets and not more than one on the page. It’s enough to have the registration in the top of the page
MS = Markup Start, where a control or a place holder starts
ME = Markup End, where a control or a place holder ends

If you need to add web parts or user controls onto the HTML page, just wrap them the same way as described above, and don’t forget to add the register name space.
I have created a text file containing a pure SharePoint generated snippet for the global navigation and a cleaned version, so it’s just to compare. Download this file here
There’s are more comments you can use, read more about it this at MSDN

That’s all in this series!
/ Christian

Design Manager in SharePoint – Part III — September 29, 2013

Design Manager in SharePoint – Part III

Welcome to this third post in my series about the Design Manager in SharePoint 2013. Please read the previous two posts before you read on testing this post.

Design Manager in SharePoint 2013 – Part I
Design Manager in SharePoint 2013 – Part II

Assuming you have read my previous post about how to map the master page gallery and how to convert your branding assets with help of the Design Manger, you’re now ready to convert your branding assets. If everything works fine including adding snippets, the next step should be to style the snippets so they should have the same look and feel as your original HTML design.

You can download a complete example of a pure HTML branding as well as the result by the Design Manager conversion within a few cleaned snippets. You’ll find the links at the end of this post.

SOL

The next step after you have uploaded and converted your HTML mockup and added the snippets you need, is to create some override CSS classes to make the snippets looks like your mockup. That’s because the snippets inherit their style from SharePoint’s CSS files

For example, let’s say that your HTML looks like this for the top navigation:

<ul class="globalnavigation">
	<li>Services</li>
	<li>About Us</li>
</ul>

When you add the navigation snippet, SharePoint generates this markup:

DOM-explorer

In order to get the snippet to looks like your mockup you’ll need to add some CSS to override what SharePoint renders. Use IE developer toolbar for this task.

Version 0.1

This design is created specific for this blog post and are not fully tested in every scenario or in all browsers and versions, please see this as a first version, and of course, feel free to use it and modify it in the way you want.

I have uploaded this branding at my public SharePoint Online site with help of the WSP file, take a look here: http://swe-public.sharepoint.com

Download the HTML Mockup
Download the Design Manager Converted files
Download the WSP

You can upload the branding files with a WSP file in SharePoint, but if this is about SharePoint Online and a public web site, you will not find any link to the user solution page through the browser, you need to specify this in the URL field: https://-public.sharepoint.com/_catalogs/solutions a public SharePoint online is a bit limited compared to an Intranet site collection in the cloud, but we can count of an evolution in the future.

Next step, detaching the HTML file

I’ll write more about how you can detach the HTML file from its corresponding master page in the next article. Detaching is necessary if you want to include the branding in a Visual Studio branding feature or if you want do edit for example the master page with SharePoint Designer 2013.

Next post [Part IV]

There’s a lot of stuff to cover about the Design Manager, preliminary next up will cover more on snippets and how you can wrap ASP.Net and you own controls into an converted HTML page, how to include web part zones and how to detach the HTML file from its Master Page.

Christian

Design Manager in SharePoint – Part II — August 31, 2013

Design Manager in SharePoint – Part II

This is the second post in my series about the Design Manager in SharePoint 2013. Please read the first post before you go on to this post. Design Manager in SharePoint 2013 – Part I

Before uploading your design files to SharePoint, be sure you follow this recommendations:

  • Valid and XML-compliant HTML
  • No inline CSS, style tags will be removed by the design manager. Use an external CSS file
  • Use an external JS file referenced from the HTML file

I do also recommend you to have SharePoint in your mind when you creating the HTML outside SharePoint, create empty containers for the components and controls much as close to how SharePoint works. Add comments so you know where you should put the snippets etc.

When you upload your design files (HTML/CSS/Images/JS) to the Master Page Gallery, keep all your files in one single folder. In this example I have named my folder to HQ Design.

Map Master Page Gallery

Soon as your branding files are ready to be uploaded in SharePoint, map a network drive to the folder where the master pages lives, the Master Page Gallery (_catalogs). Take a look how to map a drive here: http://msdn.microsoft.com/en-us/library/office/jj733519(v=office.15).aspx this will makes it easier to upload and work with the branding files later on. The path would be something like \\YourSite\_catalogs\masterpage
netdrive
When you have map the master page folder, drop the folder with your branding files in this drive. Once this are done, it’s time to try out the design manager!

Convert an HTML file with the Design manager

  • Use the browser and go your publishing site’s site settings and click the link Design Manager
  • In the left navigation, click ‘4. Edit Master Page’
  • Click ‘Convert an HTML file to a SharePoint master page’
  • In the dialog, click at your folder (HQ Branding) and then click at the index.html file and click the insert button. If everything ok you should see the status ‘conversion successful’.
  • Click at the dots next to index, and the dots in the dialog and select Publish a Major Version. Select OK.
    PublishMaster
  • Open a new tab in the browser and go the start page of your site. Go to site settings and click Master page. Specify the new master page in both as site master and system master. Mark both reset check boxes and click OK.

Your branding should now be applied onto the SharePoint user interface. Use the browser to see the files, Site settings > Master pages and page layouts. Open your folder to view the files. It’s perhaps easy to get lost in the user interface now when the new branding are applied. Remember that everything related to the Design manager for example snippets will be found from the Design manager start page /_layouts/15/DesignMasterPages.aspx.

Then it’s just to click at your file to get it open in the preview mode. You’ll find the Snippets as a link right to the top of the page. Ok, now on to the next step, add the necessary SharePoint controls and content sections in your HTML file.
snippetsRibbon

Create snippets

  • Go to the preview page of your branding,  /_layouts/15/DesignMasterPages.aspx and click at the filename for example index
  • Click at Top Navigation and copy the HTML
  • Open your index HTML file in the master page gallery from the mapped network drive. You can use for example Dreamweaver or the tool of your choice.
  • Locate the section in the markup where you want to put the snippet and just paste the snippet here
  • Save the HTML file, open the browser and verify that your changes have been updated
  • You’ll also need to create some CSS for all controls you add onto the page, use IE developer toolbar or Firebug to see the HTML that renders and the name of the CSS classes
  • Once your done with the first snippet it’s just to get on with the next snippet, for example the Search Box

WSP

When you are done with your branding you can create a package of all your branding files into one single WSP file (User solution).

  • Use the browser and go to the Design manager
  • Click at the last step in the left navigation, Create Design Package
  • Click Create, now it can take some time to build this. After a while you will see a new link named ‘Your package is ready…’ Click at the link to download the file
  • The solutions you have created or uploaded can be found from Site settings > Solution /_catalogs/solutions/Forms/AllItems.aspx

Is Design manager the replacement for SharePoint Designer & Visual Studio?

As so often in the world of SharePoint, it depends. See the design manager as a new alternative to the traditional approaches, it’s up you and it depends of scenario. You don’t have to use the Design manager if you already are experienced with branding in SharePoint 2010 and before with SPD or VS, but it could be a great option for you when it comes to creations of quick mockups in SharePoint or if you just prefer to build the HTML wireframes outside SharePoint. I do also think the design manager is great and valuable for a public faced site upon SharePoint online because it’s possibilities to just upload the design as a user solution.

Next post [Part III]

In the next post I’ll publish a example branding including a few SharePoint components you can download and try out and I’ll upload a WSP of this as well. The next post will also include some tips & tricks about Snippets that I think can be useful for you.

Design Manager in SharePoint – Part III

Christian

Design Manager in SharePoint 2013 – Part I — July 20, 2013

Design Manager in SharePoint 2013 – Part I

Recently, I have shown the design Manager in workshops and other presentations and experienced that the audience is interested and want to get started and use this tool when designers should be developed, so I thought that writing a few blog posts in a series of two entries with the aim that you should be able to get started step by step but also you can download a complete example from a HTML based on the latest standards, including CSS and JS.

DesignManager

The design manager is a new feature in SharePoint (On-Prem – standard & enterprise and SharePoint Online) and provides a new approach for branding SharePoint 2013 interfaces. It is quite easy to work with and you will pretty quickly be able to create an awesome branding for your SharePoint environment without the need of longer experience of components in the SharePoint user interface such as NET controls or master pages in depth. Note that you can still create your branding as you did in previous versions of SharePoint by using SharePoint Designer or Visual Studio.

  • Create your branding outside SharePoint with tools like Dreamweaver
  • Import the branding files to SharePoint and it will be automatically converted to valid SharePoint master page format
  • Add SP controls like search box, site name
  • Import & Export the branding as an user solution (WSP)
  • Ability to create mockups based on templates

The following posts will include:

Part II

  • A concrete example: Design manager walkthrough step by step
  • When should you use the Design Manager and when you should use SharePoint Designer or Visual Studio instead

Part III

  • A complete downloadable example including a HTML, MasterPage, Page Layouts, CSS, JS and Images
  • Snippets and their syntax & some tips n tricks
  • References to more information about the design manager and links to other blogs in this topic

If you’re about to get started with the design manager or if you are considering which method to use for your SharePoint branding I hope you will enjoy the following posts. Stay in tune for the next post which will be published shortly

This series contains so far by this posts:

Part I (This post)
Design Manager in SharePoint – Part II

/ Christian