SAPUI5 y OpenUI5

El framework de JavaScript con el que se construyen las aplicaciones Fiori: controles, vistas, enlace de datos y conexión con OData.

Apartados: 10
Revisado: Octubre de 2026
Fuentes: 4 enlaces

SAPUI5 y OpenUI5

	SAPUI5	OpenUI5
Licencia	De SAP, incluida en sus productos	Código abierto (Apache 2.0)
Controles	Todos, incluidos gráficos y Smart Controls	Los principales (sap.m, sap.f, sap.ui.table…)
Uso típico	Apps Fiori sobre sistemas SAP	Cualquier proyecto web

La versión 1.136 es la base de la futura UI5 2.x, que elimina el código obsoleto. SAP publica versiones «legacy-free» de prueba para comprobar si tu app está preparada.

Estructura de un proyecto

Carpetas

1
2
3
4
5
6
7
8
9
10
11
12
13
mi-app/
├─ package.json
├─ ui5.yaml              configuración de UI5 Tooling
└─ webapp/
   ├─ manifest.json      descriptor: modelos, rutas, dependencias
   ├─ Component.js       punto de entrada
   ├─ index.html
   ├─ i18n/
   │  └─ i18n.properties textos traducibles
   ├─ view/
   │  └─ Main.view.xml
   └─ controller/
      └─ Main.controller.js

Vista XML y controlador

XML

1
2
3
4
5
6
7
8
9
<mvc:View controllerName="abapes.demo.controller.Main"
  xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc">
  <Page title="{i18n>titulo}">
    <List items="{/Viaje}">
      <StandardListItem title="{ViajeId}" description="{Estado}" />
    </List>
    <Button text="Saludar" press=".onSaludar" />
  </Page>
</mvc:View>

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
sap.ui.define([
  "sap/ui/core/mvc/Controller",
  "sap/m/MessageToast"
], (Controller, MessageToast) => {
  "use strict";

  return Controller.extend("abapes.demo.controller.Main", {
    onSaludar() {
      MessageToast.show("Hola desde UI5");
    }
  });
});

Las llaves { } enlazan los controles con el modelo de datos: si el modelo es OData V4, la lista lee la entidad Viaje del servicio RAP.

UI5 sigue el patrón modelo-vista-controlador. La vista se enlaza con el modelo y se actualiza sola cuando cambian los datos; el controlador responde a lo que hace el usuario.

Cómo arranca una app UI5

index.html carga UI5
Component.js
manifest.json
Modelos e i18n
Router
Vista raíz

Casi toda la configuración está en el manifest.json: de qué servicio salen los datos, qué modelos hay y qué vista se abre con cada URL.

manifest.json (extracto)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
"sap.ui5": {
  "models": {
    "": {
      "dataSource": "mainService",
      "settings": { "autoExpandSelect": true }
    },
    "i18n": {
      "type": "sap.ui.model.resource.ResourceModel",
      "settings": { "bundleName": "abapes.demo.i18n.i18n" }
    }
  },
  "routing": {
    "config": {
      "routerClass": "sap.m.routing.Router",
      "type": "View",
      "viewType": "XML",
      "path": "abapes.demo.view",
      "controlId": "app",
      "controlAggregation": "pages"
    },
    "routes": [
      { "pattern": "", "name": "lista", "target": "lista" },
      { "pattern": "viaje/{id}", "name": "detalle", "target": "detalle" }
    ],
    "targets": {
      "lista": { "name": "Main" },
      "detalle": { "name": "Detalle" }
    }
  }
}

Para ir de la lista al detalle, el controlador llama al router con el identificador del viaje pulsado:

JavaScript

1
2
3
4
5
6
onPulsarViaje(oEvent) {
  const oContexto = oEvent.getSource().getBindingContext();
  this.getOwnerComponent().getRouter().navTo("detalle", {
    id: oContexto.getProperty("ViajeId")
  });
}

Tipos de enlace de datos

Enlace	Ejemplo	Para qué
De propiedad	`text="{Estado}"`	Un valor en una propiedad del control
De agregación	`items="{/Viaje}"`	Una lista: crea una línea por registro
De elemento	`binding="{/Viaje('00000001')}"`	Un formulario de detalle sobre un registro
Con expresión	`visible="{= ${Estado} === 'A' }"`	Cálculos y condiciones sencillas en la propia vista
Con formateador	`text="{ path: 'Estado', formatter: '.textoEstado' }"`	Lógica de presentación en el controlador
De textos	`title="{i18n>titulo}"`	Textos traducibles del fichero i18n

Crear y ejecutar con UI5 Tooling

Instala Node.js (versión LTS).
Instala la línea de comandos de UI5 y genera un proyecto con el asistente Easy UI5.
Arranca el servidor local y abre la app en el navegador.

Terminal

1
2
3
4
npm install --global @ui5/cli
npm init easy-ui5
cd mi-app
npm start

UI5 Web Components

Los mismos controles con aspecto Fiori, como etiquetas HTML que funcionan con cualquier framework (React, Angular, Vue) o sin ninguno. Son ligeros y adecuados para webs públicas.

Terminal

1
npm install @ui5/webcomponents

HTML + JavaScript

1
2
3
4
5
<script type="module">
  import "@ui5/webcomponents/dist/Button.js";
</script>

<ui5-button design="Emphasized">Guardar</ui5-button>

Código moderno: TypeScript y UI5 linter

TypeScript: UI5 tiene tipos oficiales y el generador Easy UI5 crea proyectos en TypeScript. Detecta errores al escribir y el autocompletado es mucho mejor.
UI5 linter: revisa tu app y avisa de todo lo obsoleto que no funcionará en UI5 2.x (APIs antiguas, carga síncrona, variables globales).

Terminal

1
2
3
4
5
# Revisar la app desde su carpeta
npx @ui5/linter

# Ver el detalle de cada aviso
npx @ui5/linter --details

Antes

1
2
3
// Obsoleto: variables globales y carga síncrona
var oBoton = new sap.m.Button({ text: "Guardar" });
jQuery.sap.require("sap.m.MessageBox");

Ahora

1
2
3
4
5
6
7
// Moderno: dependencias con sap.ui.define
sap.ui.define([
  "sap/m/Button",
  "sap/m/MessageBox"
], (Button, MessageBox) => {
  const oBoton = new Button({ text: "Guardar" });
});

Pruebas automáticas

Herramienta	Qué prueba
QUnit	Pruebas unitarias de funciones y formateadores
OPA5	Pruebas de integración: simula clics y comprueba la pantalla, con datos simulados
wdi5	Pruebas de extremo a extremo en un navegador real (basado en WebdriverIO)
Servidor simulado (mockserver)	Devuelve datos de prueba sin conectarse al sistema SAP

Desplegar la app en el sistema SAP

Instala las herramientas de despliegue si el proyecto no las tiene: npm install --save-dev @sap/ux-ui5-tooling.
Ejecuta npx fiori add deploy-config y elige ABAP: sistema, nombre de la aplicación BSP, paquete y orden de transporte.
Despliega con npm run deploy. La app queda en el repositorio de UI5 del sistema (transacción SE80, aplicaciones BSP).
Para BTP, elige Cloud Foundry en el paso 2: se genera un archivo mta.yaml y se despliega con npm run deploy igualmente.

En sistemas sin estas herramientas, el informe /UI5/UI5_REPOSITORY_LOAD sube una carpeta comprimida con la app.

SAPUI5 y OpenUI5

Estructura de un proyecto

Vista XML y controlador

Cómo arranca una app UI5

Tipos de enlace de datos

Crear y ejecutar con UI5 Tooling

UI5 Web Components

Código moderno: TypeScript y UI5 linter

Pruebas automáticas

Desplegar la app en el sistema SAP

Fuentes