Office 365 Tip: Referencing third-party JavaScript libraries in Master Pages with Design Manager

Tags: Programming, Office 365, SharePoint 2013, Branding, JavaScript

When you are converting existing HTML design to SharePoint Master Page with Design Manager, you often need to reference third-party script libraries used for functionality on pages. I recently had a case with SkelJS (version 0.4.9 ) which was used in source design to provide functionality to make pages responsive (source design was a freebie taken from Templated). During conversion Design Manager didn't change the <script> tags, but did add XML CDATA element between start and end tag, like this:

<script src="js/skel.min.js">//<![CDATA[//]]></script>

In this case, that particular CDATA element would break SkelJS functionality, as this library parses content of the <script> block and uses that content to configure library behavior. Because that is not valid configuration for library, skel.min.js would throw a "Syntax Error".

What didn't work?

At first, I tried to outsmart Design Manager, simply by putting start and end <script> in same row:

        <script src="js/skel.min.js"></script>

However, that didn't bring any improvement, as converted Master Page would again contain CDATA block, and that would again break SkelJS behavior.

What worked?

The workaround can be best described as "When preparing for SharePoint – do SharePoint". Instead of using HTML <script> blocks, I used SharePoint ScriptLink. There is a snippet I used in Design Manager for referencing SkelJS

<!--MS:<SharePoint:ScriptLink language="javascript" 
name="~sitecollection/_catalogs/masterpage/myTemplate/js/skel.min.js"
Defer="true" runat="server" Localizable="false">-->
<!--ME:</SharePoint:ScriptLink>-->
<!--MS:<SharePoint:ScriptLink language="javascript" 
name="~sitecollection/_catalogs/masterpage/myTemplate/js/skel-panels.min.js"
Defer="true" runat="server" Localizable="false">-->
<!--ME:</SharePoint:ScriptLink>-->
<!--MS:<SharePoint:ScriptLink language="javascript" 
name="~sitecollection/_catalogs/masterpage/myTemplate/js/init.js"
Defer="true" runat="server" Localizable="false">-->
<!--ME:</SharePoint:ScriptLink>-->

After this, everything started to work just fine without any errors as the ScriptLink server tags are converted to plain <script> links at the time of rendering, by SharePoint.

No Comments

Add a Comment