SAP Fiori Elements: Crear UI sin codigo (2025)

Kategorie
UI
Veröffentlicht
Autor
Johannes

SAP Fiori Elements genera automaticamente interfaces modernas a partir de tu modelo de datos RAP. No se requiere programacion SAPUI5!

Que son los Fiori Elements?

Fiori Elements son plantillas de UI predefinidas que se renderizan automaticamente basandose en Annotations en CDS Views.

Ventajas

  • Sin codigo UI: Solo Annotations
  • Diseno consistente: Guias UX de SAP Fiori
  • Bajo mantenimiento: Actualizaciones automaticas de SAP
  • Desarrollo rapido: 80% mas rapido que UI personalizada
  • Responsive: Movil y escritorio

Desventajas

  • Personalizaciones limitadas: Solo lo que SAP prevee
  • Curva de aprendizaje: Muchas Annotations

Cuando usar?

  • Aplicaciones transaccionales (CRUD)
  • Aplicaciones analiticas (Reports)
  • Layouts estandar
  • NO para UIs altamente personalizadas -> Custom SAPUI5

1. Tipos de Fiori Elements

TipoCaso de usoEjemplo
List ReportTabla + FiltroLista de clientes
Object PageVista de detalleDetalles de cliente
WorklistListas de tareasWorkflow de aprobacion
Analytical List PageGraficos + TablaDashboard de ventas
Overview PageDashboard de tarjetasVista ejecutiva

Combinacion mas frecuente: List Report + Object Page

2. Setup basico: List Report + Object Page

Paso 1: RAP Business Object

(Del Tutorial RAP Parte 1)

/* CDS Projection View */
@EndUserText.label: 'Book - Projection'
@Metadata.allowExtensions: true


define root view entity ZC_BOOK
  provider contract transactional_query
  as projection on ZI_BOOK
{
  key BookId,
      Title,
      Author,
      Publisher,
      Price,
      CurrencyCode,
      Status
}

Paso 2: Metadata Extension (Annotations)

Archivo: ZC_BOOK.ddlx

@Metadata.layer: #CORE


annotate view ZC_BOOK with
{
  /* ===== HEADER INFO ===== */
  @UI.headerInfo: {
    typeName: 'Libro',
    typeNamePlural: 'Libros',
    title: { value: 'Title' },
    description: { value: 'Author' }
  }


  /* ===== FACETS (Secciones en Object Page) ===== */
  @UI.facet: [
    {
      id: 'BookDetails',
      purpose: #STANDARD,
      type: #IDENTIFICATION_REFERENCE,
      label: 'Detalles del libro',
      position: 10
    }
  ]


  /* ===== CAMPOS ===== */


  /* List Report: Columna + Filtro */
  @UI.lineItem: [{ position: 10, importance: #HIGH }]
  @UI.identification: [{ position: 10 }]
  @UI.selectionField: [{ position: 10 }]
  BookId;


  @UI.lineItem: [{ position: 20, importance: #HIGH }]
  @UI.identification: [{ position: 20 }]
  @UI.selectionField: [{ position: 20 }]
  Title;


  @UI.lineItem: [{ position: 30 }]
  @UI.identification: [{ position: 30 }]
  @UI.selectionField: [{ position: 30 }]
  Author;


  @UI.lineItem: [{ position: 40 }]
  @UI.identification: [{ position: 40 }]
  Publisher;


  @UI.lineItem: [{ position: 50 }]
  @UI.identification: [{ position: 50 }]
  Price;
}

Paso 3: Service Binding

  1. Crear OData V4 - UI Service Binding
  2. Publish
  3. Preview -> UI lista!

3. Annotations mas importantes

@UI.lineItem - Columnas en lista

@UI.lineItem: [
  {
    position: 10,           /* Orden */
    importance: #HIGH,      /* HIGH/MEDIUM/LOW */
    label: 'ID Libro',      /* Opcional: Etiqueta personalizada */
    criticality: 'Status'   /* Opcional: Color de semaforo */
  }
]
BookId;

Valores de Criticality:

  • 0 = Gris (Neutral)
  • 1 = Rojo (Negativo)
  • 2 = Amarillo (Critico)
  • 3 = Verde (Positivo)

@UI.selectionField - Filtro

@UI.selectionField: [{ position: 10 }]
Title;  /* Se muestra como filtro arriba */

@UI.identification - Campos de detalle

@UI.identification: [{ position: 10 }]
BookId;  /* Visible en Object Page */

@UI.facet - Secciones

@UI.facet: [
  /* Identification Facet */
  {
    id: 'GeneralInfo',
    purpose: #STANDARD,
    type: #IDENTIFICATION_REFERENCE,
    label: 'Informacion general',
    position: 10
  },


  /* Reference Facet (incluir otra vista) */
  {
    id: 'Orders',
    purpose: #STANDARD,
    type: #LINEITEM_REFERENCE,
    label: 'Pedidos',
    position: 20,
    targetElement: '_Orders'  /* Association */
  },


  /* Field Group */
  {
    id: 'PriceInfo',
    purpose: #STANDARD,
    type: #FIELDGROUP_REFERENCE,
    label: 'Informacion de precio',
    targetQualifier: 'PriceGroup',
    position: 30
  }
]

@UI.fieldGroup - Campos agrupados

@UI.fieldGroup: [{ qualifier: 'PriceGroup', position: 10 }]
Price;


@UI.fieldGroup: [{ qualifier: 'PriceGroup', position: 20 }]
CurrencyCode;

4. Actions en UI

En BDEF:

action markAsRead result [1] $self;

En Metadata Extension:

@UI.lineItem: [
  { position: 10 },
  {
    type: #FOR_ACTION,
    dataAction: 'markAsRead',
    label: 'Marcar como leido'
  }
]
BookId;

Resultado: Boton en la tabla!

5. Value Helps (Desplegables)

/* En CDS View */
@Consumption.valueHelpDefinition: [{
  entity: {
    name: 'I_Currency',
    element: 'Currency'
  }
}]
CurrencyCode;

O: Value Help personalizado

define view Z_STATUS_VH as select from DDCDS_CUSTOMER_DOMAIN_VALUE_T
{
  key value_low as StatusCode,
      text      as StatusText
}
where domain_name = 'ZBOOK_STATUS';
@Consumption.valueHelpDefinition: [{
  entity: { name: 'Z_STATUS_VH', element: 'StatusCode' }
}]
Status;

6. Text Associations

Problema: El codigo de estado N debe mostrarse como “Nuevo”.

Solucion: Text Association

/* CDS View con Text */
define view ZI_BOOK as select from zbook_tab
  association [0..1] to ZI_BOOK_STATUS_TEXT as _StatusText
    on $projection.Status = _StatusText.StatusCode
{
  key book_id as BookId,
      status  as Status,


      /* Elemento de texto */
      _StatusText
}


/* Vista de texto */
define view ZI_BOOK_STATUS_TEXT as select from ...
{
  key status_code as StatusCode,
      @Semantics.text: true
      text        as StatusText
}

En Projection:

@ObjectModel.text.element: ['StatusText']
Status;


@UI.hidden: true
StatusText;  /* No mostrar como campo separado */

7. Formato condicional (Criticality)

Criticality estatica

/* Directamente en la Vista */
case status
  when 'N' then 2  /* Amarillo */
  when 'R' then 3  /* Verde */
  when 'F' then 1  /* Rojo */
  else 0
end as StatusCriticality,

Criticality dinamica

@UI.lineItem: [{
  position: 40,
  criticality: 'StatusCriticality'
}]
Status;

Resultado: Visualizacion con semaforos de colores!

8. Graficos (Analytics)

@UI.chart: [{
  qualifier: 'SalesChart',
  title: 'Ventas por mes',
  chartType: #COLUMN,
  dimensions: [ 'Month' ],
  measures: [ 'Revenue' ]
}]


@UI.presentationVariant: [{
  qualifier: 'Default',
  visualizations: [{
    type: #AS_CHART,
    qualifier: 'SalesChart'
  }]
}]


define view Z_SalesAnalytics as select from ...
{
  @UI.lineItem: [{ position: 10 }]
  month   as Month,


  @Aggregation.default: #SUM
  revenue as Revenue
}

Tipos de graficos:

  • #COLUMN (Columnas)
  • #BAR (Barras)
  • #LINE (Linea)
  • #PIE (Circular)
  • #DONUT (Anillo)

9. Manejo de Draft

Guardado intermedio para formularios largos

Activar en BDEF

managed with draft;


define behavior for ZI_BOOK
persistent table zbook_tab
draft table zbook_draft
{
  create;
  update;
  delete;


  draft action Edit;
  draft action Activate;
  draft action Discard;
  draft action Resume;
  draft determine action Prepare;
}

Resultado: Botones “Editar”, “Guardar borrador”, “Activar” automaticos!

10. Semantic Keys y Busqueda

/* Semantic Key (para URL de Object Page) */
@ObjectModel.semanticKey: ['BookId']
BookId;


/* Activar busqueda */
@Search.searchable: true
define view ZC_BOOK as projection on ZI_BOOK
{
  @Search.defaultSearchElement: true
  @Search.fuzzinessThreshold: 0.8
  Title,


  @Search.defaultSearchElement: true
  Author
}

Resultado: Campo de busqueda arriba, busca en Title y Author!

Resumen: Cheat Sheet de Annotations

AnnotationDondePara que
@UI.lineItemCampoColumna en tabla
@UI.selectionFieldCampoFiltro arriba
@UI.identificationCampoCampo de detalle
@UI.facetVistaSecciones
@UI.fieldGroupCampoCampos agrupados
@UI.headerInfoVistaTitulo/Breadcrumb
@UI.chartVistaGraficos
@ObjectModel.text.elementCampoMostrar texto
@Consumption.valueHelpDefinitionCampoDesplegable
@Search.searchableVistaActivar busqueda

Ver tambien:

Exito con Fiori Elements!