Personnalisation
Résumé
Il existe différentes raisons pour lesquelles vous souhaiterez faire des personnalisations sur un site SharePoint. Que ce soit pour inclure une identité d’entreprise, ou pour des questions de convivialité ou de marketing, les sites SharePoint Online prennent en charge la personnalisation, mais les options sont légèrement différentes de celles des déploiements SharePoint en local.
Les ressources indiquées dans cet article vous permettront d’envisager l’impact à court et à long terme d’une personnalisation, du point de vue des opérations et de la maintenance. Les conseils relatifs aux analyses d’impact à long terme ne s’appliquent pas uniquement à SharePoint. Il s’agit plutôt de règles d’ordre général applicables à n’importe quelle solution informatique, indépendamment de sa plateforme de développement.
Instructions et règles générales
- Office 365 est mis à jour fréquemment. Pour pouvoir profiter des dernières fonctionnalités, utilisez uniquement les approches recommandées pour appliquer votre identité de marque sur SharePoint Online.
- Lors de la personnalisation de l’expérience utilisateur SharePoint via la manipulation DOM, les CSS personnalisés ou les pages maîtres et mises en pages personnalisées, après avoir appliqué chaque mise à jour de SharePoint, vérifiez que vos personnalisations fonctionnent toujours comme prévu et n’entrent pas en conflit avec les modifications introduites par les mises à jour installées.
Expériences modernes
S’applique à : Office 365
En 2016, l’équipe SharePoint Online a publié des sites de collaboration « modernes ». Ces sites d’équipe « modernes » sont intégrés aux groupes Office 365 et offrent à l’utilisateur final une expérience considérablement améliorée. Les sites d’équipe « modernes » sont conçus pour être réactifs, et sont beaucoup plus rapides à créer et à maîtriser pour l’utilisateur final. Voici certains des principaux avantages des sites d’équipe « modernes » :
- Conçus pour s’adapter à n’importe quel appareil sans personnalisation pour une expérience entièrement réactive.
- Contiennent des fonctionnalités natives d’actualités, de liens rapides et d’activité.
- Intégrés aux groupes Office 365.
- Création considérablement plus rapide que celle des sites d’équipe « classiques ».
- Incluent des listes et bibliothèques « modernes » avec prise en charge de Microsoft Flow et PowerApps.
- Contiennent des fonctionnalités de modification de pages « modernes ».
- Incluent une page de contenu de site mise à jour, avec des informations supplémentaires sur l’utilisation du site.
Les sites « modernes » disposent d’un niveau d’options de personnalisation différent de celui des sites d’équipe « classiques ». Au fil du temps, nous introduirons des options de personnalisation supplémentaires, principalement axées sur l’extensibilité et la personnalisation. La liste suivante présente un aperçu rapide des fonctionnalités prises en charge pour les sites d’équipe « modernes ». Vous pouvez :
- Appliquer un thème personnalisé ou modifier le logo.
- Appliquer un thème prédéfini.
- Créer des colonnes (champs) de site et types de contenu personnalisés.
- Créer des listes et bibliothèques.
- Configurer les paramètres du site, tels que les paramètres régionaux, les langues et les paramètres d’audit.
- Utiliser des extensions SharePoint Framework pour fournir des contrôles et des composants d’interface utilisateur.
- Utiliser la fonctionnalité de site hub pour permettre la navigation entre collection de sites.
Articles
- Personnalisation des expériences « modernes » dans SharePoint Online
- Thèmes de site SharePoint
- Présentation des sites hub SharePoint
- Nouvelles options de thème de site pour les sites SharePoint dans Office 365
- Modifier l’apparence de votre site SharePoint
- Présentation des extensions SharePoint Framework
Solutions
Vidéos
- Webdiffusion PnP – Options de personnalisation avec les expériences « modernes » SharePoint Online
- Webdiffusion PnP – Gestion des expériences modernes dans SharePoint Online
- Webdiffusion PnP – Analyseur d’expérience utilisateur « moderne » SharePoint
- L’intranet mobile et intelligent : sites SharePoint et PowerApps
- Nouveautés et annonces en matière de personnalisation et d’organisation de vos sites SharePoint – BRK2393 – Ignite ' 17
- Nouvelles expériences web dans Office 365 en faveur de vos utilisateurs – BRK1050 – Ignite ' 17
Expériences classiques
S’applique à : Office 365 | SharePoint Server 2016 | SharePoint Server 2013
L’interface utilisateur SharePoint classique repose sur des pages maîtres et des mises en pages ASP.NET. Si elle vous donne davantage de contrôle et de flexibilité en matière de personnalisation, elle nécessite plus d’efforts pour être maintenue opérationnelle. Les pages maîtres et les mises en pages dans SharePoint contiennent des références à des ressources SharePoint. Chaque fois que vous appliquez des correctifs à votre batterie de serveurs SharePoint ou que SharePoint Online est mis à jour, vous devez vous assurer que vos pages maîtres personnalisées contiennent toutes les références nécessaires pour vous permettre d’utiliser pleinement les dernières fonctionnalités de SharePoint.
Articles
- Solutions de personnalisation et de mise en service du site pour SharePoint
- Pages maîtres, galerie de pages maîtres et mises en pages dans SharePoint
- Personnaliser des sites OneDrive Entreprise
Solutions
- Interface utilisateur SharePoint 2013/2016/Online réactive
- Scanneur de modernisation de SharePoint
- Intranet « débutant » PnP pour SharePoint 2013/2016 et SharePoint Online
Vidéos
Thèmes modernes
S’applique à : Sites modernes
Les propriétaires de sites SharePoint disposent de nouvelles options pour appliquer des styles et couleurs personnalisés, ce qui facilite la définition et la gestion des thèmes au sein des collections de sites. Ces nouvelles fonctionnalités comprennent :
- La possibilité de définir des thèmes personnalisés et de les rendre accessibles aux propriétaires de sites. Les thèmes sont définis dans un schéma JSON qui enregistre les paramètres de couleurs et les métadonnées associées pour chaque thème.
- Un outil Générateur de thèmes en ligne pour définir de nouveaux thèmes personnalisés.
- Un jeu simplifié de thèmes par défaut, avec six thèmes clairs et deux thèmes foncés actuellement disponibles.
- Une palette de couleurs mise à jour, avec 12 couleurs claires et 6 couleurs foncées, ainsi que 16 thèmes supplémentaires.
- Vérifiez quels thèmes sont disponibles pour une utilisation dans les pages de vos sites. Par exemple, vous pouvez définir des thèmes personnalisés en fonction de l’identité de votre organisation et faire de ces thèmes les seuls disponibles au sein de vos sites.
Ces fonctionnalités sont disponibles pour les administrateurs via les cmdlets PowerShell, et pour les développeurs via le modèle d’objet côté client CSOM de SharePoint ou l’API REST de SharePoint.
Articles
Apparences composées (thèmes SharePoint classiques)
S’applique à : Sites classiques
Les apparences composées sont des thèmes préconçus inclus dans SharePoint 2013 et SharePoint Online. Pour appliquer une apparence composée à un site SharePoint, sélectionnez Paramètres du site > Apparence > Modifier l’apparence. Vous pouvez ensuite utiliser l’assistant de modification d’apparence pour personnaliser les couleurs, les polices, la page maître et l’image d’arrière-plan d’une apparence composée. L’assistant de modification d’apparence copie, transforme et stocke le CSS dans la base de données de contenu SharePoint. Il recolore également les images et les stocke dans la base de données de contenu.
Articles
- Présentation des thèmes pour SharePoint
- Utilisation des apparences composées pour la personnalisation de sites SharePoint
- Personnalisation de sites SharePoint dans le modèle de complément SharePoint
- Solutions de personnalisation de page et de site SharePoint
- Pratiques testées sur la personnalisation de portail SharePoint Online
Gestionnaire de conception et packages de conception
S’applique à : Sites classiques
Le Gestionnaire de conception est une fonctionnalité de SharePoint qui facilite la création d’une conception entièrement personnalisée et parfaite en pixels tout en utilisant les outils de conception web que vous connaissez déjà. Le Gestionnaire de conception est une fonctionnalité de publication disponible dans les sites de publication classiques dans SharePoint et Office 365.
Le Gestionnaire de conception vous permet de créer une conception visuelle pour votre site web à l’aide de l’outil de conception web ou de l’éditeur HTML de votre choix, en utilisant uniquement les langages HTML et CSS, puis de charger cette conception dans SharePoint. Le Gestionnaire de conception fait office d’interface et de hub central, à partir desquelles vous pouvez gérer tous les aspects d’une conception personnalisée.
Articles
- Présentation du Gestionnaire de conception dans SharePoint
- Modèles d’affichage du Gestionnaire de conception SharePoint
- Fonctionnalités de personnalisation et de conception du Gestionnaire de conception SharePoint
- Pratiques et outils de développement et de conception SharePoint
Pages maîtres et mises en pages personnalisées
S’applique à : Sites classiques
Les pages maîtres définissent l’apparence et le comportement standard que vous souhaitez pour toutes les pages de votre site. Avec les pages de contenu, elles produisent un résultat qui associe la disposition de la page maître aux éléments de la page de contenu.
Étant donné que Microsoft SharePoint repose sur Microsoft ASP.NET, il prend en charge les pages maîtres pour définir des éléments communs à toutes les pages. Vous pouvez spécifier tous les éléments partagés de votre site dans la ou les pages maîtres, et ajouter des éléments spécifiques à la page aux pages de contenu.
Articles
- Présentation du modèle de page SharePoint
- Pages maîtres, galerie de pages maîtres et mises en pages dans SharePoint
- Pages maîtres dans le modèle de compléments SharePoint
- Mises en Pages et Pages maîtres SharePoint (ECM)
- Pages maîtres
- Recommandations de transformation pour solutions de batterie de serveurs du modèle de complément – Remplacement de fichiers déployés via Modules (lab)
- Personnalisation de sites SharePoint dans le modèle de complément SharePoint
Vidéos
- Webdiffusion PnP – Options de personnalisation avec les expériences « modernes » SharePoint Online
- Découvrir les meilleures pratiques pour personnaliser des sites d’équipe SharePoint
- Webdiffusion PnP de développement Office – Personnalisation de SharePoint avec les techniques de modèle de complément
Solutions
- Scanneur de modernisation de SharePoint
- cmdlets de personnalisation PowerShell PnP
- Outil de transformation
Styles CSS personnalisés
S’applique à : Sites classiques
La feuille de style en cascade (CSS) joue un rôle important dans la personnalisation SharePoint. Pour personnaliser la conception de site dans SharePoint 2013 et SharePoint Online, il est utile de bien connaître la façon dont SharePoint utilise CSS.
Articles
- Utilisation des CSS pour personnaliser des pages SharePoint
- Comment transformer des fichiers CSS personnalisés en fichiers à thèmes dans SharePoint
- Personnaliser une page SharePoint avec la mise en service à distance et CSS
- Mettre à niveau les thèmes et CSS personnalisés pour SharePoint
- Appliquer des styles aux champs de page dans SharePoint
- Utilisation d’une feuille de style de site web SharePoint dans des compléments SharePoint
- Donner à votre complément hébergé par un fournisseur l’apparence de SharePoint
- Optimiser les performances de page dans SharePoint – Fichiers JavaScript et CSS
- Personnalisation de sites SharePoint dans le modèle de complément SharePoint
- Pratiques testées pour les portails SharePoint Online – Performances
- Contrôler la personnalisation dans SharePoint avec le modèle de complément
Vidéos
- Module de formation 3 Transformation aux compléments PnP : Personnalisation avec le modèle de complément
- Découvrir les meilleures pratiques pour personnaliser des sites d’équipe SharePoint
Solutions
- Interface utilisateur SharePoint 2013/2016/Online réactive
- Activer le complément d’interface utilisateur réactive PnP avec PowerShell PnP
- Exemple de modèle d’injection CSS
- Scanneur de modernisation de SharePoint
- Outil de transformation
Exemples
- Modèle d’injection CSS
- Propriétés AlternateCssUrl et SiteLogoUrl dans un objet web
- Rendre un maître Seattle préconçu réactif
Manipulation de l’incorporation de script et du DOM
S’applique à : Sites classiques
L’incorporation de script est un modèle dans lequel un JavaScript personnalisé est ajouté à la page, laquelle change ensuite les expériences utilisateur en modifiant la structure DOM html. Les approches classiques pour ce modèle consistent à utiliser des actions utilisateur personnalisées, ou bien JSLink, un composant WebPart d’éditeur de contenu ou un composant WebPart d’éditeur de script. La difficulté du modèle lié à la manipulation DOM est sa dépendance vis-à-vis de la structure de page. Ce type de personnalisations est délicat et peut facilement être affecté par la publication de nouvelles fonctionnalités dans SharePoint Online.
Articles
- Personnalisation de sites SharePoint dans le modèle de complément SharePoint
- Pratiques testées pour les portails SharePoint Online – Performances
- Incorporation de JavaScript dans SharePoint
- Migration des actions personnalisées de l’utilisateur et des éléments de menu BCE (Block Control Edit) vers les Extensions SharePoint Framework
- Migrer de UserCustomAction vers les extensions SharePoint Framework
- Modèles JavaScript et performances
Vidéos
- Injection de JavaScript dans SharePoint Online – Modèles et pratiques de développement Office 365
- Comment mettre à jour vos pages SharePoint via l’incorporation de JavaScript
- Webdiffusion Office Dev PnP – Modèles de développement JavaScript avec SharePoint
Exemples
- Branding.ClientSideRendering – Illustre l’utilisation du rendu côté client avec la propriété JSLink et la manière d’automatiser cette configuration à partir du complément
- Branding.JSLink – Illustre la configuration de la propriété JSLink avec le déploiement de solution de bac à sable sans code
- Core.EmbedJavaScript – Illustre les scénarios d’incorporation JavaScript de base
- Core.EmbedJavaScriptJSOM – Illustre l’incorporation de JavaScript à partir d’un complément hébergé SP
- Core.EmbedJavaScript.HeaderFooter – Illustre l’ajout d’un en-tête et d’un pied de page personnalisés avec un modèle JavaScript incorporé
- Gestionnaire de CDN