# SAP Fiori Designsystem ## SAP Fiori Designsystem – Oberflächenvorschau Eine Bedarfsanforderung bearbeiten, die Menge prüfen, die Dichte ändern und eine lokale Zusammenfassung erstellen. ## 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. ### Horizon-Farbrollen | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | @sapBrandColor | #0070f2 | Primäre Markenrolle. | | @sapBackgroundColor | #f5f6f7 | Seitenhintergrund. | | @sapBaseColor | #ffffff | Basisoberfläche. | | @sapTextColor | #131e29 | Primärer Text. | | @sapNegativeColor | #aa0808 | Negativer Status. | | @sapCriticalColor | #e76500 | Kritische Rolle; für Text gibt es eine separate abgeleitete Rolle. | | @sapPositiveColor | #256f3a | Positiver Status. | | @sapInformationBackground | #e1f4ff | Oberfläche für Informationsmeldungen. | | @sapWarningBackground | #fff8d6 | Oberfläche für kritische Meldungen. | ### Typografie und Geometrie | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | @sapFontFamily | "72", "72full", Arial, Helvetica, sans-serif | Veröffentlichter Schriftartenstapel. | | @sapFontSize | 0.875rem | Basisgröße. | | @sapContent_LineHeight | 1.5 | Zeilenhöhenmultiplikator für Inhalte. | | @sapElement_Height | 2.25rem | Geschützte reguläre Abmessung. | | @sapElement_Compact_Height | 1.625rem | Geschützte kompakte Abmessung. | | @sapElement_LineHeight | 2.75rem | Geschützte reguläre Zeilenbox. | | @sapElement_Compact_LineHeight | 2rem | Geschützte kompakte Zeilenbox. | | @sapButton_BorderCornerRadius | 0.5rem | Eckenparameter für Schaltflächen. | | @sapContent_FocusWidth | 0.125rem | Fokusbreite. | | @sapContent_FocusColor | #0032a5 | Fokusfarbe. | ### Theme- und Dichteeinrichtung | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | sap_horizon | Morning Horizon | In Komponenten integriertes Standard-Theme. | | sap_horizon_dark | Evening Horizon | Für zusätzliche Themes werden Assets benötigt. | | sap_horizon_hcb / sap_horizon_hcw | High contrast black / white | Separate unterstützte Themes mit hohem Kontrast. | | Assets.js | One import per component library used | Assets für zusätzliche Themes registrieren. | | setTheme(name) | @ui5/webcomponents-base/dist/config/Theme.js | Theme über das öffentliche API ändern. | ### Select-Vertrag | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | ui5-select value | Matches option value or text | Nicht mit den Flags „option selected“ kombinieren. | | selectedOption | Read-only IOption | Das ausgewählte Optionsobjekt auslesen. | | change | event.detail.selectedOption | Abgeschlossene Auswahländerung. | | live-change | Navigation preview | Nicht als übernommene Geschäftsentscheidung behandeln. | | accessible-name-ref | ID of visible labeling element | Sichtbaren Text mit dem Steuerelement verknüpfen. | ### Eingabe und Rückmeldung | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | value | String | Numerische Eingaben ausdrücklich umwandeln. | | input | Each keystroke | Für laufend aktualisierte geschätzte Summen verwenden. | | change | Enter or focusout | Nicht dasselbe wie eine Eingabe bei jedem Tastendruck. | | value-state | None / Negative / Critical / Information / Positive | Statusnamen im aktuellen API. | | slot="valueStateMessage" | One root element | Erläuterung zum konkreten Feld. | ### Nachrichtenleiste | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | design | Information / Positive / Critical / Negative | Semantische Anwendungsnachricht. | | hide-close-button | Boolean attribute | Die erforderliche Erläuterung sichtbar halten. | | default slot | Prefer text content | Eine Nachrichtenleiste nicht zu einem komplexen Panel ausbauen. | ## SAP Fiori 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. ## 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. Unterstützende Spezifikation lesen ## 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. Unterstützende Spezifikation lesen ## 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. ```
``` Code-Referenz Unterstützende Spezifikation lesen ## 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. Unterstützende Spezifikation lesen ## 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. Unterstützende Spezifikation lesen ## 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. 1. Titel und numerischen Zeichenfolgenwert aus den Komponenten auslesen. 2. Für dieses Beispiel einen Titel und eine ganzzahlige Menge von 1 bis 20 verlangen. 3. Die betroffenen Steuerelemente auf Negative setzen und ihre eingegebenen Werte beibehalten. 4. Die Zusammenfassung erst vorbereiten, wenn beide Bedingungen erfüllt sind. Unterstützende Spezifikation lesen ## 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. Unterstützende Spezifikation lesen ## 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. Unterstützende Spezifikation lesen ## SAP Fiori Designsystem: Komponentenbeispiele ### Vollständige, eigenständige interaktive Demo 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. ``` Fiori purchase request
PProcurement workspaceSample environment

Purchase request

PR-DRAFT · Workplace equipment

Draft · not submitted

Request details

Whole number from 1 to 20.

27-inch studio monitorEquipment · Item 100240
€320 / unit
Estimated line total€640
Complete the draft before preparing the summary.

HTML interpretation of SAP Morning Horizon · UI5 native integration provided in guide · No SAP transaction created

``` Code-Referenz - 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. ``` // main.js in a Vite vanilla project. index.html contains
. 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 = `

Purchase request

Prepare a local requisition summary. No SAP transaction is created.

Request title

Enter a title for this request.

Cost center

Design · CC-240 Research · CC-360

Monitor quantity

Use a whole number from 1 to 20.

Estimated line total: €640

Prepare summary Toggle compact controls Complete the draft before preparing the summary.
`; 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')); ``` Code-Referenz - 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. ## 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. ``` 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 ``` 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. ``` ## 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. - Erste Schritte Offizielle Einrichtung von Paket und Bundler. - Horizon-Quelle Momentaufnahme der Theme-Parameter. - Konfiguration Theme-Namen und Laden der Ressourcen. - Dichte Kompaktmodus-Marker und RTL. - Schriftarten 72-Ladevorgang und Hinweise zu lokalen Schriftarten. - Input Wertstatus und Eingabeereignisse. - Select Auswahlstrategien und Ereignisse. - MessageStrip Aufbau semantischer Meldungen. - Quelle für Schaltflächen Native Button-Implementierung. ## SAP Fiori Designsystem: Weiterführende Ressourcen ### SEEK Braid Lernen Sie Braid anhand einer eigens entwickelten Jobsuche kennen: themenspezifische Variablen, vier echte Breakpoints, kontextbezogener Text, klar unterscheidbare Schaltflächenstile und ein kontrolliertes Feld, das die Validierung erklärt, statt die Aktion zu deaktivieren. ### Segment Evergreen Eine Evergreen-Referenz mit tatsächlichen Design-Token-Werten, kontrollierter Tag-Eingabe, Live-Regelabgleich, einem Wiederherstellungspfad für leere Zustände und einem nativen Prüfdialog. ### Semi Design Erstellen Sie eine schrittweise Workspace-Einrichtung mit den empfohlenen grundlegenden Steps von Semi, einem gesteuerten Input und Switch, echten Theme-Tokens und einer expliziten Entscheidung zwischen den Paketen React 18 und React 19. - [Implementierungsreferenz](https://raw.githubusercontent.com/SAP/theming-base-content/master/content/Base/baseLib/sap_horizon/base.less) - [Quelle](https://raw.githubusercontent.com/SAP/theming-base-content/master/content/Base/baseLib/sap_horizon/base.less) - [Quelle](https://ui5.github.io/webcomponents/docs/advanced/configuration/) - [Quelle](https://ui5.github.io/webcomponents/components/Select/) - [Quelle](https://ui5.github.io/webcomponents/components/Input/) - [Quelle](https://ui5.github.io/webcomponents/components/MessageStrip/) - [Unterstützende Spezifikation lesen](https://ui5.github.io/webcomponents/docs/getting-started/first-steps/) - [Unterstützende Spezifikation lesen](https://raw.githubusercontent.com/SAP/theming-base-content/master/content/Base/baseLib/sap_horizon/base.less) - [Code-Referenz](https://ui5.github.io/webcomponents/docs/advanced/RTL-and-compact-mode/) - [Unterstützende Spezifikation lesen](https://ui5.github.io/webcomponents/docs/advanced/RTL-and-compact-mode/) - [Unterstützende Spezifikation lesen](https://ui5.github.io/webcomponents/docs/advanced/fonts/) - [Unterstützende Spezifikation lesen](https://ui5.github.io/webcomponents/components/Select/) - [Unterstützende Spezifikation lesen](https://ui5.github.io/webcomponents/components/Input/) - [Unterstützende Spezifikation lesen](https://ui5.github.io/webcomponents/components/MessageStrip/) - [Unterstützende Spezifikation lesen](https://ui5.github.io/webcomponents/docs/advanced/configuration/) - [Code-Referenz](https://raw.githubusercontent.com/SAP/theming-base-content/master/content/Base/baseLib/sap_horizon/base.less) - [Code-Referenz](https://ui5.github.io/webcomponents/docs/getting-started/first-steps/) - [Erste Schritte Offizielle Einrichtung von Paket und Bundler.](https://ui5.github.io/webcomponents/docs/getting-started/first-steps/) - [Horizon-Quelle Momentaufnahme der Theme-Parameter.](https://raw.githubusercontent.com/SAP/theming-base-content/master/content/Base/baseLib/sap_horizon/base.less) - [Konfiguration Theme-Namen und Laden der Ressourcen.](https://ui5.github.io/webcomponents/docs/advanced/configuration/) - [Dichte Kompaktmodus-Marker und RTL.](https://ui5.github.io/webcomponents/docs/advanced/RTL-and-compact-mode/) - [Schriftarten 72-Ladevorgang und Hinweise zu lokalen Schriftarten.](https://ui5.github.io/webcomponents/docs/advanced/fonts/) - [Input Wertstatus und Eingabeereignisse.](https://ui5.github.io/webcomponents/components/Input/) - [Select Auswahlstrategien und Ereignisse.](https://ui5.github.io/webcomponents/components/Select/) - [MessageStrip Aufbau semantischer Meldungen.](https://ui5.github.io/webcomponents/components/MessageStrip/) - [Quelle für Schaltflächen Native Button-Implementierung.](https://raw.githubusercontent.com/SAP/ui5-webcomponents/main/packages/main/src/Button.ts)