Composez un formulaire de maintenance d’entreprise avec les véritables états de saisie IDS, des alias de thème et un identifiant de ressource exact. Examinez les tokens du thème public actuel, un package Web Components épinglé et un flux de brouillon local avec validation et réinitialisation.
Interprétation indépendante de HTML/CSS à partir de valeurs de jetons IDS vérifiées pour le mode de base/clair et d’une police de secours système. Il ne s’agit pas de l’environnement d’exécution IDS natif. · Référence de mise en œuvre
02
Système de design Infor Référence de conception
La feuille de styles du thème issue du tableau public des jetons Infor, consultée lors de cette analyse de réparation, ainsi que ids-enterprise-wc 1.17.1 publié et les exemples officiels de champs de saisie et de boutons. L’URL actuelle du tableau des jetons renvoie à un instantané actualisé en direct, et non à une garantie liée à une version du package.
Système de design Infor Un formulaire d’entreprise avec une identité de dossier stable
Séparer l’identifiant de l’équipement de la demande modifiable
Infor présente SoHo comme son langage de conception et positionne IDS autour des rôles en entreprise et de la productivité. Cet exemple applique cette approche à une demande de maintenance : l’identifiant de l’équipement reste fixe, tandis que le résumé de l’intervention, le contact et le degré d’urgence constituent les informations modifiables.
L’identifiant 02006 est volontairement une chaîne de caractères. Le convertir en nombre supprimerait le zéro initial et modifierait son identité. L’exemple IDS natif utilise un champ de saisie en lecture seule afin que le contexte du dossier reste visible sans que le champ puisse sembler manquant ou indisponible.
Système de design Infor Les alias de thème sont résolus par l’intermédiaire de primitives
Utiliser chaque alias selon sa fonction
Le thème public capturé définit action-default à partir de blue-60, foreground par défaut à partir de neutral-100 et foreground secondaire à partir de neutral-80. Cette structure à deux niveaux permet à un formulaire personnalisé de rester cohérent avec son thème sans dupliquer des couleurs littérales dans toute l’application.
La page publique des jetons propose les modes de base, sombre et contraste. Les valeurs de ce guide proviennent d’un instantané de la feuille de styles du mode de base/clair. L’aperçu ne prétend pas qu’une valeur hexadécimale de bleu soit universelle dans les trois modes ; un composant de production doit utiliser son alias sémantique et laisser le thème sélectionné le résoudre.
Système de design Infor Une échelle concrète, sans système de densité inventé
L’espacement, la typographie et les rayons ont des ensembles d’alias distincts
Les alias d’espacement comprennent xs, associé à la primitive de 8 pixels, sm à celle de 16 pixels, md à celle de 24 pixels et lg à celle de 32 pixels. Le composant natif CSS fourni utilise md pour la marge intérieure principale et sm entre les champs. L’intention est ainsi visible dans le code source, tandis que les valeurs concrètes figurent dans le tableau de référence.
La police par défaut est Source Sans Pro, et Source Code Pro est utilisée pour les caractères à chasse fixe. L’alias font-size-default renvoie à l’entrée de l’échelle de 16 pixels. Charger la bibliothèque ne dispense pas de fournir les fichiers de polices décrits dans le fichier README du package. L’aperçu hors ligne utilise plutôt une police de secours standard.
Les noms des rayons sont distincts de ceux des espacements : radius-sm correspond à 8 pixels, tandis que space-sm correspond à 16 pixels. Réutiliser une valeur mémorisée simplement parce que les deux noms se terminent par sm donne un résultat incorrect.
Système de design Infor Des états de saisie aux significations distinctes
La lecture seule, la désactivation et les modifications ne sont pas interchangeables
Les exemples officiels exposent les options readonly, disabled, dirty-tracker, clearable, uppercase, lowercase ainsi que l’alignement logique du texte. L’exemple de demande n’a besoin que de readonly pour l’identité de l’équipement et de clearable pour le résumé de l’intervention. Il n’active pas la mise en majuscules automatique pour une adresse e-mail et ne transforme pas silencieusement une description en texte libre.
L’exemple de champ natif déclare validate="email required" pour le champ du contact. La déclaration de type publiée fournit value, focus() et checkValidation(). Comme checkValidation renvoie void, le code ne le confond pas avec un résultat booléen de validité du formulaire ; il vérifie séparément les conditions requises pour préparer le dossier local.
La lecture seule maintient l’identifiant fixe de l’équipement visible et lisible.
Désactivé signifie que le champ ne peut pas être utilisé pour le moment.
Le suivi des modifications indique qu’une valeur diffère de sa valeur initiale ; ce n’est ni un état de réussite ni un état de validation.
Système de design Infor Le suivi des modifications et la validation répondent à des contrats différents
Suivre les modifications sans les considérer comme des données valides
La galerie officielle de champs IDS montre dirty-tracker="true" sur un champ doté d’une valeur initiale. Le suivi des modifications concerne les changements apportés à un champ ; il est distinct de l’attribut validate, dont les règles email et required définissent les saisies acceptables. Un champ de contact modifié peut toujours contenir une adresse invalide.
La déclaration Input publiée expose checkValidation(): void. Appelez cette méthode pour déclencher le comportement de validation du composant, et non comme condition booléenne autorisant une action sur un ordre de travail. L’exemple natif vérifie également les valeurs obligatoires de l’application avant de produire un brouillon. Son résumé effaçable et son champ d’équipement en lecture seule illustrent deux autres fonctionnalités indépendantes des champs de saisie.
Le suivi des modifications est une fonctionnalité documentée, mais elle n’est pas activée dans cet aperçu. La démo efface le résumé préparé après une modification et replace le focus sur le champ du résumé de l’intervention ; elle ne signale pas qu’une demande de maintenance a été enregistrée.
Système de design Infor Utilisez un espace de travail en deux parties sans masquer le formulaire
Le formulaire d’abord, le contexte ensuite
L’aperçu associe un formulaire à une fiche de contexte compacte sur l’équipement et à un schéma original simple de la machine. L’ordre de lecture principal reste le même : titre, champs, actions, résultat. Sur les écrans étroits, le contexte passe sous le formulaire au lieu de comprimer les champs dans des colonnes illisibles.
Les exemples de la bibliothèque utilisent ids-layout-grid avec des attributs de colonnes propres à chaque point de rupture. Cet exemple conserve volontairement une mise en page adaptative plus simple ; sa largeur maximale et son point de rupture sont définis par l’application. Les espacements basés sur des jetons et les libellés natifs des contrôles sont les éléments présentés ici.
Système de design Infor Épinglez le package natif et initialisez-le avant de lire les valeurs
Le package publié est le point d’entrée fiable
Le package vérifié indique la version 1.17.1, un point d’entrée ES module nommé enterprise-wc.js et le dépôt source actuel hébergé par Infor. L’ancien emplacement GitHub ne constitue donc pas une instruction d’installation fiable. Le code importe le package publié, insère la composition et attend la définition des éléments personnalisés avant de connecter les comportements.
Les exemples officiels en ligne contiennent des URL de segments propres à leur compilation. Copier le nom d’un segment au hasard dans une application la lierait à un artefact de déploiement ; le point d’entrée du package permet au bundler de résoudre ces dépendances. Ce guide vérifie les déclarations de méthodes publiques et distingue clairement l’exemple de navigateur d’une compilation native.
Installez le package épinglé dans le modèle Vite sans framework et incluez la police indiquée, conformément à la politique de gestion des ressources de votre application.
Utilisez le point d’entrée fourni et CSS, attendez les éléments personnalisés, puis associez les actions principale et de réinitialisation.
Testez un résumé vide, une adresse e-mail mal formée, un brouillon local valide et une modification ultérieure ; vérifiez que l’instantané affiché n’est jamais obsolète.
Système de design Infor Exemples de composants du système de design
Exemple interactif autonome complet
Enregistrez le document complet sous le nom index.html et ouvrez-le dans un navigateur. Interprétation indépendante de HTML/CSS, fondée sur des valeurs de jetons vérifiées d’IDS core/light et sur une police système de secours. Il ne s’agit pas de l’environnement d’exécution natif d’IDS.
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>
La ressource 02006 reste une chaîne de caractères. L’exemple IDS natif, et non ce formulaire HTML, met en œuvre l’enregistrement des éléments personnalisés et checkValidation() ; aucun des deux ne crée d’ordre de maintenance.
Identifiant en lecture seule, résumé obligatoire et validation du contact
La validation des champs IDS est déclenchée explicitement ; les vérifications de l’application empêchent la création d’un brouillon local vide. Le texte saisi par l’utilisateur est affiché avec 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 composant indisponible utilise disabled, et ne se contente pas d’un style estompé.
04
Système de design Infor Configuration de l’agent IA
Point de départ de l’implémentation
Code complet et feuille de style pour un modèle Vite sans framework avec #app. La version du package et les méthodes ont été vérifiées dans le package publié ; aucune compilation n’a été effectuée ici. Fournissez Source Sans Pro depuis une source de polices approuvée. L’aperçu intégré est une implémentation indépendante en HTML natif.
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 pour votre projet
Prompt pour l’agent IA
Créez un brouillon de maintenance Infor IDS à l’aide des alias vérifiés du thème clair et de la structure documentée des champs et boutons. Conservez l’identifiant de ressource sous forme de chaîne en lecture seule. Validez les champs modifiables, effacez le résultat obsolète après toute modification et distinguez un brouillon local d’un ordre de travail soumis. Ne considérez pas que checkValidation() renvoie un booléen.
05
Système de design Infor Sources et périmètre
Guide indépendant sur OpenDesign. L’équipement et la procédure sont fictifs ; aucune donnée n’est soumise. Le code natif fait référence au package 1.17.1 vérifié, tandis que les valeurs des jetons sont identifiées séparément comme un instantané du thème core/light en ligne.
