Lorsque Microsoft a annoncé le Modern UI sur les sites Sharepoint, je me suis dit « Enfin, on va avoir quelque chose de sympa ! ».
Effectivement, les sites modern UI sont hautement responsives, agréables à regarder, propres et clairs. Puis, j’ai regardé comment modifier la charte graphique, personnaliser les formulaires, ajouter une mise en page, et là, je suis tombé de haut… tout est verrouillé : impossible de personnaliser quoi que ce soit ! Du coup, impossible de mettre en place SON Intranet avec Sharepoint en Modern UI.
Mais ça, c’était avant ! Les choses ont pas mal évoluées depuis.
L’objectif de cet article est de faire un tour d’horizon des nouvelles (plus ou moins) fonctionnalités qui nous permettrons, partenaires intégrateurs Sharepoint, de personnaliser les sites Modern UI pour créer des sites (Intranet ou applications métier) intégrant la « Marque entreprise » de nos clients et leurs règles/processus métier.
Client Webpart
Niveau : Développeur
Il s’agit ici de développer des webparts, non pas en C# comme d’habitude, mais en Javascript : d’où le terme « Client ».
Le développement de « client webparts » s’appuie fortement sur le « Sharepoint Framework » et sur des techniques utilisées par les développeurs FrontEnd : Yeoman, gulp, TypeScript, API Rest, …
Fonctionnellement, le client webpart permet d’intégrer dans Sharepoint Online des fonctionnalités métier en utilisant Javascript pour requêter des données (via des webservice SOAP) et les mettre en forme dans la page HTML.
En mode conception de la page, la webpart se trouve avec les webparts proposées par défaut (HelloWorld dans le cas présent) :

Et on retrouve une notion de « propriété » qui permet de gérer le comportement de la webpart dan s la page. Dans l’exemple ci-dessous la propriété « Description Field » permet de modifier le texte de la webpart.

Bref, les développeurs Sharepoint ne sont pas dépaysés : il faut juste oublier les traitements côté serveur pour se lancer à fond dans Javascript.
Il devient alors facile d’afficher, par exemple, le cours de l’action Ai3 dans la page d’accueil de l’Intranet.
Injection Javascript
Niveau : Développeur
Cette technique permet, pour un site donné, d’exécuter une méthode Javascript à chaque chargement de page. Elle est très utilisée pour gérer la mise en forme générale du site, et plus précisément pour intégrer un header sur toutes les pages du site.
Dans les pages modern UI, des zones qui peuvent être utilisées pour y intégrer du contenu HTML :
- Top : zone en entête de page.
- Bottom : zone en pied de page.
- DialogContainer : zone pour l’affichage d’un contenu sous forme de popin.

Sur notre Intranet Ai3, c’est ce qui est utilisé pour présenter la zone grise au-dessus du menu de navigation. Dans le cas présent, on y intègre des fonctionnalités complémentaires (favoris, activités récentes, …).

Cette technique permet aussi d’ajouter de nouvelles commandes dans les barres d’outils associées aux listes :

Ce type de personnalisation va permettre d’ajouter des traitements métier sur des éléments de liste, toujours via un traitement Javascript qui va interagir avec Sharepoint et/ou des applications tierces via des webservices REST.
Page layout
Niveau : Contributeur de contenu
Il s’agit plus d’une fonctionnalité de contribution que réellement une fonctionnalité de personnalisation, mais comme cette notion de « page layout » n’existait pas dans les premières versions du Modern UI, j’ai préféré revenir dessus.
Une page « Modern UI » est divisée en sections qui peuvent avoir différentes dispositions :

Cela permet d’organiser le contenu de la page de manière très souple, et même peut être plus souple qu’avec les sites classiques puisqu’une page peut commencer sur 3 colonnes, passer sur une seule, et revenir sur 2 colonnes selon les besoins du contributeur.

Thème
Niveau : Concepteur de sites
La notion de thème est apparue assez récemment sur les sites Modern UI : il va permettre aux administrateurs de sites de changer le look du site.

Cette fonctionnalité n’est pas encore déployée sur tous les tenants : je ne l’ai d’ailleurs par encore de mon tenant de développement.
Les possibilités sont assez limitées. L’utilisateur va pouvoir définir 3 couleurs principales de leurs déclinaisons. Ces différents couleurs seront appliquées sur les classes CSS correspondantes. Le fonctionnement est sur le principe identique à la fonctionnalité « Modifier l’apparence » d’un site classique.

Pour les entreprises souhaitant avoir un rendu homogène sur un ensemble de sites, il est possible de créer des templates personnalisés. Pour cela, il faut générer une description (avec l’outil ThemeGenerator), et la référencer dans Sharepoint à l’aide de la commande PowerShell Add-SPOTheme. Les templates proposés par défaut peuvent être masqués à l’aide de la commande PowerShell Set-SPOHideDefaultThemes.
A noter qu’en utilisant un thème personnalisé, il est possible d’utiliser une image de fond de page :

Personnalisation formulaires
Niveau : Développeur / Concepteur de sites
Power Apps permet de générer des applications de gestion de données métier accessibles depuis un navigateur ou un smartphone. Les données sont généralement issues de Sharepoint. Un cas d’usage pourrait être de gérer un annuaire des personnes d’astreinte à contacter en cas de problème : cet annuaire est disponible simplement et rapidement via un navigateur ou une application mobile.
Pourquoi je parle de Power Apps ? Il s’agit d’un outil permettant de générer des applications autonomes !
Et bien depuis peu, Power Apps peut être utilisé pour personnaliser les formulaires de consultation, de création et de modification des éléments d’une liste.

Sans développement, il est donc possible de supprimer des colonnes dans les formulaires, de masquer une colonne en fonction de la valeur d’une autre (gestion des états), d’ordonner les colonnes, et bien plus encore.
Contrairement à PowerApp en mode autonome, le formulaire reste affiché dans la page de la liste.

L’intégration avec Sharepoint est donc totale.
Mise en forme des champs
Niveau : Développeur / Concepteur de sites
Dans les paramètres d’une colonne de liste, il y a maintenant une commande « Mettre en forme cette colonne » :

L’écran à droite permet d’intégrer des règles de formatage au format JSON.
Les possibilités de formatage, sans être infinies, permettent de traiter un certain nombre de cas d’usages illustrés ci-dessous :


Attention : cette technique se base sur un système déclaratif au format JSON. Cela signifie que l’on n’injecte pas de code Javascript pour avoir une liberté totale sur l’apparence du champ comme c’était le cas avec les JSLink. On est limité aux capacités de représentation du JSON.
Personnalisation des rendus des champs
Niveau : Développeur
Dans un chapitre précédent, je parlais de la mise en forme des champs. L’objet de ce chapitre est de vous montrer qu’il est possible d’aller plus loin que du simple formatage de la valeur, mais bien de gérer en javascript la façon dont est présentée la colonne dans son ensemble : la valeur, mais aussi son comportement.
Dans l’exemple ci-dessous, le champ « Percent » est éditable même en vue liste à l’aide d’un slider.

Conclusion
Avec ces différentes fonctionnalités, plus ou moins récentes, je pense que la bascule vers le modern UI va s’accélérer. C’est plutôt une bonne nouvelle pour les utilisateurs de Sharepoint qui sont souvent confrontés à des problématiques ergonomiques.
Certains sujets seront développés dans de futures articles… stay in touch ! 😉
Si j’ai oublié des choses, j’hésitez pas à me le faire savoir, je compléterai l’article avec plaisir.