Personnalisation des couleurs des composants ServiceNow dans AEM

  • Rversion finale: Washingtondc
  • Mis à jour 1 févr. 2024
  • 3 minutes de lecture

    • Vous pouvez définir l'aspect et la convivialité des composants ServiceNow dans Adobe Experience Manager (AEM) en leur attribuant des 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. Pour spécifier la classe CSS personnalisée pour un composant, vous devez utiliser la propriété de Classe CSS personnalisée. Pour plus d'informations, consultez Afficher les articles de la base de connaissances ServiceNow sur une page Adobe Experience Manager et Afficher les tickets ServiceNow sur une page Adobe Experience Manager.

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

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

    Définissez le thème de couleur pour les composants ServiceNow dans Adobe Experience Manager (AEM) 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 composants ServiceNow sont configurés à l'aide des styles Bootstrap v4.4.1. CSS. Si votre page AEM utilise une version Bootstrap différente, le style des composants ServiceNow est remplacé par le style de 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 à la Apps > composants ServiceNow > clientlibs > clientlib-common.
    3. Ouvrez le fichier variables.less.
    4. Configurez les variables de couleur disponibles pour les éléments HTML dans les composants ServiceNow.
      Tableau 1. Paramètres de variables de couleur
      Paramètre de couleur Variable
      Contenu de texte @text-color
      Hyperliens @link-color
      Badges @badge-text-color
      Arrière-plan des badges @badge-background-color
      Couleur primaire pour une accentuation visuelle @primary-color
      Couleur complémentaire à la couleur primaire, pour une accentuation visuelle @secondary-color
      Titres des composants @title-color
      Texte du bouton Principal @primary-btn-text-color
      Arrière-plan du bouton Principal @primary-btn-bkg-color
      Texte du bouton secondaire @secondary-btn-text-color
      Arrière-plan du bouton secondaire @secondary-btn-bkg-color
      Remarque :
      Pour spécifier une couleur pour une variable, procédez de l'une des façons suivantes :
      • Nom de la couleur

        Par exemple, red

      • Valeur HEX

        Par exemple, #FF0000

      • Valeur RVB

        Par exemple, rgb (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 changements sur le serveur AEM.

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

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

    Avant de commencer

    Rôle requis : administrateur AEM

    Pourquoi et quand exécuter cette tâche

    Les variables de couleur que vous spécifiez dans le fichier variables.less sont appliquées à tous les composants ServiceNow dans AEM. Vous pouvez remplacer les couleurs par défaut d'un composant particulier en définissant les variables de couleur pour le composant dans la fonction initializeCSS.
    Remarque :
    Par défaut, les composants ServiceNow sont configurés à l'aide des styles Bootstrap v4.4.1. CSS. Si votre page AEM utilise une version Bootstrap différente, le style des composants ServiceNow est remplacé par le style de 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 à la Apps > composants ServiceNow > clientlibs > clientlib-common.
    3. Ouvrez le fichier variables.less.
    4. Spécifiez la fonction initializeCSS pour un composant au format <component_type>;<class_name>;<color_variable_1>;<color_variable_2>; <color_variable_n>.
      • component_type : le type du composant sur lequel vous souhaitez appliquer le thème de couleur personnalisé, par exemple, articlelist, articleview, casecards, et ainsi de suite.
      • class_name : la classe CSS personnalisée que vous saisissez dans la propriété de Classe CSS personnalisée de votre composant.
      • color_variable_1, color_variable_2, color_variable_n : les variables de couleur que vous spécifiez pour les éléments HTML d'un composant. Pour plus d'informations, consultez la table Paramètres de variables de couleur.

      Utilisez l'exemple de code suivant comme référence pour le style de couleur 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, cliquez sur Enregistrer tout pour enregistrer les changements sur le serveur AEM.