# Infor Designsystem

## Infor Designsystem Oberflächenvorschau

Validieren Sie eine Zusammenfassung und Kontaktangabe, erstellen Sie eine lokale Anfrage und leeren Sie sie, ohne etwas zu senden.

## 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.

### Theme-Rollen

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| --ids-color-action-default | var(--ids-color-blue-60) | Semantischer Alias aus dem öffentlichen Core-/Light-Theme. |
| --ids-color-action-stronger | var(--ids-color-blue-70) | Semantischer Alias aus dem öffentlichen Core-/Light-Theme. |
| --ids-color-background-default | var(--ids-color-white-100) | Semantischer Alias aus dem öffentlichen Core-/Light-Theme. |
| --ids-color-foreground-default-default | var(--ids-color-neutral-100) | Semantischer Alias aus dem öffentlichen Core-/Light-Theme. |
| --ids-color-foreground-default-secondary | var(--ids-color-neutral-80) | Semantischer Alias aus dem öffentlichen Core-/Light-Theme. |
| --ids-color-border-default | var(--ids-color-neutral-60) | Semantischer Alias aus dem öffentlichen Core-/Light-Theme. |
| --ids-color-border-weak | var(--ids-color-neutral-40) | Semantischer Alias aus dem öffentlichen Core-/Light-Theme. |
### Aufgelöste Primitive

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| --ids-color-blue-60 | #0072ed | Primitiv aus dem öffentlichen Theme; gehen Sie nicht davon aus, dass derselbe Wert auch im Dark- oder Contrast-Modus gilt. |
| --ids-color-blue-70 | #0066d4 | Primitiv aus dem öffentlichen Theme; gehen Sie nicht davon aus, dass derselbe Wert auch im Dark- oder Contrast-Modus gilt. |
| --ids-color-neutral-100 | #161618 | Primitiv aus dem öffentlichen Theme; gehen Sie nicht davon aus, dass derselbe Wert auch im Dark- oder Contrast-Modus gilt. |
| --ids-color-neutral-80 | #3b3b3f | Primitiv aus dem öffentlichen Theme; gehen Sie nicht davon aus, dass derselbe Wert auch im Dark- oder Contrast-Modus gilt. |
| --ids-color-neutral-60 | #6f6f76 | Primitiv aus dem öffentlichen Theme; gehen Sie nicht davon aus, dass derselbe Wert auch im Dark- oder Contrast-Modus gilt. |
| --ids-color-neutral-10 | #f5f5f5 | Primitiv aus dem öffentlichen Theme; gehen Sie nicht davon aus, dass derselbe Wert auch im Dark- oder Contrast-Modus gilt. |
| --ids-color-red-60 | #da1217 | Primitiv aus dem öffentlichen Theme; gehen Sie nicht davon aus, dass derselbe Wert auch im Dark- oder Contrast-Modus gilt. |
### Abstandsaliase

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| --ids-space-2xs | var(--ids-space-04) | Verwenden Sie den Alias für Abstände in benutzerdefinierten Anwendungen. |
| --ids-space-xs | var(--ids-space-08) | Verwenden Sie den Alias für Abstände in benutzerdefinierten Anwendungen. |
| --ids-space-sm | var(--ids-space-16) | Verwenden Sie den Alias für Abstände in benutzerdefinierten Anwendungen. |
| --ids-space-md | var(--ids-space-24) | Verwenden Sie den Alias für Abstände in benutzerdefinierten Anwendungen. |
| --ids-space-lg | var(--ids-space-32) | Verwenden Sie den Alias für Abstände in benutzerdefinierten Anwendungen. |
| --ids-space-xl | var(--ids-space-40) | Verwenden Sie den Alias für Abstände in benutzerdefinierten Anwendungen. |
| --ids-space-2xl | var(--ids-space-48) | Verwenden Sie den Alias für Abstände in benutzerdefinierten Anwendungen. |
### Abstandswerte

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| --ids-space-04 | 4px | Konkreter Skalenwert aus dem Token-Stylesheet. |
| --ids-space-08 | 8px | Konkreter Skalenwert aus dem Token-Stylesheet. |
| --ids-space-16 | 16px | Konkreter Skalenwert aus dem Token-Stylesheet. |
| --ids-space-24 | 24px | Konkreter Skalenwert aus dem Token-Stylesheet. |
| --ids-space-32 | 32px | Konkreter Skalenwert aus dem Token-Stylesheet. |
| --ids-space-40 | 40px | Konkreter Skalenwert aus dem Token-Stylesheet. |
| --ids-space-48 | 48px | Konkreter Skalenwert aus dem Token-Stylesheet. |
### Typografie

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| --ids-font-family-sans | source sans pro | Typografiereferenz; Schriftdateien müssen separat geladen werden. |
| --ids-font-family-mono | source code pro | Typografiereferenz; Schriftdateien müssen separat geladen werden. |
| --ids-font-size-default | var(--ids-font-size-sm) | Typografiereferenz; Schriftdateien müssen separat geladen werden. |
| --ids-font-size-sm | var(--ids-font-size-40) | Typografiereferenz; Schriftdateien müssen separat geladen werden. |
| --ids-font-size-30 | 14px | Typografiereferenz; Schriftdateien müssen separat geladen werden. |
| --ids-font-size-40 | 16px | Typografiereferenz; Schriftdateien müssen separat geladen werden. |
| --ids-font-size-50 | 20px | Typografiereferenz; Schriftdateien müssen separat geladen werden. |
| --ids-font-size-60 | 24px | Typografiereferenz; Schriftdateien müssen separat geladen werden. |
### Radius-Aliase

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| --ids-border-radius-xs | var(--ids-border-radius-04) | Der Alias verweist auf ein Primitiv. Gehen Sie nicht davon aus, dass für jedes Steuerelement der größte Radius verwendet wird. |
| --ids-border-radius-sm | var(--ids-border-radius-08) | Der Alias verweist auf ein Primitiv. Gehen Sie nicht davon aus, dass für jedes Steuerelement der größte Radius verwendet wird. |
| --ids-border-radius-md | var(--ids-border-radius-16) | Der Alias verweist auf ein Primitiv. Gehen Sie nicht davon aus, dass für jedes Steuerelement der größte Radius verwendet wird. |
| --ids-border-radius-lg | var(--ids-border-radius-24) | Der Alias verweist auf ein Primitiv. Gehen Sie nicht davon aus, dass für jedes Steuerelement der größte Radius verwendet wird. |
| --ids-border-radius-circle | var(--ids-border-radius-99) | Der Alias verweist auf ein Primitiv. Gehen Sie nicht davon aus, dass für jedes Steuerelement der größte Radius verwendet wird. |
### Aufbau von Eingabefeld und Schaltfläche

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| label | Visible input label | Zur Kennzeichnung des Feldes verwenden, nicht nur als Platzhalter. |
| validate | required / email required | Dokumentierte Validierungsregeln. |
| readonly | true | Eine gut lesbare, nicht bearbeitbare Asset-Kennung beibehalten. |
| disabled | true | Separater Status für nicht verfügbare Eingaben. |
| clearable | true | Direkte Möglichkeit zum Leeren des Feldes. |
| dirty-tracker | true | Optionale Nachverfolgung geänderter Werte. |
| text-align | start \| center \| end | Logische Ausrichtung für Text- oder Zahlenangaben. |
### Aktionshierarchie

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| appearance | primary | Den lokalen Entwurf vorbereiten. |
| appearance | secondary | Entwurf als ergänzende Aktion leeren. |
| appearance | tertiary | Weniger hervorgehobene Alternative. |
| appearance | primary-destructive / tertiary-destructive | Für tatsächlich destruktive Aktionen, nicht für einen routinemäßigen Abbruch. |
| disabled | Boolean attribute | Status „Native Komponente nicht verfügbar“. |
## Infor Designsystem Vollständiger Leitfaden

Ein praktischer Leitfaden zur Auswahl, Anwendung und Überprüfung dieses Systems für ein echtes Interface.

Umfassende Anleitung, Einstieg in die Implementierung und Links zu den Quellen.

## 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.

Unterstützende Spezifikation lesen

## 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.

Unterstützende Spezifikation lesen

## 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.

Unterstützende Spezifikation lesen

## 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.

Unterstützende Spezifikation lesen

## 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.

Unterstützende Spezifikation lesen

## 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.

Unterstützende Spezifikation lesen

## 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.

1. 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.

2. 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.

3. 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.

Unterstützende Spezifikation lesen

## 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.

```
<!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="name@example.com" 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>
```

Code-Referenz

- 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.

```
// Vite vanilla project: npm install ids-enterprise-wc@1.17.1
// 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)}
```

Code-Referenz

- checkValidation() gibt void zurück und wird nicht als boolesches Ergebnis behandelt.

- Asset 02006 ist Text, daher bleibt die führende Null erhalten.

- Die Vorbereitung der Vorschau ändert nur den lokalen Seitenstatus.

### Das Erscheinungsbild der Aktionen ist eindeutig festgelegt

Primäre und sekundäre Komponentenvarianten kennzeichnen die zentrale Aktion des Ablaufs eindeutig.

```
<ids-button appearance="primary"><span>Prepare local draft</span></ids-button>
<ids-button appearance="secondary"><span>Clear draft</span></ids-button>
```

Code-Referenz

- Eine nicht verfügbare Komponente wird mit disabled gekennzeichnet und nicht nur durch einen blasseren Stil dargestellt.

## 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.

```
// Vite vanilla project: npm install ids-enterprise-wc@1.17.1
// 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

```
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.
```

## 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.

- Infor Design SoHo-Sprache und Einsatzbereich in Unternehmen.

- Live-Token-Stylesheet Tatsächliche Core-/Light-Tokenwerte und Aliase.

- Eingabebeispiele Öffentliches Komponenten-Markup und -Zustände.

- Schaltflächenbeispiele Aktionsvarianten.

- Veröffentlichtes Paket 1.17.1 Version und Modul-Einstiegspunkt.

- README des Pakets Installations- und Schriftartanforderungen.

- Typdeklarationen für Eingabefelder Signaturen von value, focus und checkValidation.

## Infor Designsystem Verwandte Ressourcen

### Kajabi Sage

Erstelle ein Freigabefeld für Creator mit gut lesbarem Kurskontext, klaren Kopieraktionen und verlässlichem Feedback zur Zwischenablage. Sieh dir die Rails-Komponentenstruktur von Sage, die veröffentlichten Typografiespezifikationen und die neuere, extern geladene Pine-Token-Ebene an.

### Kiwi Orbit

Ein auf Reisen ausgerichteter Orbit-Leitfaden mit echten Produktfarben und Abständen, nativen Gepäckoptionen, einer einheitlichen Preisübersicht und einem vollständigen lokalen Prüfablauf.

### Maersk Designsystem

Untersuchen Sie die Sprache operativer Benutzeroberflächen von Maersk anhand realer Rollen im hellen Theme, Schriftgrößen für Überschriften und Fließtext, abgestuften Eckenradien und der Behandlung von Kennungen. Eine beispielhafte Sendungssuche veranschaulicht den exakten Abgleich von Referenzen und einen barrierefreien Ereignisverlauf, ohne Zugriff auf Live-Logistikdaten zu behaupten.


- [Implementierungsreferenz](https://latest.wc.design.infor.com/ids-input/example.html)
- [Quelle](https://latest.wc.design.infor.com/ids-personalize/token-table.html)
- [Quelle](https://latest.wc.design.infor.com/ids-input/example.html)
- [Quelle](https://latest.wc.design.infor.com/ids-button/example.html)
- [Unterstützende Spezifikation lesen](https://design.infor.com/)
- [Unterstützende Spezifikation lesen](https://latest.wc.design.infor.com/ids-personalize/token-table.html)
- [Unterstützende Spezifikation lesen](https://latest.wc.design.infor.com/ids-input/example.html)
- [Unterstützende Spezifikation lesen](https://unpkg.com/ids-enterprise-wc@1.17.1/components/ids-input/ids-input.d.ts)
- [Unterstützende Spezifikation lesen](https://unpkg.com/ids-enterprise-wc@1.17.1/package.json)
- [Code-Referenz](https://latest.wc.design.infor.com/ids-input/example.html)
- [Code-Referenz](https://unpkg.com/ids-enterprise-wc@1.17.1/components/ids-input/ids-input.d.ts)
- [Code-Referenz](https://latest.wc.design.infor.com/ids-button/example.html)
- [Infor Design SoHo-Sprache und Einsatzbereich in Unternehmen.](https://design.infor.com/)
- [Live-Token-Stylesheet Tatsächliche Core-/Light-Tokenwerte und Aliase.](https://latest.wc.design.infor.com/ids-personalize/token-table.html)
- [Eingabebeispiele Öffentliches Komponenten-Markup und -Zustände.](https://latest.wc.design.infor.com/ids-input/example.html)
- [Schaltflächenbeispiele Aktionsvarianten.](https://latest.wc.design.infor.com/ids-button/example.html)
- [Veröffentlichtes Paket 1.17.1 Version und Modul-Einstiegspunkt.](https://unpkg.com/ids-enterprise-wc@1.17.1/package.json)
- [README des Pakets Installations- und Schriftartanforderungen.](https://unpkg.com/ids-enterprise-wc@1.17.1/README.md)
- [Typdeklarationen für Eingabefelder Signaturen von value, focus und checkValidation.](https://unpkg.com/ids-enterprise-wc@1.17.1/components/ids-input/ids-input.d.ts)
