Esplora i riferimenti esatti a spaziature, raggi e tipografia di Horizon Workspace attraverso un flusso completo di revisione delle richieste locali, con conservazione delle bozze, convalida, filtri di stato e recupero.
Originale HTML/CSS/JavaScript con font Cabin e Lato locali; nessuna connessione alla piattaforma ServiceNow. · Riferimento per l’implementazione
02
Riferimento di progettazione del sistema di progettazione sistema di design ServiceNow Horizon
Riferimenti pubblicati di Horizon Workspace per spaziatura, raggi degli angoli e tipografia. I colori originali dell’applicazione sono intenzionalmente esclusi da questa tabella di riferimento ufficiale.
Riferimento di progettazione pubblicato. I valori piccoli sono adatti alle etichette compatte, quelli medi ai controlli annidati e quelli grandi ai contenitori.
now-global-border-radius--md
6px
Riferimento di progettazione pubblicato. I valori piccoli sono adatti alle etichette compatte, quelli medi ai controlli annidati e quelli grandi ai contenitori.
now-global-border-radius--lg
8px
Riferimento di progettazione pubblicato. I valori piccoli sono adatti alle etichette compatte, quelli medi ai controlli annidati e quelli grandi ai contenitori.
Ambito di Workspace e implementazione del sistema di progettazione sistema di design ServiceNow Horizon
Inizia dal framework dell’app
Horizon supporta diversi framework per le app ServiceNow. Questa pagina si concentra su Workspace: una coda e il record selezionato restano visibili insieme, così chi esamina le richieste può gestire le attività locali senza perdere il contesto. Service Portal, Native Mobile e Core UI non vengono presentati come temi intercambiabili. Lo studio interattivo è un’applicazione originale HTML, non un’istanza ServiceNow incorporata.
Distingui le basi verificate dalle scelte originali
La documentazione di riferimento riporta i nomi esatti degli spaziature pubblicati, i valori dei raggi e i ruoli tipografici. Il verde per le azioni, le superfici neutre e il blu per il focus dello studio sono valori OpenDesign originali, dichiarati con un prefisso dell’app. Non sono presentati come esportazioni ufficiali dei token Horizon. Per eseguire l’esempio completo non è necessaria l’installazione di pacchetti ServiceNow inventati né una piattaforma API.
Spaziatura, raggi e tipografia di Workspace nel sistema di progettazione sistema di design ServiceNow Horizon
Usa la sequenza di spaziatura effettiva
La scala documentata è 2, 4, 8, 12, 16, 24, 32 e 40px. Lo studio la usa per distinguere lo spazio tra la coda e il record, la spaziatura interna al record e le distanze più ridotte tra i metadati. Questi valori rispondono a diverse esigenze di raggruppamento, anche quando si ripete lo stesso intervallo. Una schermata con spaziatura uniforme perderebbe questa gerarchia.
Assegna ruoli distinti ai titoli e al testo di lettura
Cabin viene usato per i titoli e Lato per il testo del corpo, in linea con i ruoli pubblicati delle famiglie tipografiche. Lo studio usa un titolo di pagina da 32px sugli schermi più ampi e un titolo del record da 24px. I raggi di riferimento sono 2, 6 e 8px, non una sequenza generica presunta di 4/8/12. Le etichette di stato arrotondate non comunicano lo stato soltanto tramite forma o colore: riportano anche le parole Aperto o Esaminato.
Coda, record selezionato e filtri nel sistema di progettazione sistema di design ServiceNow Horizon
Mantieni un solo record selezionato
Ogni azione nella coda indica una richiesta di esercitazione e ne mostra il responsabile e lo stato. Selezionandola, si compilano i dettagli adiacenti e si sposta il focus sul nuovo titolo. L’azione selezionata usa aria-current e un bordo visibile. Si tratta di un pattern originale di elenco e dettagli, non di un componente nativo di Horizon API; la logica completa degli stati è inclusa per poterla esaminare.
Ripristina la selezione quando un filtro la rimuove
Il filtro per stato restringe la coda visibile. Se la richiesta selezionata non rientra più nei risultati, l’applicazione seleziona la prima richiesta disponibile che corrisponde al filtro. Se non ne rimane nessuna, mostra un messaggio di elenco vuoto e un’azione Mostra tutte le richieste. Il conteggio usa come denominatore l’intera raccolta di tre record. Il filtro non elimina record né ne modifica lo stato senza avvisare.
Mantieni il record selezionato nell’insieme filtrato corrente.
Mostra uno stato vuoto chiaro quando l’insieme non contiene record.
Ripristina la coda con Mostra tutte le richieste, senza eliminare dati.
Note in bozza e verifica dell’esame nel sistema di progettazione sistema di design ServiceNow Horizon
Associa le bozze al rispettivo record
Mentre chi esamina scrive, l’area di testo aggiorna una bozza associata al record corrispondente. Passando a un’altra richiesta e tornando indietro, la bozza viene mantenuta. Una nota vuota o composta solo da spazi non può contrassegnare una richiesta come esaminata: compare un errore in linea, viene impostato aria-invalid e il focus torna all’area di testo. Il modello dei dati mantiene espliciti la nota salvata e la bozza corrente.
Rendi osservabile la transizione dello stato locale
Riapertura e feedback accessibile nel sistema di progettazione sistema di design ServiceNow Horizon
Conserva il lavoro utile alla riapertura
L’azione Riapri richiesta riporta un record esaminato allo stato Aperto, mantenendone la nota salvata. Se è attivo il filtro Solo esaminati, l’elenco può restare vuoto; l’azione di ripristino rende quindi nuovamente disponibile l’intera coda. Questa combinazione mette alla prova la relazione tra stato del record, filtri e dettagli selezionati ed è più significativa del controllo isolato di ciascun pulsante.
Combina testo, focus e stato
I colori dello stato sono accompagnati da etichette testuali. La convalida sposta il focus sul campo da correggere, la navigazione tra i record lo sposta sul titolo e gli aggiornamenti locali vengono comunicati tramite una regione di stato. In un ambiente Workspace di produzione, lo studio non sostituisce i test con tecnologie assistive. Fornisce un flusso locale completo e ispezionabile da cui iniziare quei test.
Codice sorgente locale completo e verifiche del sistema di progettazione sistema di design ServiceNow Horizon
Installa le dipendenze pubbliche dei font
Il file di ingresso fornito importa i pacchetti pubblici dei font Cabin e Lato e il foglio di stile originale della composizione. Il contenitore HTML fornisce l’elemento radice. Questo esempio non include runtime, credenziali o endpoint ServiceNow. Per un’integrazione effettiva con la piattaforma, è opportuno partire dalle risorse per sviluppatori e Workspace di Horizon, anziché considerare l’array locale dei record come un contratto API di ServiceNow.
Installa le dipendenze pubbliche dei font in un’app vanilla.
Salva il file di ingresso completo, il foglio di stile e il contenitore radice HTML.
Verifica che la bozza venga mantenuta prima di salvare una revisione.
Combina il filtro per stato con la riapertura e il ripristino dello stato vuoto.
Verifica il flusso di lavoro integrato
Invia una nota vuota, inserisci una bozza, apri un’altra richiesta e torna indietro per verificare che sia stata mantenuta. Contrassegna il record come esaminato, filtra gli elementi esaminati e riaprilo. Controlla il ripristino dello stato vuoto e la conservazione della nota. Sugli schermi stretti, la coda si dispone sopra i dettagli senza nascondere alcuna azione. Oltre a queste variazioni di stato, vengono verificati il caricamento dei font, gli errori JavaScript e lo scorrimento orizzontale.
Esempi di componenti del sistema di progettazione sistema di design ServiceNow Horizon
main.js — logica completa della coda e delle revisioni
Tutti i record, le bozze, i filtri, la convalida e le procedure di ripristino.
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();
Sostituisci il file index.html radice di Vite con questo file.
04
Configurazione dell’agente del sistema di progettazione sistema di design ServiceNow Horizon
Punto di partenza per l’implementazione
Questo esegue solo lo studio originale. Un’implementazione nativa di ServiceNow richiede l’ambiente di sviluppo della piattaforma appropriato.
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
Un prompt per il tuo progetto
Prompt per l’agente
Realizza lo studio completo originale per la revisione delle richieste, usando i riferimenti verificati di Horizon Workspace per tipografia, spaziatura e raggio. Mantieni i colori originali con prefisso app. Conserva le bozze per singolo record, convalida prima della revisione, aggiorna la selezione filtrata dopo le modifiche di stato, conserva le note alla riapertura e prevedi il recupero in caso di elenco vuoto. Non dichiarare che esiste una connessione attiva a ServiceNow.
05
Fonti e ambito del sistema di progettazione sistema di design ServiceNow Horizon
Studio originale OpenDesign HTML/CSS ispirato alle basi di Horizon Workspace. Utilizza i valori di tipografia e spaziatura/raggio documentati per Cabin/Lato, con colori e logica del flusso di lavoro originali. Non è un’istanza ServiceNow né un runtime nativo di Workspace.
