Erstelle ein Wartungsformular für Unternehmen mit echten IDS-Eingabestatus, Theme-Aliasen und einer exakten Asset-ID. Prüfe die aktuellen öffentlichen Theme-Tokens, ein fest versioniertes Web-Components-Paket und einen lokalen Entwurfsworkflow mit Validierung und Zurücksetzen.
Eigenständige Interpretation von HTML/CSS auf Basis geprüfter IDS-Core-/Light-Tokenwerte und eines Systemschrift-Fallbacks. Keine native IDS-Laufzeitumgebung. · Implementierungsreferenz
02
Infor Designsystem Designreferenz
Das bei dieser Überarbeitung ausgelesene Theme-Stylesheet der öffentlichen Infor-Token-Tabelle sowie die veröffentlichte Version ids-enterprise-wc 1.17.1 und offizielle Beispiele für Eingaben und Schaltflächen. Die aktuelle URL der Token-Tabelle verweist auf eine dynamische Momentaufnahme und garantiert keine bestimmte Paketversion.
Infor Designsystem Ein Unternehmensformular mit stabiler Datensatzkennung
Die Gerätekennung von der bearbeitbaren Anfrage trennen
Infor bezeichnet SoHo als seine Designsprache und richtet IDS auf Rollen und Produktivität in Unternehmen aus. Das Beispiel überträgt diesen Schwerpunkt auf eine Wartungsanfrage: Die Asset-Kennung bleibt unverändert, während Arbeitsbeschreibung, Kontakt und Dringlichkeit die bearbeitbaren Angaben bilden.
Die ID 02006 ist bewusst als Zeichenfolge angegeben. Bei einer Umwandlung in eine Zahl würde die führende Null verloren gehen und sich die Kennung ändern. Im nativen IDS-Beispiel wird ein schreibgeschütztes Eingabefeld verwendet, damit der Datensatzkontext sichtbar bleibt, ohne dass das Feld wie fehlend oder nicht verfügbar wirkt.
Infor Designsystem Theme-Aliasse werden über Primitive aufgelöst
Den Alias entsprechend seiner Funktion verwenden
Das erfasste öffentliche Theme definiert action-default über blue-60, default foreground über neutral-100 und secondary foreground über neutral-80. Diese zweistufige Struktur sorgt dafür, dass ein benutzerdefiniertes Formular zum Theme passt, ohne dass sich Literalwerte für Farben in der Anwendung wiederholen.
Die öffentliche Token-Seite bietet die Modi Core, Dark und Contrast. Die Werte in diesem Leitfaden stammen aus einer Momentaufnahme des Core-/Light-Stylesheets. Die Vorschau behauptet nicht, dass ein blauer Hexadezimalwert in allen drei Modi universell gilt. Eine Komponente im Produktivbetrieb sollte ihren semantischen Alias verwenden und das ausgewählte Theme den passenden Wert auflösen lassen.
Infor Designsystem Eine konkrete Skala statt eines erfundenen Dichtesystems
Abstände, Typografie und Radius haben jeweils eigene Alias-Sätze
Zu den Abstandsaliassen gehören xs mit dem 8-Pixel-Primitiv, sm mit 16, md mit 24 und lg mit 32. Das bereitgestellte native CSS verwendet md für den inneren Hauptabstand und sm zwischen den Feldern. So wird die Absicht im Quelltext deutlich, während die Referenztabelle konkrete Werte enthält.
Die Standardschriftfamilie ist Source Sans Pro, für Monospace wird Source Code Pro verwendet. Der Alias font-size-default verweist auf den Skaleneintrag mit 16 Pixeln. Auch nach dem Laden der Bibliothek müssen die in der Paket-README beschriebenen Schriftdateien bereitgestellt werden. Die Offline-Vorschau verwendet stattdessen eine gewöhnliche Fallback-Schrift.
Radius-Bezeichnungen sind von Abstandsbezeichnungen getrennt: radius-sm wird zu 8 Pixeln aufgelöst, space-sm dagegen zu 16 Pixeln. Wer einen bekannten Zahlenwert wiederverwendet, nur weil beide Bezeichnungen auf sm enden, erhält das falsche Ergebnis.
Infor Designsystem Eingabestatus mit unterschiedlicher Bedeutung
Schreibgeschützt, deaktiviert und geändert sind nicht austauschbar
Die offiziellen Beispiele unterstützen readonly, disabled, dirty-tracker, clearable, uppercase, lowercase und logische Textausrichtung. Für die Beispielanfrage werden nur readonly für die Asset-Kennung und clearable für die Arbeitsbeschreibung benötigt. Bei einer E-Mail-Adresse wird keine automatische Groß- oder Kleinschreibung aktiviert und eine Freitextbeschreibung nicht stillschweigend umgewandelt.
Das native Eingabebeispiel deklariert validate="email required" für das Kontaktfeld. Die veröffentlichte Typdeklaration stellt value, focus() und checkValidation() bereit. Da checkValidation void zurückgibt, wird die Methode nicht fälschlich als boolesches Ergebnis zur Formularvalidierung behandelt. Stattdessen werden die Bedingungen, unter denen der lokale Datensatz vorbereitet werden kann, separat geprüft.
Ein schreibgeschütztes Feld hält einen festen Anlagenwert sichtbar und lesbar.
Ein deaktiviertes Feld kann derzeit nicht verwendet werden.
Die Änderungsverfolgung beschreibt die Abweichung von einem Ausgangswert; sie ist weder ein Erfolgs- noch ein Validierungsstatus.
Infor Designsystem Änderungsverfolgung und Validierung haben unterschiedliche Aufgaben
Änderungen verfolgen, ohne die Daten als gültig einzustufen
Die offizielle IDS-Eingabegalerie zeigt dirty-tracker="true" für ein Eingabefeld mit einem Ausgangswert. Die Änderungsverfolgung bezieht sich auf Änderungen an einem Feld. Sie ist vom validate-Attribut getrennt, dessen Regeln email und required gültige Eingaben beschreiben. Auch ein geändertes Kontaktfeld kann weiterhin eine ungültige Adresse enthalten.
Die veröffentlichte Input-Deklaration stellt checkValidation(): void bereit. Rufen Sie die Methode auf, um das Validierungsverhalten der Komponente auszulösen, nicht als boolesche Bedingung, die eine Aktion für einen Arbeitsauftrag freigibt. Das native Beispiel prüft außerdem die erforderlichen Anwendungswerte, bevor es einen Entwurf erstellt. Die löschbare Zusammenfassung und die schreibgeschützte Anlage veranschaulichen zwei weitere, unabhängige Eingabefunktionen.
Die Änderungsverfolgung ist eine dokumentierte Erweiterung, die in dieser Vorschau nicht aktiviert ist. Die Demo löscht die vorbereitete Zusammenfassung nach Änderungen und setzt den Fokus auf das Feld für die Arbeitszusammenfassung zurück. Sie meldet keinen Wartungsauftrag als gespeichert.
Infor Designsystem Einen zweigeteilten Arbeitsbereich gestalten, ohne das Formular zu verbergen
Zuerst das Formular, dann der Kontext
Die Vorschau kombiniert ein Formular mit einer kompakten Karte zum Anlagenkontext und einer einfachen, eigens erstellten Maschinengrafik. Die primäre Lesereihenfolge bleibt: Überschrift, Felder, Aktionen, Ergebnis. Bei schmalen Ansichten wird der Kontext unter das Formular verschoben, statt die Eingabefelder in unlesbar schmale Spalten zu quetschen.
Die Bibliotheksbeispiele verwenden ids-layout-grid mit spaltenbezogenen Attributen für verschiedene Breakpoints. Dieses Beispiel behält bewusst ein einfacheres, responsives Layout bei; seine maximale Breite und sein Breakpoint sind anwendungsspezifische Werte. Veranschaulicht werden die abstandsbezogenen Tokens und die Beschriftungen nativer Steuerelemente.
Infor Designsystem Das native Paket festlegen und initialisieren, bevor Werte gelesen werden
Das veröffentlichte Paket ist der zuverlässige Einstiegspunkt
Für das verifizierte Paket sind Version 1.17.1, der ES-Modul-Einstiegspunkt enterprise-wc.js und das aktuelle, von Infor gehostete Quell-Repository angegeben. Der alte GitHub-Pfad ist daher keine verlässliche Installationsanleitung. Der Code importiert das veröffentlichte Paket, fügt die Komposition ein und wartet auf die Definition der benutzerdefinierten Elemente, bevor er das Verhalten verdrahtet.
Die offiziellen Live-Beispiele enthalten Chunk-URLs, die von der jeweiligen Build-Version abhängen. Einen beliebigen Chunk-Namen in eine Anwendung zu übernehmen, würde sie an ein Deployment-Artefakt koppeln; über den Paket-Einstiegspunkt kann der Bundler diese Abhängigkeiten auflösen. Dieser Leitfaden überprüft die öffentlichen Methodendeklarationen und grenzt das Browserbeispiel klar von der nativen Build-Aussage ab.
Installieren Sie das festgelegte Paket im Vite-Vanilla-Grundgerüst und binden Sie die dokumentierte Schriftart gemäß den Richtlinien Ihrer Anwendung für Assets ein.
Verwenden Sie den bereitgestellten Einstiegspunkt und CSS, warten Sie auf die benutzerdefinierten Elemente und verknüpfen Sie anschließend die primäre Aktion und die Zurücksetzen-Aktion.
Testen Sie eine leere Zusammenfassung, eine fehlerhafte E-Mail-Adresse, einen gültigen lokalen Entwurf und eine anschließende Änderung. Stellen Sie sicher, dass die angezeigte Momentaufnahme nie veraltet ist.
Infor Designsystem Beispiele für Design-System-Komponenten
Vollständige, eigenständige interaktive Demo
Speichern Sie das vollständige Dokument als index.html und öffnen Sie es in einem Browser. Unabhängige Interpretation von HTML/CSS anhand verifizierter IDS-Core-/Light-Tokenwerte und einer Systemschrift als Fallback. Keine native IDS-Laufzeitumgebung.
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>
Asset 02006 bleibt eine Zeichenfolge. Das native IDS-Beispiel, nicht dieses HTML-Formular, führt die Registrierung benutzerdefinierter Elemente und checkValidation() aus; keines davon erstellt einen Wartungsauftrag.
Schreibgeschützte Kennung, erforderliche Zusammenfassung und Kontaktvalidierung
Die IDS-Eingabevalidierung wird explizit aufgerufen; Anwendungsprüfungen verhindern einen leeren lokalen Entwurf. Nutzereingaben werden mit textContent ausgegeben.
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)}
Eine nicht verfügbare Komponente wird mit disabled gekennzeichnet und nicht nur durch einen blasseren Stil dargestellt.
04
Infor Designsystem Agenteneinrichtung
Ausgangspunkt für die Implementierung
Vollständiger Einstiegspunkt und Stylesheet für ein Vite-Vanilla-Grundgerüst mit #app. Paketversion und Methoden wurden anhand des veröffentlichten Pakets überprüft; eine Kompilierung wurde hier nicht ausgeführt. Binden Sie Source Sans Pro über eine genehmigte Schriftquelle ein. Die eingebettete Vorschau ist eine unabhängige native HTML-Implementierung.
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)}
Ein Prompt für dein Projekt
Agenten-Prompt
Erstellen Sie einen IDS-Wartungsentwurf von Infor mit den verifizierten Aliasen des hellen Themes und der dokumentierten Anatomie von Eingabefeldern und Schaltflächen. Bewahren Sie die Anlagenkennung als Zeichenfolge und schreibgeschützt. Validieren Sie die bearbeitbaren Felder, löschen Sie nach Änderungen veraltete Ausgaben und unterscheiden Sie einen lokalen Entwurf von einem übermittelten Arbeitsauftrag. Behandeln Sie checkValidation() nicht so, als würde die Methode einen booleschen Wert zurückgeben.
05
Infor Designsystem Quellen und Geltungsbereich
Unabhängiger OpenDesign-Leitfaden. Anlage und Arbeitsablauf sind fiktiv; es wird nichts übermittelt. Der native Code verweist auf das überprüfte Paket 1.17.1, während die Tokenwerte als separate Momentaufnahme des aktuellen Core-/Light-Themes ausgewiesen sind.
