[SP2013-SP2016] – Utiliser un JSLink pour afficher un slider

Posted on 28 November 2016 Updated on 28 November 2016

Bonjour à tous,

Cela fait un moment que je n’ai rien publié, mais j’ai été pas mal occupé 🙂

Aujourd’hui, comment créer un jslink qui affichera les images d’une bibliothèque d’image sous forme de Slideshow en JavaScript en utilisant les jslink.

1/ Créer une bibliothèque d’images et ajouter des images

Première étape donc, créer une bibliothèque d’image dans un site SharePoint. Facilement réalisable, à la souris via l’interface de création des applications. Pour cela, rendez-vous sur votre site SharePoint concerné, puis utilisez l’engrenage (Paramètres / Settings), puis créer une Application (Add an app) :

 

Puis sélectionner le type d’application “Bibliothèque d’images” (Picture Library) :

 

Ici je l’appellerai “Images” pour cet exemple :

 

L’application “Images” de type bibliothèque d’images est créée :

 

Ensuite, je vais charger un ensemble d’images que je souhaite afficher dans mon slideshow. Pour cela, j’utilise le site Pexels (https://www.pexels.com/) mais vous pourrez en trouver sur beaucoup de sites (Attention au droit à l’image) :

 

Puis je les télécharger dans SharePoint (via glisser-déposer, mais pour pouvez évidemment utiliser le bouton télécharger, Windows Explorer etc.) :

 

Mes images sont donc maintenant dans SharePoint.

 

2/ Les ressources nécessaires

Afin que le diaporama soit animé, et de ne pas redévelopper la roue, j’ai choisi d’utiliser un JavaScript bien connu afin de créer mon diaporama qui s’appelle slidejs (http://www.slidesjs.com/). Ce script est assez facile d’utilisation, il est responsive, “touchable” (tablettes, smartphones) et utilise CSS3 (attention aux navigateurs non-compatibles… ça existe encore).

Il peut également démarrer tout seul (auto-play), utilise des transitions etc. Tout ceci peut être personnalisé suivant les besoins. Ici, je voudrai qu’il change de photo seulement quand l’utilisateur clique sur le bouton suivant (ou précédent).

Je vais donc avoir besoin de charger JQuery, et jquery.slides.min.js.

Pour ma part, JQuery est chargé dans la masterpage de mon site (et le fichier est dans le hive car je l’utilise sur tous les sites : /template/layouts/demo/jquery-1.11.2.min.js) :

Et dans ma masterpage (je vous laisse voir les différents moyens de charger JQuery) :

<SharePoint:ScriptLink ID="ScriptLink6" language="javascript"  Name="/_layouts/15/demo/jquery-1.11.2.min.js" runat="server" Localizable="false"/>;

 

Pour la fichier jquery.slides.min.js, je vais le charger dans la bibliothèque de style de la collection de sites car il n’est utilisé que pour ce site, et pas sur les autres (rien ne vous empêche de le déployer dans le hive). Pour cela :

Accéder au contenu du site racine (qui est le site en question dans mon exemple), utilisez l’engrenage puis “Contenu du site” (Site Content) :

Puis accédez à l’application “Style Library” :

Dans cette application, je créé un nouveau répertoire pour isoler mes ressources, ce répertoire s’appellera “demo” :

Et enfin je télécharger le fichier “jquery.slides.min.js” dans ce nouveau répertoire :

 

Sans oublier de l’archiver puis de le publier :

Et enfin, il nous faut télécharger dans ce même répertoire le fichier JSLink permettant de lancer le Slideshow. Nous allons voir maintenant ce qu’il contient…

3/ Le JSLink

Ici nous allons donc utiliser le fichier “SharePointSlideshow.js” (vous pourrez bien sûr le renommer).

Premièrement, nous allons déclarer un namespace spécifique :

Type.registerNamespace('DEMO');
DEMO.SPSlideshow = DEMO.SPSlideshow || {};
DEMO.SPSlideshow.Templates = DEMO.SPSlideshow.Templates || {}
DEMO.SPSlideshow.Functions = DEMO.SPSlideshow.Functions || {}

Puis déclarer un ID global pour le div qui encapsulera les éléments du slideshow :

var slideshowId = '';

Et enfin, déclarer les fonctions nécessaires :

Fonction affichant 1 élement :

DEMO.SPSlideshow.Functions.Display = function (ctxSlideshow) {

    var viewMoreLabel = "+ Read more";    
    var webpartTitle = "";

    /* DECLARE COLUMNS INTERNAL NAMES  */
    var ColumnIDInternalName = "ID";
    var ColumnTitleInternalName = "Title";
    var ColumnFileRefInternalName = "FileRef";   
    
    /* GET ITEM VALUES FROM CONTEXT  */
    var item = ctxSlideshow.CurrentItem;
    var itemId = item[ColumnIDInternalName];
    var itemTitle = item[ColumnTitleInternalName];
    var itemFileUrl = item[ColumnFileRefInternalName];
       
    //create img form jsslide library
    var strSlideshow = '<img src="' + itemFileUrl + '">';
    
    return strSlideshow;
}

Fonction générant le Header (div encapsulant la structure générale, voir documentation de slidejs) :

DEMO.SPSlideshow.Functions.GenerateHeader = function (ctxSlideshow) {

    var webpartId = ctxSlideshow.wpq;
    var webpartTitleCell = '#WebPartTitle' + webpartId;
    $("#WebPart" + webpartId).css("position","relative");
    var header = '<div class="container">';
    slideshowId = 'slides' + ctxSlideshow.ctxId;
    header += '<div id="' + slideshowId + '">';
    //insert buttons for next and previous
    header += '<a href="#" id="slideshowleftarrow" class="slidesjs-previous slidesjs-navigation"></a>';
    header += '<a href="#" id="slideshowrightarrow" class="slidesjs-next slidesjs-navigation"></a>';
    return header;
}

Fonction générant le Footer (div fermant la structure générale, voir documentation de slidejs):

DEMO.SPSlideshow.Functions.GenerateFooter = function (ctxSlideshow) {  
    var footer = '</div>';
    footer += '</div>';
    return footer;
}

Fonction permettant d’appliquer les éléments en JQuery sur la structure, et mettant en forme le slideshow :

DEMO.SPSlideshow.Functions.PostRender = function (ctxSlideshow) {   
    //start slide
    $(function () {
        var slidedivid = '#' + slideshowId;
        $(slidedivid).slidesjs({
            start: 2,
            pagination: {
                active: false
            }       
        });
    });    
}

Et enfin, le bout de script permettant de faire le “register” du JSLink sur le WebPart standard d’affichage des images (Application Picture Library) :

DEMO.SPSlideshow.Templates.RegisterSlideshowDisplay = function () {
// Fallback to loading jQuery from a CDN path if the local is unavailable
(window.jQuery || document.write('<script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.2.min.js"><\/script>'));

var slideshowcontext = {};
slideshowcontext.Templates = {};
slideshowcontext.Templates.Header = DEMO.SPSlideshow.Functions.GenerateHeader;
slideshowcontext.Templates.Item = DEMO.SPSlideshow.Functions.Display;
slideshowcontext.Templates.Footer = DEMO.SPSlideshow.Functions.GenerateFooter;
slideshowcontext.Templates.OnPostRender = DEMO.SPSlideshow.Functions.PostRender;

slideshowcontext.ListTemplateType = 109;
slideshowcontext.BaseViewID = 6;

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(slideshowcontext);
}

//Register CSR-MDS module then call template registration
DEMO.SPSlideshow.Functions.RegisterInMDS = function () {
//RegisterLikes-override for MDS disabled site (because we need to call the entry point function in this case whereas it is not needed for anonymous functions)
ExecuteOrDelayUntilScriptLoaded(DEMO.SPSlideshow.Templates.RegisterSlideshowDisplay, 'clienttemplates.js');
// RegisterLikes-override for MDS enabled site
RegisterModuleInit(_spPageContextInfo.siteServerRelativeUrl + "/Style Library/demo/SharePointSlideshow.js", DEMO.SPSlideshow.Templates.RegisterSlideshowDisplay);
}

//Load CSR-MDS module if feature is activated
if (typeof _spPageContextInfo != "undefined" && _spPageContextInfo != null) {
DEMO.SPSlideshow.Functions.RegisterInMDS();
}
else {
ExecuteOrDelayUntilScriptLoaded(DEMO.SPSlideshow.Templates.RegisterSlideshowDisplay, 'clienttemplates.js');
}

Lorsque ce fichier est globalement (et syntaxiquement ok), il faut le télécharger avec le fichier précédent dans Style Library/Demo (on l’archive et publie également) :

 

4/ Utilisation

Pour utiliser ce JSLink, il faut tout d’abord ajouter le composant WebPart de l’application Picture Library sur une page. La page d’accueil par exemple. On édite la page en cliquant sur le bouton Modifier (Edit) dans le coin haut-droit :

Dans la galerie de WebParts, on choisit le WebPart associé à la nouvelle application Bibliothèque d’images (qui s’appelait “Images” dans mon cas) :

 

Et on l’ajoute dans la page, puis on sauvegarde la page :

Ensuite, on repasse en édition sur la page, et on modifie les propriétés du composant WebPart que l’on vient d’ajouter :

Dans le coin en haut à droite du WebPart, on accède au menu “Modifier le composant WebPart” (Edit Web Part) :

La “boite à outils” du WebPart s’ouvre sur la droite :

Dans le dernier champ “JS Link”, il faut indiquer le chemin (relatif à la collection de sites) vers le fichier “SharePointSlideshow.js”. Dans mon cas, j’indique :

~sitecollection/Style%20Library/demo/jquery.slides.min.js|~sitecollection/Style%20Library/demo/SharePointSlideshow.js

J’utilise le token “~sitecollection” afin d’indiquer que mon url est relative à la collection de site (vous pouvez également utiliser ~site), SharePoint se chargera de recomposer l’url absolue. Et ensuite, j’utilise “|” afin de dire à SharePoint qu’il doit charger 2 scripts : “jquery.slides.min.js” et “SharePointSlideshow.js” :

 

On clique sur “OK”, on enregistre et immédiatement, le slideshow est fonctionnel (moche mais fonctionnel). En effet les boutons “Previous” et “Next” fonctionnement :

 

5/ Faire du beau…

En effet, le rendu est un peu sommaire… des liens cliquables, en bas… pas super ergonomique et même moche. Allez on fait du “un peu plus beau”. Et donc de la CSS !

Premièrement, je vais utiliser 4 images pour remplacer les liens Previous / Next par des flèches qui changeront de couleur lorsque la souris les survolera :

 

 

Je vais télécharger ces images dans l’application “Style Library, dans le même dossier que les fichiers *.js téléchargés précédemment :

 

Puis enfin je vais créer une nouvelle feuille de style qui contiendra quelques directives pour mettre en place tout ça qui s’appellera SharePointSlideshow.css. Je choisis également de la déployer dans l’application Style Library et de la référencer dans la masterpage :

Dans la masterpage :

<SharePoint:CssRegistration ID="DemoCSS" Name="<% $SPUrl:~sitecollection/Style Library/demo/SharePointSlideshow.css %>" After="corev15.css" runat="server">

 

Et enfin le contenu de la CSS :

/* WebPart slideshow */

#slideshowleftarrow{
background:url('/sites/tests/Style%20Library/demo/leftarrow-inactive.png');
background-repeat:no-repeat;
height: 46px;
width: 35px;
position:absolute;
top:50%;
left:0;
z-index:98;

}

#slideshowrightarrow{
background:url('/sites/tests/Style%20Library/demo/rightarrow-inactive.png');
background-repeat:no-repeat;
height: 46px;
width: 35px;
position:absolute;
top:50%;
right:0;
z-index:98;

}

#slideshowleftarrow:hover{
background:url('/sites/tests/Style%20Library/demo/leftarrow-active.png');
background-repeat:no-repeat;
height: 46px;
width: 35px;
position:absolute;
top:50%;
left:0;
z-index:99;

}
#slideshowrightarrow:hover{
background:url('/sites/tests/Style%20Library/demo/rightarrow-active.png');
background-repeat:no-repeat;
height: 46px;
width: 35px;
position:absolute;
top:50%;
right:0;
z-index:99;

}

a[title="Previous"] {
display:none;
}

a[title="Next"] {
display:none;
}

/* End WebPart slideshow */

 

Et voici le résultat :