# Sistema di progettazione SAP Fiori ## Anteprima dell’interfaccia del sistema di progettazione sistema di design SAP Fiori Modifica una richiesta d’acquisto, convalida la quantità, cambia la densità e prepara un riepilogo locale. ## Riferimento di progettazione del sistema di progettazione sistema di design SAP Fiori Parametri sorgente di Morning Horizon (sap_horizon) e documentazione aggiornata di UI5 Web Components. I nomi @sap senza prefisso Less riportati di seguito sono parametri sorgente; gli stili del browser usano le corrispondenti proprietà personalizzate --sap. Le dimensioni protette sono valori osservati, non punti consigliati per la sovrascrittura. ### Ruoli cromatici di Horizon | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | @sapBrandColor | #0070f2 | Ruolo primario del brand. | | @sapBackgroundColor | #f5f6f7 | Sfondo della pagina. | | @sapBaseColor | #ffffff | Superficie di base. | | @sapTextColor | #131e29 | Testo primario. | | @sapNegativeColor | #aa0808 | Stato negativo. | | @sapCriticalColor | #e76500 | Ruolo critico; il testo usa un ruolo derivato distinto. | | @sapPositiveColor | #256f3a | Stato positivo. | | @sapInformationBackground | #e1f4ff | Superficie dei messaggi informativi. | | @sapWarningBackground | #fff8d6 | Superficie dei messaggi critici. | ### Tipografia e geometria | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | @sapFontFamily | "72", "72full", Arial, Helvetica, sans-serif | Stack di font pubblicato. | | @sapFontSize | 0.875rem | Dimensione di base. | | @sapContent_LineHeight | 1.5 | Moltiplicatore dell’interlinea del contenuto. | | @sapElement_Height | 2.25rem | Dimensione regolare protetta. | | @sapElement_Compact_Height | 1.625rem | Dimensione compatta protetta. | | @sapElement_LineHeight | 2.75rem | Riquadro di riga regolare protetto. | | @sapElement_Compact_LineHeight | 2rem | Riquadro di riga compatto protetto. | | @sapButton_BorderCornerRadius | 0.5rem | Parametro di arrotondamento dei pulsanti. | | @sapContent_FocusWidth | 0.125rem | Larghezza del focus. | | @sapContent_FocusColor | #0032a5 | Colore del focus. | ### Configurazione di tema e densità | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | sap_horizon | Morning Horizon | Tema predefinito integrato nei componenti. | | sap_horizon_dark | Evening Horizon | Per un tema aggiuntivo servono risorse. | | sap_horizon_hcb / sap_horizon_hcw | High contrast black / white | Temi a contrasto elevato supportati e separati. | | Assets.js | One import per component library used | Registra le risorse del tema aggiuntivo. | | setTheme(name) | @ui5/webcomponents-base/dist/config/Theme.js | Cambia tema tramite l’API pubblica API. | ### Contratto di Select | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | ui5-select value | Matches option value or text | Non combinarlo con le flag selected delle opzioni. | | selectedOption | Read-only IOption | Leggi l’oggetto dell’opzione selezionata. | | change | event.detail.selectedOption | Modifica della selezione confermata. | | live-change | Navigation preview | Non considerarla una scelta aziendale confermata. | | accessible-name-ref | ID of visible labeling element | Associa al controllo un’etichetta visibile. | ### Input e feedback | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | value | String | Converti esplicitamente l’input numerico. | | input | Each keystroke | Usalo per i totali stimati in tempo reale. | | change | Enter or focusout | Diverso dall’input a ogni pressione di tasto. | | value-state | None / Negative / Critical / Information / Positive | Nomi degli stati nell’attuale API. | | slot="valueStateMessage" | One root element | Spiegazione specifica del campo. | ### Message strip | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | design | Information / Positive / Critical / Negative | Messaggio semantico dell’applicazione. | | hide-close-button | Boolean attribute | Mantieni visibile la spiegazione richiesta. | | default slot | Prefer text content | Evita di trasformare una strip in un pannello complesso. | ## Guida completa al sistema di progettazione sistema di design SAP Fiori Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale. Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti. ## Il design del sistema di progettazione sistema di design SAP Fiori e l’implementazione UI5 hanno ambiti diversi ### Un punto di partenza concreto > SAP Fiori descrive un’esperienza utente aziendale. Questo riferimento sceglie UI5 Web Components per realizzare un esempio di richiesta d’acquisto. Ciò non significa che installando questi componenti si crei un’applicazione SAPUI5, un floorplan Fiori elements o una transazione aziendale SAP autorizzata. Il pacchetto principale dei componenti fornisce Input, Select e Button. I componenti Fiori di livello superiore si trovano in un pacchetto separato. Importare solo i moduli usati in questo esempio rende esplicito il punto di ingresso ed evita di suggerire un CDN non supportato che includa tutti i componenti. Leggi la specifica di supporto ## Sistema di progettazione sistema di design SAP Fiori: usa i parametri Horizon con nome invece di una palette blu generica ### Superficie e ruoli di stato Morning Horizon imposta lo sfondo della pagina su una superficie grigio chiaro e usa una superficie di base bianca. Il blu del marchio e il colore del testo sono parametri distinti. I ruoli negativo, critico, positivo e informativo ne descrivono il significato, non costituiscono una lista di colori decorativi da alternare nelle schede. L’anteprima usa una striscia informativa per il riepilogo preparato, perché la preparazione locale non equivale all’approvazione dell’acquisto. Il prezzo dell’articolo, i centri di costo e le annotazioni sull’approvazione sono dati di esempio originali. Non vanno mai interpretati come regole aziendali fornite da SAP. Leggi la specifica di supporto ## Sistema di progettazione sistema di design SAP Fiori: Compact è un’impostazione del componente, non uno screenshot rimpicciolito ### Applica la densità a un’area significativa UI5 supporta un marcatore compact applicabile all’elemento root, al body, a un’area o a un componente. L’attributo data-ui5-compact-size e la classe ui5-content-density-compact sono meccanismi pubblici. Cambiare dinamicamente il marcatore non richiede un API di densità separato. Usa controlli compatti per un’attività desktop densa solo se l’interazione resta adeguata. L’interpretazione incorporata riduce la spaziatura dei controlli e delle righe, ma mantiene le stesse informazioni. Nel layout stretto, le aree vengono disposte in verticale invece di rimpicciolire tutte le etichette e i pulsanti. ```
``` Riferimento del codice Leggi la specifica di supporto ## Sistema di progettazione sistema di design SAP Fiori: la famiglia 72 e il caricamento dei font ### La disponibilità dei font fa parte della configurazione Il tema Horizon specifica 72 e 72full prima dei font di fallback. UI5 documenta come disabilitare il caricamento predefinito dei font e come ospitare i font localmente. La voce di comodo FontFace.css è contrassegnata come sperimentale: se scegli questa soluzione, fissa il percorso e ricontrollalo. L’anteprima autonoma usa Arial come fallback offline esplicito. L’esempio UI5 nativo usa la variabile font-family pubblicata. Questa distinzione evita di sostenere che uno screenshot con un fallback visivamente simile dimostri che le risorse dei font SAP siano state caricate. Leggi la specifica di supporto ## Sistema di progettazione sistema di design SAP Fiori: un Select presenta modifiche confermate e provvisorie ### Scegli un’unica strategia controllata per la selezione Il valore di Select corrisponde al valore o al testo di un’opzione. È sconsigliato combinare un valore Select con le flag selected sulle opzioni; un valore inesistente non seleziona alcuna opzione. L’esempio inizializza un’opzione reale per il centro di costo e legge il valore di Select quando prepara il risultato. L’evento change contiene l’opzione selezionata. live-change viene attivato anche quando si scorrono le opzioni o si annulla con Esc. Usa la selezione confermata per i dati aziendali e riserva le modifiche provvisorie alle anteprime. - Importa le registrazioni di Select e Option prima di visualizzare i relativi tag. - Associa l’etichetta visibile del centro di costo tramite accessible-name-ref. - In questo esempio, mantieni value come unica strategia di selezione. Leggi la specifica di supporto ## Sistema di progettazione sistema di design SAP Fiori: l’input numerico richiede comunque la convalida dell’applicazione ### Lo stato e il messaggio del valore devono essere coerenti Il valore di Input è una stringa anche quando il tipo di input è Number. Converti il valore e verifica che sia un intero finito entro i limiti prima di moltiplicarlo per il prezzo di esempio. Un valore vuoto non deve essere accettato come zero. Lo stato semantico di errore corrente è Negative, non un enum Error inventato. Lo slot valueStateMessage fornisce un elemento root con una spiegazione specifica. Il totale aggiornato in tempo reale ascolta input; il riepilogo preparato viene aggiornato solo quando l’utente attiva l’azione. 1. Leggi il titolo e la stringa numerica dai rispettivi componenti. 2. Per questo esempio, richiedi un titolo e una quantità intera compresa tra 1 e 20. 3. Imposta su Negative i controlli interessati e mantieni i valori inseriti. 4. Prepara il riepilogo solo quando entrambe le condizioni sono soddisfatte. Leggi la specifica di supporto ## Sistema di progettazione sistema di design SAP Fiori: descrivi il risultato senza uscire dal contesto locale ### Usa una strip per comunicare un esito conciso MessageStrip supporta design semantici e un controllo di chiusura. Se è necessaria una spiegazione, il pulsante di chiusura può essere nascosto per lasciarle spazio. È preferibile mantenere lo slot predefinito come testo, senza trasformarlo in un modulo o in un pannello. Il riepilogo include titolo, quantità, totale stimato e centro di costo. La frase finale chiarisce che non è stato inviato nulla. In un servizio reale, questo passaggio locale sarebbe sostituito da una richiesta autorizzata e da una risposta con lo stato effettivo del backend. Leggi la specifica di supporto ## Tema del sistema di design SAP Fiori: risorse e registrazione dei moduli ### La selezione del tema richiede le risorse corrispondenti Morning Horizon è il tema predefinito documentato e integrato nei componenti. Per i temi aggiuntivi, serve il modulo Assets.js per ogni libreria utilizzata. Poi setTheme può scegliere Evening Horizon o una delle varianti ad alto contrasto. Scegliere un nome scuro senza verificare le risorse caricate non costituisce un'integrazione completa. Il punto di ingresso fornito registra ogni elemento personalizzato prima di creare il markup. Vite gestisce le importazioni ES dinamiche e le risorse JSON. Compila il progetto nativo e verifica separatamente i font, il caricamento dei temi e il comportamento da tastiera rispetto all'esempio HTML offline. Leggi la specifica di supporto ## Esempi di componenti del sistema di design SAP Fiori ### Esempio interattivo completo e autonomo Salva il documento completo come index.html e aprilo in un browser. Interpretazione offline HTML dei parametri di Morning Horizon e della composizione dei moduli UI5. L'esempio del pacchetto nativo è incluso separatamente. ``` 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

``` Riferimento del codice - L'interruttore della densità in questo documento HTML è un'interpretazione. L'esempio UI5 mostra l'indicatore compatto effettivo, gli elementi personalizzati registrati e le risorse Horizon. ### Richiesta di acquisto Horizon con quantità validate Input, Select/Option, Button e MessageStrip compongono un riepilogo locale della richiesta. I totali aggiornati a ogni pressione di tasto restano separati dal risultato preparato. ``` // 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')); ``` Riferimento del codice - La regola sulla quantità, il prezzo unitario di 320 € e i centri di costo sono dati applicativi inventati, non policy SAP. - UI5 Web Components è una delle implementazioni dei modelli Fiori; non si tratta di un'applicazione SAPUI5 completa né di un floorplan Fiori elements. - Non viene creata alcuna transazione SAP. La convalida dell'anteprima offline non implica la compilazione delle dipendenze native. ## Configurazione dell'agente del sistema di design SAP Fiori ### Punto di partenza per l’implementazione Sostituisci main.js di Vite con l'esempio completo. La documentazione UI5 prevede un bundler di moduli ES; non fornisce un CDN ufficiale con tutti i componenti. ``` npm create vite@latest fiori-request -- --template vanilla cd fiori-request npm install npm install @ui5/webcomponents @ui5/webcomponents-base npm run dev ``` ### Un prompt per il tuo progetto ``` Componi una richiesta di acquisto Fiori usando Input, Select, Button e MessageStrip di UI5 Web Components con il tema Horizon. Mantieni la convalida numerica, lo stato del valore Negative corretto, la densità compatta esplicita e un comportamento onesto del riepilogo locale. ``` ## Fonti e ambito del sistema di design SAP Fiori Riferimento indipendente OpenDesign. Esempio con UI5 Web Components, non una transazione SAP distribuita né un'applicazione Fiori elements completa. - Primi passi Configurazione ufficiale del pacchetto e del bundler. - Fonte Horizon Istantanea dei parametri del tema. - Configurazione Nomi dei temi e caricamento delle risorse. - Densità Indicatori di densità compatta e RTL. - Caratteri Indicazioni su caricamento a 72 e font locali. - Input Stati del valore ed eventi di input. - Select Strategie di selezione ed eventi. - MessageStrip Anatomia dei messaggi semantici. - Fonte dei pulsanti Implementazione del pulsante nativo. ## Risorse correlate al sistema di design SAP Fiori ### SEEK Braid Scopri Braid attraverso una composizione originale per la ricerca di lavoro: variabili circoscritte al tema, quattro breakpoint reali, testo contestuale, tonalità distinte per i pulsanti e un campo controllato che spiega la convalida invece di disattivare l’azione. ### Segment Evergreen Un riferimento Evergreen con valori tema reali, inserimento controllato di tag, corrispondenza delle regole in tempo reale, un percorso di recupero per lo stato vuoto e un dialogo nativo di revisione. ### Semi Design Crea una configurazione sequenziale dell’area di lavoro con i componenti Steps di base consigliati da Semi, Input e Switch controllati, token tema reali e una scelta esplicita del pacchetto React 18 o React 19. - [Riferimento per l’implementazione](https://raw.githubusercontent.com/SAP/theming-base-content/master/content/Base/baseLib/sap_horizon/base.less) - [Fonte](https://raw.githubusercontent.com/SAP/theming-base-content/master/content/Base/baseLib/sap_horizon/base.less) - [Fonte](https://ui5.github.io/webcomponents/docs/advanced/configuration/) - [Fonte](https://ui5.github.io/webcomponents/components/Select/) - [Fonte](https://ui5.github.io/webcomponents/components/Input/) - [Fonte](https://ui5.github.io/webcomponents/components/MessageStrip/) - [Leggi la specifica di supporto](https://ui5.github.io/webcomponents/docs/getting-started/first-steps/) - [Leggi la specifica di supporto](https://raw.githubusercontent.com/SAP/theming-base-content/master/content/Base/baseLib/sap_horizon/base.less) - [Riferimento del codice](https://ui5.github.io/webcomponents/docs/advanced/RTL-and-compact-mode/) - [Leggi la specifica di supporto](https://ui5.github.io/webcomponents/docs/advanced/RTL-and-compact-mode/) - [Leggi la specifica di supporto](https://ui5.github.io/webcomponents/docs/advanced/fonts/) - [Leggi la specifica di supporto](https://ui5.github.io/webcomponents/components/Select/) - [Leggi la specifica di supporto](https://ui5.github.io/webcomponents/components/Input/) - [Leggi la specifica di supporto](https://ui5.github.io/webcomponents/components/MessageStrip/) - [Leggi la specifica di supporto](https://ui5.github.io/webcomponents/docs/advanced/configuration/) - [Riferimento del codice](https://raw.githubusercontent.com/SAP/theming-base-content/master/content/Base/baseLib/sap_horizon/base.less) - [Riferimento del codice](https://ui5.github.io/webcomponents/docs/getting-started/first-steps/) - [Primi passi Configurazione ufficiale del pacchetto e del bundler.](https://ui5.github.io/webcomponents/docs/getting-started/first-steps/) - [Fonte Horizon Istantanea dei parametri del tema.](https://raw.githubusercontent.com/SAP/theming-base-content/master/content/Base/baseLib/sap_horizon/base.less) - [Configurazione Nomi dei temi e caricamento delle risorse.](https://ui5.github.io/webcomponents/docs/advanced/configuration/) - [Densità Indicatori di densità compatta e RTL.](https://ui5.github.io/webcomponents/docs/advanced/RTL-and-compact-mode/) - [Caratteri Indicazioni su caricamento a 72 e font locali.](https://ui5.github.io/webcomponents/docs/advanced/fonts/) - [Input Stati del valore ed eventi di input.](https://ui5.github.io/webcomponents/components/Input/) - [Select Strategie di selezione ed eventi.](https://ui5.github.io/webcomponents/components/Select/) - [MessageStrip Anatomia dei messaggi semantici.](https://ui5.github.io/webcomponents/components/MessageStrip/) - [Fonte dei pulsanti Implementazione del pulsante nativo.](https://raw.githubusercontent.com/SAP/ui5-webcomponents/main/packages/main/src/Button.ts)