Farben von ServiceNow-Komponenten in AEM anpassen

  • Freigeben Version: Zurich
  • Aktualisiert 31. Juli 2025
  • 2 Minuten Lesedauer

    • Sie können das Erscheinungsbild der ServiceNow-Komponenten in Adobe Experience Manager (AEM) definieren, indem Sie Farben für sie festlegen.

    Als AEM-Administrator können Sie entweder die für alle Komponenten vorkonfigurierten Farbvariablen ändern oder die Funktion initializeCSS zum Anpassen der Farben einer bestimmten Komponente mithilfe einer benutzerdefinierten CSS-Klasse verwenden. Sie geben die benutzerdefinierte CSS-Klasse für eine Komponente in der Eigenschaft Benutzerdefinierte CSS-Klasse an. Weitere Informationen finden Sie unter ServiceNow-Wissensartikel auf einer Adobe Experience Manager-Seite anzeigen und ServiceNow-Fälle auf einer Adobe Experience Manager-Seite anzeigen.

    Hinweis:
    Standardmäßig werden die ServiceNow-Komponenten mit den Bootstrap v4.4.1 CSS-Styles konfiguriert. Wenn Ihre AEM-Seite eine andere Bootstrap-Version verwendet, wird der Style der ServiceNow-Komponenten vom Seiten-Style überschrieben.

    Farbschema für alle ServiceNow-Komponenten in AEM ändern

    Legen Sie das Farbschema für alle ServiceNow-Komponenten in Adobe Experience Manager (AEM) gleichzeitig fest, indem Sie die Farbvariablen konfigurieren.

    Vorbereitungen

    Erforderliche Rolle: AEM-Administrator

    Warum und wann dieser Vorgang ausgeführt wird

    Hinweis:
    Standardmäßig werden die ServiceNow-Komponenten mit den Bootstrap v4.4.1 CSS-Styles konfiguriert. Wenn Ihre AEM-Seite eine andere Bootstrap-Version verwendet, wird der Style der ServiceNow-Komponenten vom Seiten-Style überschrieben.

    Prozedur

    1. Öffnen Sie CRXDE Lite in Ihrem Browser.
      Geben Sie beispielsweise in Ihrem Browser die URL im Format http://<AEM_Hostname>:<AEM_Port>/crx/de ein. Die Standard-URL für CRXDE Lite ist http://localhost:4502/crx/de.
    2. Navigieren zu apps > servicenow-Komponenten > Clientlibs > Clientlib-commonan.
    3. Öffnen Sie die Datei variable.less.
    4. Konfigurieren Sie die verfügbaren Farbvariablen für die HTML-Elemente in den ServiceNow-Komponenten.
      Tabelle : 1. Einstellungen für Farbvariablen
      Farbeinstellung Variable
      Textinhalt @text-color
      Hyperlinks @link-color
      Abzeichen @badge-text-color
      Hintergrundfarbe der Abzeichen @badge-background-color
      Primärfarbe zur visuellen Hervorhebung @primary-color
      Komplementärfarbe der Primärfarbe zur visuellen Hervorhebung @secondary-color
      Komponententitel @title-color
      Text der primären Schaltfläche @primary-btn-text-color
      Hintergrund der primären Schaltfläche @primary-btn-bkg-color
      Text der sekundären Schaltfläche @secondary-btn-text-color
      Hintergrund der sekundären Schaltfläche @secondary-btn-bkg-color
      Hinweis:
      Die Farbe für eine Variable geben Sie auf eine der folgenden Arten an:
      • Farbname

        Beispiel: Rot

      • HEX-Wert

        Beispiel: #FF0000

      • RGB-Wert

        Beispiel: rgb(255,0,0)

      • var-Funktion

        Verwenden Sie die var-Funktion, um eine benutzerdefinierte Eigenschaft für eine Farbe anzugeben. Beispiel: var(--gray-dark).

    5. Klicken Sie im Menü „CRXDE Lite” auf Alle speichern, um die Änderungen auf dem AEM-Server zu speichern.

    Ändern Sie das Farbschema für eine ServiceNow-Komponente in AEM

    Überschreiben Sie das Farbschema für eine ServiceNow-Komponente in Adobe Experience Manager (AEM) mithilfe der Funktion initialize.

    Vorbereitungen

    Erforderliche Rolle: AEM-Administrator

    Warum und wann dieser Vorgang ausgeführt wird

    Die Farbvariablen, die Sie in der Datei variables.less angeben, werden auf alle ServiceNow-Komponenten in AEM angewendet. Sie können die Standardfarben für eine bestimmte Komponente überschreiben, indem Sie die Farbvariablen für die Komponente in der Funktion initializeCSS festlegen.
    Hinweis:
    Standardmäßig werden die ServiceNow-Komponenten mit den Bootstrap v4.4.1 CSS-Styles konfiguriert. Wenn Ihre AEM-Seite eine andere Bootstrap-Version verwendet, wird der Style der ServiceNow-Komponenten vom Seiten-Style überschrieben.

    Prozedur

    1. Öffnen Sie CRXDE Lite in Ihrem Browser.
      Geben Sie beispielsweise in Ihrem Browser die URL im Format http://<AEM_Hostname>:<AEM_Port>/crx/de ein. Die Standard-URL für CRXDE Lite ist http://localhost:4502/crx/de.
    2. Navigieren zu apps > servicenow-Komponenten > Clientlibs > Clientlib-commonan.
    3. Öffnen Sie die Datei variable.less.
    4. Geben Sie die Funktion initializeCSS für eine Komponente im Format <component_type>;<class_name>;<color_variable_1>;<color_variable_2>;<color_variable_n> an.
      • component_type: Der Typ der Komponente, auf die Sie das benutzerdefinierte Farbschema anwenden möchten, z. B. articlelist, articleview, casecards usw.
      • class_name: Die benutzerdefinierte CSS-Klasse, die Sie in der Eigenschaft Benutzerdefinierte CSS-Klasse Ihrer Komponente eingeben.
      • color_variable_1, color_variable_2, color_variable_n: Die Farbvariablen, die Sie für die HTML-Elemente in einer Komponente angeben. Weitere Informationen finden Sie in der Tabelle für die Farbvariableneinstellungen.

      Verwenden Sie den folgenden Beispielcode als Referenz für Farb-Styles auf der Komponentenebene.

      .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. Klicken Sie im Menü „CRXDE Lite” auf Alle speichern, um die Änderungen auf dem AEM-Server zu speichern.