Understanding HTML master pages in SharePoint 2013


With Design Manager in SharePoint 2013, you can convert an HTML file into a master page file. Once the conversion was successful from then the html and master page files are associated with each other. Which means if you do any edits to the html file, master page file will be automatically updated. If you have an HTML file available with you, you can directly upload the file by going to the Site Settings -> Design Manager -> Edit Master Pages -> Convert an HTML file to a SharePoint master page. Once you have uploaded the HTML file, you will see an option from context menu to convert the file to master page. Once the conversion completed the status field will be updated to either “Warnings and Errors” or “Conversion Successful” with clickable link which points to the preview of the master page.
While creating an HTML master page in SharePoint 2013 these are the important points you should remember:
  • XML Compliant: HTML file should be XML-complaint. But, there are some exceptions when you use HTML5. For example, in HTML5 we specify doctype in lowercase letters, but in XML the doctype should be uppercase…
  • Inline Styles: Adding <style> tag in <head> is not allowed. Because while conversion it will skip the <style> tag you have added in <header> section. So, you won’t see your styles applied on the pages. The Workaround is we should add a CSS file and then link that file with ms-design-css-conversion=”no” attribute. if the value set to “no” which means there is no need to do the conversion for the tag.
    Example: <link href="/Documents/Styles/Style.css" type="text/css" rel="stylesheet" ms-design-css-conversion="no" />
  • Styles to <body> tag: Applying styles to <body> tag is not the right way in 2013. Instead apply them to <div id="s4-bodyContainer"> as this tag is acts as main body div.
  • Adding Javascript: To add inline javascript code you should declare <script> tag in its own line. Otherwise it will not render on the page.
  • External javascript files: All the external javascript libraries like JQuery should be referenced before the end of <head> tag.
  • One-Directional: Always change the code in HTML file. Don’t change directly in the .master page file. Because the conversion happens one directional. HTML to master page, but not .master to HTML file. Once you complete the edits in HTML file and publish it, it will overwrites the changes to .master page file. In case if you had changed the .master file directly for quick fixes, you will lose all your changes.
Markup details/snippets in SharePoint 2013 SharePoint 2013 uses inbuilt snippet/markup tags to easily identify for the conversion. When we develop the master pages or page layouts these snippets play main role. So, below are the main snippets/markups:
  • MSO (Metadata) Tag: This tag will be used for defining the document metadata properties like content type of the document, conversion status, preview page url and many more. The parent tag under which we define these metadata is <CustomDocumentProperties> tag.
  • Example: 


  • <mso:CustomDocumentProperties>
    <mso:ContentType msdt:dt="string">Html Master Page</mso:ContentType>
    <mso:HtmlDesignAssociated msdt:dt="string">1</mso:HtmlDesignAssociated>
    <mso:HtmlDesignConversionSucceeded msdt:dt="string">True</mso:HtmlDesignConversionSucceeded>
    </mso:CustomDocumentProperties>
  • SPM (SharePoint Markup) Tag: This tag will be used for registering the SharePoint Namespaces and declaring SharePoint controls.
    • CS & CE: The tag CS is for Comment Start and CE is for Comment End. If we want to write comments above the tags we register we use these tags. These tags will be ignored from SharePoint Conversion engine.

    • Example: <!--CS: Start Site Logo Snippet-->
      <!--CE:End Site Logo Snippet-->
    • MS & ME: The tag MS is for Markup Start and ME is for Markup End. If you want to add a snippet to the page then you should use these tags, and you can use these tags for adding SharePoint controls as well. You can get these snippets from Snippet Gallery.
    • PS & PE: The tag PS is for Preview Start and PE is for Preview End. When you are previewing the HTML page these are the blocks available for you to preview content on page and insert snippets wherever needed.

  • Example: <!--SPM:<%@Master language="C#"%>-->
    <!--SPM:<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>-->
Note: Even though the post says all about master pages, the same will be applies the page layouts as well.

Comments

Post a Comment

Popular posts from this blog

SharePoint 2013 Keyword Query (KQL) Content Class Property Restrictions

Using property restrictions in your KQL queries, you can restrict your search to only pull back certain things like calendar events for instance. This is a very powerful way to limit search results  and get exactly what you are looking for. You can use these in your query like this: " lunch contentclass:STS_ListItem_Events " This will return only calendar events with the word "lunch" in them.  Pretty powerful and pretty simple. Here is a list of available content class items: STS_Site –  Site Collection STS_Web  –  Site (Web) STS_List_850  –  Page Library STS_ListItem_850  –  Page STS_List_DocumentLibrary  –  Document Library STS_ListItem_DocumentLibrary  –  Document Library Items STS_List  –  Custom List STS_ListItem  –  Custom List Item STS_List_Links  –  Links List STS_ListItem_Links  –  Links List Item STS_List_Tasks  –  Tasks List STS_ListItem_Tasks  –  Tasks List Item STS_List_Events  –  Events List STS_ListItem_Events 
Read more

Filtering the Sharepoint List Taxonomy Column using Rest API

I ran into a strange issue today when using the SharePoint 2013 REST API for Lists with Managed Metadata columns    but I just had a ‘clever workaround’ moment with SharePoint’s oData/REST implementation when it comes to filtering list items based on taxonomy (managed metadata) columns. Now I do not consider myself a developer, so this article is probably a little verbose for some readers, but should be helpful to power users or IT pros. 1. To filter the Taxonomy columns in SharePoint list using Rest API call we need to use the Post method. 2. The Rest API call will give errors some times when the Rest API Query string crosses limit 260 characters that time we will use the Query in the body. Those things are clearly explained in the below example clearly. 3. WE can use the CAMEL Query in the Rest API call this example come under that. < script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" ></ script > < script > $(do
Read more

SharePoint CSOM to Create Folders and Sub Folders based on Excel Data

Contents: 1. Reading data from the Excel sheet. 2. Connecting to SharePoint Online Site & Checking the SharePoint list is available or not. 3. Creating the SharePoint Library Folders and Sub Folders. 4. Conclusion. 1. Reading data from the Excel sheet: a. Open Visual Studio, Select New Project Creation and Select C# Console application and provide the appropriate Solution name. b. First add the required references like below.     I . using Microsoft.SharePoint.Client;     II. using System.Configuration; (Used to read the data from the App.config file)     III. using Microsoft.Office.Interop.Excel; (Excel supported file reference)     Note: If above references and not able to add please install the references from the NuGet Package  Manager Console. To Read the values from the App.config file use the below  and declare all the fields globally for re-usability.                 public   static   string  userName = ConfigurationManager.AppSettings[ "Username&qu
Read more