RAP Tutorial Part 1: Your First Fiori App in 30 Minutes

Category
Tutorial
Published
Author
Johannes

Welcome to the RAP Tutorial for Beginners! In this first part, you’ll build a complete SAP Fiori App in 30 minutes - from database table to UI. No prior knowledge required!

What You Will Build

A Book Management App with:

  • List of all books
  • Create new books
  • Edit/Delete books
  • Search and filter functionality
  • Automatically generated Fiori Elements UI

Result: Fully functional Fiori App without writing a single line of UI code!

Prerequisites

System

  • SAP BTP ABAP Environment Trial (free, 365 days)
    • Guide: Create SAP BTP Trial
    • Guide: Activate ABAP Trial

Or:

  • SAP S/4HANA 2022 or higher (On-Premise/Cloud)

Tools

Knowledge

  • Basic ABAP knowledge helpful, but not required
  • No RAP, CDS, or Fiori knowledge needed

Estimated time: 30-45 minutes

RAP Architecture Overview

Before we start, let’s briefly look at the structure:

+-------------------------------------+
|       Fiori Elements UI             | <- Automatically generated!
+-------------------------------------+
|       OData Service                 | <- Service Binding
+-------------------------------------+
|       Service Definition            | <- Which entities to expose?
+-------------------------------------+
|   Projection Layer (C_*)            | <- UI-specific view
|   + Behavior Definition             |
+-------------------------------------+
|   Business Object Layer (I_*)       | <- Data model (CDS View)
|   + Behavior Definition (BDEF)      | <- CRUD logic
|   + Behavior Implementation (BIL)   |
+-------------------------------------+
|       Database Table                | <- Store data
+-------------------------------------+

Don’t worry! Sounds complex, but it’s not. We’ll go through it step by step.

Step 1: Create Package

We need a package for all objects.

In ADT:

  1. Right-click on ZLOCAL (or your package) -> New -> ABAP Package
  2. Name: ZBOOK_RAP_TUTORIAL
  3. Description: RAP Tutorial - Book Management
  4. Package Type: Development
  5. Finish

Result: Package ZBOOK_RAP_TUTORIAL is created.

Step 2: Create Database Table

2.1 Create New Table

  1. Right-click on Package -> New -> Other ABAP Repository Object
  2. Search: Database Table
  3. Name: ZBOOK_TAB
  4. Description: Books Table
  5. Next -> Finish

2.2 Define Table Structure

Replace the generated code with:

@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 Save & Activate

  • Save: Ctrl+S
  • Activate: Ctrl+F3

Result: Table ZBOOK_TAB exists in the database.

Step 3: Create CDS Interface View (I_*)

The Interface View is the data model of our Business Object.

3.1 Create New CDS View

  1. Right-click on Package -> New -> Other ABAP Repository Object
  2. Search: Data Definition
  3. Name: ZI_BOOK
  4. Description: Book - Interface View
  5. Referenced Object: ZBOOK_TAB
  6. Next -> Finish

3.2 Define CDS View

Replace the code with:

@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” means this is the main Business Object.

3.3 Activate

  • Ctrl+F3

Result: CDS View ZI_BOOK is activated.

Step 4: Create Behavior Definition (BDEF)

The Behavior Definition defines what can be done with the Business Object (Create, Update, Delete, etc.).

4.1 Create BDEF

  1. Right-click on ZI_BOOK -> New Behavior Definition
  2. Implementation Type: Managed
  3. Next -> Finish

4.2 Define BDEF

Replace the code with:

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
{
  // Standard CRUD operations
  create;
  update;
  delete;


  // Fields that are readonly
  field ( readonly ) BookId;
  field ( readonly ) CreatedBy, CreatedAt, LastChangedBy, LastChangedAt;


  // Automatic number assignment for BookId
  field ( numbering : managed ) BookId;


  // Mapping: CDS field -> Table field
  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;
  }
}

Explanation:

  • managed: Framework handles CRUD operations automatically
  • strict ( 2 ): Best practice mode
  • create; update; delete;: These operations are allowed
  • field ( numbering : managed ): BookId is assigned automatically

4.3 Activate

  • Ctrl+F3

Result: Behavior Definition ZI_BOOK is activated. ADT automatically generates the Behavior Implementation Class ZBP_I_BOOK.

Step 5: Create CDS Projection View (C_*)

The Projection View is the UI-specific view of the Business Object.

5.1 Create Projection View

  1. Right-click on Package -> New -> Other ABAP Repository Object
  2. Search: Data Definition
  3. Name: ZC_BOOK
  4. Description: Book - Projection View
  5. Next -> Finish

5.2 Define 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
}

New:

  • @Search.searchable: true: Enables search
  • @Search.defaultSearchElement: true: Title & Author are searchable

5.3 Activate

  • Ctrl+F3

Step 6: Projection Behavior Definition

6.1 Create BDEF for Projection

  1. Right-click on ZC_BOOK -> New Behavior Definition
  2. Implementation Type: Projection
  3. Next -> Finish

6.2 Define Projection BDEF

projection;
strict ( 2 );


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

Short and simple: We “use” the CRUD operations from the Interface Layer.

6.3 Activate

  • Ctrl+F3

Step 7: Metadata Extensions (UI Annotations)

Here we define how the UI should look.

7.1 Create Metadata Extension

  1. Right-click on ZC_BOOK -> New Metadata Extension
  2. Name: ZC_BOOK (same name as View)
  3. Next -> Finish

7.2 Define UI Annotations

@Metadata.layer: #CORE


annotate view ZC_BOOK with
{
  // Header area of the Fiori App
  @UI.headerInfo: {
    typeName: 'Book',
    typeNamePlural: 'Books',
    title: { value: 'Title' },
    description: { value: 'Author' }
  }


  // Facets (sections in object detail)
  @UI.facet: [
    {
      id: 'BookDetails',
      purpose: #STANDARD,
      type: #IDENTIFICATION_REFERENCE,
      label: 'Book Details',
      position: 10
    }
  ]


  // Fields in the list
  @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;
}

Explanation:

  • @UI.lineItem: Columns in the list
  • @UI.identification: Fields in the detail screen
  • @UI.selectionField: Filter fields at the top
  • position: Order
  • importance: HIGH = always visible

7.3 Activate

  • Ctrl+F3

Step 8: Service Definition

8.1 Create Service Definition

  1. Right-click on Package -> New -> Other ABAP Repository Object
  2. Search: Service Definition
  3. Name: ZUI_BOOK_O4
  4. Description: Book Service Definition
  5. Next -> Finish

8.2 Define Service

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

Super simple: We only “expose” our Projection View.

8.3 Activate

  • Ctrl+F3

Step 9: Service Binding (OData Service)

Almost done! Now we turn the service into a real OData API.

9.1 Create Service Binding

  1. Right-click on Package -> New -> Other ABAP Repository Object
  2. Search: Service Binding
  3. Name: ZUI_BOOK_O4
  4. Description: Book Service Binding
  5. Binding Type: OData V4 - UI
  6. Service Definition: ZUI_BOOK_O4
  7. Next -> Finish

9.2 Activate & Publish Service Binding

  1. Save: Ctrl+S
  2. Activate: Ctrl+F3
  3. Click Publish (button in the upper right of the editor)

Result: OData Service is active!

Step 10: Open Fiori App

10.1 Start Preview

  1. In the Service Binding (still open):
  2. Select entity Book
  3. Click Preview (right side)
  4. Browser opens with your Fiori App!

10.2 Create Test Data

The list is still empty. Let’s create some books:

  1. Click Create
  2. Fill in fields:
    • Title: Harry Potter and the Philosopher's Stone
    • Author: J.K. Rowling
    • Publisher: Bloomsbury
    • Price: 20.00
    • Currency: EUR
    • Pages: 335
    • Publication Year: 1998
    • Language: EN
  3. Click Create

Congratulations! Your first book is created!

10.3 Test Features

  • Search: Enter “Harry” in search field -> finds the book
  • Filter: Click Filter -> Filter by Author
  • Edit: Click on book -> Edit -> Change price -> Save
  • Delete: Select book -> Delete

Everything works - without writing a single line of UI code!

What Have We Learned?

Objects Created:

  1. Database Table (ZBOOK_TAB)
  2. CDS Interface View (ZI_BOOK)
  3. Behavior Definition Interface (BDEF)
  4. CDS Projection View (ZC_BOOK)
  5. Behavior Definition Projection
  6. Metadata Extension (UI Annotations)
  7. Service Definition (ZUI_BOOK_O4)
  8. Service Binding (OData V4)

RAP Principles:

  • Managed Scenario: Framework handles CRUD
  • Interface vs. Projection: Separation of Business Logic / UI
  • Behavior Definition: What can be done with data?
  • Fiori Elements: UI is generated from annotations

Next Steps

In Part 2: Advanced Features you’ll learn:

  • Add Actions (e.g., “Mark as read”)
  • Validations (e.g., ISBN check)
  • Determinations (set automatic values)
  • Value Helps (dropdown lists)

In Part 3: Best Practices:

  • Performance optimization
  • Error handling
  • Testing
  • Avoiding common mistakes

Additional Resources

On abapcloud.com:

SAP Tutorials:

Questions?

  • Did everything work?
  • Where did you get stuck?
  • What should be covered in depth in Part 2?

Let us know in the comments!

Continue with Part 2: Advanced Features ->