Javascript: mark.js – JavaScript keyword highlighter

Ich hatte die Anforderung auf einer Sharepoint-Seite eine einfache Suche einzubauen. Nichts großartiges: Nur eine Möglichkeit auf einer einzelnen Seite nach Vorkommen von bestimmten Buchstabenkombinationen zu suchen. Nach kurzem googeln fand ich mark.js. Das ist ein kleines aber feines jQuery-Plugin, mit dem man die Fundstellen von Such-Texten hervorheben kann.Das ist einfach einzubauen und die Hervorhebung kann auch einfach via CSS konfiguriert werden!

Sourcen:

 

Sharepoint: Set page to fullscreen mode using CSR

Hier ein kleines Schnipsel wie ich in einem meiner Projekte eine Page in den Full-Screen-Modus schalte. Die Source im WWW habe ich mir damals leider nicht notiert. ICh abe das damals verwendet um die Bedienung der Page auf einem Tablet zu erleichtern. Für den User wurde eine Hinweisemeldung eingeblendet, die nach 10 Sekunden wieder verschwand:

window.onload = function() {
    var width = $(window).width();
    console.log("width: " + width);

    if (width < 1000)
    {
        var addText = '<div id="fullScreenModeHint" style="color: red;">Da die Breite des Fensters weniger als 1000 Pixel (' + width + 'px) darstellt, wurde die Website in den "Vollbildmodus" geschalten! Um diesen zu verlassen klicken Sie bitte das entsprechende Icon oben rechts!<br><br><b>Diese Nachricht wird in 10 Sekunden ausgeblendet!!</b><br><br></div>';
        $("#WebPartWPQ3").html(addText + $("#WebPartWPQ3").html());
        //console.log("window onload - set full screen mode");
        SetFullScreenMode(true);        
        
        timeoutID = window.setTimeout(removeFullScreenModeHint, 10000);
    }
};

function removeFullScreenModeHint() {
    $("#fullScreenModeHint").html("");
}

 

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: custom javascript use singleton pattern to prevent multiple calls!

Bei mir wird in Sharepoint 2016 eine Javascript-Function direkt aus der Masterpage heraus ausgerufen. Durch MDS und andere Dinge wird diese Funktion bei einem „Strg“+“F5“ reload dadurch bis zu 3x aufgerufen. Um das zu verhindern gibt es die Singleton-Pattern. Dis sollte so aussehen:

function MySingletonClass () {

  if (arguments.callee._singletonInstance) {
    return arguments.callee._singletonInstance;
  }

  arguments.callee._singletonInstance = this;

  this.Foo = function () {
    // ...
  };
}

var a = new MySingletonClass();
var b = MySingletonClass();
console.log( a === b ); // prints: true

Da das bei mir so nicht korrekt funktioniert hat (vermutlich habe ich den richtigen Aufruf einfach nicht hinbekommen, habe ich das so abgewandelt:

// My simple "singleton Pattern"
var sp2016InitFirstRun = true;

// This function is called from at the bottom of my masterpage!!
function $_global_sp2016_js_init() {

    // My simple "singleton Pattern"
    if (!sp2016InitFirstRun) 
    {   
        return;   
    }
    else 
    {  
        sp2016InitFirstRun = false;    
    };
    
    // The following code is only run once!!
 
    ...
 
};

$_global_sp2016_js_init()

Funktioniert wie gewünscht: Der Code wird nur 1x gestartet. Egal wie oft Sharepoint die Function aufruft 😉

Quelle: stackexchange.com

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:

Joomla: Async ajax call to component task

Die Daten und Tipps habe ich mir von zahlreichen Websites geholt. Aber die wichtigsten waren diese hier. Vom ersten Link hatte ich den grundlegenden Code. Der zweite Link war auch noch sehr informativ. Zu guter Letzt fehlten mir noch die Hinweise aus dem letzten Link um die Antwort zu bekommen:

Für mich persönlich noch: Wurde beim Tournament-Helper bei der Front-End-Game-Update Website.