SharePoint 2013Building Websites

Agenda• Design Manager• Master Pages• Page Layouts• Device Channels• Design Packages• Demo

Design Manager• What ?

o Feature for 2013 that helps to design SharePoint sites (Publishing sites)

• Why ?o Use existing Web design tools/HTML editors

• How ?o Upload existing design into Design Managero Insert SharePoint “snippets” of functionalityo Provides Preview at each step to help build design

Design Manager

*Map network drive to path shown in ‘Upload Design files’ section

Master Page : StepsA master page has the common design elements of the entire websites, like a template.

The steps for building a master page are:

1. Convert an HTML file into a SharePoint master page2. Preview the master page and fix any issues3. Add SharePoint snippets to the master page

Master Pages : Conversion• Design Manager Makes it easier to build Master pages• Convert HTML file to .master file :

o A .master file with the same name as your HTML file is created in the Master Page Galleryo All markup required by SharePoint 2013 is added to the .master file so that the master page

renders correctlyo Markup such as comments, <div> tags, snippets, and content placeholders are added to your

original HTML fileo The HTML file and master page are associated

• The syncing goes in one direction only. Changes to the HTML master page are synced to the associated .master file. Possible to break association.

Master Pages: Preview• Preview mode is available• Used to fix errors and warning during & after conversion• Particular Preview page can be chosen

Master Pages: Snippets• Used to add SharePoint functionality (search, navigation, etc. )

• Snippets added from Snippet Gallery. The Snippet Gallery is a page in Design Manager where you can:1. Choose a SharePoint component from those available on the ribbon.2. Configure the properties for that component.3. Preview its appearance in the browser.4. Copy the HTML code snippet to the Clipboard so that you can paste the snippet at the location

you want in the HTML file.

Master Page: Markup• Types of markup in Master Page:

o Document properties • <mso> tag contains SharePoint metadata• Ex: <mso:HtmlDesignAssociated msdt:dt="string">1</mso:HtmlDesignAssociated>

o SharePoint namespace registration• The <SPM> tag ("SharePoint markup") provides a line registering a SharePoint namespace• Ex: <!--SPM:<%@Register Tagprefix="SharePoint"

Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->

o Comments• The <CS> and <CE> ("Comment start" and "comment end") tags are ignored during the

conversion process. These tags are to help you parse the lines of markup• Ex: <!--CS: Start Page Head Contents Snippet--> … <!--CE: End Page Head Contents Snippet--

>

Master Page: Markup• Types of markup in Master Page:

o Snippets• The <MS> and <ME> ("markup start" and "markup end") tags denote the beginning and end

of a SharePoint control or a snippet. A snippet is a SharePoint control that adds SharePoint functionality to your page

• Ex: <!--MS:<SharePoint:RobotsMetaTag runat="server">-->         <!--ME:</SharePoint:RobotsMetaTag>-->

o Preview blocks • The <PS> and <PE> ("Preview start" and "preview end") tags surround a section of HTML

code that you shouldn't edit because this section affects only the design-time preview. These preview sections are a snapshot in time of the SharePoint control that snippet is inserting.

• Ex: <!--PS: Start of READ-ONLY PREVIEW (do not modify) --> <div class="DefaultContentBlock" style="background:rgb(0, 114, 198); color:white;

width:100%; padding:8px; height:64px; overflow:hidden;">The SharePoint ribbon will be here when your file is either

previewed on or applied to your site.</div> <!--PE: End of READ-ONLY PREVIEW -->

Page Layouts: StepsPage Layouts help to unify the common business requirements into a a single type of page, thus creating category of page design.

Steps for creating page layout:

1. Create Page Layout using Design manager2. Preview the page layout and fix any issues by editing and saving

the HTML version.3. Add snippets to the page layout (configure, copy, preview, style).

Page Layout : Create • Create in Design Manager• The primary purpose of a page layout is to contain page fields, and

these page fields must get added when the page layout is created in Design Manager.

• When you create a page layout:1. An .aspx file and an HTML file with the same name are created in the Master Page Gallery.2. All markup required by SharePoint is added to the .aspx file so that the page layout renders

correctly.3. Other markup such as comments, <div> tags, snippets, and content placeholders are added to

the HTML file.4. Page fields unique to the content type are added automatically to the page layout. Other page

fields are available to be added from the ribbon in the Snippet Gallery.5. The HTML file and the .aspx file are associated, so that any later edits to the HTML file are

synced to the .aspx file whenever the HTML file is saved. Other markup such as comments, <div> tags, snippets, and content placeholders are added to the HTML file.

Page Layout : Preview and add Snippets

Remaining Steps same as Master Page:2. Preview the page layout and fix any issues by editing and saving

the HTML version.3. Add snippets to the page layout (configure, copy, preview, style).

Design Manager : Device Channels

What?Render content, style, images across different devices maintaining

the same URL.

Why?Content is created one single time but rendered on different devices

with different Master Page, Page Layout, styles, etc.

How?User agent substring (device browser) is used to determine how or

what to render. Configured in the Device Manager through Device Inclusion rules.

Design Manager : Device Channels

Device Channel Configuration• Configuration done through User Agent substrings of devices• Ex:Mozilla/5.0 (Linux; U; Android 4.0.3; ko-kr; LG-L160L Build/IML74K) AppleWebkit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30Mozilla/5.0 (Linux; U; Android 4.0.3; de-ch; HTC Sensation Build/IML74K) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30

List of all User Agent substrings : http://www.useragentstring.com/pages/Mobile%20Browserlist/

Drawbacks and alternatives• Device Channels have the drawback that it targets user

agent/browser. This biggest drawback of this approach is that a device can have multiple browsers and new device channels may need to be added for ne devices.

• Alternatives:o A more agnostic solution is use Responsive Design.o A hybrid approach can also be used where primary approach is Responsive

design and legacy devices or browsers can be supported through device channels.

Design Packages• Helps to import/export Design created in sites• It is a SharePoint solution package (.wsp file)

Design Packages : What is in it ?

Export Location Exported Assets

Document libraries • Master Pages Gallery• Themes Gallery• Style Library• Site Assets Library

Content types, fields • Content types that inherit from the Page content type

Lists • Design Gallery• Composed looks• Device channels

Summary of design package contents and file exportation locations

SharePoint Farm

Controlling Master page and page layouts from App

Provider Hosted Apps

Master PagePage layouts

1

3

2

CSOM/REST

• Upload master page

• Upload page layouts

• Set site master page using CSOM

• Set page layouts• Set allowed site

templates

Updating Branding AfterwardsReference architecture for branding management

• Implement branding controlling logic to a reusable component, which can be called from the app and from other solutions• Provides reusability and easy maintenance• Could also be PowerShell scripts

Guidance & Samples for Branding and Provisioning

Remote Provisioning Pattern : • https://msdn.microsoft.com/en-us/library/office/dn985872.aspx• http://blogs.msdn.com/b/vesku/archive/2013/08/23/site-provisioning-technique

s-and-remote-provisioning-in-sharepoint-2013.aspx• https://www.youtube.com/watch?v=Jh7syofhNkg

Samples:• https://

github.com/OfficeDev/PnP/tree/master/Samples/Branding.ApplyBranding • https://

github.com/OfficeDev/PnP/tree/master/Samples/Branding.DisplayTemplates • https://

github.com/OfficeDev/PnP/tree/master/Samples/Branding.InjectResponsiveCSS

References• Overview of Design Manager in SharePoint 2013 (https://

msdn.microsoft.com/en-us/library/office/jj822363.aspx)• Overview of the SharePoint 2013 page model (https://

msdn.microsoft.com/EN-US/library/office/jj191506.aspx)• SharePoint 2013 Design Manager design packages (https://

msdn.microsoft.com/EN-US/library/office/jj862342.aspx)• SharePoint 2013 Design Manager snippets (https://

msdn.microsoft.com/EN-US/library/office/jj822367.aspx)• SharePoint 2013 Design Manager device channels (https://

msdn.microsoft.com/EN-US/library/office/jj862343.aspx)