# Sistema de diseño SAP Fiori ## Vista previa de la interfaz del sistema de diseño SAP Fiori Edita una solicitud de compra, valida la cantidad, cambia la densidad y prepara un resumen local. ## 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. ### Roles de color de Horizon | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | @sapBrandColor | #0070f2 | Rol de marca principal. | | @sapBackgroundColor | #f5f6f7 | Fondo de página. | | @sapBaseColor | #ffffff | Superficie base. | | @sapTextColor | #131e29 | Texto principal. | | @sapNegativeColor | #aa0808 | Estado negativo. | | @sapCriticalColor | #e76500 | Rol crítico; el texto tiene un rol derivado independiente. | | @sapPositiveColor | #256f3a | Estado positivo. | | @sapInformationBackground | #e1f4ff | Superficie de mensaje informativo. | | @sapWarningBackground | #fff8d6 | Superficie de mensaje crítico. | ### Tipografía y geometría | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | @sapFontFamily | "72", "72full", Arial, Helvetica, sans-serif | Familia tipográfica publicada. | | @sapFontSize | 0.875rem | Tamaño base. | | @sapContent_LineHeight | 1.5 | Multiplicador de interlineado del contenido. | | @sapElement_Height | 2.25rem | Dimensión regular protegida. | | @sapElement_Compact_Height | 1.625rem | Dimensión compacta protegida. | | @sapElement_LineHeight | 2.75rem | Caja de línea regular protegida. | | @sapElement_Compact_LineHeight | 2rem | Caja de línea compacta protegida. | | @sapButton_BorderCornerRadius | 0.5rem | Parámetro de radio de esquina del botón. | | @sapContent_FocusWidth | 0.125rem | Ancho del foco. | | @sapContent_FocusColor | #0032a5 | Color del foco. | ### Configuración de tema y densidad | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | sap_horizon | Morning Horizon | Tema predeterminado integrado en los componentes. | | sap_horizon_dark | Evening Horizon | Los temas adicionales requieren recursos. | | sap_horizon_hcb / sap_horizon_hcw | High contrast black / white | Temas de alto contraste compatibles por separado. | | Assets.js | One import per component library used | Registrar los recursos del tema adicional. | | setTheme(name) | @ui5/webcomponents-base/dist/config/Theme.js | Cambiar el tema mediante la API pública API. | ### Contrato de Select | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | ui5-select value | Matches option value or text | No mezclar con los indicadores selected de las opciones. | | selectedOption | Read-only IOption | Leer el objeto de opción seleccionado. | | change | event.detail.selectedOption | Cambio de selección confirmado. | | live-change | Navigation preview | No tratarlo como una decisión de negocio confirmada. | | accessible-name-ref | ID of visible labeling element | Asociar el texto visible al control. | ### Entrada y comentarios | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | value | String | Convertir explícitamente la entrada numérica. | | input | Each keystroke | Usar para los totales estimados en tiempo real. | | change | Enter or focusout | Es distinto de la entrada en cada pulsación. | | value-state | None / Negative / Critical / Information / Positive | Nombres de estado en el API actual. | | slot="valueStateMessage" | One root element | Explicación específica del campo. | ### Franja de mensaje | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | design | Information / Positive / Critical / Negative | Mensaje semántico de la aplicación. | | hide-close-button | Boolean attribute | Mantener visible la explicación obligatoria. | | default slot | Prefer text content | Evitar convertir una franja en un panel complejo. | ## Guía completa del sistema de diseño de SAP Fiori Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real. Orientación completa, un punto de partida para la implementación y enlaces al código fuente. ## 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. Consulta la especificación complementaria ## 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. Consulta la especificación complementaria ## 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. ```
``` Referencia de código Consulta la especificación complementaria ## 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. Consulta la especificación complementaria ## 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. Consulta la especificación complementaria ## 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. 1. Leer el título y la cadena numérica de sus componentes. 2. Exigir un título y una cantidad entera de 1 a 20 para este ejemplo. 3. Marcar los controles afectados como Negative y conservar los valores introducidos. 4. Preparar el resumen solo cuando se cumplan ambas condiciones. Consulta la especificación complementaria ## 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. Consulta la especificación complementaria ## 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. Consulta la especificación complementaria ## 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. ``` 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

``` Referencia de código - 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. ``` // 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')); ``` Referencia de código - 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. ## 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. ``` 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 ``` 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. ``` ## 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. - Primeros pasos Configuración oficial del paquete y del empaquetador. - Fuente de Horizon Instantánea de parámetros del tema. - Configuración Nombres de temas y carga de recursos. - Densidad Marcadores compactos y RTL. - Fuentes tipográficas Directrices de carga 72 y fuentes locales. - Entrada Estados de valor y eventos de entrada. - Select Estrategias de selección y eventos. - MessageStrip Anatomía de los mensajes semánticos. - Origen de Button Implementación del botón nativo. ## Recursos relacionados con el sistema de diseño SAP Fiori ### SEEK Braid Conoce Braid mediante una composición original de búsqueda de empleo: variables limitadas al tema, cuatro puntos de ruptura reales, texto contextual, tonos de botón diferenciados y un campo controlado que explica la validación en lugar de desactivar la acción. ### Segment Evergreen Una referencia de Evergreen con valores de tema reales, entrada controlada de etiquetas, coincidencia de reglas en tiempo real, una vía para recuperarse de un estado vacío y un diálogo de revisión nativo. ### Semi Design Crea una configuración secuencial del espacio de trabajo con los Steps básicos recomendados por Semi, Input y Switch controlados, tokens de tema reales y una elección explícita entre los paquetes React 18 y React 19. - [Referencia de implementación](https://raw.githubusercontent.com/SAP/theming-base-content/master/content/Base/baseLib/sap_horizon/base.less) - [Fuente](https://raw.githubusercontent.com/SAP/theming-base-content/master/content/Base/baseLib/sap_horizon/base.less) - [Fuente](https://ui5.github.io/webcomponents/docs/advanced/configuration/) - [Fuente](https://ui5.github.io/webcomponents/components/Select/) - [Fuente](https://ui5.github.io/webcomponents/components/Input/) - [Fuente](https://ui5.github.io/webcomponents/components/MessageStrip/) - [Consulta la especificación complementaria](https://ui5.github.io/webcomponents/docs/getting-started/first-steps/) - [Consulta la especificación complementaria](https://raw.githubusercontent.com/SAP/theming-base-content/master/content/Base/baseLib/sap_horizon/base.less) - [Referencia de código](https://ui5.github.io/webcomponents/docs/advanced/RTL-and-compact-mode/) - [Consulta la especificación complementaria](https://ui5.github.io/webcomponents/docs/advanced/RTL-and-compact-mode/) - [Consulta la especificación complementaria](https://ui5.github.io/webcomponents/docs/advanced/fonts/) - [Consulta la especificación complementaria](https://ui5.github.io/webcomponents/components/Select/) - [Consulta la especificación complementaria](https://ui5.github.io/webcomponents/components/Input/) - [Consulta la especificación complementaria](https://ui5.github.io/webcomponents/components/MessageStrip/) - [Consulta la especificación complementaria](https://ui5.github.io/webcomponents/docs/advanced/configuration/) - [Referencia de código](https://raw.githubusercontent.com/SAP/theming-base-content/master/content/Base/baseLib/sap_horizon/base.less) - [Referencia de código](https://ui5.github.io/webcomponents/docs/getting-started/first-steps/) - [Primeros pasos Configuración oficial del paquete y del empaquetador.](https://ui5.github.io/webcomponents/docs/getting-started/first-steps/) - [Fuente de Horizon Instantánea de parámetros del tema.](https://raw.githubusercontent.com/SAP/theming-base-content/master/content/Base/baseLib/sap_horizon/base.less) - [Configuración Nombres de temas y carga de recursos.](https://ui5.github.io/webcomponents/docs/advanced/configuration/) - [Densidad Marcadores compactos y RTL.](https://ui5.github.io/webcomponents/docs/advanced/RTL-and-compact-mode/) - [Fuentes tipográficas Directrices de carga 72 y fuentes locales.](https://ui5.github.io/webcomponents/docs/advanced/fonts/) - [Entrada Estados de valor y eventos de entrada.](https://ui5.github.io/webcomponents/components/Input/) - [Select Estrategias de selección y eventos.](https://ui5.github.io/webcomponents/components/Select/) - [MessageStrip Anatomía de los mensajes semánticos.](https://ui5.github.io/webcomponents/components/MessageStrip/) - [Origen de Button Implementación del botón nativo.](https://raw.githubusercontent.com/SAP/ui5-webcomponents/main/packages/main/src/Button.ts)