SAP Fiori Elements: UI ohne Code erstellen (2025)

kategorie

Veröffentlicht

Nov 29, 2025

autor

SAP Fiori Elements generiert automatisch moderne UIs aus deinem RAP-Datenmodell. Keine SAPUI5-Programmierung nötig!

🎯 Was sind Fiori Elements?

Fiori Elements sind vorgefertigte UI-Templates, die basierend auf Annotations in CDS Views automatisch gerendert werden.

Vorteile

✅ Kein UI-Code: Nur Annotations
✅ Konsistentes Design: SAP Fiori UX Guidelines
✅ Wartungsarm: Updates automatisch von SAP
✅ Schnelle Entwicklung: 80% schneller als Custom UI
✅ Responsive: Mobile & Desktop

Nachteile

❌ Begrenzte Anpassungen: Nur was SAP vorsieht
❌ Lernkurve: Viele Annotations

Wann nutzen?

✅ Transaktionale Apps (CRUD)
✅ Analytical Apps (Reports)
✅ Standard-Layouts
❌ Hochgradig individuelle UIs → Custom SAPUI5

1. Fiori Elements Typen

Typ	Use Case	Beispiel
List Report	Tabelle + Filter	Kundenliste
Object Page	Detail-Ansicht	Kunden-Details
Worklist	Task-Listen	Genehmigungs-Workflow
Analytical List Page	Charts + Tabelle	Sales Dashboard
Overview Page	Kachel-Dashboard	Management Overview

Häufigste Kombination: List Report + Object Page

2. Basis-Setup: List Report + Object Page

Schritt 1: RAP Business Object

(Aus RAP Tutorial Teil 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
}

Schritt 2: Metadata Extension (Annotations)

Datei: ZC_BOOK.ddlx

@Metadata.layer: #CORE

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

  /* ===== FACETS (Bereiche im Object Page) ===== */
  @UI.facet: [
    {
      id: 'BookDetails',
      purpose: #STANDARD,
      type: #IDENTIFICATION_REFERENCE,
      label: 'Buch-Details',
      position: 10
    }
  ]

  /* ===== FELDER ===== */

  /* List Report: Spalte + Filter */
  @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;
}

Schritt 3: Service Binding

OData V4 - UI Service Binding erstellen
Publish
Preview → Fertige UI! 🎉

3. Wichtigste Annotations

@UI.lineItem - Spalten in Liste

@UI.lineItem: [
  {
    position: 10,           /* Reihenfolge */
    importance: #HIGH,      /* HIGH/MEDIUM/LOW */
    label: 'Buch-ID',      /* Optional: Custom Label */
    criticality: 'Status'   /* Optional: Ampel-Farbe */
  }
]
BookId;

Criticality Werte:

0 = Grau (Neutral)
1 = Rot (Negativ)
2 = Gelb (Kritisch)
3 = Grün (Positiv)

@UI.selectionField - Filter

@UI.selectionField: [{ position: 10 }]
Title;  /* Wird als Filter oben angezeigt */

@UI.identification - Detail-Felder

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

@UI.facet - Bereiche (Sections)

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

  /* Reference Facet (andere View einbinden) */
  {
    id: 'Orders',
    purpose: #STANDARD,
    type: #LINEITEM_REFERENCE,
    label: 'Bestellungen',
    position: 20,
    targetElement: '_Orders'  /* Association */
  },

  /* Field Group */
  {
    id: 'PriceInfo',
    purpose: #STANDARD,
    type: #FIELDGROUP_REFERENCE,
    label: 'Preis-Informationen',
    targetQualifier: 'PriceGroup',
    position: 30
  }
]

@UI.fieldGroup - Gruppierte Felder

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

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

4. Actions in UI

In BDEF:

action markAsRead result [1] $self;

In Metadata Extension:

@UI.lineItem: [
  { position: 10 },
  {
    type: #FOR_ACTION,
    dataAction: 'markAsRead',
    label: 'Als gelesen markieren'
  }
]
BookId;

Ergebnis: Button in Tabelle!

5. Value Helps (Dropdowns)

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

Oder: Custom Value Help

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

Problem: Status-Code N soll als “Neu” angezeigt werden.

Lösung: Text Association

/* CDS View mit 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,

      /* Text-Element */
      _StatusText
}

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

In Projection:

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

@UI.hidden: true
StatusText;  /* Nicht als eigenes Feld anzeigen */

7. Conditional Formatting (Criticality)

Statische Criticality

/* Direkt im View */
case status
  when 'N' then 2  /* Gelb */
  when 'R' then 3  /* Grün */
  when 'F' then 1  /* Rot */
  else 0
end as StatusCriticality,

Dynamische Criticality

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

Ergebnis: Farbige Ampel-Anzeige!

8. Charts (Analytics)

@UI.chart: [{
  qualifier: 'SalesChart',
  title: 'Umsatz nach Monat',
  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
}

Chart-Typen:

#COLUMN (Säulen)
#BAR (Balken)
#LINE (Linie)
#PIE (Kuchen)
#DONUT (Ring)

9. Draft Handling

Zwischenspeicherung bei langen Formularen

In BDEF aktivieren

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;
}

Ergebnis: “Edit”, “Save Draft”, “Activate” Buttons automatisch!

10. Semantic Keys & Search

/* Semantic Key (für Object Page URL) */
@ObjectModel.semanticKey: ['BookId']
BookId;

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

  @Search.defaultSearchElement: true
  Author
}

Ergebnis: Suchfeld oben, sucht in Title & Author!

🎯 Zusammenfassung: Annotation Cheat Sheet

Annotation	Wo	Wofür
`@UI.lineItem`	Feld	Spalte in Tabelle
`@UI.selectionField`	Feld	Filter oben
`@UI.identification`	Feld	Detail-Feld
`@UI.facet`	View	Bereiche/Sections
`@UI.fieldGroup`	Feld	Gruppierte Felder
`@UI.headerInfo`	View	Titel/Breadcrumb
`@UI.chart`	View	Diagramme
`@ObjectModel.text.element`	Feld	Text-Anzeige
`@Consumption.valueHelpDefinition`	Feld	Dropdown
`@Search.searchable`	View	Suche aktivieren

Siehe auch:

Viel Erfolg mit Fiori Elements! 🎨