Smart Tiles : présentation de la solution

Introduction

Chaque page d'intranet comporte une poignée de destinations que l'on ouvre bien plus souvent que toutes les autres : le portail RH, le système de feuilles de temps, la bibliothèque de documents de l'équipe, le support informatique. Smart Tiles transforme ces destinations en un panneau de grandes vignettes colorées et dotées d'icônes, que les visiteurs reconnaissent au premier coup d'œil et atteignent en un seul clic.

Smart Tiles est un composant WebPart SharePoint Framework pour les pages modernes de SharePoint Online. L'auteur d'une page l'ajoute à la page, dessine les vignettes directement sur la page en mode édition — sans listes, sans fichiers de configuration — puis publie. Cet article présente le composant WebPart : où il fonctionne, ce que peut être une vignette et quels paramètres façonnent le panneau dans son ensemble.

Où fonctionne Smart Tiles

Smart Tiles est déployé dans un locataire Microsoft 365 depuis le catalogue d'applications sous la forme d'un seul package. Après le déploiement, le composant WebPart est disponible sur tous les sites du locataire sans autre activation. Il peut être placé :

• sur n'importe quelle page moderne — une page de site, une actualité ou une page d'accueil ;
• dans une section ordinaire, dans une section à colonnes ou dans une section pleine largeur, où les vignettes s'étendent sur tout l'écran ;
• sur une page d'application à composant WebPart unique, où les vignettes constituent le seul contenu de la page.

Le composant WebPart suit le thème du site, y compris les thèmes sombres et les variantes de couleur d'une section, et son interface est disponible en 44 langues, sélectionnées automatiquement d'après la langue de l'utilisateur.

Ce que peut être une vignette

Chaque vignette est un lien doté de son propre aspect. Les propriétés d'une vignette se répartissent en quatre groupes.

Textes. Une vignette possède un titre et une description facultative. La description s'affiche en plus petit sous le titre et dans l'infobulle de la vignette ; elle peut être désactivée pour l'ensemble du panneau lorsqu'on souhaite un aspect compact.

Lien. Une vignette peut ouvrir une page, un document ou n'importe quelle adresse web, dans la même fenêtre ou dans un nouvel onglet. Au-delà des liens ordinaires, une vignette peut lancer un e-mail (mailto:), composer un numéro (tel:), envoyer un SMS (sms:) ou ouvrir une conversation ou un canal Microsoft Teams (msteams:). Un lien vers une vidéo YouTube est reconnu automatiquement : la vignette peut afficher la miniature de la vidéo en arrière-plan et reçoit un bouton de lecture à la place d'une icône.

Aspect. Chaque vignette a une couleur d'arrière-plan et une couleur de police, choisies parmi les six couleurs d'accentuation du thème du site, une palette de couleurs prédéfinies, le noir et le blanc. À la place d'une couleur, une vignette peut avoir une image d'arrière-plan — saisie sous forme d'URL ou choisie dans une bibliothèque de documents du site. L'icône provient de l'un des cinq jeux d'icônes — Standard (Fluent UI), File type, App (Microsoft 365), Azure et Vitextra — ou est remplacée par une image personnalisée, comme le logo de l'entreprise. Une vignette existe en six tailles, de Extra Small à Full Width.

Audience. Une vignette peut être affichée uniquement aux membres de groupes SharePoint sélectionnés du site ou de groupes Microsoft Entra ID. Les vignettes sans audience sont visibles par tous.

Paramètres qui façonnent l'ensemble du panneau

Le volet de propriétés du composant WebPart regroupe les paramètres qui s'appliquent à toutes les vignettes à la fois :

• Font Size (Taille de police) et Icon size (Taille des icônes) — respectivement sept et six niveaux ;
• Internal Indent, Icon Indent et External Indent — l'espace à l'intérieur d'une vignette, sous l'icône et entre les vignettes ;
• Shadow — une ombre portée douce sous les icônes ;
• Show Titles et Show Descriptions — les textes des vignettes ;
• Hover Effect — l'un des neuf effets visuels, tels que la luminosité, le flou ou les niveaux de gris, appliqué lorsque le pointeur reste sur une vignette ou que celle-ci reçoit le focus du clavier, avec une intensité et une durée réglables.

Modification sur la page

Toute la modification se fait en mode édition de la page, directement sur les vignettes :

• Add Tile ajoute une nouvelle vignette à la fin du panneau ;
• le menu contextuel d'une vignette permet d'ouvrir ses propriétés, de modifier sa taille, ses couleurs et son icône, ou de la supprimer ;
• les vignettes se réorganisent par glisser-déposer ;
• Export enregistre les vignettes dans un fichier JSON et Import les charge sur une autre page ou un autre site, en remplaçant les vignettes existantes ou en s'y ajoutant.

Le composant WebPart stocke les vignettes dans les propriétés de la page elle-même. Aucune liste n'est créée sur le site et rien ne quitte le locataire : les vignettes sont publiées avec la page et suivent ses versions et son flux d'approbation.

Visiteurs

Un visiteur voit un panneau léger. Les outils de modification ne sont chargés qu'en mode édition : une page publiée ne télécharge donc que ce qui est nécessaire pour afficher les vignettes. Les vignettes sont annoncées comme des liens par les lecteurs d'écran, peuvent être atteintes et activées au clavier, et l'effet au survol respecte le paramètre « réduire les animations » du système d'exploitation. Les liens qui s'ouvrent dans un nouvel onglet sont isolés de la page qui les a ouverts.

Licences

Smart Tiles est installé avec une période d'essai. Le groupe About du volet de propriétés indique l'état de la licence, la version du composant WebPart, la date de début de l'abonnement et le locataire auquel il est associé. À la fin de la période d'essai, le composant WebPart affiche un avis à la place des vignettes jusqu'à l'activation d'un abonnement.