Tutoriel RAP Partie 1 : Votre première application Fiori en 30 minutes

Catégorie

Tutorial

Publié

29. Nov. 2025

Auteur

Bienvenue dans le tutoriel RAP pour débutants ! Dans cette première partie, vous allez créer une application SAP Fiori complète en 30 minutes - de la table de base de données à l’interface utilisateur. Aucune connaissance préalable requise !

Ce que vous allez créer

Une application de gestion de livres (Book Management App) avec :

Liste de tous les livres
Création de nouveaux livres
Modification/Suppression de livres
Fonction de recherche et filtrage
Interface Fiori Elements générée automatiquement

Résultat : Application Fiori entièrement fonctionnelle sans écrire une seule ligne de code UI !

Prérequis

Système

SAP BTP ABAP Environment Trial (gratuit, 365 jours)
- Guide : Créer un compte SAP BTP Trial
- Guide : Activer ABAP Trial

Ou :

SAP S/4HANA 2022 ou supérieur (On-Premise/Cloud)

Outils

ABAP Development Tools (ADT) pour Eclipse
- Téléchargement : tools.hana.ondemand.com
- Version : La plus récente (2024 ou supérieure)

Connaissances

Connaissances de base en ABAP utiles mais pas obligatoires
Aucune connaissance RAP, CDS ou Fiori nécessaire

Temps estimé : 30-45 minutes

Architecture RAP en un coup d’oeil

Avant de commencer, voici la structure :

┌─────────────────────────────────────┐
│       Interface Fiori Elements       │ <- Générée automatiquement !
├─────────────────────────────────────┤
│       Service OData                  │ <- Service Binding
├─────────────────────────────────────┤
│       Service Definition             │ <- Quelles entités exposer ?
├─────────────────────────────────────┤
│   Couche Projection (C_*)            │ <- Vue spécifique à l'UI
│   + Behavior Definition              │
├─────────────────────────────────────┤
│   Couche Business Object (I_*)       │ <- Modèle de données (CDS View)
│   + Behavior Definition (BDEF)       │ <- Logique CRUD
│   + Behavior Implementation (BIL)    │
├─────────────────────────────────────┤
│       Table de base de données       │ <- Stockage des données
└─────────────────────────────────────┘

Pas d’inquiétude ! Cela semble complexe, mais ce n’est pas le cas. Nous allons procéder étape par étape.

Étape 1 : Créer le package

Nous avons besoin d’un package pour tous les objets.

Dans ADT :

Clic droit sur ZLOCAL (ou votre package) -> New -> ABAP Package
Nom : ZBOOK_RAP_TUTORIAL
Description : RAP Tutorial - Book Management
Package Type : Development
Finish

Résultat : Le package ZBOOK_RAP_TUTORIAL est créé.

Étape 2 : Créer la table de base de données

2.1 Créer une nouvelle table

Clic droit sur le package -> New -> Other ABAP Repository Object
Rechercher : Database Table
Nom : ZBOOK_TAB
Description : Books Table
Next -> Finish

2.2 Définir la structure de la table

Remplacez le code généré par :

@EndUserText.label : 'Books Table"
@AbapCatalog.enhancement.category : #NOT_EXTENSIBLE
@AbapCatalog.tableCategory : #TRANSPARENT
@AbapCatalog.deliveryClass : #A
@AbapCatalog.dataMaintenance : #RESTRICTED
define table zbook_tab {
  key client      : abap.clnt not null;
  key book_id     : abap.char(10) not null;
  title           : abap.char(100);
  author          : abap.char(50);
  publisher       : abap.char(50);
  isbn            : abap.char(13);
  @Semantics.amount.currencyCode : 'zbook_tab.currency_code"
  price           : abap.curr(16,2);
  currency_code   : abap.cuky;
  pages           : abap.int4;
  publication_year: abap.numc(4);
  language        : abap.char(2);

  @Semantics.user.createdBy : true
  created_by      : abap.char(12);
  @Semantics.systemDateTime.createdAt : true
  created_at      : timestampl;
  @Semantics.user.lastChangedBy : true
  last_changed_by : abap.char(12);
  @Semantics.systemDateTime.lastChangedAt : true
  last_changed_at : timestampl;
}

2.3 Sauvegarder et activer

Sauvegarder : Ctrl+S
Activer : Ctrl+F3

Résultat : La table ZBOOK_TAB existe dans la base de données.

Étape 3 : Créer la CDS Interface View (I_*)

L’Interface View est le modèle de données de notre Business Object.

3.1 Créer une nouvelle CDS View

Clic droit sur le package -> New -> Other ABAP Repository Object
Rechercher : Data Definition
Nom : ZI_BOOK
Description : Book - Interface View
Referenced Object : ZBOOK_TAB
Next -> Finish

3.2 Définir la CDS View

Remplacez le code par :

@AccessControl.authorizationCheck: #NOT_REQUIRED
@EndUserText.label: 'Book - Interface View"

define root view entity ZI_BOOK
  as select from zbook_tab
{
  key book_id          as BookId,
      title            as Title,
      author           as Author,
      publisher        as Publisher,
      isbn             as Isbn,

      @Semantics.amount.currencyCode: 'CurrencyCode"
      price            as Price,

      @Semantics.currencyCode: true
      currency_code    as CurrencyCode,

      pages            as Pages,
      publication_year as PublicationYear,
      language         as Language,

      @Semantics.user.createdBy: true
      created_by       as CreatedBy,

      @Semantics.systemDateTime.createdAt: true
      created_at       as CreatedAt,

      @Semantics.user.lastChangedBy: true
      last_changed_by  as LastChangedBy,

      @Semantics.systemDateTime.lastChangedAt: true
      last_changed_at  as LastChangedAt
}

Important : define root view entity - “root” signifie que c’est le Business Object principal.

3.3 Activer

Ctrl+F3

Résultat : La CDS View ZI_BOOK est activée.

Étape 4 : Créer la Behavior Definition (BDEF)

La Behavior Definition définit ce qui peut être fait avec le Business Object (Create, Update, Delete, etc.).

4.1 Créer la BDEF

Clic droit sur ZI_BOOK -> New Behavior Definition
Implementation Type : Managed
Next -> Finish

4.2 Définir la BDEF

Remplacez le code par :

managed implementation in class zbp_i_book unique;
strict ( 2 );

define behavior for ZI_BOOK alias Book
persistent table zbook_tab
lock master
authorization master ( instance )
etag master LastChangedAt
{
  // Opérations CRUD standard
  create;
  update;
  delete;

  // Champs en lecture seule
  field ( readonly ) BookId;
  field ( readonly ) CreatedBy, CreatedAt, LastChangedBy, LastChangedAt;

  // Numérotation automatique pour BookId
  field ( numbering : managed ) BookId;

  // Mapping : Champ CDS -> Champ table
  mapping for zbook_tab
  {
    BookId          = book_id;
    Title           = title;
    Author          = author;
    Publisher       = publisher;
    Isbn            = isbn;
    Price           = price;
    CurrencyCode    = currency_code;
    Pages           = pages;
    PublicationYear = publication_year;
    Language        = language;
    CreatedBy       = created_by;
    CreatedAt       = created_at;
    LastChangedBy   = last_changed_by;
    LastChangedAt   = last_changed_at;
  }
}

Explication :

managed : Le framework gère automatiquement les opérations CRUD
strict ( 2 ) : Mode bonnes pratiques
create; update; delete; : Ces opérations sont autorisées
field ( numbering : managed ) : BookId est attribué automatiquement

4.3 Activer

Ctrl+F3

Résultat : La Behavior Definition ZI_BOOK est activée. ADT génère automatiquement la Behavior Implementation Class ZBP_I_BOOK.

Étape 5 : Créer la CDS Projection View (C_*)

La Projection View est la vue spécifique à l’UI du Business Object.

5.1 Créer la Projection View

Clic droit sur le package -> New -> Other ABAP Repository Object
Rechercher : Data Definition
Nom : ZC_BOOK
Description : Book - Projection View
Next -> Finish

5.2 Définir la Projection View

@EndUserText.label: 'Book - Projection View"
@AccessControl.authorizationCheck: #NOT_REQUIRED

@Metadata.allowExtensions: true
@Search.searchable: true

define root view entity ZC_BOOK
  provider contract transactional_query
  as projection on ZI_BOOK
{
  key BookId,

      @Search.defaultSearchElement: true
      @Search.fuzzinessThreshold: 0.8
      Title,

      @Search.defaultSearchElement: true
      Author,

      Publisher,
      Isbn,

      @Semantics.amount.currencyCode: 'CurrencyCode"
      Price,

      @Semantics.currencyCode: true
      CurrencyCode,

      Pages,
      PublicationYear,
      Language,

      CreatedBy,
      CreatedAt,
      LastChangedBy,
      LastChangedAt
}

Nouveau :

@Search.searchable: true : Active la recherche
@Search.defaultSearchElement: true : Title & Author sont recherchables

5.3 Activer

Ctrl+F3

Étape 6 : Projection Behavior Definition

6.1 Créer la BDEF pour la Projection

Clic droit sur ZC_BOOK -> New Behavior Definition
Implementation Type : Projection
Next -> Finish

6.2 Définir la Projection BDEF

projection;
strict ( 2 );

define behavior for ZC_BOOK alias Book
{
  use create;
  use update;
  use delete;
}

Court et concis : Nous “utilisons” (use) les opérations CRUD de la couche Interface.

6.3 Activer

Ctrl+F3

Étape 7 : Metadata Extensions (UI-Annotations)

Ici, nous définissons l’apparence de l’interface utilisateur.

7.1 Créer la Metadata Extension

Clic droit sur ZC_BOOK -> New Metadata Extension
Nom : ZC_BOOK (même nom que la View)
Next -> Finish

7.2 Définir les UI-Annotations

@Metadata.layer: #CORE

annotate view ZC_BOOK with
{
  // En-tête de l'application Fiori
  @UI.headerInfo: {
    typeName: 'Livre',
    typeNamePlural: 'Livres',
    title: { value: 'Title' },
    description: { value: 'Author' }
  }

  // Facettes (sections dans le détail de l'objet)
  @UI.facet: [
    {
      id: 'BookDetails',
      purpose: #STANDARD,
      type: #IDENTIFICATION_REFERENCE,
      label: 'Détails du livre',
      position: 10
    }
  ]

  // Champs dans la liste
  @UI: {
    lineItem: [{ position: 10, importance: #HIGH }],
    identification: [{ position: 10 }],
    selectionField: [{ position: 10 }]
  }
  BookId;

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

  @UI: {
    lineItem: [{ position: 30, importance: #HIGH }],
    identification: [{ position: 30 }],
    selectionField: [{ position: 30 }]
  }
  Author;

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

  @UI: {
    identification: [{ position: 50 }]
  }
  Isbn;

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

  @UI: {
    identification: [{ position: 70 }]
  }
  Pages;

  @UI: {
    lineItem: [{ position: 60 }],
    identification: [{ position: 80 }]
  }
  PublicationYear;

  @UI: {
    identification: [{ position: 90 }]
  }
  Language;
}

Explication :

@UI.lineItem : Colonnes dans la liste
@UI.identification : Champs dans l’écran de détail
@UI.selectionField : Champs de filtre en haut
position : Ordre
importance : HIGH = toujours visible

7.3 Activer

Ctrl+F3

Étape 8 : Service Definition

8.1 Créer la Service Definition

Clic droit sur le package -> New -> Other ABAP Repository Object
Rechercher : Service Definition
Nom : ZUI_BOOK_O4
Description : Book Service Definition
Next -> Finish

8.2 Définir le service

@EndUserText.label: 'Book Service Definition"
define service ZUI_BOOK_O4 {
  expose ZC_BOOK as Book;
}

Super simple : Nous “exposons” seulement notre Projection View.

8.3 Activer

Ctrl+F3

Étape 9 : Service Binding (Service OData)

Presque terminé ! Maintenant, nous transformons le service en une vraie API OData.

9.1 Créer le Service Binding

Clic droit sur le package -> New -> Other ABAP Repository Object
Rechercher : Service Binding
Nom : ZUI_BOOK_O4
Description : Book Service Binding
Binding Type : OData V4 - UI
Service Definition : ZUI_BOOK_O4
Next -> Finish

9.2 Activer et publier le Service Binding

Sauvegarder : Ctrl+S
Activer : Ctrl+F3
Cliquer sur Publish (bouton en haut à droite de l’éditeur)

Résultat : Le service OData est actif !

Étape 10 : Ouvrir l’application Fiori

10.1 Lancer l’aperçu

Dans le Service Binding (toujours ouvert) :
Sélectionner l’entité Book
Cliquer sur Preview (côté droit)
Le navigateur s’ouvre avec votre application Fiori !

10.2 Créer des données de test

La liste est encore vide. Créons des livres :

Cliquer sur Create
Remplir les champs :
- Title : Harry Potter à l'école des sorciers
- Author : J.K. Rowling
- Publisher : Gallimard
- Price : 20.00
- Currency : EUR
- Pages : 335
- Publication Year : 1998
- Language : FR
Cliquer sur Create

Félicitations ! Votre premier livre est créé !

10.3 Tester les fonctionnalités

Recherche : Tapez “Harry” dans le champ de recherche -> trouve le livre
Filtre : Cliquez sur Filter -> Filtrer par Author
Modifier : Cliquez sur le livre -> Edit -> Changez le prix -> Save
Supprimer : Sélectionnez le livre -> Delete

Tout fonctionne - sans une seule ligne de code UI !

Ce que nous avons appris

Objets créés :

Table de base de données (ZBOOK_TAB)
CDS Interface View (ZI_BOOK)
Behavior Definition Interface (BDEF)
CDS Projection View (ZC_BOOK)
Behavior Definition Projection
Metadata Extension (UI-Annotations)
Service Definition (ZUI_BOOK_O4)
Service Binding (OData V4)

Principes RAP :

Scénario Managed : Le framework gère le CRUD
Interface vs. Projection : Séparation logique métier / UI
Behavior Definition : Ce qui peut être fait avec les données ?
Fiori Elements : L’UI est générée à partir des annotations

Prochaines étapes

Dans la Partie 2 : Fonctionnalités avancées vous apprendrez :

Ajouter des Actions (ex. “Marquer comme lu”)
Validations (ex. Vérification ISBN)
Determinations (définir des valeurs automatiquement)
Value Helps (listes déroulantes)

Dans la Partie 3 : Bonnes pratiques :

Optimisation des performances
Gestion des erreurs
Tests
Éviter les erreurs courantes

Ressources complémentaires

Sur abapcloud.com :

Tutoriels SAP :

Des questions ?

Tout a-t-il fonctionné ?
Où êtes-vous bloqué ?
Que souhaiteriez-vous approfondir dans la Partie 2 ?

Écrivez-nous dans les commentaires !

Continuez avec la Partie 2 : Fonctionnalités avancées ->