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.

Sharepoint 2016: Add custom js and deal with MDS problems!

Wenn man zu einer Sharepoint-Site eigenes CSS und JS hinzufügen möchte gibt es ja bekanntlich viele Möglichkeiten. Ich brauche das um das Layout und die Farben unserer Sahrepoint-Seiten anzupassen. Ich habe mir dazu eine Kopie der „Seattle-Masterpage“ erstellt und dort dann meine CSS und JS Files verlinkt. Das funktionierte alles soweit ganz OK. Mein Problem war allerdings, dass die Minimale Downloadstrategie (kurz „MDS“) hat mir einen Strich durch die JS-Rechnung gemacht! Mein JS-Code wurde nur ausgeführt wenn die Site komplett neu geladen wurde. Ich habe Tonnen von Websites, Blogs und sonstiger Info gelesen aber keine (funktionierende) Lösung gefunden. ERst nach einer Frage an die Stack-Exchange-Community erhielt ich endlich die richtige Antwort:

Des Rätsels Lösung ist der „AsnycDeltaManager“!

Hier ein paar Links die nun, nachdem das nun alles Funktioniert, endlich ein Gesamtbild ergeben. Zuerst kommen die Links, die mich zur Lösung brachten, danach dann die weiteren Links. Alles in allem habe ich zwar viel Zeit versch…en aber auch wieder einiges gelernt 😉

Quellen:

Links die zwar teilweise informativ sind/waren, aber mich nicht wirklich weiter gebracht haben: