Usa el tema Horizon de SAP Fiori mediante UI5 Web Components: parámetros de tema reales, densidad de contenido explícita, estados de valor semánticos y una composición de solicitud de compra con validación local.
Interpretación HTML sin conexión de los parámetros de Morning Horizon y la composición de formularios de UI5. El ejemplo con el paquete nativo se incluye por separado. · Referencia de implementación
02
Referencia de diseño del sistema de diseño SAP Fiori
Parámetros de origen de Morning Horizon (sap_horizon) más documentación actual de UI5 Web Components. Los nombres @sap de Less que aparecen abajo son parámetros de origen; los estilos del navegador usan las propiedades personalizadas --sap correspondientes. Las dimensiones protegidas son observaciones, no puntos recomendados para aplicar anulaciones.
El sistema de diseño de SAP Fiori y la implementación con UI5 tienen alcances distintos
Un punto de partida concreto
SAP Fiori describe una experiencia de usuario empresarial. Esta referencia utiliza UI5 Web Components para crear un ejemplo implementable de solicitud de compra. Esto no implica que instalar estos componentes cree una aplicación SAPUI5, un patrón de página de Fiori elements ni una transacción empresarial autorizada de SAP.
El paquete principal de componentes proporciona Input, Select y Button. Los componentes Fiori de nivel superior se encuentran en un paquete independiente. Importar solo los módulos utilizados en este ejemplo hace explícito el punto de entrada y evita dar a entender que existe una CDN compatible con todos los componentes.
El sistema de diseño de SAP Fiori: usar parámetros Horizon con nombre en vez de una paleta azul genérica
Roles de superficie y estado
Morning Horizon configura la página con una superficie gris claro y utiliza una superficie base blanca. El azul de marca y el color del texto son parámetros independientes. Los roles negativo, crítico, positivo e informativo expresan significado; no son una lista de colores decorativos para alternar en las tarjetas.
La vista previa utiliza una franja informativa para el resumen preparado, porque la preparación local no equivale a la aprobación de una compra. El precio del artículo, los centros de coste y las anotaciones de aprobación son datos de ejemplo originales. No deben interpretarse como reglas de negocio proporcionadas por SAP.
El diseño compacto del sistema de diseño de SAP Fiori es una configuración de componentes, no una captura de pantalla más pequeña
Aplicar la densidad a una región significativa
UI5 permite aplicar el marcador compacto a la raíz, al cuerpo, a una región o a un componente. El atributo data-ui5-compact-size y la clase ui5-content-density-compact son mecanismos públicos. Cambiar el marcador dinámicamente no requiere un API de densidad independiente.
Usar controles compactos en una tarea de escritorio densa solo cuando la interacción siga siendo adecuada. La versión integrada reduce el espaciado entre controles y filas, pero conserva la misma información. En un diseño estrecho, apila las regiones en lugar de reducir todas las etiquetas y los botones.
El sistema de diseño de SAP Fiori: la familia 72 y su carga
La disponibilidad de las fuentes forma parte de la configuración
El tema Horizon especifica 72 y 72full antes de las fuentes alternativas. UI5 documenta cómo desactivar la carga de fuentes predeterminada y cómo alojar fuentes localmente. La entrada práctica FontFace.css está marcada como experimental, así que fija su ruta y vuelve a comprobarla si eliges esa opción.
La vista previa independiente utiliza Arial como alternativa explícita sin conexión. El ejemplo nativo de UI5 utiliza la variable publicada font-family. Esta distinción evita afirmar que una captura con una fuente alternativa visualmente similar demuestra que se cargaron los recursos de fuentes de SAP.
El sistema de diseño de SAP Fiori: Select tiene cambios confirmados y provisionales
Elegir una estrategia de selección controlada
El valor de Select coincide con el valor o el texto de una Option. Se desaconseja combinar un valor de Select con indicadores selected en las Options; un valor inexistente no selecciona ninguna opción. El ejemplo inicializa una opción real de centro de coste y lee el valor de Select al preparar el resultado.
El evento change incluye la opción seleccionada. live-change también se activa mientras se navega por las opciones y al revertir la selección con Escape. Usar la selección confirmada para los datos de negocio y reservar los cambios provisionales para las vistas previas.
Importar los registros de Select y Option antes de representar sus etiquetas.
Vincular la etiqueta visible del centro de coste mediante accessible-name-ref.
Mantener value como la única estrategia de selección en este ejemplo.
El sistema de diseño de SAP Fiori: la entrada numérica sigue necesitando validación de la aplicación
El estado del valor y el mensaje van juntos
El valor de Input es una cadena, incluso cuando el tipo de entrada es Number. Convertirlo y comprobar que sea un entero finito dentro de los límites antes de multiplicarlo por el precio de ejemplo. Un valor vacío no debe aceptarse como cero. El estado de error semántico actual es Negative, no un valor enum Error inventado.
El slot valueStateMessage proporciona un elemento raíz con una explicación específica. El total en tiempo real escucha el evento input; el resumen preparado solo se actualiza cuando el usuario activa la acción.
Leer el título y la cadena numérica de sus componentes.
Exigir un título y una cantidad entera de 1 a 20 para este ejemplo.
Marcar los controles afectados como Negative y conservar los valores introducidos.
Preparar el resumen solo cuando se cumplan ambas condiciones.
El sistema de diseño de SAP Fiori: mantener el resultado descriptivo y local
Usar una franja para un resultado conciso
MessageStrip admite diseños semánticos y un control para cerrarla. Si la explicación es obligatoria, se puede ocultar el botón de cierre para que siga disponible. Conviene mantener el contenido predeterminado como texto, en vez de ampliarlo hasta convertirlo en un formulario o un panel de control.
El resumen incluye el título, la cantidad, el total de ejemplo y el centro de coste. La frase final aclara que no se ha enviado nada. Un servicio real sustituiría este paso local por una solicitud autorizada y una respuesta que incluyera el estado real del sistema de backend.
El sistema de diseño de SAP Fiori: recursos del tema y registro de módulos
La selección del tema necesita los recursos correspondientes
Morning Horizon es el tema predeterminado documentado y está integrado en los componentes. Los temas adicionales requieren el módulo Assets.js de cada biblioteca utilizada. Después, setTheme puede elegir Evening Horizon o una de las variantes de alto contraste. Elegir un nombre de tema oscuro sin comprobar los recursos cargados no constituye una integración completa.
El punto de entrada proporcionado registra cada elemento personalizado antes de crear el marcado. Vite gestiona las importaciones ES dinámicas y los recursos JSON. Compila el proyecto nativo y verifica las fuentes, la carga del tema y el comportamiento del teclado por separado de la muestra sin conexión de HTML.
Ejemplos de componentes del sistema de diseño SAP Fiori
Muestra interactiva independiente completa
Guarda el documento completo como index.html y ábrelo en un navegador. Interpretación sin conexión de HTML de los parámetros de Morning Horizon y la composición de formularios de UI5. Se incluye por separado un ejemplo del paquete nativo.
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>
El selector de densidad de este documento HTML es una interpretación. La entrada de UI5 muestra el marcador compacto real, los elementos personalizados registrados y los recursos de Horizon.
Solicitud de compra de Horizon con cantidades validadas
Input, Select/Option, Button y MessageStrip componen un resumen local de solicitud. Los totales calculados con cada pulsación se mantienen separados del resultado preparado.
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 regla de cantidad, el precio de €320 por artículo y los centros de coste son datos inventados de la aplicación, no políticas de SAP.
UI5 Web Components es una implementación de los patrones de Fiori; esto no es una aplicación SAPUI5 completa ni un floorplan de Fiori elements.
No se crea ninguna transacción de SAP. La validación de la vista previa sin conexión no implica la compilación de dependencias nativas.
04
Configuración de agente del sistema de diseño SAP Fiori
Punto de partida para la implementación
Sustituye main.js de Vite por el ejemplo completo. La documentación de UI5 requiere un empaquetador de módulos ES; no ofrece un CDN oficial con todos los componentes.
bash
npm create vite@latest fiori-request -- --template vanilla
cd fiori-request
npm install
npm install @ui5/webcomponents @ui5/webcomponents-base
npm run dev
Una instrucción para tu proyecto
Instrucción para el agente
Crea una solicitud de compra de Fiori con Input, Select, Button y MessageStrip de UI5 Web Components y el tema Horizon. Conserva la validación numérica, el estado de valor Negative correcto, la densidad compacta explícita y el comportamiento honesto del resumen local.
05
Fuentes y alcance del sistema de diseño SAP Fiori
Referencia independiente de OpenDesign. Ejemplo de UI5 Web Components, no una transacción de SAP implementada ni una aplicación completa de Fiori elements.
