Usa il tema Horizon di SAP Fiori tramite UI5 Web Components: parametri tema reali, densità dei contenuti esplicita, stati semantici dei valori e composizione di una richiesta d’acquisto con convalida locale.
Interpretazione offline HTML dei parametri Morning Horizon e della composizione dei moduli UI5. L’esempio del pacchetto nativo è incluso separatamente. · Riferimento per l’implementazione
02
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.
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.
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.
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.
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.
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.
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.
Leggi il titolo e la stringa numerica dai rispettivi componenti.
Per questo esempio, richiedi un titolo e una quantità intera compresa tra 1 e 20.
Imposta su Negative i controlli interessati e mantieni i valori inseriti.
Prepara il riepilogo solo quando entrambe le condizioni sono soddisfatte.
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.
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.
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.
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>
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.
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'));
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.
04
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.
bash
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
Prompt per l’agente
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.
05
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.
