Utilisez le thème Horizon de SAP Fiori avec UI5 Web Components : véritables paramètres de thème, densité du contenu définie explicitement, états de valeur sémantiques et composition d’une demande d’achat avec validation locale.
Interprétation hors ligne HTML des paramètres Morning Horizon et de la composition de formulaires UI5. Un exemple de package natif est fourni séparément. · Référence de mise en œuvre
02
Référence de conception du système de design SAP Fiori
Paramètres sources Morning Horizon (sap_horizon) et documentation actuelle des UI5 Web Components. Les variables Less @sap ci-dessous sont des paramètres sources ; les styles du navigateur utilisent les propriétés personnalisées --sap correspondantes. Les dimensions protégées sont des valeurs observées, et non des points de surcharge recommandés.
Le système de design SAP Fiori et l’implémentation UI5 ont des périmètres différents
Un point de départ concret
SAP Fiori décrit une expérience utilisateur destinée aux entreprises. Cette référence choisit les UI5 Web Components pour proposer un exemple de demande d’achat pouvant être mis en œuvre. Cela ne signifie pas que l’installation de ces composants crée une application SAPUI5, un floorplan Fiori elements ou une transaction métier SAP autorisée.
Le package principal de composants fournit Input, Select et Button. Les composants Fiori de niveau supérieur se trouvent dans un package distinct. Importer uniquement les modules utilisés dans cet exemple rend le point d’entrée explicite et évite de laisser croire à l’existence d’un CDN non pris en charge regroupant tous les composants.
Système de design SAP Fiori : utilisez les paramètres Horizon nommés plutôt qu’une palette bleue générique
Rôles des surfaces et des états
Morning Horizon utilise une surface gris clair pour la page et une surface de base blanche. Le bleu de marque et la couleur du texte sont définis par des paramètres distincts. Les rôles négatif, critique, positif et informatif expriment une signification ; ils ne constituent pas une palette décorative à faire défiler sur les cartes.
L’aperçu utilise un bandeau d’information pour le récapitulatif préparé, car une préparation locale ne constitue pas une approbation d’achat. Le prix des articles, les centres de coûts et les annotations d’approbation sont des données d’exemple originales. Elles ne doivent jamais être interprétées comme des règles métier fournies par SAP.
Système de design SAP Fiori : Compact est un paramètre de composant, pas une capture d’écran réduite
Appliquez la densité à une zone pertinente
UI5 permet d’appliquer un marqueur compact à la racine, au corps de la page, à une zone ou à un composant. L’attribut data-ui5-compact-size et la classe ui5-content-density-compact sont des mécanismes publics. La modification dynamique du marqueur ne nécessite pas de API de densité distinct.
Utilisez des commandes compactes pour une tâche de bureau dense, uniquement si l’interaction reste adaptée. L’interprétation intégrée réduit l’espacement des commandes et des lignes tout en conservant les mêmes informations. Dans une mise en page étroite, les zones s’empilent au lieu de réduire toutes les étiquettes et tous les boutons.
Système de design SAP Fiori : la famille de polices 72 et son chargement
La disponibilité des polices fait partie de la configuration
Le thème Horizon indique 72 et 72full avant les polices de remplacement. La documentation UI5 explique comment désactiver le chargement de polices par défaut et héberger les polices localement. L’entrée pratique FontFace.css est signalée comme expérimentale ; si vous choisissez cette méthode, fixez la version et vérifiez à nouveau son chemin.
L’aperçu autonome utilise Arial comme police de remplacement hors ligne explicite. L’exemple UI5 natif utilise la variable font-family publiée. Cette distinction évite de prétendre qu’une capture d’écran visuellement similaire prouve que les ressources de police SAP ont été chargées.
Système de design SAP Fiori : un Select comporte des modifications validées et provisoires
Choisissez une stratégie de sélection contrôlée
La valeur de Select correspond à la valeur ou au texte d’une Option. Il est déconseillé de combiner une valeur de Select avec des indicateurs selected sur les Options ; une valeur inexistante ne sélectionne aucune option. L’exemple initialise une option de centre de coûts valide et lit la valeur de Select lors de la préparation du résultat.
L’événement change transmet l’option sélectionnée. live-change est également déclenché pendant la navigation entre les options et lors du retour à la sélection précédente avec Échap. Utilisez la sélection validée pour les données métier et réservez les changements provisoires aux aperçus.
Importez les inscriptions de Select et Option avant le rendu de leurs balises.
Associez le libellé visible du centre de coûts à l’aide de accessible-name-ref.
Dans cet exemple, utilisez value comme seule stratégie de sélection.
SAP Fiori Le champ de saisie numérique du système de design nécessite toujours une validation applicative
L’état de la valeur et le message vont de pair
La valeur de Input est une chaîne, même lorsque le type de saisie est Number. Convertissez-la et vérifiez qu’il s’agit d’un entier fini compris dans les limites avant de la multiplier par le prix indicatif. Une valeur vide ne doit pas être acceptée comme un zéro. L’état d’erreur sémantique actuel est Negative, et non une valeur Error inventée.
L’emplacement valueStateMessage fournit un élément racine contenant une explication précise. Le total dynamique est mis à jour à chaque saisie ; le récapitulatif préparé ne l’est que lorsque l’utilisateur déclenche l’action.
Lisez le titre et la chaîne numérique depuis leurs composants.
Pour cet exemple, exigez un titre et une quantité entière comprise entre 1 et 20.
Marquez les champs concernés comme Negative et conservez les valeurs saisies.
Préparez le récapitulatif uniquement lorsque les deux conditions sont remplies.
Système de design SAP Fiori : gardez le résultat descriptif et local
Utilisez un bandeau pour présenter brièvement le résultat
MessageStrip prend en charge des présentations sémantiques et un bouton de fermeture. Une explication obligatoire peut masquer le bouton de fermeture afin qu’elle reste visible. Il est préférable de conserver du texte dans son emplacement par défaut plutôt que de le transformer en formulaire ou en tableau de bord.
Le récapitulatif comprend le titre, la quantité, le total indicatif et le centre de coûts. Sa dernière phrase précise qu’aucune demande n’a été envoyée. Dans un service réel, cette étape locale serait remplacée par une requête autorisée et une réponse indiquant le statut réel du système back-end.
Système de design SAP Fiori : ressources de thème et enregistrement des modules
La sélection du thème nécessite les ressources correspondantes
Morning Horizon est le thème par défaut documenté et il est intégré aux composants. Les autres thèmes nécessitent le module Assets.js pour chaque bibliothèque utilisée. Vous pouvez ensuite choisir Evening Horizon ou l’une des variantes à contraste élevé avec setTheme. Choisir un nom de thème sombre sans vérifier que les ressources sont chargées ne constitue pas une intégration complète.
Le point d’entrée fourni enregistre chaque élément personnalisé avant de créer le balisage. Vite gère les imports ES dynamiques et les ressources JSON. Compilez le projet natif et vérifiez séparément les polices, le chargement du thème et le comportement au clavier, indépendamment de l’exemple hors ligne HTML.
SAP Fiori Exemples de composants du système de design
Exemple interactif autonome complet
Enregistrez le document complet sous le nom index.html et ouvrez-le dans un navigateur. Interprétation hors ligne HTML des paramètres de Morning Horizon et de la composition de formulaires UI5. Un exemple de package natif est fourni séparément.
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>
Dans ce document HTML, le commutateur de densité est une interprétation. L’entrée UI5 montre le marqueur compact réel, les éléments personnalisés enregistrés et les ressources Horizon.
Demande d’achat Horizon avec quantités validées
Input, Select/Option, Button et MessageStrip composent un récapitulatif local de demande d’achat. Les totaux mis à jour à chaque saisie restent distincts du résultat préparé.
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 règle de quantité, le prix unitaire de 320 € et les centres de coûts sont des données applicatives fictives, et non une politique SAP.
UI5 Web Components est une implémentation parmi d’autres des modèles Fiori ; il ne s’agit ni d’une application SAPUI5 complète ni d’un plan de travail Fiori elements.
Aucune transaction SAP n’est créée. La validation de l’aperçu hors ligne n’implique pas la compilation des dépendances natives.
04
Système de design SAP Fiori Configuration de l’agent de conception
Point de départ de l’implémentation
Remplacez le fichier main.js de Vite par l’exemple complet. La documentation UI5 nécessite un bundler de modules ES ; elle ne fournit pas de CDN officiel regroupant tous les composants.
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 pour votre projet
Prompt pour l’agent IA
Composez une demande d’achat Fiori avec les composants UI5 Web Components Input, Select, Button et MessageStrip et le thème Horizon. Préservez la validation numérique, l’état Negative approprié, la densité compacte explicite et le comportement honnête du récapitulatif local.
05
Système de design SAP Fiori Sources et périmètre
Référence indépendante OpenDesign. Exemple UI5 Web Components, et non transaction SAP déployée ni application Fiori elements complète.
