Explorez les références exactes de Horizon Workspace en matière d’espacement, de rayon et de typographie grâce à un parcours complet et local de demande et de révision, avec conservation des brouillons, validation, filtres d’état et récupération.
HTML/CSS/JavaScript d’origine avec les polices Cabin et Lato chargées localement ; aucune connexion à la plateforme ServiceNow. · Référence de mise en œuvre
02
Référence de conception du système de design ServiceNow Horizon
Références publiées de Horizon Workspace concernant l’espacement, les rayons d’angle et la typographie. Les couleurs de l’application d’origine sont volontairement exclues de ce tableau de référence officiel.
Référence de conception publiée. Les petites valeurs conviennent aux libellés compacts, les valeurs moyennes aux contrôles imbriqués et les grandes aux conteneurs.
now-global-border-radius--md
6px
Référence de conception publiée. Les petites valeurs conviennent aux libellés compacts, les valeurs moyennes aux contrôles imbriqués et les grandes aux conteneurs.
now-global-border-radius--lg
8px
Référence de conception publiée. Les petites valeurs conviennent aux libellés compacts, les valeurs moyennes aux contrôles imbriqués et les grandes aux conteneurs.
Périmètre de Workspace et de sa mise en œuvre pour le système de design ServiceNow Horizon
Commencer par le framework de l’application
Horizon couvre plusieurs frameworks d’application ServiceNow. Cette page se concentre sur Workspace : une file d’attente et une fiche sélectionnée restent visibles ensemble, afin que la personne chargée de l’examen puisse parcourir les tâches locales sans perdre le contexte. Service Portal, Native Mobile et Core UI ne sont pas présentés comme des habillages interchangeables. L’étude en direct est une application HTML originale, et non une instance ServiceNow intégrée.
Distinguer les bases vérifiées des choix originaux
La référence fournit les noms exacts des espacements publiés, les valeurs des rayons d’angle et les rôles typographiques. La couleur d’action verte, les surfaces neutres et le bleu de focus de l’étude sont des valeurs originales OpenDesign, déclarées avec un préfixe d’application. Elles ne sont pas présentées comme des exports officiels des jetons Horizon. Aucun paquet ServiceNow ni aucune API de plateforme API inventés ne sont nécessaires pour exécuter l’exemple complet.
Espacement, rayons d’angle et typographie de Workspace dans le système de design ServiceNow Horizon
Utiliser la véritable échelle d’espacement
L’échelle documentée est de 2, 4, 8, 12, 16, 24, 32 et 40px. L’étude l’utilise pour distinguer l’espace entre la file et la fiche, le remplissage intérieur d’une fiche et les distances plus réduites entre les métadonnées. Ces valeurs répondent à différentes relations de regroupement, même lorsqu’une même étape est réutilisée. Un écran uniformément espacé perdrait cette hiérarchie.
Attribuer des rôles distincts aux titres et au texte courant
Cabin est utilisée pour les titres et Lato pour le texte courant, conformément aux rôles publiés des familles de polices. L’étude adopte un titre de page de 32px sur les écrans larges et un titre de fiche de 24px. Les rayons de référence sont de 2, 6 et 8px, plutôt qu’une séquence générique supposée de 4/8/12. La forme ou la couleur des libellés d’état arrondis ne suffit pas à communiquer l’état : ils contiennent aussi les mots Ouverte ou Examinée.
File d’attente, fiche sélectionnée et filtres du système de design ServiceNow Horizon
Conserver une seule fiche sélectionnée
Chaque action de la file nomme une demande de pratique et affiche sa personne responsable ainsi que son état. La sélection remplit le détail adjacent et place le focus sur le nouveau titre. L’action sélectionnée comporte aria-current et une bordure visible. Il s’agit d’un modèle original de liste et de détail, et non d’un composant Horizon natif API ; toute sa logique d’état est fournie pour examen.
Rétablir la sélection lorsqu’un filtre la masque
Le filtre d’état réduit le nombre de demandes visibles. Si la demande sélectionnée n’en fait plus partie, l’application sélectionne la première demande correspondante disponible. S’il n’en reste aucune, elle affiche un message d’absence de résultats et une action Afficher toutes les demandes. Le décompte utilise l’ensemble complet des trois fiches comme dénominateur. Le filtrage ne supprime aucune fiche et ne modifie jamais son état sans le signaler.
Conserver la fiche sélectionnée dans l’ensemble filtré actuel.
Afficher clairement un état vide lorsque cet ensemble ne contient aucune fiche.
Rétablir l’affichage avec Afficher toutes les demandes, sans supprimer de données.
Notes de brouillon et validation des examens dans le système de design ServiceNow Horizon
Associer les brouillons à leur fiche
Pendant la saisie, la zone de texte met à jour le brouillon de la fiche correspondante. Le brouillon est conservé lorsque la personne passe à une autre demande puis revient à la première. Une note vide ou composée uniquement d’espaces ne permet pas de marquer une demande comme examinée : une erreur en ligne s’affiche, aria-invalid est défini et le focus revient à la zone de texte. Le modèle de données distingue explicitement la note enregistrée du brouillon en cours.
Rendre observable la transition d’état locale
Réouverture et retours accessibles dans le système de design ServiceNow Horizon
Conserver le travail utile lors de la réouverture
La réouverture d’une demande fait repasser un dossier vérifié à l’état Ouvert, tout en conservant la note enregistrée. Avec un filtre limité aux dossiers vérifiés, la liste peut alors être vide ; l’action de récupération rétablit la file complète. Cette combinaison permet de tester les liens entre l’état du dossier, le filtrage et le détail sélectionné, un examen plus révélateur que la vérification isolée de chaque bouton.
Associez texte, focus et état
Les couleurs d’état sont accompagnées de libellés textuels. La validation place le focus sur le champ à corriger, la navigation entre les dossiers le place sur le titre, et les mises à jour locales utilisent une région d’état. Cette étude ne remplace pas les tests avec des technologies d’assistance dans un Workspace de production. Elle fournit un flux local complet et inspectable sur lequel ces tests peuvent s’appuyer.
ServiceNow Horizon — code source local complet et vérifications du système de conception
Installer les dépendances de polices publiques
Le fichier d’entrée fourni importe les packages de polices publiques Cabin et Lato ainsi que la feuille de style de composition d’origine. Son shell HTML fournit l’élément racine. Cet exemple n’utilise ni environnement d’exécution ServiceNow, ni identifiants, ni point de terminaison. Une véritable intégration à la plateforme doit commencer par les ressources Workspace et développeurs de Horizon, plutôt que de considérer le tableau local de dossiers comme un contrat API ServiceNow.
Installez les dépendances de polices publiques dans une application vanilla.
Enregistrez le fichier d’entrée complet, la feuille de style et le shell racine HTML.
Testez la conservation du brouillon avant d’enregistrer une vérification.
Combinez le filtrage par état, la réouverture et la récupération après un état vide.
Vérifier le flux connecté
Soumettez une note vide, saisissez un brouillon, consultez une autre demande, puis revenez vérifier que le brouillon a été conservé. Marquez le dossier comme vérifié, filtrez sur les dossiers vérifiés, puis rouvrez-le. Vérifiez la récupération après un état vide et la conservation de la note. Sur les écrans étroits, la file s’affiche au-dessus du détail, sans qu’aucune action ne disparaisse. Vérifiez également le chargement des polices, les erreurs JavaScript et le débordement horizontal au fil de ces changements d’état.
ServiceNow Horizon — exemples de composants du système de conception
main.js — logique complète de file et de vérification
Tous les dossiers, brouillons, filtres, règles de validation et mécanismes de récupération.
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();
Remplacez le fichier index.html racine de Vite par ce fichier.
04
ServiceNow Horizon — configuration de l’agent pour le système de conception
Point de départ de l’implémentation
Ce code exécute uniquement l’étude d’origine. Une implémentation native de ServiceNow nécessite l’environnement de développement adapté à la plateforme.
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 pour votre projet
Prompt pour l’agent IA
Créez l’étude originale complète de vérification des demandes en vous appuyant sur les références vérifiées de typographie, d’espacement et de rayons de Horizon Workspace. Préfixez les couleurs d’origine par le nom de l’application. Conservez les brouillons par dossier, validez avant la vérification, recalculez le dossier sélectionné après chaque changement d’état, conservez les notes lors de la réouverture et prévoyez un mécanisme de récupération après un état vide. Ne prétendez pas qu’il existe une connexion active à ServiceNow.
05
ServiceNow Horizon — sources et périmètre du système de conception
Étude originale OpenDesign HTML/CSS inspirée des fondements de Horizon Workspace. Elle utilise les valeurs documentées de typographie Cabin/Lato, d’espacement et de rayons, ainsi que des couleurs et une logique de flux d’origine. Il ne s’agit ni d’une instance ServiceNow ni d’un environnement d’exécution natif de Workspace.
