Verwende das Horizon-Theme von SAP Fiori über UI5 Web Components: echte Theme-Parameter, explizite Inhaltsdichte, semantische Wertzustände und eine Anordnung für eine Kaufanfrage mit lokaler Validierung.
Offline-Interpretation HTML der Morning-Horizon-Parameter und der UI5-Formularzusammenstellung. Ein Beispiel für das native Paket ist separat enthalten. · Implementierungsreferenz
02
SAP Fiori Designsystem – Designreferenz
Quellparameter von Morning Horizon (sap_horizon) sowie aktuelle Dokumentation zu UI5 Web Components. Die nachfolgenden @sap-Namen sind Quellparameter; Browserstile verwenden die entsprechenden benutzerdefinierten --sap-Eigenschaften. Geschützte Abmessungen sind Beobachtungswerte und keine empfohlenen Stellen für Überschreibungen.
SAP Fiori Designsystem: Design und UI5-Implementierung haben unterschiedliche Anwendungsbereiche
Ein konkreter Einstiegspunkt
SAP Fiori beschreibt eine Nutzererfahrung für Unternehmen. Diese Referenz verwendet UI5 Web Components als umsetzbares Beispiel für eine Bestellanforderung. Daraus folgt nicht, dass durch die Installation dieser Komponenten eine SAPUI5-Anwendung, ein Floorplan von Fiori elements oder eine autorisierte SAP-Geschäftstransaktion entsteht.
Das Hauptkomponentenpaket stellt Input, Select und Button bereit. Übergeordnete Fiori-Komponenten befinden sich in einem separaten Paket. Wenn nur die in diesem Beispiel verwendeten Module importiert werden, bleibt der Einstiegspunkt eindeutig und es entsteht nicht der Eindruck, ein nicht unterstütztes CDN mit allen Komponenten zu verwenden.
SAP Fiori Designsystem: Benannte Horizon-Parameter statt einer generischen blauen Farbpalette verwenden
Oberflächen- und Statusrollen
Morning Horizon gestaltet die Seite mit einer hellgrauen Oberfläche und verwendet Weiß als Basisoberfläche. Markenblau und Textfarbe sind separate Parameter. Die Rollen „negativ“, „kritisch“, „positiv“ und „informativ“ beschreiben die Bedeutung und sind keine Auswahl dekorativer Farben, die sich für Karten abwechseln lassen.
Die Vorschau verwendet für die erstellte Zusammenfassung eine Informationsleiste, da die lokale Erstellung keine Bestellgenehmigung darstellt. Artikelpreis, Kostenstellen und Genehmigungsvermerke sind eigene Beispieldaten. Sie dürfen nicht als von SAP vorgegebene Geschäftsregeln interpretiert werden.
SAP Fiori Designsystem: Kompakt ist eine Komponenteneinstellung, kein kleinerer Screenshot
Dichte auf einen sinnvollen Bereich anwenden
UI5 unterstützt eine Kennzeichnung für den Kompaktmodus auf dem Root-Element, dem Body, einem Bereich oder einer Komponente. Das Attribut data-ui5-compact-size und die Klasse ui5-content-density-compact sind öffentliche Mechanismen. Eine dynamische Änderung der Kennzeichnung erfordert kein separates Dichte-API.
Kompakte Steuerelemente eignen sich für dichte Desktop-Aufgaben nur dann, wenn die Interaktion weiterhin angemessen bleibt. Die eingebettete Interpretation verringert Abstände zwischen Steuerelementen und Zeilen, behält jedoch dieselben Informationen bei. Im schmalen Layout werden Bereiche untereinander angeordnet, statt alle Beschriftungen und Schaltflächen zu verkleinern.
SAP Fiori Designsystem: Die Schriftfamilie 72 und ihr Ladeverhalten
Die Verfügbarkeit von Schriftarten ist Teil der Einrichtung
Das Horizon-Theme nennt 72 und 72full vor den Fallback-Schriftarten. UI5 dokumentiert, wie das standardmäßige Laden von Schriftarten deaktiviert und wie Schriftarten lokal bereitgestellt werden. Der praktische Einstieg über FontFace.css ist als experimentell gekennzeichnet. Wenn Sie diesen Weg wählen, sollten Sie den Pfad daher fixieren und erneut überprüfen.
Die eigenständige Vorschau verwendet Arial als explizite Offline-Fallback-Schriftart. Das native UI5-Beispiel verwendet die veröffentlichte Variable für die Schriftfamilie. Diese Unterscheidung verhindert, dass ein optisch ähnlicher Fallback-Screenshot als Beleg dafür gilt, dass die SAP-Schriftdateien geladen wurden.
SAP Fiori Designsystem: Bei einem Select gibt es übernommene und vorläufige Änderungen
Eine Strategie für die gesteuerte Auswahl festlegen
Der Wert von Select stimmt mit dem Wert oder Text einer Option überein. Es wird davon abgeraten, einen Wert für Select mit ausgewählten Flags an Optionen zu kombinieren; bei einem nicht vorhandenen Wert wird keine Option ausgewählt. Das Beispiel initialisiert eine vorhandene Kostenstellenoption und liest beim Erstellen des Ergebnisses den Wert von Select aus.
Das Ereignis change enthält die ausgewählte Option. live-change wird auch ausgelöst, wenn durch die Optionen navigiert und mit Escape zurückgesetzt wird. Verwenden Sie die übernommene Auswahl für Geschäftsdaten und beschränken Sie vorläufige Änderungen auf Vorschauen.
Select- und Option-Registrierungen vor dem Rendern ihrer Tags importieren.
Die sichtbare Kostenstellenbeschriftung über accessible-name-ref verknüpfen.
value in diesem Beispiel als einzige Auswahlstrategie beibehalten.
SAP Fiori Designsystem: Auch numerische Eingaben müssen auf Anwendungsebene validiert werden
Wertstatus und Meldung gehören zusammen
Der Wert von Input ist auch dann eine Zeichenfolge, wenn der Eingabetyp Number ist. Wandeln Sie ihn um und prüfen Sie vor der Multiplikation mit dem Beispielpreis, ob er eine endliche Ganzzahl innerhalb der Grenzwerte ist. Ein leerer Wert darf nicht als gültige Null akzeptiert werden. Der aktuelle semantische Fehlerstatus ist Negative und kein erfundener Error-Enum-Wert.
Der valueStateMessage-Slot enthält ein Wurzelelement mit einer konkreten Erklärung. Die Live-Gesamtsumme reagiert auf Eingaben; die vorbereitete Zusammenfassung wird erst aktualisiert, wenn die Aktion ausgelöst wird.
Titel und numerischen Zeichenfolgenwert aus den Komponenten auslesen.
Für dieses Beispiel einen Titel und eine ganzzahlige Menge von 1 bis 20 verlangen.
Die betroffenen Steuerelemente auf Negative setzen und ihre eingegebenen Werte beibehalten.
Die Zusammenfassung erst vorbereiten, wenn beide Bedingungen erfüllt sind.
SAP Fiori Designsystem: Ergebnis verständlich und lokal halten
Für ein knappes Ergebnis einen Streifen verwenden
MessageStrip unterstützt semantische Designs und eine Schaltfläche zum Schließen. Eine erforderliche Erklärung kann die Schaltfläche zum Schließen ausblenden, damit die Meldung weiterhin verfügbar ist. Der Standard-Slot sollte vorzugsweise Text enthalten und nicht zu einem Formular oder Dashboard ausgebaut werden.
Die Zusammenfassung enthält Titel, Menge, Beispielgesamtsumme und Kostenstelle. Der letzte Satz erklärt, dass nichts übermittelt wurde. Bei einem echten Dienst würde dieser lokale Schritt durch eine autorisierte Anfrage und eine Antwort mit dem tatsächlichen Backend-Status ersetzt.
SAP Fiori Designsystem: Theme-Ressourcen und Modulregistrierung
Die Theme-Auswahl benötigt die zugehörigen Ressourcen
Morning Horizon ist das dokumentierte Standard-Theme und in den Komponenten integriert. Für zusätzliche Themes wird das Modul Assets.js für jede verwendete Bibliothek benötigt. Anschließend kann setTheme Evening Horizon oder eine der Varianten mit hohem Kontrast auswählen. Einen dunklen Namen auszuwählen, ohne die geladenen Ressourcen zu prüfen, ist keine vollständige Integration.
Der bereitgestellte Einstiegspunkt registriert jedes benutzerdefinierte Element, bevor das Markup erstellt wird. Vite verarbeitet dynamische ES-Imports und JSON-Ressourcen. Kompilieren Sie das native Projekt und überprüfen Sie Schriftarten, Theme-Ladevorgang und Tastaturbedienung unabhängig vom Offline-Beispiel HTML.
Speichern Sie das vollständige Dokument als index.html und öffnen Sie es in einem Browser. Offline-Interpretation HTML der Morning-Horizon-Parameter und der UI5-Formularkomposition. Ein Beispiel für ein natives Paket ist separat enthalten.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Fiori purchase request</title><style>
*{box-sizing:border-box}body{margin:0;color:#131e29;background:#f5f6f7;font:14px/1.5 Arial,sans-serif}header{background:white;padding:12px 24px;display:flex;gap:16px;align-items:center;border-bottom:1px solid #d5dadd}.symbol{width:32px;height:32px;display:grid;place-items:center;background:#0070f2;color:white;border-radius:8px;font-weight:bold}header strong{font-size:16px}header span:last-child{margin-left:auto;color:#556b82;font-size:12px}main{max-width:1100px;margin:auto;padding:24px}.objecthead{display:flex;justify-content:space-between;gap:20px;align-items:start;margin-bottom:24px}h1{font-size:28px;line-height:36px;margin:0 0 6px}h2{font-size:18px;margin:0 0 16px}.subtitle{color:#556b82;margin:0}.draft{background:#e1f4ff;color:#0032a5;padding:6px 12px;border-radius:6px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px}.panel{background:white;border-radius:12px;padding:24px;border:1px solid #d5dadd}label{display:block;margin-bottom:6px;color:#556b82}input,select{width:100%;height:44px;border:1px solid #758ca4;border-radius:8px;padding:8px 12px;background:#fff;font:inherit;color:inherit}input:focus,select:focus,button:focus-visible{outline:2px solid #0032a5;outline-offset:3px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px}.fields>div:first-child{grid-column:1/-1}.line{border-top:1px solid #d5dadd;padding-top:20px;display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:16px;align-items:center}.monitor{background:#e1f4ff;border:2px solid #556b82;height:42px;border-radius:4px;position:relative;margin-bottom:12px}.monitor:after{content:'';position:absolute;bottom:-12px;left:25%;width:50%;height:10px;border-bottom:3px solid #556b82;border-left:8px solid transparent;border-right:8px solid transparent}.line strong{display:block}.line small{color:#556b82}.money{font-size:24px;font-weight:600;white-space:nowrap}.unit{font-size:12px;color:#556b82}.total{display:flex;justify-content:space-between;padding-top:24px;font-weight:600}.controls{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}button{border:1px solid #0070f2;background:white;color:#0057b8;padding:10px 16px;border-radius:8px;font:600 14px/20px Arial;cursor:pointer}button.primary{background:#0070f2;color:white}button:hover{filter:brightness(.95)}.steps{list-style:none;padding:0;margin:0;counter-reset:step}.steps li{position:relative;padding:0 0 24px 36px;color:#556b82}.steps li:before{counter-increment:step;content:counter(step);position:absolute;left:0;top:0;border:1px solid #758ca4;border-radius:50%;width:24px;height:24px;text-align:center;background:white}.steps strong{display:block;color:#131e29}.steps li:first-child:before{background:#e1f4ff;color:#0057b8;border-color:#0070f2}.strip{margin-top:24px;background:#e1f4ff;border:1px solid #0070f2;padding:12px 16px;border-radius:8px}.strip.error{background:#ffeaf4;border-color:#aa0808;color:#aa0808}.foot{font-size:12px;color:#556b82;margin-top:24px}.compact input,.compact select{height:32px;padding:4px 8px}.compact .fields{gap:12px}.compact .panel{padding:16px}.compact .line{padding-top:12px}.compact button{padding:6px 12px}.hint{font-size:12px;color:#556b82;margin:6px 0 0}@media(max-width:700px){main{padding:20px 16px}.layout{grid-template-columns:1fr}.fields{grid-template-columns:1fr}.objecthead{display:block}.draft{display:inline-block;margin-top:12px}.line{grid-template-columns:48px minmax(0,1fr)}.line>.money{grid-column:2}.panel{padding:20px}header{padding:12px 16px}}
</style><header><span class="symbol">P</span><strong>Procurement workspace</strong><span>Sample environment</span></header><main><div class="objecthead"><div><h1>Purchase request</h1><p class="subtitle">PR-DRAFT · Workplace equipment</p></div><span class="draft">Draft · not submitted</span></div><div class="layout"><section class="panel"><h2>Request details</h2><form id="form" novalidate><div class="fields"><div><label for="title">Request title</label><input id="title" placeholder="e.g. Studio display upgrade" aria-describedby="notice"></div><div><label for="team">Cost center</label><select id="team"><option value="Design · CC-240">Design · CC-240</option><option value="Research · CC-360">Research · CC-360</option></select></div><div><label for="qty">Monitor quantity</label><input id="qty" type="number" min="1" max="20" step="1" value="2" aria-describedby="qty-help notice"><p id="qty-help" class="hint">Whole number from 1 to 20.</p></div></div><div class="line"><div class="monitor" aria-hidden="true"></div><div><strong>27-inch studio monitor</strong><small>Equipment · Item 100240</small></div><div class="money">€320 <span class="unit">/ unit</span></div></div><div class="total"><span>Estimated line total</span><output id="total">€640</output></div><div class="controls"><button class="primary">Prepare summary</button><button type="button" id="density" aria-pressed="false">Compact controls</button></div></form></section><aside class="panel"><h2>Request path</h2><ol class="steps"><li><strong>Prepare draft</strong>Check quantities and cost center.</li><li><strong>Review summary</strong>Confirm the local request details.</li><li><strong>Submit to service</strong>Not connected in this preview.</li></ol><p class="hint">The review path and price are illustrative application data.</p></aside></div><div class="strip" id="notice" role="status">Complete the draft before preparing the summary.</div><p class="foot">HTML interpretation of SAP Morning Horizon · UI5 native integration provided in guide · No SAP transaction created</p></main><script>
const $=id=>document.getElementById(id);function amount(){const n=Number($('qty').value);return Number.isInteger(n)&&n>=1&&n<=20?n:null}$('qty').oninput=()=>{$('total').textContent=amount()===null?'Invalid quantity':'€'+amount()*320};$('density').onclick=()=>{const active=document.body.classList.toggle('compact');$('density').setAttribute('aria-pressed',String(active));$('density').textContent=active?'Cozy controls':'Compact controls'};$('form').onsubmit=e=>{e.preventDefault();const title=$('title').value.trim(),n=amount();$('title').setAttribute('aria-invalid',String(!title));$('qty').setAttribute('aria-invalid',String(n===null));$('notice').classList.toggle('error',!title||n===null);if(!title||n===null){$('notice').textContent=!title?'Enter a title for this request.':'Use a whole quantity from 1 to 20.';(!title?$('title'):$('qty')).focus();return}$('notice').textContent='Local summary: '+title+' · '+n+' monitors · €'+n*320+' · '+$('team').value+'. Nothing submitted.'};
</script></html>
Der Dichte-Schalter in diesem Dokument HTML ist eine Interpretation. Der UI5-Einstiegspunkt zeigt den tatsächlichen Kompaktmodus-Marker, registrierte benutzerdefinierte Elemente und Horizon-Ressourcen.
Horizon-Bestellanfrage mit validierten Mengen
Input, Select/Option, Button und MessageStrip bilden eine lokale Bestellübersicht. Die Gesamtsummen, die bei jeder Eingabe aktualisiert werden, bleiben von der vorbereiteten Zusammenfassung getrennt.
javascript
// main.js in a Vite vanilla project. index.html contains <div id="app"></div>.
import '@ui5/webcomponents/dist/Button.js';
import '@ui5/webcomponents/dist/Input.js';
import '@ui5/webcomponents/dist/Select.js';
import '@ui5/webcomponents/dist/Option.js';
import '@ui5/webcomponents/dist/MessageStrip.js';
import '@ui5/webcomponents/dist/Assets.js';
import {setTheme} from '@ui5/webcomponents-base/dist/config/Theme.js';
setTheme('sap_horizon');
document.querySelector('#app').innerHTML = `
<main style="max-width:800px;margin:auto;padding:24px;font-family:var(--sapFontFamily)">
<h1>Purchase request</h1>
<p>Prepare a local requisition summary. No SAP transaction is created.</p>
<p id="request-label">Request title</p>
<ui5-input id="title" accessible-name-ref="request-label" required>
<span slot="valueStateMessage">Enter a title for this request.</span>
</ui5-input>
<p id="team-label">Cost center</p>
<ui5-select id="team" accessible-name-ref="team-label" value="design">
<ui5-option value="design">Design · CC-240</ui5-option>
<ui5-option value="research">Research · CC-360</ui5-option>
</ui5-select>
<p id="qty-label">Monitor quantity</p>
<ui5-input id="qty" type="Number" accessible-name-ref="qty-label" value="2">
<span slot="valueStateMessage">Use a whole number from 1 to 20.</span>
</ui5-input>
<p id="total">Estimated line total: €640</p>
<ui5-button id="prepare" design="Emphasized">Prepare summary</ui5-button>
<ui5-button id="density">Toggle compact controls</ui5-button>
<ui5-message-strip id="notice" design="Information" hide-close-button style="display:block;margin-top:24px">
Complete the draft before preparing the summary.
</ui5-message-strip>
</main>`;
const title=document.querySelector('#title'),qty=document.querySelector('#qty');
qty.addEventListener('input',()=>{
const n=Number(qty.value);
document.querySelector('#total').textContent=Number.isInteger(n)&&n>=1&&n<=20
? `Estimated line total: €${n*320}` : 'Enter a valid quantity to calculate the total.';
});
document.querySelector('#prepare').addEventListener('click',()=>{
const n=Number(qty.value), validTitle=!!title.value.trim(), validQty=Number.isInteger(n)&&n>=1&&n<=20;
title.valueState=validTitle?'None':'Negative';qty.valueState=validQty?'None':'Negative';
const notice=document.querySelector('#notice');
if(!validTitle||!validQty){notice.design='Negative';notice.textContent='Correct the request title or quantity before continuing.';return;}
notice.design='Information';
notice.textContent=`Local summary: ${title.value.trim()}, ${n} monitors, €${n*320}, ${document.querySelector('#team').value}. Nothing submitted.`;
});
document.querySelector('#density').addEventListener('click',()=>document.body.toggleAttribute('data-ui5-compact-size'));
Die Mengenregel, der Stückpreis von €320 und die Kostenstellen sind erfundene Anwendungsdaten und keine SAP-Richtlinie.
UI5 Web Components sind eine Implementierung von Fiori-Mustern; dies ist weder eine vollständige SAPUI5-Anwendung noch ein Fiori-elements-Floorplan.
Es wird keine SAP-Transaktion erstellt. Die Prüfung der Offline-Vorschau bedeutet nicht, dass native Abhängigkeiten kompiliert werden.
04
SAP Fiori Designsystem: Agent-Setup
Ausgangspunkt für die Implementierung
Ersetzen Sie die Vite-main.js durch das vollständige Beispiel. Die UI5-Dokumentation setzt einen ES-Modul-Bundler voraus; ein offizielles CDN mit allen Komponenten wird nicht bereitgestellt.
bash
npm create vite@latest fiori-request -- --template vanilla
cd fiori-request
npm install
npm install @ui5/webcomponents @ui5/webcomponents-base
npm run dev
Ein Prompt für dein Projekt
Agenten-Prompt
Stellen Sie eine Fiori-Bestellanfrage mit den UI5 Web Components Input, Select, Button und MessageStrip und dem Horizon-Theme zusammen. Behalten Sie die numerische Validierung, den korrekten Wertstatus Negative, den expliziten Kompaktmodus und das transparente Verhalten der lokalen Zusammenfassung bei.
05
SAP Fiori Designsystem: Quellen und Geltungsbereich
Unabhängige Referenz zu OpenDesign. Beispiel mit UI5 Web Components, keine bereitgestellte SAP-Transaktion und keine vollständige Fiori-elements-Anwendung.
