SAP Fiori

El sistema de diseño de SAP: cómo deben verse y comportarse sus aplicaciones, y las herramientas para construirlas.

Apartados: 9
Revisado: Octubre de 2026
Fuentes: 3 enlaces

Qué es SAP Fiori

Fiori define la experiencia de usuario de SAP: aplicaciones por rol, que funcionan en ordenador, tableta y móvil. El tema visual actual se llama Horizon. Sus cinco principios son: basado en roles, adaptable, sencillo, coherente y agradable.

Tipos de aplicación

Tipo	Cómo se hace	Cuándo
Fiori elements	Se genera a partir de un servicio OData y sus anotaciones: List Report, Object Page, Worklist, Overview Page…	Siempre que encaje: menos código y aspecto estándar
Freestyle SAPUI5	Se programa a mano con UI5	Pantallas muy específicas o interactivas
SAP Build Apps	Bajo código, arrastrando componentes	Apps sencillas sin programadores

Las plantillas (floorplans) más usadas de Fiori elements. También existen Analytical List Page, Form Entry Object Page y Flexible Column Layout, que muestra lista y detalle a la vez.

Temas visuales

El tema define colores, tipografía y forma de los controles. Se cambia sin tocar la aplicación, por usuario o para todo el sistema. Esta misma web te deja elegir entre varios estilos inspirados en ellos con el botón de la paleta.

Tema	Identificador	Estado
Morning Horizon (claro)	`sap_horizon`	El actual, por defecto
Evening Horizon (oscuro)	`sap_horizon_dark`	Actual
Horizon alto contraste	`sap_horizon_hcb`, `sap_horizon_hcw`	Actual, para accesibilidad
Quartz	`sap_fiori_3`, `sap_fiori_3_dark`	Anterior; se sigue usando en sistemas antiguos
Belize	`sap_belize`	Obsoleto: retirado en las versiones recientes de UI5

Para probar otro tema en una app, añade el parámetro a la URL: ?sap-theme=sap_horizon_dark. Para crear uno con los colores de tu empresa, usa el UI Theme Designer.

Fiori elements con anotaciones CDS

En RAP, la interfaz se describe con anotaciones @UI en una metadata extension. Fiori elements las lee y pinta la lista, los filtros y el detalle.

CDS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@Metadata.layer: #CUSTOMER
annotate entity ZC_Viaje with
{
  @UI.facet: [{ id: 'General', purpose: #STANDARD,
                type: #IDENTIFICATION_REFERENCE, label: 'Datos del viaje' }]
  @UI.lineItem: [{ position: 10 }]
  @UI.identification: [{ position: 10 }]
  @UI.selectionField: [{ position: 10 }]
  ViajeId;

  @UI.lineItem: [{ position: 20 },
                 { type: #FOR_ACTION, dataAction: 'aceptar', label: 'Aceptar' }]
  @UI.identification: [{ position: 20 }]
  Estado;
}

Así se ve la app generada a partir del servicio de viajes de RAP: filtros arriba, tabla con los botones de crear, aceptar y eliminar, y el estado en color.

Para colorear el estado como en la imagen, añade un campo de criticidad (1 rojo, 2 naranja, 3 verde) y enlázalo con la anotación:

CDS

1
2
3
4
5
6
7
8
9
  @UI.lineItem: [{ position: 20, criticality: 'EstadoCriticidad' }]
  Estado;

-- En la vista de proyección:
  case Estado
    when 'A' then 3
    when 'X' then 1
    else 2
  end as EstadoCriticidad

El launchpad

El launchpad es la puerta de entrada: cada usuario ve espacios, páginas y mosaicos según sus roles.

Arriba, los espacios (Mi inicio, Ventas…). Dentro, secciones con mosaicos. Los mosaicos dinámicos muestran un número, por ejemplo los pedidos bloqueados.

Transacción o app	Para qué
/UI2/FLP	Abrir el launchpad desde SAP GUI
/UI2/FLPD_CUST	Diseñador del launchpad: catálogos y mosaicos (mandante)
/UI2/FLPD_CONF	Diseñador del launchpad para todos los mandantes
Manage Launchpad Spaces	Crear espacios y páginas

Para saber qué apps existen y qué necesitan, consulta la SAP Fiori apps reference library.

Herramientas

SAP Fiori tools para VS Code: genera apps Fiori elements, edita anotaciones y las previsualiza. Ver VS Code › Crear una app Fiori.
SAP Build Code en BTP: el mismo conjunto de herramientas en el navegador.
Fiori MCP server: permite que asistentes de IA generen y modifiquen apps Fiori; SAP lo presentó en UI5con 2026.

Del servicio RAP al launchpad, paso a paso

Publica el servicio. En ADT, abre el service binding de tipo OData V4 - UI y pulsa Publish.
Genera la app. En VS Code: Fiori: Open Application Generator › List Report Page › conecta con tu sistema y elige el servicio y la entidad Viaje.
Ajusta la interfaz. Añade columnas, filtros y secciones con las anotaciones @UI de la metadata extension, o con el Page Map de Fiori tools.
Prueba en local. npm start abre la app con datos reales del sistema.
Despliega. Ejecuta npx fiori add deploy-config una vez para indicar sistema, paquete y transporte, y después npm run deploy. La app queda como aplicación BSP en el repositorio ABAP.
Crea el mosaico. Añade la app a un catálogo y a una página del launchpad (apps Manage Launchpad Spaces y Manage Launchpad Pages, o /UI2/FLPD_CUST).
Da permisos. Incluye el catálogo y el servicio OData en un rol (PFCG on-premise o roles de negocio en la nube) y asígnalo a los usuarios.

Cuando las anotaciones no bastan

Con el modelo de programación flexible (OData V4) puedes añadir piezas propias a una app Fiori elements sin perder lo que genera el framework:

Extensiones de página: columnas, secciones, acciones o incluso páginas enteras hechas con UI5 dentro de la app generada.
Building blocks: piezas de Fiori elements (tabla, gráfico, formulario, barra de filtros) que puedes usar en tus propias vistas UI5.
Controller extensions: código JavaScript que reacciona a eventos de la página, como antes de guardar o al navegar.

El Flexible Programming Model Explorer de SAP tiene ejemplos que se pueden probar y copiar de cada building block y extensión.

Adaptar la interfaz sin programar

Personalización del usuario: cada usuario puede elegir columnas, ordenar, agrupar y guardar variantes de filtros.
Adapt UI (key user): un usuario con permisos puede mover, ocultar o renombrar campos y secciones para todos. Los cambios se guardan aparte y sobreviven a las actualizaciones.
Campos propios: con la app Custom Fields se añaden campos nuevos que aparecen en la pantalla y en el servicio.