Taslağı koruma, doğrulama, durum filtreleri ve kurtarma içeren eksiksiz bir yerel talep inceleme akışı üzerinden Horizon Workspace’in kesin aralık, yarıçap ve tipografi referanslarını keşfedin.
OpenDesign Kılavuzu6 Bölüm19 Referans KaydıÖzgün Uygulama Kılavuzu
01
ServiceNow Horizon Tasarım Sistemi Arayüz Önizlemesi
Taslakları kayıtlar arasında koruyun, bir isteği incelendi olarak işaretleyin ve filtreleme ya da yeniden açma sonrasında kaldığınız yerden devam edin.
Yerel Cabin ve Lato yazı tipleriyle özgün HTML/CSS/JavaScript; ServiceNow platform bağlantısı yoktur. · Uygulama başvurusu
02
ServiceNow Horizon Tasarım Sistemi Tasarım Referansı
Yayımlanmış Horizon Workspace boşluk, köşe yarıçapı ve tipografi referansları. Özgün uygulama renkleri bu resmî referans tablosuna bilerek dahil edilmemiştir.
ServiceNow Horizon Tasarım Sistemi Workspace ve Uygulama Kapsamı
Uygulama çerçevesiyle başlayın
Horizon, ServiceNow için çeşitli uygulama çerçevelerini kapsar. Bu sayfa Workspace'e odaklanır: kuyruk ve seçili kayıt birlikte görünür, böylece inceleyen kişi bağlamı kaybetmeden yerel işler arasında geçiş yapabilir. Service Portal, Native Mobile ve Core UI'ı birbirinin yerine kullanılabilecek görünümler olarak sunmaz. Canlı çalışma, gömülü bir ServiceNow örneği değil, özgün bir HTML uygulamasıdır.
Doğrulanmış temelleri özgün tercihlerden ayırın
Referans, yayımlanmış boşluk adlarını, yarıçap değerlerini ve tipografi rollerini aynen verir. Çalışmadaki yeşil eylem rengi, nötr yüzeyler ve odak mavisi, uygulama önekiyle tanımlanan özgün OpenDesign değerleridir. Bunların resmî Horizon token dışa aktarımları olduğu iddia edilmez. Eksiksiz örneği çalıştırmak için uydurma bir ServiceNow paket kurulumu veya platform API gerekmez.
ServiceNow Horizon Tasarım Sistemi Workspace Boşluk, Yarıçap ve Tipografi
Gerçek boşluk dizisini kullanın
Belgelenen ölçek 2, 4, 8, 12, 16, 24, 32 ve 40px değerlerinden oluşur. Çalışma, bu değerleri kuyruk ile kayıt arasındaki aralığı, kayıt içindeki dolguyu ve meta veriler arasındaki daha küçük mesafeleri ayırt etmek için kullanır. Aynı adım tekrarlandığında bile bu değerler farklı gruplama ilişkilerine hizmet eder. Her yere eşit dolgu uygulanan bir ekran bu hiyerarşiyi kaybettirirdi.
Başlıklar ve okuma metni için ayrı roller belirleyin
Yayımlanmış yazı tipi ailesi rollerine uygun olarak başlıklarda Cabin, gövde metninde Lato kullanılır. Çalışmada geniş ekranlarda 32px sayfa başlığı, 24px kayıt başlığı kullanılır. Yarıçap referansları varsayılan 4/8/12 dizisi yerine 2, 6 ve 8px değerleridir. Yuvarlatılmış durum etiketleri, durumu yalnızca şekil veya renkle belirtmez; Open ya da Reviewed sözcüklerini de içerir.
ServiceNow Horizon Tasarım Sistemi Kuyruk, Seçili Kayıt ve Filtreleme
Tek bir seçili kaydı koruyun
Kuyruktaki her eylem bir uygulama isteğinin adını, sahibini ve durumunu gösterir. İstek seçildiğinde bitişiğindeki ayrıntılar doldurulur ve yeni başlığa odaklanılır. Seçili eylemde aria-current ve görünür bir kenarlık stili kullanılır. Bu, yerel bir Horizon bileşeni API değil, özgün bir liste/ayrıntı düzenidir; incelenebilmesi için tüm durum mantığı sağlanmıştır.
Filtre seçimi kaldırdığında durumu düzeltin
Durum filtresi görünür kuyruğu daraltır. Seçili istek artık filtrelenen kümeye dahil değilse uygulama, eşleşen ilk isteği seçer. Eşleşen istek kalmazsa boş durum mesajı ve Tüm istekleri göster eylemi görüntülenir. Sayı hesabında payda olarak üç kaydın tamamı kullanılır. Filtreleme kayıtları silmez veya durumlarını sessizce değiştirmez.
Seçili kaydı geçerli filtrelenmiş kümede tutun.
Kümede kayıt olmadığında anlaşılır bir boş durum gösterin.
Verileri silmeden Tüm istekleri göster eylemiyle durumu düzeltin.
ServiceNow Horizon Tasarım Sistemi Taslak Notları ve İnceleme Doğrulaması
Taslakları ilgili kayda bağlı tutun
İnceleyen kişi yazarken metin alanı, ilgili kaydın taslağını günceller. Başka bir isteğe geçip geri dönmek taslağı korur. Boş veya yalnızca boşluk içeren bir not, isteğin incelendi olarak işaretlenmesini engeller: satır içi bir hata görüntülenir, aria-invalid ayarlanır ve odak metin alanına döner. Veri modeli, kaydedilmiş notu ve geçerli taslağı açıkça ayrı tutar.
Yerel durum geçişini gözlemlenebilir kılın
ServiceNow Horizon Tasarım Sistemi Yeniden Açma ve Erişilebilir Geri Bildirim
Yeniden açarken yararlı çalışmaları koruyun
İsteği yeniden açma eylemi, incelenmiş bir kaydı kaydedilmiş notunu koruyarak Open durumuna döndürür. Yalnızca Reviewed filtresi etkinse liste boş kalabilir; kurtarma eylemi tam kuyruğu geri yükler. Bu birleşim; her düğmeyi tek başına denetlemekten daha fazlasını ortaya koyarak kayıt durumu, filtreleme ve seçili ayrıntı arasındaki ilişkiyi sınar.
Metni, odağı ve durumu birlikte kullanın
Durum renkleri metin etiketleriyle birlikte kullanılır. Doğrulama, üzerinde çalışılması gereken alana odaklanır; kayıtlar arasında gezinme başlığa odaklanır ve yerel güncellemeler durum bölgesi üzerinden bildirilir. Çalışma, üretim ortamındaki bir Workspace'in yardımcı teknolojilerle test edilmesi gerekliliğini ortadan kaldırmaz. Bu testlerin başlayabileceği, incelenebilir ve eksiksiz bir yerel akış sunar.
ServiceNow Horizon Tasarım Sistemi Eksiksiz Yerel Kaynak ve Kontroller
Herkese açık yazı tipi bağımlılıklarını yükleyin
Sağlanan giriş dosyası, Cabin ve Lato yazı tiplerinin herkese açık paketlerini ve özgün bileşim stil sayfasını içe aktarır. HTML kabuğu kök öğeyi sağlar. Bu örnekte ServiceNow çalışma zamanı, kimlik bilgileri veya uç noktası yoktur. Gerçek platform entegrasyonu, yerel kayıt dizisini ServiceNow API sözleşmesi olarak ele almak yerine Horizon'ın Workspace ve geliştirici kaynakları üzerinden başlatılmalıdır.
Herkese açık yazı tipi bağımlılıklarını vanilla uygulamasına yükleyin.
Eksiksiz giriş dosyasını, stil sayfasını ve kök HTML kabuğunu kaydedin.
İncelemeyi kaydetmeden önce taslağın korunduğunu doğrulayın.
Durum filtrelemeyi yeniden açma ve boş durum kurtarmayla birlikte sınayın.
Birbirine bağlı iş akışını denetleyin
Boş bir not gönderin, bir taslak yazın, başka bir isteği ziyaret edin ve taslağın korunduğunu doğrulamak için geri dönün. Kaydı incelendi olarak işaretleyin, Reviewed filtresini uygulayın ve kaydı yeniden açın. Boş durumdan kurtarma adımını ve notun korunduğunu denetleyin. Dar ekranlarda kuyruk, hiçbir eylemi kaybetmeden ayrıntıların üstünde sıralanır. Bu durum değişikliklerinin yanı sıra yazı tipi yüklemesi, JavaScript hataları ve yatay taşma da denetlenir.
ServiceNow Horizon Tasarım Sistemi Bileşen Örnekleri
main.js — kuyruk ve inceleme mantığının tamamı
Tüm kayıtlar, taslaklar, filtreler, doğrulama ve kurtarma adımları.
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();
Kök Vite index.html dosyasını bu dosyayla değiştirin.
04
ServiceNow Horizon Tasarım Sistemi Aracı Kurulumu
Uygulamaya Başlangıç Noktası
Bu yalnızca özgün çalışmayı çalıştırır. Yerel ServiceNow uygulaması için uygun platform geliştirme ortamı gerekir.
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
Projeniz İçin Bir İstem
Ajan İstemi
Doğrulanmış Horizon Workspace tipografi, boşluk ve yarıçap referanslarını kullanarak özgün istek inceleme çalışmasının tamamını oluşturun. Özgün renkleri app- önekiyle koruyun. Kayıt başına taslakları koruyun, incelemeden önce doğrulama yapın, durum değişikliklerinden sonra filtrelenmiş seçimi yeniden hesaplayın, yeniden açıldığında notları koruyun ve boş durumdan kurtarma olanağı sağlayın. Canlı bir ServiceNow bağlantısı olduğunu iddia etmeyin.
05
ServiceNow Horizon Tasarım Sistemi Kaynakları ve Kapsamı
Horizon Workspace temellerinden yararlanan özgün bir OpenDesign HTML/CSS çalışmasıdır. Özgün renkler ve iş akışı mantığının yanı sıra belgelenmiş Cabin/Lato tipografisini ve boşluk/yarıçap değerlerini kullanır. Bir ServiceNow örneği veya yerel Workspace çalışma zamanı değildir.
