Pouvoir appliquer une marque personnalisée sur un portail est une capacité essentielle, et cet article vous donne un aperçu des options de personnalisation et des meilleures pratiques de personnalisation.
Noter
Bien que ces conseils ciblent principalement SharePoint Online, la plupart s’appliquent également aux portails hébergés dans un environnement SharePoint sur site.
Ce qu’il ne faut pas faire
La liste suivante contient les éléments clés ne pas à faire lorsque vous appliquez la personnalisation à votre portail.
Ne pas :
- Remplacer la marque de la barre de la suite Office 365.
- Personnalisez l’image de marque des sites personnels.
- Implémentez par défaut votre image de marque personnalisée en utilisant des pages maîtres personnalisées.
Exigences relatives à la marque et principes généraux
Les organisations veulent généralement que leur portail soit unique. L’image de marque personnalisée peut aider à promouvoir la marque et les valeurs de l’entreprise, et c’est pourquoi une solution d’image de marque personnalisée est essentielle pour les portails (d’entreprise).
Exigences de marque typiques lors de la création de portails SharePoint Online personnalisés
-
Personnalisez l’apparence :
- Implémentez un jeu de couleurs personnalisé.
- Afficher un logo personnalisé.
- Personnalisez l’apparence de la page de connexion.
- Modifiez l’apparence des commandes de navigation.
-
Ajustez la mise en page :
- Modifier la disposition générale des informations sur les pages.
- Rendez le portail « réactif ».
- Afficher un pied de page personnalisé.
-
Ajoutez plus de fonctionnalités :
- Personnalisez le comportement de la navigation du portail.
- Ajoutez des contrôles personnalisés (composants Web) sur les pages.
Dans les sections suivantes, nous expliquons comment répondre à ces exigences.
Principes généraux
Tenez compte des principes généraux suivants lors de la personnalisation des portails dans un environnement SharePoint Online :
-
Le service SharePoint Online s’améliore constamment. Les mises à jour fournies au service peuvent affecter la structure DOM (Document Object Model) 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).
-
Évitez de personnaliser les 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 de n’importe quelle page maître prête à l’emploi, vous devez également surveiller si cette page maître prête à l’emploi n’est pas mise à jour et réimplémenter ces modifications dans votre page maître personnalisée. Sinon, certaines fonctionnalités de SharePoint peuvent 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, et nous vous recommandons de l’éviter dans la mesure du possible.
-
La personnalisation des sites personnels (sites OneDrive Entreprise) n’est pas prise en charge. Tu peux appliquer des combinaisons de couleurs personnalisées via les paramètres de personnalisation au niveau du client 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 de l’écosystème global d’Office 365. C’est pourquoi chaque portail dispose désormais d’une barre de suite Office 365, et sa personnalisation est ne pas pris en charge (voir la section Barre de la suite Office 365).
-
Lorsque planifier l’image de marque et la structure de vos composants de navigationil est important de suivre les recommandations décrites dans Solutions de navigation pour les portails SharePoint Online.
-
Lorsque extension des fonctionnalités du portail via des contrôles personnalisés (composants Web)il est important de suivre les recommandations Conseils en matière de performances pour les portails SharePoint Online.
-
Il existe des différences significatives entre les approches de branding pour les sites et les pages « classiques » et « modernes ».. 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 ».
Personnalisez le look
Il existe plusieurs méthodes prêtes à l’emploi pour personnaliser l’apparence des portails SharePoint :
- Les administrateurs peuvent personnaliser le thème Office 365 pour un locataire entier.
- Un thème personnalisé peut être appliqué à un site spécifique.
Ces techniques peuvent être utilisées pour « obtenir » les couleurs nécessaires et permettre une coloration flexible sur différents sites de portail. Si plus de flexibilité est nécessaire, nous recommandons aux clients de commencer à partir d’une page maître prête à l’emploi (seattle.master) et d’appliquer un thème personnalisé et/ou d’utiliser les paramètres CSS personnalisés du site (Web.AlternateCSSUrl) pour connecter le 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 :
Suivez ces recommandations lors du développement de fichiers CSS personnalisés pour SharePoint :
- Limitez le remplacement des classes CSS prêtes à l’emploi.
- Utilisez la propriété Web.AlternateCssUrl pour inclure des fichiers CSS personnalisés.
- Ne remplacez pas la marque Office 365 Suite Bar, car cela entraîne une expérience déconnectée lorsque les utilisateurs naviguent hors du portail.
Page de connexion Office 365
Les clients peuvent appliquer la marque de l’entreprise à la page de connexion Office 365. Le processus est décrit dans Ajoutez la marque de votre entreprise à la page de connexion Office 365.
Barre de la suite Office 365
Les conseils pour la Suite Bar du point de vue de Microsoft sont les suivants :
- La Suite Bar 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 Suite Bar et ne doit pas non plus prétendre en être propriétaire.
- Traitez la Suite Bar comme vous le feriez avec la barre d’outils du navigateur en ce sens qu’elle ne fait pas partie de votre application.
- Vous pouvez modifier/configurer la Suite Bar, mais uniquement au niveau de la location et uniquement via les pages d’administration d’Office 365.
- Vous ne devez pas utiliser de code pour modifier (déplacer, masquer) la Suite Bar dans votre application.
- Vous ne devez pas réutiliser certains aspects de la Suite Bar (par exemple, l’icône du lanceur d’application) dans votre application.
- Si vous décidez d’être « intelligent », vous rencontrerez très probablement des problèmes inattendus à l’avenir.
Ajuster la mise en page
Lorsque vous discutez de l’ajustement de la mise en page des portails SharePoint, la première option envisagée par les développeurs est généralement la création d’une page maître personnalisée. Bien que les pages maîtres personnalisées soient toujours prises en charge, nous ne recommandons pas cette approche pour les raisons mentionnées précédemment ; les pages maîtres personnalisées entraînent des risques et des coûts de maintenance supplémentaires à long terme.
Les développeurs doivent envisager des approches alternatives qui leur permettent d’ajuster la disposition des portails SharePoint. Ceux-ci inclus:
- Implémentation de CSS personnalisés.
- Utilisation de mises en page personnalisées.
- Implémentation d’éléments de marque communs (tels que le « pied de page ») en injectant des scripts côté client (cette approche est abordée dans la section suivante).
La combinaison de ces approches vous permet d’obtenir la disposition 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 réalisé :
Ajouter des fonctionnalités
L’intégration de scripts côté client dans les pages peut vous permettre de personnaliser davantage l’apparence et les fonctionnalités du portail. Par exemple, cette approche peut être utilisée pour personnaliser les contrôles de navigation, pour ajouter des en-têtes et des pieds de page personnalisés à toutes les pages du portail ou pour implémenter d’autres blocs d’interface utilisateur personnalisés.
Les approches suivantes peuvent être utilisées pour intégrer JavaScript :
-
Ajoutez une action personnalisée au niveau du site ou de la collection de sites. Cela peut déclencher l’exécution d’un morceau de JavaScript sur toutes les pages du site ou de la collection de sites.
-
Ajoutez un composant WebPart Éditeur 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.
-
Incluez du code JavaScript ou un lien vers un fichier JavaScript dans le contenu d’un fichier de mise en page. Cela peut déclencher l’exécution de JavaScript sur toutes les pages de publication qui utilisent ce fichier de mise en page.
Noter
L’approche d’action personnalisée ne fonctionne que sur les sites « classiques », y compris les portails de publication actuels.
Les exemples PnP suivants montrent comment l’intégration de JavaScript peut être réalisée :
Fournir des actifs de marque
La dernière étape de la mise en œuvre d’une solution de branding consiste à provisionner les actifs de branding. En règle générale, il s’agit de fichiers images, CSS et JavaScript.
Il existe plusieurs approches sur la manière dont ces fichiers peuvent être déployés :
-
Publier des fichiers dans des bibliothèques dans des collections de sites individuelles. Dans ce cas, chaque collection de sites peut utiliser sa propre version des actifs de personnalisation. L’accès aux fichiers est contrôlé à l’aide des mécanismes de sécurité standard de SharePoint. Cependant, la mise à jour des fichiers nécessite que vous les téléchargiez à nouveau sur chaque collection de sites.
-
Publier des fichiers dans une bibliothèque dans une collection de sites (emplacement central). Dans ce scénario, toutes les collections de sites peuvent utiliser la dernière version unique des actifs de personnalisation. Les fichiers mis à jour doivent être téléchargés à 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 des fichiers sur CDN (application Web, Azure CDN ou Office 365 CDN). Dans ce cas, toutes les collections de sites peuvent utiliser la dernière version unique des actifs de personnalisation. Les fichiers mis à jour doivent être téléchargés à un seul emplacement. L’utilisation de CDN peut améliorer les performances ; cependant, le contenu est stocké en dehors de SharePoint, et c’est pourquoi les actifs ne peuvent pas être protégés à l’aide des mécanismes de sécurité standard de SharePoint (à l’exception de la fonctionnalité CDN privé d’Office 365, qui peut sécuriser les fichiers sur un CDN).
le Moteur de provisionnement PnP peut être utilisé pour déployer des actifs de personnalisation dans des bibliothèques SharePoint. Lors de l’utilisation de la fonctionnalité CDN d’Office 365, les fichiers sont automatiquement provisionnés dans le CDN. Lorsque vous utilisez des solutions CDN alternatives, une approche de provisionnement personnalisée est nécessaire pour publier des fichiers sur des CDN.
Pour plus d’informations sur les CDN, consultez :