Componi un modulo aziendale di manutenzione con gli stati effettivi degli input IDS, gli alias del tema e un identificativo preciso dell’asset. Esamina i token pubblici correnti del tema, un pacchetto Web Components con versione bloccata e un flusso locale per le bozze con convalida e ripristino.
Interpretazione indipendente di HTML/CSS basata su valori verificati dei token IDS Core/Light e su un carattere di sistema di fallback. Non è il runtime IDS nativo. · Riferimento per l’implementazione
02
Sistema di design Infor Riferimento di progettazione
Il foglio di stile del tema della tabella dei token pubblica di Infor consultato durante questa revisione, oltre a ids-enterprise-wc 1.17.1 pubblicato ed esempi ufficiali di input e pulsanti. L’URL più recente della tabella dei token è un’istantanea aggiornata in tempo reale, non una garanzia relativa alla versione del pacchetto.
Sistema di design Infor Un modulo aziendale con identità del record stabile
Tieni separato l’identificativo dell’attrezzatura dalla richiesta modificabile
Infor definisce SoHo il proprio linguaggio di design e struttura IDS attorno ai ruoli aziendali e alla produttività. Questo esempio applica tale enfasi a una richiesta di manutenzione: l’identificativo dell’asset resta fisso, mentre la descrizione dell’intervento, il contatto e il livello di urgenza sono le informazioni modificabili.
L’ID 02006 è intenzionalmente una stringa. Convertirlo in un numero farebbe perdere lo zero iniziale e ne cambierebbe l’identità. L’esempio IDS nativo usa un input readonly, così il contesto del record resta visibile senza che il campo sembri mancante o non disponibile.
Sistema di design Infor Gli alias del tema si risolvono tramite le primitive
Usa l’alias in base alla sua funzione
Il tema pubblico acquisito definisce action-default tramite blue-60, il primo piano predefinito tramite neutral-100 e il primo piano secondario tramite neutral-80. Questa struttura a due livelli rende un modulo personalizzato coerente con il tema, senza duplicare colori letterali nell’applicazione.
La pagina pubblica dei token offre le modalità Core, Dark e Contrast. I valori di questa guida provengono da un’istantanea del foglio di stile Core/Light. L’anteprima non afferma che un valore esadecimale di blu sia universale in tutte e tre le modalità: un componente di produzione dovrebbe usare il relativo alias semantico e lasciare che sia il tema selezionato a risolverlo.
Sistema di design Infor Una scala concreta senza inventare un sistema di densità
Spaziatura, tipografia e raggi hanno insiemi distinti di alias
Gli alias di spaziatura includono xs, corrispondente alla primitiva da 8 pixel, sm a 16, md a 24 e lg a 32. L’CSS nativo fornito usa md per il rientro principale e sm tra i campi. In questo modo l’intento è visibile nel codice sorgente e i valori concreti restano nella tabella di riferimento.
La famiglia di caratteri predefinita è Source Sans Pro, mentre per il monospaziato si usa Source Code Pro. L’alias font-size-default rimanda alla voce della scala da 16 pixel. Caricare la libreria non elimina la necessità di fornire i file dei caratteri descritti nel README del pacchetto. L’anteprima offline usa invece un normale carattere di fallback.
I nomi dei raggi sono distinti da quelli della spaziatura: radius-sm corrisponde a 8 pixel, mentre space-sm corrisponde a 16. Riutilizzare un valore ricordato solo perché entrambi i nomi terminano in sm porta al risultato sbagliato.
Sistema di design Infor Stati degli input con significati diversi
Readonly, disabled e dirty non sono intercambiabili
Gli esempi ufficiali espongono readonly, disabled, dirty-tracker, clearable, uppercase, lowercase e l’allineamento logico del testo. La richiesta di esempio richiede solo readonly per l’identità dell’asset e clearable per la descrizione dell’intervento. Non attiva la conversione automatica delle maiuscole o delle minuscole per un indirizzo email e non trasforma senza avviso una descrizione a testo libero.
L’esempio di input nativo dichiara validate="email required" per il campo del contatto. La dichiarazione di tipo pubblicata fornisce value, focus() e checkValidation(). Poiché checkValidation restituisce void, il codice non lo scambia per un risultato booleano di validità del modulo; verifica separatamente le condizioni necessarie per preparare il record locale.
Readonly mantiene visibile e leggibile un asset fisso.
Disabled indica che il campo non può essere usato al momento.
Il tracciamento delle modifiche descrive lo scostamento dal valore iniziale; non è uno stato di successo o di convalida.
Sistema di design Infor Il tracciamento delle modifiche e la convalida hanno finalità diverse
Tieni traccia delle modifiche senza considerare validi i dati
La raccolta ufficiale di esempi di input IDS mostra dirty-tracker="true" su un input con un valore iniziale. Il tracciamento delle modifiche riguarda gli interventi su un campo ed è distinto dall’attributo validate, le cui regole email e required definiscono i valori accettabili. Un campo del contatto modificato può comunque contenere un indirizzo non valido.
La dichiarazione pubblicata di Input espone checkValidation(): void. Chiamalo per attivare il comportamento di convalida del componente, non come condizione booleana che autorizza un’azione sull’ordine di lavoro. L’esempio nativo verifica inoltre i valori obbligatori dell’applicazione prima di produrre una bozza. Il riepilogo clearable e l’asset readonly illustrano altre due funzionalità indipendenti degli input.
Il tracciamento delle modifiche è un’estensione documentata, non attivata in questa anteprima. La demo cancella il riepilogo preparato dopo le modifiche e riporta il focus sul campo della descrizione dell’intervento; non indica che una richiesta di manutenzione sia stata salvata.
Sistema di design Infor Usa un’area di lavoro a due parti senza nascondere il modulo
Prima il modulo, poi il contesto
L’anteprima affianca al modulo una scheda compatta con il contesto dell’attrezzatura e un semplice diagramma originale della macchina. L’ordine di lettura principale resta: intestazione, campi, azioni, risultato. Sugli schermi stretti il contesto si sposta sotto il modulo, invece di comprimere gli input in colonne illeggibili.
Gli esempi della libreria usano ids-layout-grid con attributi delle colonne specifici per i breakpoint. Questo esempio mantiene intenzionalmente un layout adattabile più semplice: la larghezza massima e il breakpoint sono valori dell’applicazione. Gli aspetti illustrati sono le spaziature basate sui token e le etichette dei controlli nativi.
Sistema di design Infor Fissa la versione del pacchetto nativo e inizializzalo prima di leggere i valori
Il pacchetto pubblicato è il punto di accesso più affidabile
Il pacchetto verificato indica la versione 1.17.1, un punto di ingresso ES module in enterprise-wc.js e l’attuale repository del codice sorgente ospitato da Infor. Il vecchio percorso GitHub non è quindi un’istruzione d’installazione affidabile. Il codice importa il pacchetto pubblicato, inserisce la composizione e attende la definizione degli elementi personalizzati prima di collegare i comportamenti.
Gli esempi ufficiali disponibili online contengono URL di chunk specifici della build. Copiare il nome di un chunk qualsiasi in un’applicazione la legherebbe a un artefatto di distribuzione; il punto di ingresso del pacchetto consente al bundler di risolvere queste dipendenze. Questa guida verifica le dichiarazioni pubbliche dei metodi e distingue chiaramente l’esempio nel browser da una build nativa.
Installa il pacchetto con versione bloccata nello scaffold vanilla di Vite e includi il carattere documentato secondo le regole per gli asset della tua applicazione.
Usa il punto di ingresso fornito e CSS, attendi gli elementi personalizzati, quindi collega l’azione principale e quella di ripristino.
Prova un riepilogo vuoto, un’email non valida, una bozza locale valida e una modifica successiva; assicurati che l’istantanea visualizzata non diventi obsoleta.
Sistema di design Infor Esempi di componenti del sistema di design
Esempio interattivo completo e autonomo
Salva il documento completo come index.html e aprilo in un browser. Interpretazione indipendente di HTML/CSS basata su valori verificati dei token IDS core/light e su un font di sistema di fallback. Non è il runtime IDS nativo.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Maintenance request — IDS interpretation</title><style>*{box-sizing:border-box}body{margin:0;color:#161618;background:#f5f5f5;font:16px/1.45 Arial,sans-serif}main{max-width:1120px;padding:32px;margin:auto}header{display:flex;justify-content:space-between;border-bottom:1px solid #bbbbbf;padding-bottom:16px;gap:16px}header b{font-size:14px}header span{font-size:13px;color:#3b3b3f}h1{font-size:32px;line-height:1.2;font-weight:500;margin:24px 0 8px}h2{font-size:20px;font-weight:500;margin:0 0 16px}.intro{color:#3b3b3f;margin:0 0 24px}.grid{display:grid;grid-template-columns:1.4fr 1fr;gap:24px}.form,.context{background:white;border:1px solid #e0e0e1;border-radius:8px;padding:24px}label,.label{display:block;font-size:14px;margin-bottom:8px}input{width:100%;font:inherit;border:1px solid #6f6f76;border-radius:4px;padding:10px 12px;color:#161618}input[readonly]{background:#f5f5f5}input:focus,button:focus-visible{outline:3px solid #8abff7;outline-offset:2px}.field{margin-bottom:16px}.hint{font-size:12px;color:#3b3b3f;margin:4px 0 0}.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}button{font:inherit;border-radius:4px;padding:10px 16px;cursor:pointer;border:1px solid #6f6f76;background:white;color:#161618}.primary{background:#0072ed;color:white;border-color:#0072ed}.primary:hover{background:#0066d4}fieldset{padding:0;border:0;margin:24px 0 0}legend{font-size:14px;margin-bottom:8px}.radios{display:flex;gap:16px;flex-wrap:wrap}.radios label{display:flex;gap:8px;align-items:center;margin:0}.radios input{width:auto;accent-color:#0072ed}.equipment{height:190px;background:#e6f1fd;display:grid;place-content:center;margin-bottom:24px;border-radius:4px}.machine{border:3px solid #0054b1;width:165px;height:100px;position:relative;background:white}.machine:before{content:'';position:absolute;left:14px;top:16px;width:55px;height:55px;border:8px double #0054b1;border-radius:50%}.machine:after{content:'02006';position:absolute;right:10px;top:27px;color:#0054b1;font:16px monospace}.context dl{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0;font-size:14px}.context dt{color:#3b3b3f}.context dd{margin:0;text-align:right}.notice{font-size:13px;background:#f5f5f5;padding:16px;margin-top:24px}.error{color:#a30d11;font-size:14px;min-height:20px}.result{background:#e6f1fd;padding:16px;border-left:3px solid #0072ed;margin-top:20px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px}.result[hidden]{display:none}.foot{font-size:12px;color:#3b3b3f;margin-top:24px}@media(max-width:650px){main{padding:20px}.grid{grid-template-columns:1fr}.form,.context{padding:20px}header{flex-direction:column;gap:4px}h1{font-size:28px}.equipment{height:140px}}</style><main><header><b>ASSET SERVICE / LOCAL NOTEBOOK</b><span>Independent Infor IDS interpretation</span></header><h1>Prepare the work. Keep the context.</h1><p class="intro">Build a local maintenance draft for a fixed equipment record.</p><div class="grid"><form id="form" class="form" novalidate><div class="field"><label for="asset">Asset identifier</label><input id="asset" value="02006" readonly><p class="hint">Read-only record identity; leading zero preserved.</p></div><div class="field"><label for="summary">Work summary</label><input id="summary" required placeholder="For example, inspect the drive belt" aria-describedby="error"></div><div class="field"><label for="contact">Contact email</label><input id="contact" type="email" required placeholder="[email protected]" aria-describedby="error"></div><fieldset><legend>Planning urgency</legend><div class="radios"><label><input type="radio" name="urgency" value="Routine" checked>Routine</label><label><input type="radio" name="urgency" value="Soon">Soon</label></div></fieldset><div class="actions"><button class="primary" type="submit">Prepare local draft</button><button id="clear" type="button">Clear draft</button></div><p id="error" class="error" role="alert"></p><div id="result" class="result" role="status" hidden></div></form><aside class="context"><div class="equipment" role="img" aria-label="Original schematic of fictional equipment 02006"><div class="machine"></div></div><h2>Equipment context</h2><dl><dt>Record</dt><dd>02006</dd><dt>Area</dt><dd>Sample workshop</dd><dt>Type</dt><dd>Drive assembly</dd><dt>Connection</dt><dd>Offline sample</dd></dl><p class="notice">Preparing a draft changes only this page. It does not create a work order or send a message.</p></aside></div><p class="foot">Core/light IDS token values with native HTML controls and a system-font fallback. Original illustration and application layout; no native IDS runtime.</p></main><script>const form=document.querySelector('#form'),summary=document.querySelector('#summary'),contact=document.querySelector('#contact'),error=document.querySelector('#error'),result=document.querySelector('#result');function clearResult(){result.hidden=true;result.textContent='';error.textContent='';summary.removeAttribute('aria-invalid');contact.removeAttribute('aria-invalid')}form.addEventListener('input',clearResult);form.onsubmit=e=>{e.preventDefault();clearResult();if(!summary.value.trim()){error.textContent='Enter a work summary.';summary.setAttribute('aria-invalid','true');summary.focus();return}if(!contact.value.trim()||!contact.validity.valid){error.textContent='Enter a valid contact email.';contact.setAttribute('aria-invalid','true');contact.focus();return}result.hidden=false;result.textContent='LOCAL DRAFT / NOT SENT\n\nAsset: 02006\nSummary: '+summary.value.trim()+'\nContact: '+contact.value.trim()+'\nUrgency: '+form.elements.urgency.value};document.querySelector('#clear').onclick=()=>{form.reset();clearResult();summary.focus()};</script></html>
L'asset 02006 resta una stringa. L'esempio IDS nativo, non questo modulo HTML, illustra la registrazione di custom element e checkValidation(); nessuno dei due crea un ordine di manutenzione.
ID in sola lettura, riepilogo obbligatorio e convalida del contatto
La convalida dell'input IDS viene invocata esplicitamente; i controlli dell'applicazione impediscono un salvataggio locale vuoto. Il testo dell'utente viene visualizzato con textContent.
javascript
// Vite vanilla project: npm install [email protected]
// src/main.js. Add Source Sans Pro through your approved font-hosting setup.
import 'ids-enterprise-wc';
import './style.css';
document.querySelector('#app').innerHTML=`<ids-container><main>
<h1>Maintenance request</h1><p>Local draft only; no work order is sent.</p>
<ids-input id="asset" label="Asset identifier" value="02006" readonly="true"></ids-input>
<ids-input id="summary" label="Work summary" validate="required" clearable="true"></ids-input>
<ids-input id="contact" label="Contact email" validate="email required"></ids-input>
<ids-button id="prepare" appearance="primary"><span>Prepare local draft</span></ids-button>
<ids-button id="reset" appearance="secondary"><span>Clear draft</span></ids-button>
<p id="message" role="status"></p><pre id="draft"></pre>
</main></ids-container>`;
await Promise.all(['ids-input','ids-button','ids-container'].map(n=>customElements.whenDefined(n)));
const summary=document.querySelector('#summary'),contact=document.querySelector('#contact');
const message=document.querySelector('#message'),draft=document.querySelector('#draft');
document.querySelector('#prepare').addEventListener('click',()=>{
summary.checkValidation();contact.checkValidation();
const title=summary.value.trim(),email=contact.value.trim();
if(!title){message.textContent='Enter a work summary.';summary.focus();return;}
if(!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)){message.textContent='Enter a complete contact email.';contact.focus();return;}
draft.textContent=JSON.stringify({asset:'02006',summary:title,contact:email},null,2);
message.textContent='Draft prepared in this page only. No request sent.';
});
function clearResult(){draft.textContent='';message.textContent='';}
summary.addEventListener('input',clearResult);contact.addEventListener('input',clearResult);
document.querySelector('#reset').addEventListener('click',()=>{summary.value='';contact.value='';clearResult();summary.focus();});
/* src/style.css — application layout using the loaded IDS token roles */
main{max-width:44rem;margin:auto;padding:var(--ids-space-md);color:var(--ids-color-foreground-default-default)}
ids-input{display:block;margin-bottom:var(--ids-space-sm)}
ids-button{margin-inline-end:var(--ids-space-xs)}
pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--ids-color-accent-neutral-weakest);padding:var(--ids-space-sm)}
Un componente non disponibile usa lo stato disabled, non solo uno stile sbiadito.
04
Configurazione dell'agente sistema di design Infor
Punto di partenza per l’implementazione
File di ingresso e foglio di stile completi per uno scaffold Vite vanilla con #app. La versione del pacchetto e i metodi sono stati verificati nel pacchetto pubblicato; qui non è stata eseguita la compilazione. Fornisci Source Sans Pro tramite una fonte di font approvata. L'anteprima incorporata è un'implementazione nativa indipendente di HTML.
javascript / css
// Vite vanilla project: npm install [email protected]
// src/main.js. Add Source Sans Pro through your approved font-hosting setup.
import 'ids-enterprise-wc';
import './style.css';
document.querySelector('#app').innerHTML=`<ids-container><main>
<h1>Maintenance request</h1><p>Local draft only; no work order is sent.</p>
<ids-input id="asset" label="Asset identifier" value="02006" readonly="true"></ids-input>
<ids-input id="summary" label="Work summary" validate="required" clearable="true"></ids-input>
<ids-input id="contact" label="Contact email" validate="email required"></ids-input>
<ids-button id="prepare" appearance="primary"><span>Prepare local draft</span></ids-button>
<ids-button id="reset" appearance="secondary"><span>Clear draft</span></ids-button>
<p id="message" role="status"></p><pre id="draft"></pre>
</main></ids-container>`;
await Promise.all(['ids-input','ids-button','ids-container'].map(n=>customElements.whenDefined(n)));
const summary=document.querySelector('#summary'),contact=document.querySelector('#contact');
const message=document.querySelector('#message'),draft=document.querySelector('#draft');
document.querySelector('#prepare').addEventListener('click',()=>{
summary.checkValidation();contact.checkValidation();
const title=summary.value.trim(),email=contact.value.trim();
if(!title){message.textContent='Enter a work summary.';summary.focus();return;}
if(!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)){message.textContent='Enter a complete contact email.';contact.focus();return;}
draft.textContent=JSON.stringify({asset:'02006',summary:title,contact:email},null,2);
message.textContent='Draft prepared in this page only. No request sent.';
});
function clearResult(){draft.textContent='';message.textContent='';}
summary.addEventListener('input',clearResult);contact.addEventListener('input',clearResult);
document.querySelector('#reset').addEventListener('click',()=>{summary.value='';contact.value='';clearResult();summary.focus();});
/* src/style.css — application layout using the loaded IDS token roles */
main{max-width:44rem;margin:auto;padding:var(--ids-space-md);color:var(--ids-color-foreground-default-default)}
ids-input{display:block;margin-bottom:var(--ids-space-sm)}
ids-button{margin-inline-end:var(--ids-space-xs)}
pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--ids-color-accent-neutral-weakest);padding:var(--ids-space-sm)}
Un prompt per il tuo progetto
Prompt per l’agente
Crea una bozza di manutenzione Infor IDS usando gli alias del tema chiaro verificati e la struttura documentata di input e pulsanti. Mantieni l'identificatore dell'asset come stringa e in sola lettura. Convalida i campi modificabili, cancella i risultati non più aggiornati dopo le modifiche e distingui una bozza locale da un ordine di lavoro inviato. Non considerare checkValidation() come una funzione che restituisce un Boolean.
05
Fonti e ambito di sistema di design Infor
Guida indipendente di OpenDesign. L'asset e il flusso di lavoro sono fittizi; non viene inviato nulla. Il codice nativo fa riferimento al pacchetto 1.17.1 verificato, mentre i valori dei token sono identificati come uno snapshot distinto del tema live core/light.
