SharePoint Office 365 Dev 200 Training By: Toby McGrail Sr. Software Engineer SharePoint Office 365 Dev 200 Training

Agenda Introduction Design Manager Editing Master Pages Previewing Master Pages Page Layouts Master Page Libraries Display Templates Snippets Questions?

Introduction My name is Toby McGrail and I have been a Senior SharePoint Administrator over the last three years however been deeply involved in SharePoint for 8 years and counting. Outside of SharePoint I have balanced lifestyle that includes my family, friends, and Fitness. Fitness and SharePoint are my passion. Over 20 years IT Experience

Design Manager Design Manager is a feature in SharePoint 2013 and SharePoint Online that makes it easier to create a fully customized, pixel-perfect design while using the web-design tools that you're already familiar with. Design Manager is a publishing feature that is available in publishing sites in both SharePoint Server 2013 and Office 365. You can also use Design Manager to brand the public-facing website in Office 365. With Design Manager, you can create a visual design for your website by using whatever web design tool or HTML editor you prefer, using only HTML and CSS, and then upload that design into SharePoint. Design Manager is the central hub and interface where you manage all aspects of a custom design. Creating the visual design of a site often fits into a larger process, in which multiple people or organizations are involved. For a roadmap of the tasks from a larger perspective, see Design and branding in SharePoint 2013

Editing Master Pages Creating a fully branded master page that contains all of the SharePoint functionality that you want, such as navigation and search, is basically a three-step process: Convert an HTML file into a SharePoint master page. Preview the master page and fix any issues. Add SharePoint snippets to the master page. Each of these three steps is performed on a different page in Design Manager. Convert an HTML file The core feature of Design Manager is that it converts your HTML design into a SharePoint master page. To render successfully, a SharePoint master page must contain many ASP.NET elements and elements that are specific to SharePoint. When you convert an HTML file to a master page, Design Manager creates a .master file that contains all of these required elements, so that you don't have to know about them. During conversion, some HTML markup (such as comments) also gets added to your original HTML file. After the conversion, your HTML file and the SharePoint master page are associated, so that when you edit and save the HTML file in your mapped drive, the master page is updated automatically. In Design Manager, the HTML master page has a property named Associated File that determines whether changes to the HTML file are synced to the .master file. Design Manager also provides an option to begin your design by using a minimal master page. In this scenario, you don't have to begin with an HTML design; instead, you can create an HTML master page that contains the minimum page elements necessary to render the master page correctly in SharePoint, and then build out your design by editing the HTML master page.

Previewing Master Pages In addition to converting your master page, Design Manager provides a server-side preview (vs. the design-time preview in your HTML editor), so that you can get a live preview of your master page and fix any issues that might prevent the page from rendering. For example, your HTML file must be XML-compliant, so you may have to fix minor markup issues such as providing closing tags for all elements. To fix any issues, you should edit the HTML file, save it, and then refresh the server-side preview. When you preview a master page, you can use the Change Preview Page option in the top-left corner to preview the master page along with any existing page, or create a new page to preview with. Unlike the design-time preview of your HTML master page in an HTML editor, this server-side preview is a fully functional live preview, so you may prefer to edit the HTML file, save it so that the latest changes are synced to the associated .master file, and refresh the live preview and view your latest design changes in the browser.

Page Layouts Page layouts are templates for pages in SharePoint. They are very useful as you can control page elements and give your site pages a consistent look and feel. You can surface metadata and custom columns in these layouts like “title” or “created by” and make the pages even more standardized. In SharePoint 2013 and Office 365 they enhanced this functionality. How do I create a Page Layout? To create a page layout Browse to your publishing site. .In the upper-right corner of the page, choose Settings, and then choose Design Manager. In Design Manager, in the left navigation pane, choose Edit Page Layouts. Choose Create a page layout. In the Create a Page Layout dialog box, enter a name for your page layout. Select a master page. The master page that you choose here will be shown in the preview for this page layout. This master page also determines what content placeholders get added to the page layout. After you choose this master page, you cannot preview the page layout with a different master page, even after you apply a different master page to the live site. Select a content type. The content type for this page layout determines what page fields will be available for this page layout in the Snippet Gallery. Choose OK. At this point, SharePoint creates an HTML file and an .aspx file with the same name. In Design Manager, your HTML file now appears with a Status column that shows one of two possible statuses: Warnings and Errors Conversion successful

Page Layouts Click the link in the Status column to preview the file and to view any errors or warnings about the master page. The preview page is a live server-side preview of your page layout. The top of the preview displays any warnings or errors that you may have to resolve by editing the HTML file in an HTML editor. Errors must be fixed before the preview will display the page layout correctly. For more information about resolving errors and warnings, see How to: Resolve errors and warnings when previewing a page in SharePoint 2013. For more information about previewing the page layout, see How to: Change the preview page in SharePoint 2013 Design Manager. The preview page also contains a Snippets link in the upper-right corner. This link opens the Snippet Gallery, where you can begin replacing mockup controls in your design with dynamic SharePoint controls. For more information, see SharePoint 2013 Design Manager snippets. To fix any errors, edit the HTML file that resides directly on the server by using an HTML editor to open and edit the HTML file in the mapped drive. Each time you save the HTML file, any changes are synced to the associated .aspx file. The preview of the page layout shows the page fields that were added automatically to the page layout. These page fields are site columns that are unique to the current content type. Now you are ready to style the page layout according to your original HTML mockups.

Master Page Libraries We are not going to spend a lot of time on the Master Page Libraries but it is important to know a few things All Master Pages sit in a Master Page Library with Version Control Master Pages must be checked in and out in order to edit. You must Publish a new version when you make changes or they will not be seen by ALL Users You get to the Master Page Library from Site Settings.

Display Templates When you want to create a custom display template, you should begin by copying and then modifying one of the existing display templates. This is helpful because the default display templates contain information in comments in the HTML files, and you'll have the proper basic page structure and a framework in place for basic tasks like mapping input fields. Never edit a OOB Display Template but make a copy and then edit. If you edit OOB Display template it can cause a ripple effect and break the design on other pages or sites in the SharePoint environment Display templates make it easy to have a constant theme across a farm or environment. They are very useful when branding a site and modifying OOB Look to incorporate a customers branding

Snippets After you convert a master page or create a page layout, you have an HTML version of that page. With the Snippet Gallery, you can quickly add specific SharePoint functionality, such as search or navigation or device channel panels, to the HTML file associated with your master page or page layout. The Snippet Gallery is a page in Design Manager where you can: Choose a SharePoint component from those available on the ribbon. Configure the properties for that component. Preview its appearance in the browser. Copy the HTML code snippet to the Clipboard so that you can paste the snippet at the location you want in the HTML file. The Snippet Gallery displays different options on the ribbon, depending on whether you're editing a master page or page layout—for example, navigation controls are displayed only for master pages, and Web Part zones and page field controls are displayed only for page layouts. Also, when you are editing a page layout, the page fields that are available depend on the content type of the page layout that you're editing. After you paste a snippet into your HTML file, you get a design-time preview from the HTML provided in the snippet. You can also use the server-side preview in Design Manager to see how the control will appear on the live site. The design-time preview may include static sample data, but the server-side preview uses live data, if available. For example, a navigation control that draws navigation links from a term set will display those terms dynamically in the server-side preview, but the design-time preview will have a static snapshot of the terms at the time you created the snippet. Live data is not available in the server-side preview for some snippets, however, including many Web Parts. In this case, the server-side preview may say Preview Not Available. A snippet contains HTML markup that gives you a design-time preview in your HTML editor, but the HTML markup contained in "start preview" and "end preview" comments should not be edited because it affects only the design-time preview, not how SharePoint ultimately renders that snippet. Instead, to style your snippet, you typically have to identify and override the default SharePoint styles that are applied to the snippet.

Insert a Snippet Browse to your publishing site. In the upper-right corner of the page, choose the Settings gear, and then choose Design Manager. In Design Manager, in the left navigation pane, choose Edit Master Pages or Edit Page Layouts, depending on what type of file you're editing. Select the name of the master page or page layout that you want to add snippets to. To open the Snippet Gallery, choose Snippets in the upper-right corner of the server-side preview. On the ribbon, on the Design tab, choose the snippet that you want to add to your page. When you select a snippet, the Snippet Gallery refreshes so that the page shows you a preview of that snippet, the properties available for that snippet, and the HTML code snippet that you can copy into your HTML master page or page layout. On the right side of the Snippet Gallery, under About this Component, click or select section headers to expand or collapse groups of properties, and then configure any custom settings that you want. The properties that are most important for the core purpose of the snippet appear in the top section named Important. These are the key properties that you have to understand when using a snippet. Note: If the property grid has a header that ends with AjaxDelta, you should ignore those properties because they apply to the controls related to the Minimal Download Strategy, which is disabled for master pages and page layouts created through Design Manager. After you configure any properties, choose Update. This updates both the preview and the HTML snippet on the left side of the page, so that the markup reflects your custom settings. You can always choose Reset to return all properties to their default settings. On the left side of the Snippet Gallery, under HTML Snippet, choose Copy to Clipboard. In your HTML editor, open the mapped network drive on your computer, and then open the HTML file for the master page or page layout that you're adding the snippet to.

Insert a Snippet In the HTML file, paste the snippet where you want the markup to appear. Each snippet contains HTML that provides a visual preview of the component and sample data. You shouldn't modify this HTML for the read-only preview inside the <!--PS> and <!--PE> tags because this markup affects only the design-time preview of the snippet, not how the snippet will appear on the live site. To see the server-side preview of the snippet, save the HTML file to sync the changes to the associated ASP.NET file, and then refresh the server-side preview in Design Manager. Unlike the design-time preview, the server-side preview shows the control as rendered by SharePoint.

Understand the Markup - Snippet A snippet contains four basic sections: Header with starting <div> and <!--CS> tags (except custom ASP.NET snippets, which are not wrapped in a <div> tag) SharePoint markup where snippets are enclosed in <!--MS> start and <!--ME> end tags HTML preview enclosed in <!--PS> start and <!--PE> end tags Footer with closing <!--CE> and </div> tags All sections of a snippet, except the HTML preview, are enclosed in HTML comments to avoid interactions with the Document Object Model (DOM) and existing styling. A snippet starts with the name of a component, and then includes its actual ASP.NET markup, an HTML preview for design-time rendering, and then ending tags. The ASP.NET markup is commented out, but SharePoint strips out the comment tags and uses this markup when the HTML file is synced to the .master or .aspx file. If you know ASP.NET, you can customize this markup in the snippet.

See Snippet PDF

Questions Do you have any questions? My Blog http://sptoby.com Contact Information: Toby McGrail – Toby@sptoby.com