Personnalisation des couleurs des ServiceNow composants dans AEM

  • Rversion finale: Yokohama
  • Mis à jour 30 janv. 2025
  • 3 minutes de lecture

    • Vous pouvez définir l’aspect et l’ergonomie des ServiceNow composants dans Adobe Experience Manager (AEM) en spécifiant leurs couleurs.

    En tant qu’administrateur AEM, vous pouvez soit modifier les variables de couleur préconfigurées pour tous les composants, soit utiliser la fonction initializeCSS pour personnaliser les couleurs d’un composant particulier à l’aide d’une classe CSS personnalisée. Vous spécifiez la classe CSS personnalisée pour un composant dans la propriété Classe CSS personnalisée . Pour plus d'informations, consultez Afficher des ServiceNow articles de la base de connaissances sur une page Adobe Experience Manager et Vitrines d’affichage ServiceNow sur une page Adobe Experience Manager.

    Remarque :
    Par défaut, les ServiceNow composants sont configurés à l’aide des styles CSS Bootstrap v4.4.1. Si votre page AEM utilise une version Bootstrap différente, le ServiceNow style des composants est remplacé par le style de la page.

    Modifier le thème de couleur pour tous les ServiceNow composants dans AEM

    Définissez le thème de couleur des ServiceNow composants dans Adobe Experience Manager (AEM) en une seule fois en configurant les variables de couleur.

    Avant de commencer

    Rôle requis : administrateur AEM

    Pourquoi et quand exécuter cette tâche

    Remarque :
    Par défaut, les ServiceNow composants sont configurés à l’aide des styles CSS Bootstrap v4.4.1. Si votre page AEM utilise une version Bootstrap différente, le ServiceNow style des composants est remplacé par le style de la page.

    Procédure

    1. Ouvrez CRXDE Lite dans votre navigateur.
      Par exemple, dans votre navigateur, saisissez l’URL au format http://<AEM_hostname> :<AEM_port>/crx/de. L’URL par défaut pour CRXDE Lite est http://localhost:4502/crx/de.
    2. Accédez à applications > ServiceNow : composants > Bibliothèques clientes > clientlib-commune.
    3. Ouvrez le fichier variables.less .
    4. Configurez les variables de couleur disponibles pour les éléments HTML dans les ServiceNow composants.
      Tableau 1. Paramètres des variables de couleur
      Paramètre de couleur Variable
      Contenu textuel @text couleur
      Liens hypertexte @link couleur
      Badges @badge-texte-couleur
      Arrière-plan des badges @badge-couleur-arrière-plan
      Couleur primaire pour mettre en valeur le visuel @primary couleur
      Couleur complémentaire de la couleur primaire, pour une mise en valeur visuelle @secondary couleur
      Titres des composants @title couleur
      Texte du bouton primaire @primary-btn-texte-couleur
      Arrière-plan du bouton primaire @primary-btn-bkg-couleur
      Texte du bouton secondaire @secondary-btn-texte-couleur
      Arrière-plan du bouton secondaire @secondary-btn-bkg-couleur
      Remarque :
      Vous spécifiez une couleur pour une variable de l’une des façons suivantes :
      • Nom de la couleur

        Par exemple, rouge

      • Valeur HEX

        Par exemple, #FF0000

      • Valeur RVB

        Par exemple, rvb(255,0,0)

      • Fonction var

        Utilisez la fonction var pour spécifier une propriété personnalisée pour une couleur. Par exemple, var(--gray-dark).

    5. Dans le menu CRXDE Lite, cliquez sur Enregistrer tout pour enregistrer les modifications sur le serveur AEM.

    Modifier le thème de couleur d’un ServiceNow composant dans AEM

    Remplacez le thème de couleur d’un ServiceNow composant dans Adobe Experience Manager (AEM) à l’aide de la fonction d’initialisation .

    Avant de commencer

    Rôle requis : administrateur AEM

    Pourquoi et quand exécuter cette tâche

    Les variables de couleur spécifiées dans le fichier variables.less sont appliquées à tous les ServiceNow composants dans AEM. Vous pouvez remplacer les couleurs par défaut d’un composant particulier en définissant les variables de couleur du composant dans la fonction initializeCSS .
    Remarque :
    Par défaut, les ServiceNow composants sont configurés à l’aide des styles CSS Bootstrap v4.4.1. Si votre page AEM utilise une version Bootstrap différente, le ServiceNow style des composants est remplacé par le style de la page.

    Procédure

    1. Ouvrez CRXDE Lite dans votre navigateur.
      Par exemple, dans votre navigateur, saisissez l’URL au format http://<AEM_hostname> :<AEM_port>/crx/de. L’URL par défaut pour CRXDE Lite est http://localhost:4502/crx/de.
    2. Accédez à applications > ServiceNow : composants > Bibliothèques clientes > clientlib-commune.
    3. Ouvrez le fichier variables.less .
    4. Spécifier la fonction initializeCSS pour un composant au format <component_type> ; <class_name> ; <color_variable_1> ; <color_variable_2> ; <color_variable_n>.
      • component_type : type de composant auquel vous souhaitez appliquer le thème de couleur personnalisé, par exemple, articlelist, articleview, casecards, etc.
      • class_name : classe CSS personnalisée que vous entrez dans la propriété de classe CSS personnalisée de votre composant.
      • color_variable_1, color_variable_2 color_variable_n : variables de couleur que vous spécifiez pour les éléments HTML d’un composant. Pour plus d’informations, consultez le tableau des paramètres des variables de couleur .

      Utilisez l’exemple de code suivant comme référence pour le style des couleurs au niveau du composant.

      .initialize(@componentType:articlelist;@className:now-article-list;@text-color:red; @link-color:orange;@badge-text-color:blue;@badge-background-color:yellow;@title-color:magenta;@secondary-color:indigo;);
.initialize(@componentType:articleview; @className:now-article-view;@text-color:red; @link-color:orange;@badge-text-color:blue;@badge-background-color:yellow;@secondary-color:indigo;);
.initialize(@componentType:casecards; @className:now-case-cards; @text-color:red;@link-color:orange;@badge-text-color:blue;@badge-background-color:yellow;@title-color:magenta;@secondary-color:indigo;);
.initialize(@componentType:caselist; @className:now-case-list; @text-color:red; @link-color:orange;@title-color:magenta;@primary-color:green;@secondary-btn-text-color:white;@secondary-btn-bkg-color:black;);
.initialize(@componentType:searchbox; @className:now-search-box; @text-color:red; @link-color:orange;@title-color:magenta;@primary-color:green;@secondary-btn-text-color:white;@secondary-btn-bkg-color:black;);
.initialize(@componentType:searchresults;@className:now-search-results;@text-color:gray; @link-color:orange;@badge-text-color:blue;@badge-background-color:yellow;@title-color:magenta;@secondary-color:indigo;);
.initialize(@componentType:caseview;@className:now-case-view;@text-color:red;@link-color:orange;@primary-color:green;@secondary-color:indigo;@primary-btn-text-color:blue;@primary-btn-bkg-color:white;@secondary-btn-text-color:white;@secondary-btn-bkg-color:blue;);
.initialize(@componentType:createcase;@className:now-create-case;@text-color:red;@link-color:orange;@primary-color:green;@secondary-color:indigo;@primary-btn-text-color:blue;@primary-btn-bkg-color:white;@secondary-btn-text-color:white;@secondary-btn-bkg-color:blue;)
    5. Dans le menu CRXDE Lite, sélectionnez Enregistrer tout pour enregistrer les modifications sur le serveur AEM.