Suite à la migration d’un de mes clients de SharePoint 2013 vers SharePoint 2019 (en passant par SP2016 évidemment), je me suis aperçu qu’une fonction bien pratique n’était plus disponible ! Il s’agit de la fonction CountDictionary() qui permettait d’énumérer et compter les éléments dans un dictionnaire.
Vous l’aurez probablement utilisée dans des CustomAction placées dans le ruban de SharePoint par exemple, afin de vérifier qu’un élément au moins était sélectionné dans un affichage (vue liste / bibliothèque de document par exemple).
Heureusement il est possible de corriger le problème en modifiant son fichier source JavaScript et en ajoutant la fonction directement :
function CountDictionary(b) {
var a = 0, c;
for (c in b)
a++;
return a
}
Il est probable que d’autres fonctions aient été “oubliées” sur la longue route de SharePoint et ses migrations… mais pour l’instant je ne suis tombé sur aucun de ces cas 🙂
A bientôt ! (en tout cas je l’espère… depuis le temps que je n’avais pas publié !)
Aujourd’hui une astuce toujours utile et en particulier pour lors des migrations de sites ou les fermetures pour maintenance.
Sur SharePoint OnPremise, il est facile de jouer avec le “Lockstate” qui l’on passe en readonly via quelques lignes de PowerShell… Mais sur SharePoint Online, ce statut n’existe pas ! Vous avez juste la possibilité de le passer à “NoAccess” (aucun accès pour personne, sauf les administrateurs de la collection de sites) ou “Unlock” qui déverrouille donc…
L’astuce consiste à utiliser une politique de site (Site Policy) qu’il faut créer à la racine de la collection de sites. Pour cela, il faut se rendre dans les paramètres du site (racine de la collection de sites) :
Puis accéder au menu “Site Policies” :
Et enfin créer une nouvelle Policy :
On lui donne un nom, description et surtout :
Ne pas fermer le site automatique et ne pas le supprimer !
Cocher la case : le site sera en readonly quand il sera fermé
On enregistre ensuite :
On revient dans les paramètre du site :
Et cette fois-ci on va dans le menu “Site Closure and Deletion” :
On choisit dans la liste déroulante notre nouvelle policy et on valide la page :
On revient de nouveau dans le même menu :
Et cette fois-ci on clique sur le bouton “Fermer le site maintenant” (Close this site now) :
Immédiatement, un bandeau rouge apparaît en haut de la page nous informant que le site est bien en ReadOnly :
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) :
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 :
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 :
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 :