Bearbeiten Sie Komponenten

Bearbeiten Sie Themengenerator einzelne Komponenten, damit sie besser zu Ihrer Marke passen und Compliance-Standards für Barrierefreiheit erfüllen. Die Themen-Hooks, die Sie bearbeiten können, sind für jeden Komponententyp spezifisch.

Vorbereitungen

Erforderliche Rolle: Administrator

Warum und wann dieser Vorgang ausgeführt wird

Die Komponenten, die Sie in Themengenerator bearbeiten können, wurden in Now Platform Design Systemerstellt. Weitere Informationen finden Sie unter Next Experience-Komponenten auf der Developer Site ServiceNow.

Anweisungen zum Bearbeiten der Komponente Zentrale Navigation finden Sie unter Passen Sie sie mit der Komponente Zentrale Navigation an Ihre Marke an.

Die Gesamtzahl der Verstöße gegen Barrierefreiheit wird auf dem roten nummerierten Abzeichen neben dem Bereich für Barrierefreiheitsinspektor angezeigt.

Prozedur

1. Navigieren zu Alle > Now-Experience-Framework > Designs > Themengenerator.
   Die Zielseite des Themengenerators wird in der Homepage-Ansicht angezeigt.
2. Verwenden Sie die Dropdown-Liste Seite, um die Editor-Seitenansicht auszuwählen.

   Abbildung : 1. Editor-Seitenansicht

   

3. Wählen Sie in der Dropdown-Liste Design das Design aus, für das Sie Komponenten bearbeiten möchten.
4. Wählen Sie in der Seitenansicht des Editors die Registerkarte Komponentenstile aus.
   Die Komponentenstile werden grafisch aufgelistet.

   

5. Wählen Sie die Registerkarte Bearbeiten.

   

   Hinweis:

   Die bearbeitbaren Komponenten werden angezeigt. Informationen zum Filtern der Liste der Komponenten, um die zu bearbeitende Komponente zu finden, finden Sie unter Zeigen Sie eine Vorschau der Komponenten an.
6. Wählen Sie die Komponente aus, die Sie bearbeiten möchten, um auf den Bereich Konfigurierbarer Stil zuzugreifen.
   Wenn Sie sich die auf der Bearbeitungsseite aufgeführten Komponenten ansehen, beachten Sie, dass einige Komponenten möglicherweise das folgende Symbol anzeigen.

   

   Hinweis:

   Das Warnsymbol für Barrierefreiheit weist darauf hin, dass der Farbkontrast der ausgewählten Komponente nicht den Barrierefreiheitsstandards für Webinhalte (WCAG) 2.1 für Farbkontrast entspricht. Weitere Informationen finden Sie unter Passen Sie eine Komponente an, um die Standards für Barrierefreiheit zu erfüllen.
7. Bearbeiten Sie im Bereich Konfigurierbarer Stil die Design-Hooks, die für die ausgewählte Komponente verfügbar sind, nach Bedarf.

   Abbildung : 2. Konfigurierbarer Stilbereich

   

   Welche bearbeitbaren Design-Hooks verfügbar sind, hängt vom Typ der von Ihnen ausgewählten Komponente ab. Wenn Sie beispielsweise eine Badge-Komponente auswählen, können Sie die Farben und die Barrierefreiheits-Hooks für das Abzeichen bearbeiten. Wenn Sie eine Textlink-Komponente auswählen, können Sie die Grundfarbe und die Hooks für Barrierefreiheit bearbeiten.

   Hinweis:

   Nachdem Sie die komponentenspezifischen Hooks aktualisiert haben, werden die Komponentenstile durch Änderungen, die Sie am globalen Stil vornehmen, nicht aktualisiert, da komponentenspezifische Stile Vorrang vor global definierten Stilen haben.
8. Wenn Sie eine zu bearbeitende Farbe auswählen, wird die Farbauswahl geöffnet.

   Abbildung : 3. Farbauswahl

   

   Hinweis:

   Standardmäßig zeigt die Farbauswahl alle verfügbaren Farben für die Komponente an. Sie können den Schieberegler Unzugängliche Auswahlmöglichkeiten ausblenden auswählen, um die Farbauswahl auf die Farben zu beschränken, die gemäß den aktuellen Richtlinien für barrierefreie Webinhalte (Web Content Accessibility Guidelines, WCAG) als zugänglich gekennzeichnet sind.
9. Wenn Sie Ihre Änderungen abgeschlossen haben, wählen Sie Save changes (Änderungen speichern)aus.
10. Greifen Sie auf den Komponenteneditor zu, in dem Sie verschiedene Aspekte einer Komponente mit einer der beiden aufgeführten Methoden formatieren können:
    • Doppelklicken Sie auf die Komponentenkachel.
    • Wählen Sie entweder die Schaltfläche Stilinteraktionen, Stilunterkomponentenoder Stilvarianten im Bereich der konfigurierbaren Stile, je nachdem, was für die jeweilige Komponente verfügbar ist. Nicht alle Komponenten enthalten bearbeitbare Teile.

      Abbildung : 4. Konfigurierbarer Stilbereich mit Stilschaltfläche

      

11. Wahlweise: Kehren Sie über die Links im Navigationspfad zum Bildschirm „Komponentenübersicht“ zurück.

    Abbildung : 5. Breadcrumb-Navigation für Komponentenbearbeitung

    

Ergebnisse

Wenn Ihr Design derzeit veröffentlicht wird, sind Ihre Komponentenbearbeitungen für Anwender sichtbar, die Ihr Design bei der Aktualisierung angewendet haben. Informationen zum Veröffentlichen Ihres Designs finden Sie unter Veröffentlichen Sie Ihre Designs mit Themengenerator.