Techblurt: Privacy & Security Perspectives

Embedding a Web Part in a SharePoint 2013 Master Page via Design Manager

So you want to use Design Manager – a great feature in SharePoint 2013 for converting native HTML to SharePoint master page already covered in a previous blog post. 

However, you’d like to embed an XsltListViewWebPart – maybe to use some JSLink goodness to render content from elsewhere in the site such as news, updates, whatever. Maybe multiple webparts each with their own JSLink, in which case check out Paul Hunt’s excellent workaround (hint: if you want to use JSLink for more than one webpart, where the list based on a custom list – ListTemplateId=100 – you need this!)

In order to continue with the Design Manager .html –> .master conversion (i.e. you are not following a “traditional” ALM process with a WSP etc.) the following steps may help:

  1. Your XsltListViewWebPart needs to be “pretty-printed”

    The following will not work (extract from the XsltListViewWebPart XML):

    However this will (same extract):

    I used Notepad++ and the XmlTools plugin for this, works great (although ensure you do really have each XML element on a new line, including the body of an element)

  2. Fix any XML attributes with dubious namespaces

    This includes the following attribute of the XsltListViewWebPart element:

    __designer:CustomXsl=”Fldtypes_mswhTitle.xsl;fldtypes_Ratings.xsl”

    The above would expect the __designer namespace to be declared to be semantically correct. As it’s not strictly required in this case I just deleted the attribute altogether.

  3. Convert your XML to compatible HTML

    You can either paste in your <WebPartPages:XsltListViewWebPart/> XML into the Snippet Manager (easiest way, as follows)

    image

    OR.. learn how markup is treated in the .html version of the Master Page and amend your XML as follows:

    a. Start your snippet with: <!–CS: Start My Snippet –>

    b. Wrap each subsequent line with <!–SPM: *your line here* –>

    c. Finish your snippet with <!– CS: End My Snippet –>

  4. Paste the snippet into the .html version of your master page

Hopefully you’ll get no errors with the .html to .master conversion.

Multiple JSLink files work in the Master Page (thanks again Paul!).

So no excuses for writing custom C# code when a simple JSLink will do, right? 🙂

Hope that helps if you are using Design Manager (and why not, for small sites, works fine!)

Posted

in

, , ,

by

Gus Fraser

Tags:

, , , ,

Comments

5 responses to “Embedding a Web Part in a SharePoint 2013 Master Page via Design Manager”

  1. Nelson Puello

    Gus, thanks for the great article. It has been very helpful. However, I have a small problem with this process and I was hoping you could give me some pointers. I can successfully add an XsltListView web part into a master page (Publishing), and I can see the list items when the page is rendered. However, when I add a filter to the web part so that I can see a single item I get no results. It seems that the contents of the tag do not work. If I remove the tag and its contents the list displays the items. I know the query works because I can insert it into an aspx page and the list renders just the item I am querying for. Thanks.

    Reply
    1. Gus Fraser

      Can you paste the contents of your (anonymised) webpart into Pastebin or somewhere to have a look? Not promising anything but could give something similar it a try on one of my tenants if you like

      Reply
      1. Nelson Puello

        Thanks, Gus. I am not concerned about anonymity as this is an on-prem SharePoint 2013 lab environment. Here is a link to a paste original XsltListViewWebPart from SPD http://pastebin.com/HtFSJRH9. Then, here is a paste of the code generated by Design Manager http://pastebin.com/3C16vqWN.

        Reply
        1. Gus Fraser

          This shouldn’t make a difference but instead of e.g.

          < !–SPM:– >

          < !–SPM:– >

          I would try

          < !–SPM:HOME-002– >

          Just in case it’s being mangled a bit somehow. Will give it a try when I get a minute.

          Reply
          1. Nelson Puello

            The parser does not like having the tags in the same line. Just like you posted in your article :-).

Leave a Reply

Your email address will not be published. Required fields are marked *