Modifier des composants
Modifiez Générateur de thèmes les composants individuels pour mieux correspondre à votre marque et aux normes de conformité en matière d’accessibilité. Les accroches de thème que vous pouvez modifier sont spécifiques à chaque type de composant.
Avant de commencer
Rôle requis : ui_builder_admin
Pour en savoir plus sur les rôles granulaires, reportez-vous à la section Granular admin roles.
Pourquoi et quand exécuter cette tâche
Les composants que vous pouvez modifier ont Générateur de thèmes été créés dans le ServiceNow AI Platform Système de design. Pour plus d’informations, consultez Composants Next Experience sur le ServiceNow site développeur.
Pour obtenir des instructions sur la modification du composant, reportez-vous à la Navigation unifiée section S’aligner sur votre marque à l’aide du Navigation unifiée composant.
Le nombre total d’infractions en matière d’accessibilité est indiqué sur l’icône de badge numérotée rouge 
à côté du panneau de l’inspecteur d’accessibilité.
Procédure
-
Utilisez la liste déroulante Page pour sélectionner la vue de page de l’éditeur.
Figure 1. Liste déroulante de pages -
Dans la vue de la page Éditeur, sélectionnez l’onglet Styles des composants .
Les styles de composants sont répertoriés sous forme graphique.
-
Sélectionnez l’onglet Édition .
Remarque :Les composants qui peuvent être modifiés s’affichent. Pour plus d’informations sur la façon de filtrer la liste des composants pour localiser le composant que vous souhaitez modifier, reportez-vous à la section Prévisualiser les composants. -
Sélectionnez le composant que vous souhaitez modifier pour accéder au panneau Style configurable.
Lorsque vous examinez les composants répertoriés dans la page Édition, notez que certains composants peuvent afficher le symbole suivant.
Remarque :Le symbole d’avertissement d’accessibilité indique que le contraste des couleurs du composant sélectionné ne respecte pas les normes d’accessibilité WCAG (Web Content Accessibility Guidelines) 2.1 pour le contraste des couleurs. Pour plus d’informations sur la modification de composants présentant des violations d’accessibilité, reportez-vous à la section Ajuster un composant pour qu’il réponde aux normes d’accessibilité. -
Dans le panneau Style configurable, modifiez les crochets de thème disponibles pour le composant sélectionné, selon vos besoins.
Figure 2. Panneau de style configurable Les accroches de thème modifiables disponibles dépendent du type de composant que vous avez sélectionné. Par exemple, si vous sélectionnez un composant de badge, vous pouvez modifier les couleurs et les accroches d’accessibilité du badge. Si vous sélectionnez un composant de lien de texte, vous pouvez modifier la couleur de base et les crochets d’accessibilité.
Remarque :Une fois que vous avez mis à jour les crochets spécifiques aux composants, les modifications que vous apportez à partir des styles globaux n’affectent pas les modifications apportées à vos composants. Les styles spécifiques aux composants sont prioritaires sur les styles définis de manière globale. -
Si vous sélectionnez une couleur à modifier, le sélecteur de couleurs s’ouvre.
Figure 3. Sélecteur de couleurs Remarque :Par défaut, le sélecteur de couleurs affiche toutes les couleurs disponibles pour le composant. Utilisez l’onglet Mes couleurs pour sélectionner parmi une liste prédéfinie de couleurs ou choisissez l’onglet Personnalisé pour sélectionner le modèle de couleur spécifique que vous préférez : HEX, RVB ou TSL. -
Si vous sélectionnez une famille de polices ou une police à modifier, la fenêtre modale du sélecteur s’ouvre.
Figure 4. Modifier le modal de famille de polices Remarque :Si vous avez chargé une police personnalisée, elle apparaîtra dans le modal pour la sélection. Vous pouvez également charger une police personnalisée directement à partir de la fenêtre modale du sélecteur, ce qui la rend disponible pour une utilisation dans tout votre thème. Pour plus d'informations, consultez Charger une police personnalisée dans votre thème. - Facultatif :
Sélectionnez l’icône
Annuler pour rétablir votre police en Source Sans Pro, si nécessaire.
-
Accédez à l’éditeur de composants où vous pouvez appliquer le style à divers aspects d’un composant à l’aide de l’une des deux méthodes répertoriées :
- Double-cliquez sur la mosaïque du composant.
- Sélectionnez le bouton Interactions de style, Sous-composants de style ou Variantes de style dans le panneau Styles configurables, en fonction de ce qui est disponible pour ce composant spécifique. Remarque :Tous les composants ne contiennent pas de pièces modifiables.
Figure 5. Éditeur de composants
-
Dans l’éditeur de composants, choisissez l’interaction, la variante ou le sous-composant du composant sélectionné, puis modifiez les crochets de thème disponibles.
Remarque :Une fois que vous avez enregistré les modifications apportées à l’un des crochets de couleur, un symbole Supprimer le remplacement apparaît. Le symbole Supprimer le remplacement vous permet de rétablir les couleurs d’origine générées automatiquement.
- Facultatif :
Revenez à l’écran Vue d’ensemble des composants à l’aide des liens contenus dans le chemin de navigation.
Figure 6. Navigation dans le fil d’Ariane de modification de composant
Résultats
Si votre thème est publié, les modifications apportées à vos composants sont visibles par les utilisateurs qui ont appliqué votre thème lors de l’actualisation. Pour en savoir plus sur la publication de votre thème, reportez-vous à la section Publier vos thèmes avec Générateur de thèmes.