Partager via

Recommandations pour la personnalisation des portails SharePoint Online

  • Article

La possibilité d’appliquer une touche personnalisée à un portail est critique et cet article fournit une vue d’ensemble des options de personnalisation et meilleures pratiques en la matière.

Remarque

Si ces recommandations visent principalement SharePoint Online, la plupart d’entre elles s’appliquent également aux portails hébergés dans un environnement SharePoint local.

Ce qu’il ne faut surtout pas faire

La liste suivante énumère les actions qu’il ne faut pas faire lorsque vous personnalisez votre portail.

Vous ne devez pas :

  • Modifier une personnalisation de la barre Suite Office 365.
  • Adapter une personnalisation pour des sites personnels.
  • Implémenter par défaut votre personnalisation en utilisant des pages maîtres personnalisées.

Exigences et principes généraux applicables à la personnalisation

Les organisations veulent généralement que leur portail soit unique. Une personnalisation peut aider une organisation à promouvoir son image de marque et ses valeurs. C’est pourquoi une solution de personnalisation est essentielle pour les portails professionnels.

Exigences de personnalisation typiques lors de la création de portails SharePoint Online personnalisés

  • Personnaliser l’apparence :

    • Implémenter un modèle de couleurs personnalisé.
    • Afficher un logo personnalisé.
    • Personnaliser l’apparence de la page de connexion.
    • Modifier l’apparence des contrôles de navigation.

  • Ajustez la disposition :

    • Modifier la disposition générale des informations sur les pages.
    • Rendre le portail « réactif ».
    • Afficher un pied de page personnalisé.

  • Ajouter des fonctionnalités :

    • Personnaliser le comportement de la navigation du portail.
    • Ajouter des contrôles personnalisés (composants WebPart) sur les pages.

Dans les sections suivantes, nous décrivons comment respecter ces exigences.

Principes généraux

Lors de la personnalisation de portails dans un environnement SharePoint Online, prenez en compte les principes généraux suivants :

  • Le service SharePoint Online s’améliore en permanence. Les mises à jour fournies au service peuvent affecter la structure DOM des pages prêtes à l’emploi et le contenu des fichiers prêts à l’emploi (par exemple, les pages maîtres). Les développeurs doivent garder cela à l’esprit et ne doivent pas s’appuyer sur des approches de personnalisation non prises en charge (par exemple, la position d’éléments spécifiques dans la structure DOM de la page).

  • Éviter de personnaliser des pages maîtres. Les mises à jour du service peuvent affecter la structure des pages maîtres prêtes à l’emploi. Si vous avez implémenté une page maître personnalisée en copiant le contenu d’une page maître prête à l’emploi, vous devez surveiller de près si cette page maître prête à l’emploi est mise à jour, puis ré-implémenter ces modifications dans votre page maître personnalisée. Autrement, certaines fonctionnalités de SharePoint risquent de se comporter de manière incorrecte lorsque votre page maître personnalisée est utilisée. C’est pourquoi la personnalisation des pages maîtres entraîne des risques et des coûts de maintenance supplémentaires que nous vous recommandons d’éviter autant que possible.

  • La personnalisation de sites personnels (sites OneDrive Entreprise) n’est pas prise en charge. Vous pouvez appliquer des modèles de couleurs personnalisés via des paramètres de personnalisation au niveau du locataire Office 365. Notez que cela s’applique à l’expérience moderne par défaut de OneDrive Entreprise.

  • Les portails SharePoint Online doivent être considérés comme faisant partie intégrante de l’écosystème Office 365 global. C’est pourquoi chaque portail dispose désormais d’une barre Suite Office 365 dont la personnalisation n’est pas prise en charge (voir la section Barre Suite Office 365).

  • Lorsque vous planifiez une personnalisation et la structure de vos composants de navigation, il est important de suivre les recommandations décrites dans Solutions de navigation pour les portails SharePoint Online.

  • Lors de l’extension de la fonctionnalité du portail via des contrôles personnalisés (composants WebPart), il est important de suivre les recommandations de l’Aide relative aux performances des portails SharePoint Online.

  • Il existe des différences significatives entre les approches « classique » et « moderne » de la personnalisation des sites et des pages. Pour plus d’informations sur les sites et les pages « modernes », voir Personnalisation des sites d’équipe « modernes » et Personnalisation des pages de site « modernes ».

Personnaliser l’apparence

Il existe plusieurs manières prédéfinies de personnaliser l’apparence des portails SharePoint :

  • Les administrateurs peuvent personnaliser le thème Office 365 pour un locataire complet.
  • Il est possible d’appliquer un thème personnalisé à un site spécifique.

Ces techniques permettent d’« obtenir » les couleurs nécessaires et d’appliquer une mise en couleur flexible aux différents sites du portail. Si vous avez besoin de davantage de flexibilité, nous vous recommandons de partir d’une page maître prête à l’emploi (seattle.master) et de lui appliquer un thème personnalisé ou d’utiliser les paramètres CSS personnalisés du site (Web.AlternateCSSUrl) pour associer les fichiers CSS nécessaires. Une image de logo personnalisée peut être définie à l’aide de la propriété Web.SiteLogoUrl.

Ces techniques sont illustrées dans les articles et exemples PnP suivants :

Lors du développement de fichiers CSS personnalisés pour SharePoint, suivez les recommandations suivantes :

  • Limitez le remplacement des classes CSS prêtes à l’emploi.
  • Utilisez la propriété Web.AlternateCssUrl pour inclure des fichiers CSS personnalisés.
  • Ne modifiez pas la personnalisation de la barre Suite Office 365, car cela aurait pour effet de produire une expérience déconnectée lorsque les utilisateurs quittent le portail.

Page de connexion à Office 365

Les locataires peuvent appliquer la personnalisation de l’organisation à la page de connexion à Office 365. Le processus est décrit dans Ajouter l’identité de votre entreprise à la page de connexion d’Office 365.

Barre Suite Office 365

Les instructions relatives à la barre Suite du point de vue de Microsoft sont les suivantes :

  • La barre Suite est un composant de navigation au niveau du locataire, qui permet aux utilisateurs de se déplacer facilement entre tous les services Office 365.
  • Votre application de portail ne « possède » pas la barre Suite.
  • La barre Suite ne faisant pas partie de votre application, traitez-la comme la barre d’outils du navigateur.
  • Vous pouvez modifier/configurer la barre Suite, mais uniquement au niveau de la location et uniquement via les pages d’administration Office 365.
  • Vous ne devez pas utiliser de code pour modifier (déplacer, masquer) la barre Suite dans votre application.
  • Vous ne devez pas réutiliser des aspects de la barre Suite (par exemple, l’icône du Lanceur d’applications) dans votre application.
  • Si vous décidez d’être « futé », vous rencontrerez probablement des problèmes inattendus à l’avenir.

Ajuster la disposition

Lorsque d’une discussion sur l’ajustement de la disposition de portails SharePoint, la première option généralement envisagée par les développeurs est la création d’une page maître personnalisée. Si les pages maîtres personnalisées sont toujours prises en charge, nous déconseillons cette approche pour les raisons évoquées plus haut. En effet, des pages maîtres personnalisées exposent à des risques et à des coûts de maintenance supplémentaires à long terme.

Les développeurs doivent envisager d’autres approches pour ajuster la disposition de portails SharePoint. Ces approches sont les suivantes :

  • Implémentation d’un fichier CSS personnalisé.
  • Utilisation de mises en page personnalisées.
  • Implémentation d’éléments de personnalisation communs (tels que le « pied de page ») en injectant des scripts côté client (cette approche est décrite dans la section suivante).

La combinaison de ces approches vous permet d’obtenir la structure de portail SharePoint souhaitée sans développer de pages maîtres personnalisées.

Les exemples et solutions PnP suivants sur GitHub montrent comment cela peut être accompli :

Ajouter des fonctionnalités

L’intégration de scripts côté client dans les pages peut vous permettre de personnaliser davantage l’apparence et la fonctionnalité du portail. Par exemple, cette approche permet de personnaliser des contrôles de navigation, d’ajouter des en-têtes et pieds de page personnalisés à toutes les pages du portail, ou d’implémenter d’autres blocs d’interface utilisateur personnalisés.

Les approches suivantes peuvent être utilisées pour incorporer du code JavaScript :

  • Ajouter une action personnalisée au niveau du site ou de la collection de sites. Cela peut déclencher l’exécution d’un code JavaScript sur toutes les pages du site ou de la collection de sites.

  • Ajouter un composant WebPart Editeur de contenu ou Éditeur de script sur une page en utilisant du code JavaScript réel ou un lien vers un fichier JavaScript. Cela peut déclencher l’exécution de code JavaScript sur une page spécifique.

  • Inclure du code JavaScript ou un lien vers un fichier JavaScript dans le contenu d’un fichier de dispositions de page. Cela peut entraîner l’exécution de code JavaScript sur toutes les pages de publication utilisant ce fichier de dispositions de page.

Remarque

L’approche d’action personnalisée ne fonctionne que sur des sites « classiques », y compris les portails de publication actuels.

Les exemples PnP suivants montrent comment effectuer l’incorporation de code JavaScript :

Remarque

Lors de l’extension des fonctionnalités du portail à l’aide de code JavaScript, il est essentiel de suivre les recommandations énoncées dans l’Aide relative aux performances des portails SharePoint Online.

Approvisionner des éléments de personnalisation

La dernière étape de l’implémentation d’une solution de personnalisation est l’approvisionnement d’éléments de personnalisation. Ceux-ci incluent généralement des images, des fichiers CSS et des fichiers JavaScript.

Il existe plusieurs approches du déploiement de ces fichiers :

  • Publier les fichiers dans des bibliothèques de collections de sites individuelles. Dans ce cas, chaque collection de sites peut utiliser sa propre version des éléments de personnalisation. L’accès aux fichiers est contrôlé par des mécanismes de sécurité SharePoint standard. Cependant, la mise à jour des fichiers nécessite de les re-charger dans chaque collection de sites.

  • Publier les fichiers dans une bibliothèque d’une collection de sites unique (emplacement central). Dans ce scénario, toutes les collections de sites peuvent utiliser la dernière version des éléments de personnalisation. Les fichiers mis à jour doivent être chargés dans un seul emplacement. Les administrateurs doivent s’assurer que les utilisateurs de toutes les collections de sites ont accès aux fichiers publiés dans l’emplacement central.

  • Publier les fichiers sur un réseau de distribution de contenu (CDN) (application web, Microsoft Azure Content Delivery Network ou CDN Office 365) . Dans ce cas, toutes les collections de sites peuvent utiliser la dernière version des éléments de personnalisation. Les fichiers mis à jour doivent être chargés dans un seul emplacement. Si l’utilisation d’un CDN peut améliorer les performances, le contenu est stocké en dehors de SharePoint de sorte qu’il est impossible de protéger les éléments à l’aide de mécanismes de sécurité SharePoint standard (à l’exception de la capacité de CDN privé Office 365 qui permet de sécuriser des fichiers sur un CDN).

Le moteur d’approvisionnement PnP permet de déployer des éléments de personnalisation sur des bibliothèques SharePoint. Lorsque vous utilisez la capacité de CDN Office 365, les fichiers sont automatiquement approvisionnés dans le CDN. Lorsque vous utilisez d’autres solutions CDN, une approche d’approvisionnement personnalisée est nécessaire pour publier des fichiers sur des CDN.

Pour plus d’informations sur les CDN, voir :

Voir également