Comment rendre SharePoint On-Premises responsive rapidement ?

Début Mars 2016, le groupe SharePoint Patterns and Practices (PnP) a publié le Responsive UI Package for SharePoint on-premises (2013 and 2016) qui est une solution open-source permettant via un code client de rendre SharePoint 2013 et 2016 responsive. L’avantage principal de cette solution est l’utilisation d’un .js et d’un .css seulement sans modifier de Master Pages.

Fonctionnement

Lors du déploiement de la solution sur votre site, la fonctionnalité « mobile browser view » est désactivée étant donné qu’elle active l’affichage adapté pour mobiles des librairies et listes SharePoint. De plus, une Custom Action est déployée qui ajoute un appel au fichier JavaScript de la solution PnP-Responsive-UI.js dans le header de la page (balises <head>).

Ce script permet d’activer le responsive en :

  • Ajoutant la référence à jQuery
  • Effectuant les changements DOM
  • Affichant ou non les menus “burgers” (voir les captures ci-dessous)
  • Chargeant la feuille de style (pnp_responsive_ui.css)

C’est l’utilisation des media queries pour le format desktop, tablette et mobile qui permet de moduler l’affichage en fonction du device utilisé quel que soit le navigateur utilisé.

Aperçu de la solution

Vue Desktop vueDesktop
Vue Tablette Tablette
Vue Mobile Mobile

Mise en place de la solution

L’installation via PowerShell est très simple :

  1. Installer l’OfficeDevPnP.PowerShell command en cliquant ici (le lien télécharge un msi à installer) (Accepter les termes, install, next, finish)
  2. Télécharger tous les PnP-Tools ici
  3. Ouvrir une console PowerShell et aller dans le dossier où se trouvent les fichiers extraits précédemment
  4. Lancer le script  Enable-SPResponsiveUI.ps1 en ajoutant le paramètre -TargetSiteUrl avec l'url du site cible.

image

Exemple de correction

Il s'agit d'une première version du projet. Tous les éléments SharePoint ne sont donc pas encore optimisés pour un affichage responsive comme on peut le voir par exemple pour la webPart NewsFeed :

image

Je vous propose d'essayer de faire en sorte que cette webPart s'affiche correctement sur les smartphones vu que ce n'est pas encore le cas sur la version actuelle (la version tablette est fonctionnelle par contre).

Nous allons dans un premier temps, repérer toutes les classes présentes dans la webPart et qui ont une largeur fixe :

image image
image image
image image
image image

Pour afficher correctement cette webPart, nous allons simplement définir une largeur inférieure à 480px et surtout faire en sorte que cette largeur ne soit appliquée que lorsque le device utilisé est un mobile.

Pour ce faire, nous allons utiliser une media-query : @media screen and (max-width: 480px) et ajuster les différentes largeurs afin que la webpart s'affiche correctement :

image image image image image

Vous avez maintenant une webPart qui s'affichera entièrement sur tous les écrans mobiles.  Il s’agit bien sur ici d’une correction rapide qui peut être optimisée.

Je vous invite à regarder plus en détail la documentation de cette solution (ici) Rire

Ces billets pourraient aussi vous intéresser

Vous nous direz ?!

Commentaires

comments powered by Disqus