SAP Fiori Elements : Creer une UI sans code (2025)

Catégorie

Publié

29. Nov. 2025

Auteur

SAP Fiori Elements genere automatiquement des interfaces utilisateur modernes a partir de votre modele de donnees RAP. Aucune programmation SAPUI5 necessaire !

Que sont les Fiori Elements ?

Fiori Elements sont des modeles UI prefabriques qui sont automatiquement rendus en fonction des Annotations dans les CDS Views.

Avantages

Pas de code UI : Seulement des annotations
Design coherent : Directives UX SAP Fiori
Maintenance reduite : Mises a jour automatiques par SAP
Developpement rapide : 80% plus rapide qu’une UI personnalisee
Responsive : Mobile et Desktop

Inconvenients

Personnalisations limitees : Seulement ce que SAP prevoit
Courbe d’apprentissage : Beaucoup d’annotations

Quand utiliser ?

Applications transactionnelles (CRUD)
Applications analytiques (Reports)
Layouts standards
UIs hautement individualisees -> Custom SAPUI5

1. Types de Fiori Elements

Type	Cas d’usage	Exemple
List Report	Tableau + Filtre	Liste de clients
Object Page	Vue detail	Details client
Worklist	Listes de taches	Workflow d’approbation
Analytical List Page	Charts + Tableau	Dashboard des ventes
Overview Page	Dashboard en tuiles	Vue d’ensemble Management

Combinaison la plus courante : List Report + Object Page

2. Configuration de base : List Report + Object Page

Etape 1 : RAP Business Object

(Du tutoriel RAP Partie 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
}

Etape 2 : Metadata Extension (Annotations)

Fichier : ZC_BOOK.ddlx

@Metadata.layer: #CORE

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

  /* ===== FACETS (Sections dans Object Page) ===== */
  @UI.facet: [
    {
      id: 'BookDetails',
      purpose: #STANDARD,
      type: #IDENTIFICATION_REFERENCE,
      label: 'Details du livre',
      position: 10
    }
  ]

  /* ===== CHAMPS ===== */

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

Etape 3 : Service Binding

Creer un Service Binding OData V4 - UI
Publish
Preview -> UI terminee !

3. Annotations les plus importantes

@UI.lineItem - Colonnes dans la liste

@UI.lineItem: [
  {
    position: 10,           /* Ordre */
    importance: #HIGH,      /* HIGH/MEDIUM/LOW */
    label: 'ID du livre',   /* Optionnel : Label personnalise */
    criticality: 'Status'   /* Optionnel : Couleur feu tricolore */
  }
]
BookId;

Valeurs de Criticality :

0 = Gris (Neutre)
1 = Rouge (Negatif)
2 = Jaune (Critique)
3 = Vert (Positif)

@UI.selectionField - Filtre

@UI.selectionField: [{ position: 10 }]
Title;  /* Affiche comme filtre en haut */

@UI.identification - Champs de detail

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

@UI.facet - Sections

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

  /* Reference Facet (integrer une autre view) */
  {
    id: 'Orders',
    purpose: #STANDARD,
    type: #LINEITEM_REFERENCE,
    label: 'Commandes',
    position: 20,
    targetElement: '_Orders'  /* Association */
  },

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

@UI.fieldGroup - Champs groupes

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

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

4. Actions dans l’UI

Dans BDEF :

action markAsRead result [1] $self;

Dans Metadata Extension :

@UI.lineItem: [
  { position: 10 },
  {
    type: #FOR_ACTION,
    dataAction: 'markAsRead',
    label: 'Marquer comme lu"
  }
]
BookId;

Resultat : Bouton dans le tableau !

5. Value Helps (Dropdowns)

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

Ou : 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

Probleme : Le code de statut N doit s’afficher comme “Nouveau”.

Solution : Text Association

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

      /* Element de texte */
      _StatusText
}

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

Dans Projection :

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

@UI.hidden: true
StatusText;  /* Ne pas afficher comme champ separe */

7. Formatage conditionnel (Criticality)

Criticality statique

/* Directement dans la View */
case status
  when 'N' then 2  /* Jaune */
  when 'R' then 3  /* Vert */
  when 'F' then 1  /* Rouge */
  else 0
end as StatusCriticality,

Criticality dynamique

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

Resultat : Affichage feu tricolore colore !

8. Charts (Analytics)

@UI.chart: [{
  qualifier: 'SalesChart',
  title: 'Chiffre d affaires par mois',
  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
}

Types de Charts :

#COLUMN (Colonnes)
#BAR (Barres)
#LINE (Ligne)
#PIE (Camembert)
#DONUT (Anneau)

9. Draft Handling

Sauvegarde intermediaire pour les longs formulaires

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

Resultat : Boutons “Edit”, “Save Draft”, “Activate” automatiques !

10. Semantic Keys et Search

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

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

  @Search.defaultSearchElement: true
  Author
}

Resultat : Champ de recherche en haut, recherche dans Title et Author !

Resume : Cheat Sheet des Annotations

Annotation	Ou	Pour quoi
`@UI.lineItem`	Champ	Colonne dans tableau
`@UI.selectionField`	Champ	Filtre en haut
`@UI.identification`	Champ	Champ de detail
`@UI.facet`	View	Sections
`@UI.fieldGroup`	Champ	Champs groupes
`@UI.headerInfo`	View	Titre/Fil d’Ariane
`@UI.chart`	View	Graphiques
`@ObjectModel.text.element`	Champ	Affichage de texte
`@Consumption.valueHelpDefinition`	Champ	Dropdown
`@Search.searchable`	View	Activer la recherche

Voir aussi :

Bonne chance avec Fiori Elements !