Erkunden Sie die genauen Referenzwerte für Abstände, Radien und Typografie im Horizon Workspace anhand eines vollständigen lokalen Ablaufs zur Prüfung von Anfragen – mit Speicherung von Entwürfen, Validierung, Statusfiltern und Wiederherstellung.
Original HTML/CSS/JavaScript mit lokalen Cabin- und Lato-Schriftarten; keine Verbindung zur ServiceNow-Plattform. · Implementierungsreferenz
02
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 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.
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
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.
Die öffentlich verfügbaren Schriftpakete in einer Vanilla-App installieren.
Den vollständigen Einstiegspunkt, das Stylesheet und das HTML-Grundgerüst speichern.
Vor dem Speichern einer Prüfung den Entwurfserhalt testen.
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.
main.js — vollständige Logik für Warteschlange und Prüfungen
Alle Datensätze, Entwürfe, Filter, Validierungen und Wiederherstellungsaktionen.
javascript
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=`<main><header><p class="eyebrow">OpenDesign · Workflow study</p><h1>Team review workspace</h1><p>Review three original practice requests. Update a local record while keeping the queue and details in context.</p></header><div class="toolbar"><label>Status <select id="filter"><option>All</option><option>Open</option><option>Reviewed</option></select></label><p id="queue-count" role="status"></p></div><div class="workspace"><nav aria-label="Practice request queue"><div id="queue"></div><p id="empty" hidden>No requests match this status.</p><button id="clear" hidden>Show all requests</button></nav><section id="detail" aria-labelledby="record-title"></section></div><p id="feedback" role="status"></p><footer><strong>Original application, documented foundations.</strong> Cabin headings, Lato body text, the published 2–40px spacing scale and 2/6/8px radius references inform this study. The colors and application behavior are original OpenDesign choices. This is not the ServiceNow platform or a connected Workspace.</footer></main>`;
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=`<span class="record-id">${r.id}</span><strong>${r.title}</strong><span>${r.owner}</span><span class="status ${r.status.toLowerCase()}">${r.status}</span>`;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='<h2 id="record-title">Choose another status</h2><p>All local requests are still available through the status filter.</p>';return}panel.innerHTML=`<p class="eyebrow">${r.id} · ${r.owner}</p><h2 id="record-title" tabindex="-1">${r.title}</h2><p>${r.detail}</p><dl><div><dt>Priority</dt><dd>${r.priority}</dd></div><div><dt>Status</dt><dd>${r.status}</dd></div></dl><form id="review"><label for="note">Review note</label><p class="hint" id="hint">Write one useful observation. This note remains in the page.</p><textarea id="note" rows="4" aria-describedby="hint error"></textarea><p id="error" class="error" hidden>Enter a review note before marking this request reviewed.</p><div class="actions"><button type="submit" class="primary">${r.status==='Open'?'Mark reviewed':'Update review'}</button><button type="button" id="reopen" ${r.status==='Open'?'hidden':''}>Reopen request</button></div></form>`;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();
Die Vite-Stammdatei index.html durch diese Datei ersetzen.
04
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.
sh
npm create vite@latest horizon-study -- --template vanilla
cd horizon-study
npm install
npm install @fontsource/[email protected] @fontsource/[email protected]
# Save index.html at root; main.js and horizon.css in src.
npm run dev
Ein Prompt für dein Projekt
Agenten-Prompt
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.
05
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.
