Fiori App Development with Elements, Floorplans & SAP Build: Hands-On List Report from CDS+RAP | Part 39 | FreeLearning365

  

Fiori App Development – Elements, Floorplans, Freestyle & SAP Build: A 25,000+ Word Hands-On Masterclass

Day 9 of the S/4HANA ABAP Development & Fiori Track

By @FreeLearning365 and Tech Partner @techbook24

Introduction: The Dashboard That Changed Everything

It’s 9 AM at TechBook24. The procurement manager, Mr. Keller, opens his tablet, taps a tile labeled “Open Purchase Orders,” and within seconds sees a clean, interactive list of all outstanding POs. He can filter by vendor, date, or value; sort by urgency; and tap any row to drill into item details, approval notes, and delivery status. No SAP GUI, no training manual. Just an intuitive app that runs on his phone, too. This is Fiori — and the entire application was built in a single day by Arjun, our ABAP developer, using tools and models you already know: CDS views and OData services.

In the previous parts, you built the backend data model and exposed it as an OData service. Today, we add the user interface. You’ll learn how to use SAP Fiori Elements to auto-generate a fully functional List Report and Object Page from annotations in your CDS view. Then, you’ll deploy it to the Fiori Launchpad, making it accessible to business users across devices. Along the way, you’ll understand the Fiori architecture, the various floorplans, when to use Fiori Elements versus freestyle SAPUI5, and how to configure SAP Business Application Studio (BAS) for development. This tutorial is deeply practical — Arjun will walk you through every click, every annotation, and every deployment step, with real data and realistic decisions.

By the end, you’ll have a running Fiori app that you can demo. And you’ll know exactly when to stick with Elements and when to go freestyle — a skill that separates senior developers from the rest. Let’s get started.

1. The Fiori Architecture – Where Does Your App Fit?

1.1 The Three Layers of Fiori

SAP Fiori is the modern user experience for SAP software. It is built on a three-layer architecture:

• Presentation Layer: SAPUI5 (or Fiori Elements) running in a browser or Fiori Client. SAPUI5 is a JavaScript UI framework; Fiori Elements is a metadata-driven engine that renders UI based on OData annotations.
• Gateway Layer: SAP Gateway (embedded in S/4HANA) exposes OData services. This is where your CDS views and RAP business objects become RESTful APIs.
• Backend Layer: The ABAP application server with CDS, business logic (BOPF/RAP), and the database (HANA).

For our purchase order app, Arjun already has the backend layer (CDS views ZC_PO_HEADER, ZC_PO_ITEM) and the OData service (RAP service binding ZUI_PO_O4). He now needs to create the presentation layer — a Fiori Elements app that consumes that OData service.

1.2 SAPUI5 vs Fiori Elements vs SAP Build

- SAPUI5 is a comprehensive toolkit for building custom, freestyle web applications with JavaScript. You have full control over every pixel. - Fiori Elements provides pre-defined floorplans (List Report, Object Page, Worklist, Overview Page, Analytical List Page) that you configure entirely through annotations. It dramatically reduces development time and ensures consistent UX. - SAP Build is a low-code platform that combines visual drag-and-drop with Fiori Elements and freestyle extensions, enabling even citizen developers to create apps. In our case, Arjun will use BAS with Fiori Elements because he wants rapid, annotation-driven development.

SAP’s recommendation: start with Fiori Elements. If the floorplan does not meet the requirement, consider a freestyle SAPUI5 app. Only use SAP Build if you need a low-code environment with simplified governance.

2. Floorplans – The Building Blocks of Fiori Apps

2.1 List Report

A List Report displays a collection of entities in a table with powerful features: smart filter bar, variant management, sort, and aggregation. It’s ideal for any scenario where users need to browse, search, and act on a list of items. For open purchase orders, a List Report is perfect. When a user clicks on a row, the app can navigate to an Object Page for details.

2.2 Object Page

The Object Page shows a single entity with sections (facets) like header information, items table, and related objects. It supports flexible layouts and can embed other Fiori Elements. For a PO, the Object Page shows the header (vendor, date, total value) and a table of line items, with actions like “Approve” or “Reject”.

2.3 Other Floorplans

• Worklist: a simplified list for tasks or pending approvals, with limited filtering.
• Overview Page: a dashboard with cards showing KPIs and quick links.
• Analytical List Page: a hybrid of List Report and analytical charts.

Arjun chooses List Report + Object Page for the PO app because it provides the familiar list-to-detail navigation that procurement users expect.

3. Fiori Elements vs Freestyle – The Decision Matrix

Before building, Arjun consults a simple decision table:

Requirement	Fiori Elements	Freestyle SAPUI5
Standard CRUD operations on a single entity	✅ Excellent fit	Overkill, but possible
Complex, multi-step guided process	❌ Not designed for wizards	✅ Better suited
Highly customized visual design (branding)	Limited to theme adaptation	✅ Full control
Integration of external data or non-OData sources	❌ Requires OData	✅ Can use any data
Rapid development, low maintenance	✅ Annotations only	❌ Higher effort

TechBook24’s PO app fits Fiori Elements perfectly. Arjun will later show how to add a custom button using an extension fragment, which gives a taste of freestyle within Elements. That’s the power of the framework: you can start with Elements and extend as needed.

4. Setting Up SAP Business Application Studio (BAS)

4.1 What Is BAS?

SAP Business Application Studio is the modern IDE for Fiori and full-stack development in the cloud. It replaces SAP Web IDE and provides dev spaces with pre-installed tools for Fiori, CAP, and mobile development. Arjun will use a “Fiori” dev space.

He logs into the SAP BTP cockpit, navigates to “Services” → “Instances and Subscriptions”, and opens BAS. He creates a new dev space with the “Fiori” application type. Once the space is running, he opens it.

Screenshot Description: BAS welcome screen with the option to create a new project.

4.2 Creating a Destination to the S/4HANA System

To connect to the backend, BAS needs a destination. Arjun goes to the SAP BTP cockpit → Destinations → New Destination. He fills:

• Name: ZPOBACKEND
• Type: HTTP
• URL: https://techbook24-s4h.example.com:44300
• Proxy Type: Internet
• Authentication: BasicAuthentication (or Principal Propagation)
• User/Password: his developer credentials.
• Additional properties: sap-client=200, sap-documentation=TechBook24 S/4HANA.

He tests the connection. Once the destination is configured, he can use it within BAS to create Fiori applications from OData services.

5. Creating a Fiori Elements List Report from the OData Service

5.1 Project Creation with the Template Wizard

In BAS, Arjun clicks “Create from Template” → selects “SAP Fiori application”. Then:

• Application Type: “SAP Fiori Elements” → “List Report Object Page”.
• Data Source: “Connect to a System” → choose the destination ZPOBACKEND.
• Service: He browses the available OData services. Since he used RAP with service binding ZUI_PO_O4, he selects it. The service URL is something like /sap/opu/odata4/sap/zui_po_o4/srvd/sap/zui_po_o4/0001/.
• Main Entity: ZC_PO_HEADER (the root CDS view). He can also select the navigation to items automatically.

The wizard then generates the project with all necessary files: manifest.json, annotation files, and deployment configuration.

5.2 Understanding the Generated Project

• manifest.json: the app descriptor, pointing to the OData service, defining routing, and including UI5 libraries.
• webapp/annotations/annotation.xml: contains local annotations that override or supplement the backend annotations.
• webapp/i18n: internationalization texts.
• webapp/view/ (if any custom extensions).

The app is already runnable! Arjun starts the local test runner by right-clicking the project → “Preview Application”. He selects list-report as the target. The BAS local preview server launches, and he sees the List Report with a smart filter bar and a table. Because the CDS view already has UI annotations, the columns appear as defined: PO Number, Vendor, Date, Net Value. He can filter, sort, and paginate. The magic is real.

Screenshot Description: BAS local preview showing the List Report with several PO rows and filter fields.

6. Annotations Deep Dive – Driving the UI from the CDS View

6.1 The Power of @UI Annotations

The behavior of the Fiori Elements app is completely driven by annotations. These can be in the CDS view (backend), in the annotation.xml (local), or in a separate ABAP annotation entity. Arjun reviews his CDS view ZC_PO_HEADER and ensures it has comprehensive annotations.

@AbapCatalog.sqlViewName: 'ZCDSPOHDRENR'
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'Purchase Order Header - Fiori'
@OData.publish: true
@UI.headerInfo: {
  typeName: 'Purchase Order',
  typeNamePlural: 'Purchase Orders',
  title: { value: 'ebeln' },
  description: { value: 'vendor_name' }
}
@UI.presentationVariant: [{
  qualifier: 'default',
  text: 'Default'
}]
define view ZC_PO_HEADER
  as select from ekko
  association [0..1] to lfa1 as _vendor on _vendor.lifnr = ekko.lifnr
{
  @UI.lineItem: [{ position: 10, importance: #HIGH }]
  @UI.identification: [{ position: 10 }]
  @UI.selectionField: [{ position: 10 }]
  key ebeln,
  
  @UI.lineItem: [{ position: 20 }]
  @UI.identification: [{ position: 20 }]
  @UI.selectionField: [{ position: 20 }]
  lifnr,
  
  @UI.lineItem: [{ position: 25 }]
  _vendor.name1 as vendor_name,
  
  @UI.lineItem: [{ position: 30 }]
  @UI.identification: [{ position: 30 }]
  aedat,
  
  @UI.lineItem: [{ position: 40 }]
  @UI.identification: [{ position: 40 }]
  netwr,
  
  // Add a facet for items
  @UI.facet: [
    { id: 'Items', purpose: #STANDARD, type: #LINEITEM_REFERENCE, label: 'Items', targetElement: 'ZC_PO_ITEM' }
  ]
  
  // association to items
  _items : composition [0..*] of ZC_PO_ITEM
}

Notice the @UI.facet referencing the composition to items. This tells the Object Page to display a table of items. The child CDS view ZC_PO_ITEM also has @UI.lineItem annotations for its fields (EBELP, MATNR, MENGE, NETWR).

Arjun also adds @UI.identification for the header fields on the Object Page, and @UI.fieldGroup to group them into a form. The Object Page then shows a header section with these fields.

6.2 Enriching with Selection Fields and Filters

By marking fields with @UI.selectionField, they automatically appear in the smart filter bar. Arjun adds @Consumption.filter.defaultValue for the date to show only last 30 days. He also adds a custom filter for vendor using @Consumption.filter.mandatory if needed. He tests the filter bar in the preview; it works perfectly.

6.3 Adding a Custom Action (Button) via Annotation

RAP allows defining actions in the behavior definition. Arjun defines an action approve on the PO header. In the CDS view, he adds:

@UI.lineItem: [{ type: #FOR_ACTION, dataAction: 'approve', label: 'Approve' }]

This renders an “Approve” button in each row of the List Report table. When clicked, it calls the OData action. He implements the logic in the behavior implementation to change the PO status. This is fully annotation-driven, no UI coding.

7. Deploying the Fiori App to S/4HANA ABAP Repository

7.1 Building and Deploying from BAS

To deploy, Arjun uses the built-in deployment wizard in BAS. Right-click the project → “Deploy” → “ABAP Repository”. He selects his destination, chooses a package (e.g., ZTECBOOK24_FIORI), and provides a transport request. The deployment uploads the UI5 application as a BSP (Business Server Pages) application in the ABAP system.

Alternative: If BAS cannot directly deploy to an on-premise system, he can export as a ZIP and import via transaction /UI5/UI5_REPOSITORY_LOAD on the ABAP server. Arjun shows both methods.

After deployment, he checks the BSP application in SE80: the app name is ZUI_PO_LIST. It’s stored under BSP Applications. The index.html is the entry point.

7.2 Activating SICF Node for the App

Transaction SICF: navigate to /sap/bc/ui5_ui5/sap/ and find the new node (or create it if missing). He activates the service. He tests by opening the URL in the browser: https://server:port/sap/bc/ui5_ui5/sap/zui_po_list/. The app loads (it will need authentication). He also needs to ensure the OData service is activated in /IWFND/MAINT_SERVICE.

8. Fiori Launchpad Configuration – Catalogs, Groups, and Tiles

8.1 Creating a Catalog and Target Mapping

The Fiori Launchpad is the central entry point for all Fiori apps. Arjun uses /UI2/FLPD_CUST (or PFCG roles) to create a catalog. Steps:

1. Transaction /UI2/FLPD_CUST → Catalog → Create catalog ZPROCUREMENT_CAT.
2. Add a new target mapping:
   • Semantic Object: PurchaseOrder
   • Action: displayList
   • Application Type: SAPUI5 Fiori app
   • Title: “Open Purchase Orders”
   • URL: /sap/bc/ui5_ui5/sap/zui_po_list
   • ID: ZUI_PO_LIST
3. Add a tile (static or dynamic) with a nice icon and subtitle.

Screenshot Description: FLPD_CUST catalog configuration with the tile and target mapping details.

8.2 Creating a Group and Adding the Tile

Arjun creates a group ZPROC_GROUP and adds the tile. Then, in his user profile (via PFCG role or directly), he assigns the catalog and group. He logs out and logs back into the Launchpad, and the tile appears. Clicking it opens the List Report. Mr. Keller can now access it from his tablet.

9. Testing and Enhancing – The Real User Feedback

After a pilot test, users ask for a quick export to Excel. Fiori Elements provides that out-of-the-box via the standard toolbar (if the OData service supports $batch and the necessary annotations). Arjun ensures @UI.export.enabled: true is present. He also adds a smart link to navigate from vendor to a vendor detail app using cross-app navigation. This uses a semantic object mapping; he configures an intent for vendor object and adds an annotation in the CDS view:

@UI.lineItem: [{ type: #AS_SMART_LINK, semanticObject: 'Vendor', action: 'display', label: 'Vendor' }]

Now clicking the vendor name in the list opens the vendor Fiori app (if available). It’s seamless.

10. When to Go Freestyle – Adding a Custom UI5 Fragment

10.1 The Limitation of Annotations

The procurement manager wants a custom button that, when clicked, shows a popup with a QR code linking to the PO for mobile scanning. Annotations alone cannot generate a QR code popup. So Arjun decides to create a custom UI5 fragment and add it as a button in the List Report toolbar. This is a “building block” or “extension point” in Fiori Elements.

He creates a new folder webapp/ext/fragments/ and adds a QRCodeButton.fragment.xml with a button and a dialog. In the manifest.json, he registers the extension under "sap.ui5": { "extends": { "extensions": { "sap.ui.controllerExtensions": ... } } } (or using the newer extension concepts). He then uses the ControllerExtension to handle the button press and generate the QR code using a library. He briefly demonstrates the code structure, but notes that this is a freestyle escape hatch — not the primary development model.

Screenshot Description: BAS editor showing the custom fragment code and the running app with the QR code button.

11. Pros, Cons, and Alternatives – Making the Right Choice

Approach	Pros	Cons	Best For
Fiori Elements + CDS annotations	Zero UI code, consistent UX, fast development, easy maintenance	Limited to predefined floorplans; complex interactions need extensions	80% of business apps: lists, details, dashboards
Freestyle SAPUI5	Full flexibility, custom UX, any data source	High development effort, requires JavaScript skills, maintenance overhead	Highly specialized screens, complex workflows
SAP Build	Low-code, drag-and-drop, simplified governance	Less control over code, may hit limitations	Citizen developers, simple extensions

Arjun chooses Fiori Elements for the PO app and plans to use freestyle only for the QR code extension. This hybrid approach maximizes efficiency.

12. Complete Hands-On Lab – Build and Deploy the Purchase Order Fiori App from Scratch

We’ll now detail the exact steps Arjun performed to create the app. Follow along in your own sandbox.

1. Prerequisites: A RAP-based OData service for purchase orders (CDS views with composition, behavior definition, service binding). Use the service from Part 38 or the one provided in the lab assets.
2. Open SAP Business Application Studio, create a new Fiori Elements List Report Object Page project using the template wizard. Point to the OData service (destination configured).
3. In the generated project, review manifest.json to confirm the service URL and entity set. Ensure the routing is set to the ListReport view.
4. Enhance the CDS view annotations on the backend (if not already): add @UI.headerInfo, @UI.lineItem, @UI.identification, @UI.facet, and @UI.selectionField. Activate the CDS view and reload the OData metadata.
5. Preview the app in BAS. Test filtering, sorting, and navigation to the Object Page by clicking a row.
6. Add a custom action “Approve” in the behavior definition and expose it via annotation. Verify the button appears.
7. Deploy the app to the ABAP repository using BAS or the ZIP import method. Note the BSP application name.
8. Activate the SICF node for the app and the OData service.
9. Configure the Fiori Launchpad: create a catalog, target mapping, and tile. Add the tile to a group.
10. Log into the Launchpad, open the app, and test with real data. Celebrate!

Throughout the lab, Arjun uses screenshots to illustrate each step. The final result: a fully functional Fiori app, ready for production.

13. Common Pitfalls and Troubleshooting

• OData service not found: Ensure the service is registered in /IWFND/MAINT_SERVICE and activated. Check that the metadata loads in /sap/opu/odata4/sap/.../$metadata.
• Annotations not reflecting: After changing backend annotations, clear the metadata cache (/IWBEP/CACHE_CLEANUP) or use $metadata with a different user. In BAS, refresh the service.
• CORS issues during preview: Use the BAS “run configuration” with the SAP Web App component, which proxies requests through BAS. For local testing, add the proper CORS headers in the backend (not recommended for production).
• Tile not showing: Verify the catalog is assigned to the user’s PFCG role, and that the target mapping has a valid tile. Check the sap-system property in the catalog.
• Deep insert doesn't work: In RAP, ensure the composition is defined in the CDS view and the behavior definition enables deep create.

14. Future-Proofing – Where Fiori Development Is Heading

SAP is heavily investing in the “Fiori 3” and “Fiori next” design with more analytical capabilities and embedded AI. Fiori Elements floorplans are expanding, and the annotation model is becoming richer. ABAP developers who master CDS and annotations will be able to deliver full-stack apps without leaving the backend. Arjun is now positioned not just as an ABAPer but as a full-stack developer capable of building end-to-end solutions. The combination of RAP and Fiori Elements is the standard for transactional apps in S/4HANA.

Tomorrow, in Part 40, we’ll tackle ABAP Debugging & Performance Tuning — taking all the code you’ve written and making it run faster, using ST05, SAT, EXPLAIN, and indexing strategies. You’ll learn to profile your CDS views, OData services, and Fiori apps to meet SLAs. That’s the day your apps go from functional to bulletproof.

Keep building, keep delighting users.

End of Part 39 – Fiori App Development Deep Dive. Brought to you by @FreeLearning365 and tech partner @techbook24.