Guía Interactiva

CDS Views, OData
y Fiori Elements

Del tabla ABAP a una app Fiori Elements funcional — sin escribir una sola línea de código frontend.

01 Panorama General

El Pipeline Completo

De la tabla física a la interfaz de usuario — sin frontend.

El Flujo de 5 Pasos

Tabla ABAP    →  CDS View Entity  →  Service Definition
   (datos)           (abstracción)        (qué exponer)

         →  Service Binding   →  Fiori Elements App
              (OData V2/V4)          (UI automática)

La idea central → En ABAP Cloud, no escribes código frontend. El UI se genera automáticamente desde anotaciones en tu CDS View. SAP Fiori Elements “lee” esas anotaciones y construye la pantalla por ti.

Tabla ABAP

Datos físicos en SAP HANA. Se define y activa desde Eclipse.

CDS View Entity

Abstracción: aliases legibles, campos calculados, asociaciones.

Metadata Extension

Anotaciones UI separadas: columnas, filtros, detalle.

Service Binding

Publica el endpoint OData (V2 o V4) para consumo externo.

02 Eclipse ADT

Eclipse es el Control Remoto

Tu código se escribe local, pero todo se ejecuta en HANA.

¿Cómo funciona? → Eclipse ADT corre en tu PC pero se conecta via API REST al ABAP Environment en BTP. Cuando activas un objeto con Ctrl+F2, ese objeto se crea en SAP HANA en ese momento. No hay SAP GUI, no hay SE80, SE11 ni SE38.

Eclipse ADT ↔ ABAP Environment

Eclipse ADT (tu PC)           ABAP Environment (BTP)
┌──────────────┐              ┌─────────────────────────┐
│ Escribes     │   API REST   │  ABAP App Server        │
│ código ABAP  │ ───────────→ │  + SAP HANA DB          │
│ localmente   │              │  (todo se ejecuta aquí) │
└──────────────┘              └─────────────────────────┘

Acción en Eclipse → Resultado en HANA

Activar tabla DB (Ctrl+F2)

Se crea la tabla física en HANA

Activar CDS View

Se crea una vista SQL en HANA

Activar Service Definition

Se registra el servicio OData

Publicar Service Binding

Se expone el endpoint HTTP/OData

Ejecutar clase (F9)

Se ejecuta el código ABAP en el servidor

03 Database Table

La Tabla Física en HANA

Donde viven los datos. Se define en Eclipse, se activa, y SAP HANA la crea en ese momento.

Crear en Eclipse

// Ruta: New → Other ABAP Repository Object → Dictionary → Database Table

@EndUserText.label : 'Tabla de órdenes de venta Miaogo'
@AbapCatalog.tableCategory : #TRANSPARENT
@AbapCatalog.deliveryClass : #A
define table zmiaogo_ordenes {
  key client    : abap.clnt not null;    // Mandante (obligatorio en ABAP Cloud)
  key orden_id  : abap.char(10) not null;// Clave primaria del negocio
  cliente       : abap.char(40);
  material      : abap.char(40);
  cantidad      : abap.int4;
  precio        : abap.dec(11,2);
  moneda        : abap.cuky(5);
  estatus       : abap.char(20);
  fecha_creacion: abap.dats;
}

Tipos de Datos ABAP Clave

▾

abap.clntMandante — campo técnico obligatorio. Identifica el cliente SAP (sy-mandt).

abap.char(N)Texto de longitud fija N caracteres.

abap.int4Entero de 4 bytes. Rango: -2,147,483,648 a +2,147,483,647.

abap.dec(11,2)Decimal con 11 dígitos y 2 decimales. Para importes monetarios.

abap.cuky(5)Moneda — MXN, USD, EUR. Campo de referencia para importe.

abap.datsFecha en formato YYYYMMDD (ej: 20250115).

04 CDS View Entity

La Capa de Abstracción

Define qué campos exponer, con nombres legibles y campos calculados como el Criticality.

¿Para qué sirve? → El CDS View es como una vista SQL con esteroides. No modifica los datos físicos, solo define cómo verlos: aliases legibles en CamelCase, campos calculados (como colores automáticos), y asociaciones entre entidades.

Crear en Eclipse

// Ruta: New → ABAP Repository Object → Core Data Services → Data Definition

@AccessControl.authorizationCheck: #NOT_REQUIRED
@EndUserText.label: 'CDS View - Órdenes de venta Miaogo'
@Metadata.allowExtensions: true

define view entity ZI_MIAOGO_ORDENES
  as select from zmiaogo_ordenes
{
  key orden_id       as OrdenId,
      cliente        as Cliente,
      material       as Material,
      cantidad       as Cantidad,
      precio         as Precio,
      moneda         as Moneda,
      estatus        as Estatus,
      fecha_creacion as FechaCreacion,

      // Campo calculado → colores automáticos en Fiori Elements
      case estatus
        when 'Entregado'  then 3  // Verde (positivo)
        when 'En Proceso' then 2  // Amarillo (advertencia)
        when 'Pendiente'  then 1  // Rojo (negativo)
        else 0                    // Gris (neutral)
      end            as Criticality
}

Criticality — Colores Automáticos en Fiori

▾

El campo Criticality es un entero calculado. Fiori Elements lo mapea automáticamente a colores de semáforo:

0 → Gris

Neutral — sin estado definido

1 → Rojo

Negativo — error o pendiente

2 → Amarillo

Advertencia — en proceso

3 → Verde

Positivo — completado / entregado

Para usar el color en la columna, se referencia desde la Metadata Extension: criticality: 'Criticality'

Anotaciones Clave del CDS View

▾

@Metadata.allowExtensions: true

Permite agregar anotaciones UI desde una Metadata Extension separada. Sin esto, las anotaciones van mezcladas en el mismo CDS.

define view entity

Sintaxis moderna de ABAP Cloud (vs. "define view" que es legacy CDS).

as select from

Fuente de datos: puede ser una tabla o un CDS View padre.

field as Alias

Aliases en CamelCase para nombres legibles en OData y en la UI.

05 Metadata Extension

Anotaciones UI — El ADN del Frontend

Define columnas, filtros y campos de detalle. Fiori Elements construye toda la UI desde aquí.

¿Por qué separar? → Separar las anotaciones UI del CDS de datos es best practice: lógica de negocio y presentación van en archivos distintos. La Metadata Extension solo toca el “cómo se ve”, nunca el “qué son los datos”.

Crear en Eclipse

// Ruta: New → ABAP Repository Object → Core Data Services → Metadata Extension

@Metadata.layer: #CUSTOMER
@UI.headerInfo: {
  typeName: 'Orden de Venta',          // singular
  typeNamePlural: 'Órdenes de Venta',  // plural
  title: { type: #STANDARD, value: 'OrdenId' },
  description: { type: #STANDARD, value: 'Cliente' }
}

annotate entity ZI_MIAOGO_ORDENES with
{
  // Columna en la lista + filtro en barra superior
  @UI.lineItem:       [{ position: 10, importance: #HIGH, label: 'Orden' }]
  @UI.selectionField: [{ position: 10 }]
  @UI.identification: [{ position: 10, label: 'No. Orden' }]
  OrdenId;

  // Estatus con color automático via Criticality
  @UI.lineItem:       [{ position: 70, label: 'Estatus',
                           criticality: 'Criticality' }]
  Estatus;
}

Las 5 Anotaciones UI que Necesitas

@UI.headerInfo

Encabezado de la Object Page: typeName, title (campo grande), description (subtítulo).

@UI.lineItem

Columna en la tabla del List Report. position = orden, importance = visibilidad en móvil.

@UI.selectionField

Campo de filtro en la barra superior del List Report. position = orden.

@UI.identification

Campo en el detalle (Object Page). Se usa con @UI.facet para agrupar en secciones.

@UI.facet

Secciones/tabs en la Object Page. #IDENTIFICATION_REFERENCE agrupa los campos con @UI.identification.

Lo que se genera automáticamente

▾

┌─────────────────────────────────────────────────────────┐
│  List Report (generado por @UI.lineItem)                │
│                                                         │
│  [OrdenId ▼] [Estatus ▼]  [Go]  ← @UI.selectionField       │
│                                                         │
│  ┌───────┬────────┬──────────┬────┬──────┬──────────┐  │
│  │ Orden │Cliente │ Material │Cant│Precio│ Estatus  │  │
│  ├───────┼────────┼──────────┼────┼──────┼──────────┤  │
│  │OV-1001│ Cemex  │Cem. Port.│500 │1,250 │Entregado │  │  ← verde
│  │OV-1002│ Bimbo  │Harina    │1200│3,400 │En Proceso│  │  ← amarillo
│  │OV-1004│Liverp. │Pantallas │200 │15,000│Pendiente │  │  ← rojo
│  └───────┴────────┴──────────┴────┴──────┴──────────┘  │
└─────────────────────────────────────────────────────────┘

06 Service Def & Binding

Exponer el OData al Mundo

Service Definition define QUÉ exponer. Service Binding define CÓMO y publica el endpoint.

Service Definition — La “Carta del Menú”

Define QUÉ entidades del modelo de datos se exponen como servicio OData. Se pueden exponer múltiples entidades.

@EndUserText.label: 'Service Definition - Órdenes Miaogo'
define service ZSD_MIAOGO_ORDENES {
  expose ZI_MIAOGO_ORDENES as Ordenes;
}

expose hace visible la CDS View · as Ordenes define el nombre del EntitySet en OData

Service Binding — El “Mesero que Sirve”

Define CÓMO se expone: protocolo (V2/V4) y propósito (UI/WebAPI). Al publicar, genera el endpoint HTTP.

Name:          ZSB_MIAOGO_ORDENES
Binding Type:  OData V2 - UI
Service Def:   ZSD_MIAOGO_ORDENES

// Pasos: Ctrl+F2 → Activar → Publish
URL:  /sap/opu/odata/sap/ZSB_MIAOGO_ORDENES/

Tipos de Binding Disponibles

OData V2 - UI

Apps Fiori/SAPUI5. El más usado en proyectos actuales.

OData V4 - UI

Fiori con features avanzados (draft, hierarchy, etc.).

OData V2 - Web API

Integraciones backend-to-backend.

OData V4 - Web API

APIs RESTful modernas, sin UI.

InA - UI

SAP Analytics Cloud — para reportes y dashboards.

07 Datos de Prueba

ABAP Class como Ejecutable

En ABAP Cloud no hay SE16. Se usa una clase con if_oo_adt_classrun ejecutable con F9 desde Eclipse.

¿Por qué así? → Las transacciones clásicas SE16N no existen en ABAP Cloud. En cambio, creas una clase que implementa if_oo_adt_classrun — esto la convierte en un “programa ejecutable” que puedes correr directamente con F9 desde Eclipse.

CLASS zcl_miaogo_datos DEFINITION
  PUBLIC FINAL CREATE PUBLIC.

  PUBLIC SECTION.
    INTERFACES if_oo_adt_classrun.
ENDCLASS.

CLASS zcl_miaogo_datos IMPLEMENTATION.
  METHOD if_oo_adt_classrun~main.
    // Limpiar datos anteriores
    DELETE FROM zmiaogo_ordenes.

    INSERT zmiaogo_ordenes FROM TABLE @( VALUE #(
      ( client = sy-mandt orden_id = 'OV-1001' cliente = 'Cemex'
        material = 'Cemento Portland' cantidad = 500
        precio = '1250.00' moneda = 'MXN' estatus = 'Entregado'
        fecha_creacion = '20250115' )
      ( client = sy-mandt orden_id = 'OV-1002' cliente = 'Bimbo'
        material = 'Harina de Trigo' cantidad = 1200
        precio = '3400.00' moneda = 'MXN' estatus = 'En Proceso'
        fecha_creacion = '20250220' )
    ) ).

    out->write( |{ sy-dbcnt } órdenes insertadas correctamente.| ).
  ENDMETHOD.
ENDCLASS.

Conceptos de ABAP Moderno en este Código

▾

if_oo_adt_classrun

Interfaz que permite ejecutar la clase con F9 en Eclipse (equivale a un programa ejecutable).

out->write()

Imprime resultado en la consola de Eclipse. Equivale al WRITE clásico.

VALUE #( ... )

Constructor de tabla interna inline — ABAP moderno. Sin necesidad de declarar variables auxiliares.

@( expr )

Escape para usar expresiones ABAP en sentencias SQL embebidas (ABAP SQL).

sy-mandt

Variable de sistema con el mandante actual. Obligatorio en todas las tablas ABAP Cloud.

| ... |

String template (f-string de ABAP) — permite interpolar variables directamente en cadenas de texto.

08 Fiori Elements

Cero Código Frontend

SAP genera la UI completa automáticamente desde las anotaciones del CDS View.

Fiori Elements vs SAPUI5 Manual

SAPUI5 Manual

Tú escribes XML Views, Controllers JS, Models, i18n, manifest.json. Control total pero mucho trabajo. Ideal para UIs muy personalizadas.

Fiori Elements

SAP genera toda la UI desde anotaciones CDS. Menos control pero productividad 10×. Ideal para listas, formularios, reportes — el 80% de apps empresariales.

Templates de Fiori Elements

List Report + Object Page

Lista con filtros → detalle al click. El más común. Lo que construimos en esta guía.

Worklist

Lista de tareas pendientes sin panel de filtros.

Analytical List Page

Lista con KPIs y gráficas integradas en la parte superior.

Overview Page

Dashboard con múltiples cards de información ejecutiva.

La magia clave → Cuando cambias una anotación y activas el CDS View, no necesitas re-deploy. Los cambios se reflejan inmediatamente en el Preview de BAS y al siguiente request en producción.

09 Deploy a BTP

Fiori App en Cloud Foundry

Generar el proyecto en BAS y desplegarlo al Fiori Launchpad en BTP.

Ajuste Manual: Error 500 en Fiori Generator

Si el Fiori Generator no puede conectarse al sistema en vivo (error 500 en “Connect to System”), usa Upload a Metadata Document con el archivo $metadata descargado del servicio. Luego ajusta manualmente dos archivos:

// webapp/manifest.json — cambiar el placeholder de URI:
"dataSources": {
  "mainService": {
    "uri": "/sap/opu/odata/sap/ZSB_MIAOGO_ORDENES/",
    // ← antes decía: /here/goes/your/serviceurl/
  }
}

// xs-app.json — ajustar el route al path correcto:
{
  "source": "^/sap/(.*)$",
  "target": ">/sap/$1",
  "destination": "MiaogoABAP",
  "authenticationType": "xsuaa"
}

Limitación del Shared Trial: Communication Arrangement

▾

El ABAP Environment en modalidad Shared Trial no permite crear Communication Arrangements. Esta es una limitación de infraestructura del trial compartido, no un error de configuración.

En un sistema dedicado (no Shared Trial), el flujo completo es:

1. Communication Scenario (Eclipse)
   └── Agrega el Service Binding como Inbound Service

2. Communication Arrangement (Admin Fiori Launchpad del ABAP Env)
   └── Crea usuario técnico con credenciales específicas

3. BTP Destination
   └── BasicAuthentication + URL del servicio OData

4. xs-app.json + Fiori App en BTP Launchpad
   └── Conectada al ABAP backend via Destination

Alternativas para trial:

Deploy to ABAPDeployar la app dentro del ABAP system. Auth automática, vive en el Launchpad del ABAP system.

SAPUI5 con fetch()Usar fetch() en el controller con el token OAuth2 del service key directamente.

CAP como middlewareCAP service en CF que llama al ABAP OData internamente y expone sus propios endpoints.

★ Resumen

Cheat Sheet

Objetos del ejercicio, convenciones de nombres y conceptos clave.

Objetos Creados

Package: ZMIAOGO (Software Component: ZLOCAL)
│
├── zmiaogo_ordenes          → Database Table (datos en HANA)
├── ZI_MIAOGO_ORDENES        → CDS View Entity (abstracción + Criticality)
├── ZE_MIAOGO_ORDENES        → Metadata Extension (anotaciones UI)
├── ZSD_MIAOGO_ORDENES       → Service Definition (qué exponer)
├── ZSB_MIAOGO_ORDENES       → Service Binding (OData V2 - UI)
└── ZCL_MIAOGO_DATOS         → ABAP Class (datos de prueba, F9)

Prefijos de Nombres en ABAP Cloud

z / Z

Custom/cliente — todo desarrollo propio empieza con Z

ZI_

Interface View — CDS View de datos puro

ZC_

Consumption View — CDS View para UI

ZE_

Metadata Extension — anotaciones UI

ZSD_

Service Definition — qué exponer

ZSB_

Service Binding — V2/V4, UI/WebAPI

ZCL_

Clase ABAP — lógica de negocio

ZSC_

Communication Scenario (producción)

CDS Views, OData
y Fiori Elements

El Pipeline Completo

El Flujo de 5 Pasos

Eclipse es el Control Remoto

Eclipse ADT ↔ ABAP Environment

Acción en Eclipse → Resultado en HANA

La Tabla Física en HANA

Crear en Eclipse

Tipos de Datos ABAP Clave

La Capa de Abstracción

Crear en Eclipse

Criticality — Colores Automáticos en Fiori

Anotaciones Clave del CDS View

Anotaciones UI — El ADN del Frontend

Crear en Eclipse

Las 5 Anotaciones UI que Necesitas

Lo que se genera automáticamente

Exponer el OData al Mundo

Service Definition — La “Carta del Menú”

Service Binding — El “Mesero que Sirve”

Tipos de Binding Disponibles

ABAP Class como Ejecutable

Conceptos de ABAP Moderno en este Código

Cero Código Frontend

Fiori Elements vs SAPUI5 Manual

Templates de Fiori Elements

Fiori App en Cloud Foundry

Ajuste Manual: Error 500 en Fiori Generator

Limitación del Shared Trial: Communication Arrangement

Alternativas para trial:

Cheat Sheet

Objetos Creados

Prefijos de Nombres en ABAP Cloud

Navegación

Legal

Contacto

©2025 Miaogo. All Rights Reserved

CDS Views, ODatay Fiori Elements

El Pipeline Completo

El Flujo de 5 Pasos

Eclipse es el Control Remoto

Eclipse ADT ↔ ABAP Environment

Acción en Eclipse → Resultado en HANA

La Tabla Física en HANA

Crear en Eclipse

Tipos de Datos ABAP Clave

La Capa de Abstracción

Crear en Eclipse

Criticality — Colores Automáticos en Fiori

Anotaciones Clave del CDS View

Anotaciones UI — El ADN del Frontend

Crear en Eclipse

Las 5 Anotaciones UI que Necesitas

Lo que se genera automáticamente

Exponer el OData al Mundo

Service Definition — La “Carta del Menú”

Service Binding — El “Mesero que Sirve”

Tipos de Binding Disponibles

ABAP Class como Ejecutable

Conceptos de ABAP Moderno en este Código

Cero Código Frontend

Fiori Elements vs SAPUI5 Manual

Templates de Fiori Elements

Fiori App en Cloud Foundry

Ajuste Manual: Error 500 en Fiori Generator

Limitación del Shared Trial: Communication Arrangement

Alternativas para trial:

Cheat Sheet

Objetos Creados

Prefijos de Nombres en ABAP Cloud

Navegación

Legal

Contacto

©2025 Miaogo. All Rights Reserved

CDS Views, OData
y Fiori Elements