# ServiceNow Horizon-Designsystem ## Vorschau der ServiceNow Horizon-Designsystemoberfläche Entwürfe über mehrere Datensätze hinweg beibehalten, eine Anfrage als geprüft markieren und nach dem Filtern oder erneuten Öffnen wiederherstellen. ## Designreferenz für das ServiceNow Horizon-Designsystem Veröffentlichte Referenzen zu Abständen, Eckenradien und Typografie in Horizon Workspace. Die Originalfarben der Anwendung sind bewusst nicht in dieser offiziellen Referenztabelle enthalten. ### Veröffentlichte Workspace-Abstände | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | $now-global-space--xxs | 2px | Exakte veröffentlichte Sass-Referenznamen; dies sind keine erfundenen benutzerdefinierten CSS-Eigenschaften. | | $now-global-space--xs | 4px | Exakte veröffentlichte Sass-Referenznamen; dies sind keine erfundenen benutzerdefinierten CSS-Eigenschaften. | | $now-global-space--sm | 8px | Exakte veröffentlichte Sass-Referenznamen; dies sind keine erfundenen benutzerdefinierten CSS-Eigenschaften. | | $now-global-space--md | 12px | Exakte veröffentlichte Sass-Referenznamen; dies sind keine erfundenen benutzerdefinierten CSS-Eigenschaften. | | $now-global-space--lg | 16px | Exakte veröffentlichte Sass-Referenznamen; dies sind keine erfundenen benutzerdefinierten CSS-Eigenschaften. | | $now-global-space--xl | 24px | Exakte veröffentlichte Sass-Referenznamen; dies sind keine erfundenen benutzerdefinierten CSS-Eigenschaften. | | $now-global-space--xxl | 32px | Exakte veröffentlichte Sass-Referenznamen; dies sind keine erfundenen benutzerdefinierten CSS-Eigenschaften. | | $now-global-space--3xl | 40px | Exakte veröffentlichte Sass-Referenznamen; dies sind keine erfundenen benutzerdefinierten CSS-Eigenschaften. | ### Veröffentlichte Eckenradien | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | now-global-border-radius--sm | 2px | Veröffentlichte Designreferenz. Kleine Werte eignen sich für kompakte Beschriftungen, mittlere für verschachtelte Steuerelemente und große für Container. | | now-global-border-radius--md | 6px | Veröffentlichte Designreferenz. Kleine Werte eignen sich für kompakte Beschriftungen, mittlere für verschachtelte Steuerelemente und große für Container. | | now-global-border-radius--lg | 8px | Veröffentlichte Designreferenz. Kleine Werte eignen sich für kompakte Beschriftungen, mittlere für verschachtelte Steuerelemente und große für Container. | ### Veröffentlichte Typografierollen | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | Heading family | Cabin | Dokumentierte Typografierollen für Workspace. In der Studie werden die öffentlichen Cabin- und Lato-Schriftdateien lokal geladen. | | Body family | Lato | Dokumentierte Typografierollen für Workspace. In der Studie werden die öffentlichen Cabin- und Lato-Schriftdateien lokal geladen. | | header-hero | 32px | Dokumentierte Typografierollen für Workspace. In der Studie werden die öffentlichen Cabin- und Lato-Schriftdateien lokal geladen. | | header-primary | 24px | Dokumentierte Typografierollen für Workspace. In der Studie werden die öffentlichen Cabin- und Lato-Schriftdateien lokal geladen. | | header-secondary | 20px | Dokumentierte Typografierollen für Workspace. In der Studie werden die öffentlichen Cabin- und Lato-Schriftdateien lokal geladen. | | header-tertiary | 16px | Dokumentierte Typografierollen für Workspace. In der Studie werden die öffentlichen Cabin- und Lato-Schriftdateien lokal geladen. | | title-primary | 20px | Dokumentierte Typografierollen für Workspace. In der Studie werden die öffentlichen Cabin- und Lato-Schriftdateien lokal geladen. | | title-secondary | 16px | Dokumentierte Typografierollen für Workspace. In der Studie werden die öffentlichen Cabin- und Lato-Schriftdateien lokal geladen. | ## Vollständiger Leitfaden zum ServiceNow Horizon-Designsystem Ein praktischer Leitfaden zur Auswahl, Anwendung und Überprüfung dieses Systems für ein echtes Interface. Umfassende Anleitung, Einstieg in die Implementierung und Links zu den Quellen. ## Workspace und Implementierungsumfang des ServiceNow Horizon-Designsystems ### Mit dem App-Framework beginnen > Horizon umfasst mehrere App-Frameworks von ServiceNow. Diese Seite konzentriert sich auf Workspace: Warteschlange und ausgewählter Datensatz bleiben gleichzeitig sichtbar, sodass Prüfende lokale Aufgaben bearbeiten können, ohne den Kontext zu verlieren. Service Portal, Native Mobile und Core UI werden nicht als austauschbare Oberflächen dargestellt. Die Live-Studie ist eine eigenständige HTML-Anwendung und keine eingebettete ServiceNow-Instanz. ### Verifizierte Grundlagen von eigenen Entscheidungen trennen Die Referenz enthält die exakten veröffentlichten Abstandsbezeichnungen, Radiuswerte und Typografierollen. Die grüne Aktionsfarbe, die neutralen Oberflächen und das Fokusblau der Studie sind eigene OpenDesign-Werte, die mit einem App-Präfix deklariert werden. Sie werden nicht als offizielle Horizon-Token-Exporte ausgegeben. Zum Ausführen des vollständigen Beispiels ist weder eine erfundene Installation eines ServiceNow-Pakets noch eine Plattform-API erforderlich. ## Abstände, Radien und Typografie in Workspace des ServiceNow Horizon-Designsystems ### Die tatsächliche Abstandsfolge verwenden Die dokumentierte Skala umfasst 2, 4, 8, 12, 16, 24, 32 und 40px. In der Studie dient sie dazu, den Abstand zwischen Warteschlange und Datensatz, die Innenabstände eines Datensatzes und die kleineren Abstände zwischen Metadaten zu unterscheiden. Diese Werte bilden unterschiedliche Gruppierungsbeziehungen ab, auch wenn derselbe Schritt mehrfach verwendet wird. Ein Bildschirm mit überall gleichen Innenabständen würde diese Hierarchie verlieren. ### Überschriften und Lesetexten eigene Rollen zuweisen Für Überschriften wird Cabin und für Fließtext Lato verwendet, entsprechend den veröffentlichten Schriftfamilienrollen. Die Studie verwendet auf breiteren Bildschirmen eine 32px große Seitenüberschrift und eine 24px große Datensatzüberschrift. Als Referenzwerte für Radien dienen 2, 6 und 8px statt einer angenommenen allgemeinen Folge von 4/8/12. Abgerundete Statusbeschriftungen vermitteln den Status nicht allein durch Form oder Farbe, sondern enthalten auch die Wörter „Offen“ oder „Geprüft“. ## Warteschlange, ausgewählter Datensatz und Filterung im ServiceNow Horizon-Designsystem ### Einen Datensatz ausgewählt lassen Jede Aktion in der Warteschlange benennt eine Praxisanfrage und zeigt die zuständige Person sowie den Status an. Bei Auswahl werden die angrenzenden Details angezeigt und die neue Überschrift erhält den Fokus. Die ausgewählte Aktion verwendet aria-current und eine sichtbare Rahmenhervorhebung. Dies ist ein eigenes Listen-Detail-Muster und keine native Horizon-Komponente API; die vollständige Zustandslogik wird zur Einsicht bereitgestellt. ### Wiederherstellen, wenn ein Filter die Auswahl entfernt Der Statusfilter grenzt die sichtbare Warteschlange ein. Wenn die ausgewählte Anfrage nicht mehr dazugehört, wählt die Anwendung die erste noch verfügbare passende Anfrage aus. Gibt es keine, erscheint eine Meldung zum leeren Zustand sowie die Aktion „Alle Anfragen anzeigen“. Bei der Anzahl dient die gesamte Sammlung mit drei Datensätzen als Nenner. Durch das Filtern werden keine Datensätze gelöscht und ihre Status nicht unbemerkt geändert. - Den ausgewählten Datensatz innerhalb der aktuell gefilterten Menge halten. - Einen klaren Leerzustand anzeigen, wenn diese Menge keine Datensätze enthält. - Über „Alle Anfragen anzeigen“ wiederherstellen, ohne Daten zu löschen. ## Entwurfsnotizen und Prüfvalidierung des ServiceNow Horizon-Designsystems ### Entwürfe dem jeweiligen Datensatz zuordnen Während die prüfende Person schreibt, aktualisiert das Textfeld einen Entwurf für den jeweiligen Datensatz. Beim Wechsel zu einer anderen Anfrage und der Rückkehr bleibt der Entwurf erhalten. Mit einer leeren oder nur aus Leerzeichen bestehenden Notiz kann eine Anfrage nicht als geprüft markiert werden: Es erscheint eine Inline-Fehlermeldung, aria-invalid wird gesetzt und der Fokus kehrt zum Textfeld zurück. Im Datenmodell sind gespeicherte Notiz und aktueller Entwurf klar voneinander getrennt. ### Den lokalen Zustandsübergang sichtbar machen Bei erfolgreicher Prüfung wird die bereinigte Notiz gespeichert und der Status des Datensatzes auf „Geprüft“ gesetzt. Die Warteschlange wird anhand des aktuellen Filters neu berechnet, und eine Statusmeldung nennt den betroffenen Datensatz. Sie stellt ausdrücklich klar, dass kein Datensatz an ServiceNow gesendet wurde. So wird durch eine visuelle Bestätigung nicht der Eindruck erweckt, die Beispielanwendung hätte einen Plattformvorgang ausgeführt. ## ServiceNow Horizon Designsystem – Erneutes Öffnen und barrierefreies Feedback ### Nützliche Arbeit beim erneuten Öffnen beibehalten Mit „Anfrage erneut öffnen“ wird ein geprüfter Datensatz wieder auf „Offen“ gesetzt, die gespeicherte Notiz bleibt dabei erhalten. Bei einem Filter, der nur geprüfte Datensätze anzeigt, kann die Liste dadurch leer bleiben; die Wiederherstellungsaktion zeigt dann wieder die vollständige Warteschlange an. Diese Kombination prüft das Zusammenspiel von Datensatzstatus, Filterung und ausgewähltem Detail und liefert so aussagekräftigere Erkenntnisse als die isolierte Prüfung einzelner Schaltflächen. ### Text, Fokus und Status gemeinsam nutzen Statusfarben werden durch Textbezeichnungen ergänzt. Bei der Validierung erhält das zu korrigierende Feld den Fokus, bei der Navigation zwischen Datensätzen die Überschrift, und lokale Aktualisierungen werden über einen Statusbereich vermittelt. Diese Studie ersetzt keine Tests mit assistiven Technologien in einem produktiven Workspace. Sie stellt einen vollständigen, nachvollziehbaren lokalen Ablauf bereit, mit dem solche Tests beginnen können. ## ServiceNow Horizon Designsystem – Vollständiger lokaler Quellcode und Prüfungen ### Öffentlich verfügbare Schriftpakete installieren Der bereitgestellte Einstiegspunkt importiert die öffentlich verfügbaren Schriftpakete Cabin und Lato sowie das ursprüngliche Kompositions-Stylesheet. Das HTML-Grundgerüst stellt das Stammelement bereit. Dieses Beispiel enthält weder eine ServiceNow-Laufzeitumgebung noch Zugangsdaten oder einen Endpunkt. Eine tatsächliche Plattformintegration sollte mit den Workspace- und Entwicklerressourcen von Horizon beginnen, statt das lokale Datensatz-Array als ServiceNow-API-Vertrag zu behandeln. 1. Die öffentlich verfügbaren Schriftpakete in einer Vanilla-App installieren. 2. Den vollständigen Einstiegspunkt, das Stylesheet und das HTML-Grundgerüst speichern. 3. Vor dem Speichern einer Prüfung den Entwurfserhalt testen. 4. Statusfilterung mit erneutem Öffnen und Wiederherstellung bei leerem Zustand kombinieren. ### Den zusammenhängenden Workflow prüfen Eine leere Notiz absenden, einen Entwurf eingeben, eine andere Anfrage aufrufen und zurückkehren, um zu prüfen, ob der Entwurf erhalten blieb. Den Datensatz als geprüft markieren, nach „Geprüft“ filtern und ihn erneut öffnen. Die Wiederherstellung bei leerem Zustand und die beibehaltene Notiz prüfen. Bei schmalen Ansichtsflächen wird die Warteschlange vor dem Detail gestapelt, ohne dass eine Aktion verloren geht. Neben diesen Zustandsänderungen werden auch das Laden der Schriftarten, JavaScript-Fehler und horizontaler Überlauf geprüft. ## ServiceNow Horizon Designsystem – Komponentenbeispiele ### main.js — vollständige Logik für Warteschlange und Prüfungen Alle Datensätze, Entwürfe, Filter, Validierungen und Wiederherstellungsaktionen. ``` import '@fontsource/cabin/latin-600.css'; import '@fontsource/lato/latin-400.css'; import '@fontsource/lato/latin-700.css'; import './horizon.css'; const records=[{id:'REQ-104',title:'Review the workshop outline',owner:'Design team',priority:'Normal',detail:'Compare the proposed agenda with the decision the team needs to make. Capture one question that should be resolved before the workshop.'},{id:'REQ-105',title:'Check the shared resource list',owner:'Content team',priority:'High',detail:'Review the resource titles for clear action language and confirm that each summary explains when the resource is useful.'},{id:'REQ-106',title:'Prepare the research readout',owner:'Research team',priority:'Normal',detail:'Group the observations by theme. Keep direct observations separate from the team’s interpretation and include the questions still open.'}].map(x=>({...x,status:'Open',note:''}));let selected=records[0].id; document.querySelector('#root').innerHTML=`

OpenDesign · Workflow study

Team review workspace

Review three original practice requests. Update a local record while keeping the queue and details in context.

`; function renderQueue(){let filter=document.querySelector('#filter').value,visible=records.filter(x=>filter==='All'||x.status===filter);if(!visible.some(x=>x.id===selected))selected=visible[0]?.id;const queue=document.querySelector('#queue');queue.replaceChildren(...visible.map(r=>{let b=document.createElement('button');b.className='queue-item';b.dataset.id=r.id;b.setAttribute('aria-current',String(r.id===selected));b.innerHTML=`${r.id}${r.title}${r.owner}${r.status}`;b.onclick=()=>{selected=r.id;renderQueue();renderDetail();document.querySelector('#record-title')?.focus()};return b}));document.querySelector('#queue-count').textContent=`${visible.length} of ${records.length} requests`;document.querySelector('#empty').hidden=visible.length>0;document.querySelector('#clear').hidden=visible.length>0;} function renderDetail(){const r=records.find(x=>x.id===selected),panel=document.querySelector('#detail');if(!r){panel.innerHTML='

Choose another status

All local requests are still available through the status filter.

';return}panel.innerHTML=`

${r.id} · ${r.owner}

${r.title}

${r.detail}

Priority
${r.priority}
Status
${r.status}

Write one useful observation. This note remains in the page.

`;const note=panel.querySelector('#note');note.value=r.draft??r.note;note.oninput=()=>{r.draft=note.value;document.querySelector('#error').hidden=true;note.removeAttribute('aria-invalid');document.querySelector('#feedback').textContent=''};panel.querySelector('#review').onsubmit=e=>{e.preventDefault();if(!note.value.trim()){document.querySelector('#error').hidden=false;note.setAttribute('aria-invalid','true');note.focus();return}r.note=note.value.trim();r.draft=r.note;r.status='Reviewed';renderQueue();renderDetail();document.querySelector('#feedback').textContent=r.id+' reviewed locally. No record was sent to ServiceNow.';document.querySelector('#record-title')?.focus();};panel.querySelector('#reopen').onclick=()=>{r.status='Open';renderQueue();renderDetail();document.querySelector('#feedback').textContent=r.id+' reopened. The saved review note is retained.';document.querySelector('#record-title')?.focus();};} document.querySelector('#filter').onchange=()=>{renderQueue();renderDetail();document.querySelector('#feedback').textContent=''};document.querySelector('#clear').onclick=()=>{document.querySelector('#filter').value='All';renderQueue();renderDetail();document.querySelector('#filter').focus()};renderQueue();renderDetail(); ``` Code-Referenz - Das gesamte Verhalten ist ursprünglicher Anwendungscode und keine offizielle Workspace-Komponente API. ### horizon.css — ursprüngliche Gestaltung Dokumentierte Referenzwerte für Typografie, Abstände und Eckenradien sowie anwendungsspezifisch präfixierte Originalfarben. ``` :root{--app-ink:#21342c;--app-action:#285c47;--app-surface:#f2f5f3;--app-border:#c9d3cd;--app-error:#a32424;--app-radius-small:2px;--app-radius-medium:6px;--app-radius-large:8px}*{box-sizing:border-box}body{margin:0;font:16px/1.5 Lato,Arial,sans-serif;color:var(--app-ink);background:var(--app-surface)}main{max-width:1160px;margin:auto;padding:32px}h1,h2,h3{font-family:Cabin,Arial,sans-serif;font-weight:600;line-height:1.25}h1{font-size:32px;margin:8px 0 16px}h2{font-size:24px;margin:8px 0 24px}.eyebrow{font-size:12px;letter-spacing:.08em;font-weight:700}header>p:last-child{max-width:68ch}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:24px 0}.toolbar label{display:flex;gap:12px;align-items:center}select,textarea,button{font:inherit}select{padding:8px;border:1px solid var(--app-border);border-radius:6px;background:white;color:var(--app-ink)}.workspace{display:grid;grid-template-columns:minmax(200px,1fr) minmax(0,2fr);gap:24px}nav{align-self:start}.queue-item{display:grid;gap:8px;width:100%;text-align:left;margin-bottom:12px;background:white;border:1px solid var(--app-border);border-radius:8px;padding:16px;color:var(--app-ink);cursor:pointer}.queue-item[aria-current=true]{border:2px solid var(--app-action);padding:15px;background:#e8f0ea}.queue-item strong{font-size:16px}.record-id,.queue-item>span{font-size:14px}.status{justify-self:start;border-radius:2px;padding:2px 8px;background:#e8eeeb}.status.reviewed{background:#d0ead9}.workspace section{background:white;padding:24px;border:1px solid var(--app-border);border-radius:8px;min-width:0}dl{display:flex;gap:40px;margin:24px 0}dt{font-size:14px;color:#58685f}dd{margin:4px 0;font-weight:700}form>label{font-weight:700}.hint{font-size:14px;margin:8px 0}textarea{width:100%;padding:12px;border:1px solid #6b7f72;border-radius:6px;resize:vertical;color:var(--app-ink)}button{border:1px solid #6b7f72;border-radius:6px;background:white;padding:8px 16px;color:var(--app-ink);cursor:pointer}.primary{background:var(--app-action);color:white;border-color:var(--app-action)}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}.error{color:var(--app-error);font-weight:700}.hint,.error{max-width:60ch}#feedback:empty{display:none}#feedback{background:#d0ead9;padding:16px;border-radius:6px}footer{font-size:14px;margin-top:32px;padding-top:24px;border-top:1px solid var(--app-border)}:focus-visible{outline:3px solid #477fd0;outline-offset:3px}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.workspace{grid-template-columns:1fr}.toolbar{flex-wrap:wrap}.workspace section{padding:16px}h1{font-size:24px}.eyebrow{overflow-wrap:anywhere}} ``` Code-Referenz - Originale Farbwerte dürfen nicht als offizielle Horizon-Design-Tokens bezeichnet werden. ### index.html — Grundgerüst Der vollständige Einstiegspunkt für die eigenständige App. ``` Team review study
``` Code-Referenz - Die Vite-Stammdatei index.html durch diese Datei ersetzen. ## ServiceNow Horizon Designsystem – Einrichtung des AI Agent ### Ausgangspunkt für die Implementierung Damit wird ausschließlich die ursprüngliche Studie ausgeführt. Eine native ServiceNow-Implementierung erfordert die entsprechende Plattformentwicklungsumgebung. ``` npm create vite@latest horizon-study -- --template vanilla cd horizon-study npm install npm install @fontsource/cabin@5.3.0 @fontsource/lato@5.3.0 # Save index.html at root; main.js and horizon.css in src. npm run dev ``` ### Ein Prompt für dein Projekt ``` Die vollständige ursprüngliche Studie zur Prüfung von Anfragen mit den verifizierten Referenzwerten für Typografie, Abstände und Eckenradien von Horizon Workspace erstellen. Originalfarben mit einem anwendungsspezifischen Präfix versehen. Entwürfe pro Datensatz beibehalten, vor der Prüfung validieren, die gefilterte Auswahl nach Statusänderungen neu berechnen, Notizen beim erneuten Öffnen beibehalten und eine Wiederherstellung bei leerem Zustand bereitstellen. Keine Live-Verbindung zu ServiceNow behaupten. ``` ## ServiceNow Horizon Designsystem – Quellen und Geltungsbereich Eine ursprüngliche OpenDesign-HTML/CSS-Studie, die auf den Grundlagen von Horizon Workspace aufbaut. Sie verwendet dokumentierte Werte für Cabin/Lato-Typografie, Abstände und Eckenradien sowie Originalfarben und eine eigene Workflow-Logik. Sie ist weder eine ServiceNow-Instanz noch eine native Workspace-Laufzeitumgebung. - Workspace – Übersicht Framework-Kontext und verwandte Ressourcen. - Abstände Exakte Bezeichnungen der modularen Skala und der Sass-Referenzen. - Eckenradius Veröffentlichte Werte von 2/6/8 px. - Typografie Cabin/Lato und Verwendungszwecke der Schriftgrößen. - Farbrichtlinien Zweck und nicht farbgebundene Statushinweise. ## ServiceNow Horizon Designsystem – Verwandte Ressourcen ### ServiceTitan Anvil Anvil2 konkretisieren – mit seinem Token-Modell aus drei Ebenen, verifizierten Rollenwerten für hell und dunkel sowie einer vollständigen Interaktion zur Servicezuweisung mit synchronisierten Techniker-, Zeit- und Prüfstatusangaben. ### Siemens iX Untersuchen Sie Industrieereignisse mithilfe einer klar definierten Schweregrad-Terminologie, theme-gerechter Farbrollen und der iX Event List API. Dieser Leitfaden erstellt ein lokales Geräteprotokoll, ohne einen geprüften Eintrag mit einem behobenen Maschinenalarm zu verwechseln. ### Sprout Social Seeds Prüfen Sie Seeds’ tatsächliche öffentliche Farb-, Abstands-, Produkttypografie- und Rahmen-Design-Tokens anhand einer vollständigen redaktionellen Prüfwarteschlange mit gemischter Auswahl, gefilterten leeren Zuständen und Rückgängig-Funktion. - [Implementierungsreferenz](https://horizon.servicenow.com/workspace/overview) - [Quelle](https://horizon.servicenow.com/workspace/foundations/spacing/spacing-overview) - [Quelle](https://horizon.servicenow.com/workspace/foundations/corner-radius) - [Quelle](https://horizon.servicenow.com/workspace/foundations/typography/typography-overview) - [Code-Referenz](https://horizon.servicenow.com/workspace/overview) - [Workspace – Übersicht Framework-Kontext und verwandte Ressourcen.](https://horizon.servicenow.com/workspace/overview) - [Abstände Exakte Bezeichnungen der modularen Skala und der Sass-Referenzen.](https://horizon.servicenow.com/workspace/foundations/spacing/spacing-overview) - [Eckenradius Veröffentlichte Werte von 2/6/8 px.](https://horizon.servicenow.com/workspace/foundations/corner-radius) - [Typografie Cabin/Lato und Verwendungszwecke der Schriftgrößen.](https://horizon.servicenow.com/workspace/foundations/typography/typography-overview) - [Farbrichtlinien Zweck und nicht farbgebundene Statushinweise.](https://horizon.servicenow.com/workspace/foundations/color/color-overview)