Un petit point sur Modern UI des sites Sharepoint Online

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) :

blog ai3 sp-modernui-client-webpart-adding-1 Un petit point sur Modern UI des sites Sharepoint Online

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.

blog ai3 sp-modernui-client-webpart-properties-1 Un petit point sur Modern UI des sites Sharepoint Online

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.
    blog ai3 sp-modernui-sample-injection-js-popin-300x222 Un petit point sur Modern UI des sites Sharepoint Online

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, …).

blog ai3 sp-modernui-sample-injection-js-1024x306 Un petit point sur Modern UI des sites Sharepoint Online

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

blog ai3 sp-modernui-sample-injection-js-command-1024x357 Un petit point sur Modern UI des sites Sharepoint Online

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 :

blog ai3 sp-modernui-page-layout Un petit point sur Modern UI des sites Sharepoint Online

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.

blog ai3 sp-modernui-pagelayout-1024x527 Un petit point sur Modern UI des sites Sharepoint Online

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.

blog ai3 sp-modernui-theme-menu-136x300 Un petit point sur Modern UI des sites Sharepoint Online

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.

blog ai3 sp-modernui-theme-list-71x300 Un petit point sur Modern UI des sites Sharepoint Online

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 :

blog ai3 sp-modernui-site-with-custom-theme Un petit point sur Modern UI des sites Sharepoint Online

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.

blog ai3 sp-modernui-list-form-app Un petit point sur Modern UI des sites Sharepoint Online

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.

blog ai3 sp-modernui-list-form-open Un petit point sur Modern UI des sites Sharepoint Online

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 » :

blog ai3 sp-modernui-column-formating-menu-1024x440 Un petit point sur Modern UI des sites Sharepoint Online

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 :

blog ai3 sp-modernui-columnformatting-none Un petit point sur Modern UI des sites Sharepoint Online

blog ai3 sp-modernui-columnformatting-all Un petit point sur Modern UI des sites Sharepoint Online

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.

blog ai3 sp-modernui-slider-1024x445 Un petit point sur Modern UI des sites Sharepoint Online

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.

2 thoughts on “Un petit point sur Modern UI des sites Sharepoint Online

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.