Explore as referências exatas de espaçamento, raio e tipografia do Horizon Workspace em um fluxo local completo de revisão de solicitações, com retenção de rascunhos, validação, filtros de status e recuperação.
HTML/CSS/JavaScript original, com as fontes Cabin e Lato locais; sem conexão com a plataforma ServiceNow. · Referência de implementação
02
Referência de design do sistema de design ServiceNow Horizon
Referências publicadas do Horizon Workspace para espaçamento, raio dos cantos e tipografia. As cores originais do aplicativo foram intencionalmente excluídas desta tabela de referência oficial.
Referência de design publicada. Valores pequenos servem para rótulos compactos, valores médios para controles aninhados e valores grandes para contêineres.
now-global-border-radius--md
6px
Referência de design publicada. Valores pequenos servem para rótulos compactos, valores médios para controles aninhados e valores grandes para contêineres.
now-global-border-radius--lg
8px
Referência de design publicada. Valores pequenos servem para rótulos compactos, valores médios para controles aninhados e valores grandes para contêineres.
Workspace e escopo de implementação do sistema de design ServiceNow Horizon
Comece pela estrutura do aplicativo
O Horizon abrange várias estruturas de aplicativos do ServiceNow. Esta página se concentra no Workspace: a fila e o registro selecionado permanecem visíveis ao mesmo tempo, para que a pessoa responsável pela revisão possa avançar pelo trabalho local sem perder o contexto. Service Portal, Native Mobile e Core UI não são apresentados como temas intercambiáveis. O estudo interativo é um aplicativo HTML original, não uma instância incorporada do ServiceNow.
Separe as bases verificadas das escolhas originais
A referência informa os nomes exatos dos espaçamentos publicados, os valores dos raios e os papéis tipográficos. A cor verde das ações, as superfícies neutras e o azul de foco do estudo são valores originais de OpenDesign, declarados com um prefixo do aplicativo. Eles não são apresentados como exportações oficiais de tokens do Horizon. Para executar o exemplo completo, não é necessário instalar pacotes inventados do ServiceNow nem usar uma API API da plataforma.
Espaçamento, raio e tipografia do Workspace no sistema de design ServiceNow Horizon
Use a sequência de espaçamentos real
A escala documentada é de 2, 4, 8, 12, 16, 24, 32 e 40px. O estudo a utiliza para diferenciar o espaço entre a fila e o registro, o preenchimento interno do registro e as distâncias menores entre os metadados. Esses valores atendem a relações de agrupamento diferentes, mesmo quando a mesma medida se repete. Uma tela com preenchimento uniforme perderia essa hierarquia.
Atribua papéis diferentes a títulos e textos de leitura
A fonte Cabin é usada nos títulos e a Lato, no texto corrido, em conformidade com os papéis tipográficos publicados para essas famílias. Em telas mais largas, o estudo usa um título de página de 32px e um título de registro de 24px. As referências de raio são 2, 6 e 8px, e não uma sequência genérica presumida de 4/8/12. Os rótulos de status arredondados não comunicam o status apenas pela forma ou pela cor: também exibem as palavras Aberto ou Revisado.
Fila, registro selecionado e filtragem no sistema de design ServiceNow Horizon
Mantenha um único registro selecionado
Cada ação na fila identifica uma solicitação de prática e exibe a pessoa responsável e o status. Ao selecioná-la, os detalhes correspondentes são preenchidos ao lado e o novo título recebe o foco. A ação selecionada usa aria-current e um tratamento de borda visível. Esse padrão original de lista e detalhes não é um componente nativo do Horizon API; toda a lógica de estado está disponível para inspeção.
Recupere a seleção quando um filtro a remover
O filtro de status restringe a fila visível. Se a solicitação selecionada deixar de fazer parte dela, o aplicativo seleciona a primeira solicitação correspondente disponível. Se não houver nenhuma, exibe uma mensagem de estado vazio e a ação Mostrar todas as solicitações. A contagem usa a coleção completa de três registros como denominador. A filtragem nunca exclui registros nem altera o status sem aviso.
Mantenha o registro selecionado dentro do conjunto filtrado atual.
Exiba um estado vazio claro quando esse conjunto não tiver registros.
Permita recuperar a fila usando Mostrar todas as solicitações, sem excluir dados.
Rascunhos, notas e validação da revisão no sistema de design ServiceNow Horizon
Mantenha os rascunhos associados ao respectivo registro
À medida que a pessoa responsável pela revisão digita, a área de texto atualiza o rascunho do registro correspondente. Ao abrir outra solicitação e voltar, o rascunho é preservado. Uma nota em branco ou composta apenas por espaços não pode marcar uma solicitação como revisada: uma mensagem de erro em linha é exibida, aria-invalid é definido e o foco retorna à área de texto. O modelo de dados mantém explícitos a nota salva e o rascunho atual.
Torne observável a mudança de estado local
Reabertura e feedback acessível no sistema de design ServiceNow Horizon
Preserve o trabalho útil ao reabrir
A ação Reabrir solicitação retorna um registro revisado ao status Aberto, mantendo a nota salva. Com o filtro Revisado, a lista pode ficar vazia; nesse caso, a ação de recuperação restaura a fila completa. Essa combinação testa a relação entre o estado do registro, a filtragem e os detalhes selecionados, oferecendo uma verificação mais completa do que testar cada botão isoladamente.
Combine texto, foco e status
As cores dos status são acompanhadas por rótulos de texto. A validação move o foco para o campo que precisa de atenção, a navegação entre registros move o foco para o título e as atualizações locais são anunciadas por uma região de status. Em um Workspace de produção, o estudo não dispensa testes com tecnologias assistivas. Ele oferece um fluxo local completo e inspecionável para dar início a esses testes.
Código-fonte local completo e verificações do sistema de design ServiceNow Horizon
Instale as dependências públicas das fontes
O arquivo de entrada fornecido importa os pacotes públicos das fontes Cabin e Lato, além da folha de estilos da composição original. A estrutura HTML fornece o elemento raiz. Este exemplo não inclui ambiente de execução, credenciais nem endpoints do ServiceNow. A integração real com a plataforma deve começar pelos recursos de desenvolvimento e Workspace do Horizon, e não tratando a lista local de registros como um contrato de API API do ServiceNow.
Instale as dependências públicas das fontes em um aplicativo vanilla.
Salve o arquivo de entrada completo, a folha de estilos e a estrutura raiz HTML.
Teste a preservação dos rascunhos antes de salvar uma revisão.
Combine a filtragem por status com a reabertura e a recuperação do estado vazio.
Verifique o fluxo completo
Envie uma nota vazia, escreva um rascunho, abra outra solicitação e volte para confirmar que ele foi preservado. Marque o registro como revisado, filtre por Revisado e reabra-o. Verifique a recuperação do estado vazio e a preservação da nota. Em telas estreitas, a fila fica acima dos detalhes, sem ocultar nenhuma ação. Além dessas mudanças de estado, verifique o carregamento das fontes, os erros de JavaScript e a rolagem horizontal.
Exemplos de componentes do sistema de design ServiceNow Horizon
main.js — lógica completa da fila e das revisões
Todos os registros, rascunhos, filtros, validações e mecanismos de recuperação.
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();
Substitua o index.html raiz do Vite por este arquivo.
04
Configuração de agente para o sistema de design ServiceNow Horizon
Ponto de partida para implementação
Isso executa apenas o estudo original. Uma implementação nativa no ServiceNow exige o ambiente de desenvolvimento adequado da plataforma.
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
Um prompt para seu projeto
Prompt para agente de IA
Crie o estudo original completo de revisão de solicitações usando as referências verificadas do Horizon Workspace para tipografia, espaçamento e raio. Mantenha as cores originais com prefixos do aplicativo. Preserve os rascunhos por registro, valide antes da revisão, atualize a seleção filtrada após mudanças de status, mantenha as notas ao reabrir e ofereça uma opção de recuperação para a lista vazia. Não afirme que há uma conexão ativa com o ServiceNow.
05
Fontes e escopo do sistema de design ServiceNow Horizon
Um estudo original de HTML/CSS OpenDesign, baseado nos fundamentos do Horizon Workspace. Usa os valores documentados de tipografia Cabin/Lato, espaçamento e raio, com cores e lógica de fluxo de trabalho originais. Não é uma instância do ServiceNow nem um ambiente de execução nativo do Workspace.
