Sharepoint 2016: use custom js files without problems due to MDS

Ich habe mir für das „Branding“ unserer Sharepoint-Sites eine Kopie der Seatlle-Masterpage erstellt. Die einzige Änderung dieser Kopie gegenüber dem Original ist diue Einbindung von eigenen JS und CSS Files.

Diese Einbindung sieht so aus. In der Masterpage ganz oben beim Tag „Sharepoint:AjaxDelta“

    <asp:ContentPlaceHolder id="PlaceHolderBodyAreaClass" Visible="true" runat="server" />
  </SharePoint:AjaxDelta>
  
        <!-- Referencing jQuery and custom js-files -->
    <!-- Pleas see at the end of the <body>-Tag!! -->
    <SharePoint:ScriptLink language="javascript" name="~sitecollection/SiteAssets/SKB-SP2016/jquery-3.2.1.min.js" 
      LoadAfterUI="true" OnDemand="false" runat="server" Localizable="false" />
    <SharePoint:ScriptLink language="javascript" name="~sitecollection/SiteAssets/SKB-SP2016/skb-sp2016.js" 
      LoadAfterUI="true" OnDemand="false" runat="server" Localizable="false" />

        <!-- Referencing custom css-files -->
        <!--<SharePoint:CssRegistration Name="<%$SPUrl:~sitecollection/Style Library/SKB-SP2016/SKB-SP2016.css%>" After="Themable/corev15.css" runat="server"/>-->
  
  <SharePoint:CssRegistration Name="Themable/corev15.css" runat="server" />
</head>
<body>

Ganz unten (vor dem Ende des Body-Tags) kommt dann noch das:

<SharePoint:ScriptBlock runat="server">
if (typeof asyncDeltaManager != "undefined") {
    asyncDeltaManager.add_endRequest($_global_myNameSpace_sp2016_async_js);
}
$_global_myNameSpace_sp2016_other_js();
</SharePoint:ScriptBlock>


</body>
</SharePoint:SPHtmlTag>

Wozu der Block unten in der Masterpage?

Die Javascript Function „$_global_my_sp2016_other_js“ wird ausgeführt, wenn die Site „neu“ geladen wird. Also wenn man das erste Mal dort ist oder wenn man z.B. „Strg“+“F5“ drückt. Aber auch wenn Sharepoint merkt, dass sich etwas an den benötigten Dateien geändert hat. Der springende Punkt ist: Nicht immer!!

Was hingegen bei „jedem Klick“ aufgerufen wird ist die Javascriptfunction „$_global_my_sp2016_async_js“. Diese wird auch ausgeführt, wenn die MDS aktiv ist und eigentlich nur differenzen zwischen der aktuellen Seite und der aufgerufenen Seite übertragen werden!

Nur der Vollständigkeit halber hier noch das JS File:

// reference jQuery
var $jq = jQuery.noConflict();

// declare namespace
/* This line would also do it: Function.registerNamespace('myNameSpace.sp2016');  */
window.myNameSpace = window.myNameSpace || {};
window.myNameSpace.sp2016 = window.myNameSpace.sp2016 || {};

// is not called on every klick because of MDS, ...
function $_global_myNameSpace_sp2016_js_init() {
    
    .....

};

// is called on every klick (MDS oder not!!)
function $_global_myNameSpace_sp2016_async_js() {
    
    // Remember: This code is executed for every klick! So don't forget to check
    //           if something is allready applied!!
 
    ...
    
};

_global_myNameSpace_sp2016_js_init

Kurzer Hinweis am Ende: Ich verwende eigene Scripte die diese Masterpage gemeinsam mit den restlichen Dateien für jede Website einer SiteCollection (bzw. genauer: für jede Website in allen Sitecollections einer WebApp) hochladen und als Theme aktivieren.

Die Sourcen dazu findet ihr in diesem Beitrag.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*