top of page
Search

SAP FIORI elements

  • Writer: Sergio Cannelli
    Sergio Cannelli
  • Jul 16
  • 6 min read
ree

ips for SAP Fiori Elements development to help you build efficient, maintainable, and user-friendly Fiori applications:

1. Understand SAP Fiori Elements Design Patterns

  • Use Fiori Elements to quickly create standard UIs based on CDS views and OData services.

  • Familiarize yourself with templates: List Report, Object Page, Analytical List Page, Overview Page.

  • Leverage metadata-driven UIs to reduce manual UI coding.

2. Model Your CDS Views Carefully

  • Use @UI annotations in CDS to define UI behavior and layout (e.g., field groups, line items).

  • Use @OData.publish: true to expose CDS views as OData services automatically.

  • Design entity sets, projections and associations properly for smooth navigation.

3. Leverage Annotations Fully

  • Use SAP Fiori Elements UI annotations to control page layout, facets, actions, and filter bars.

  • Use @UI.selectionField for filterable fields, @UI.lineItem for columns in lists.

  • Use @UI.facet and @UI.identification to organize object page sections.

  • Take advantage of common SAP annotation vocabularies for values help, charts, and tables.

4. Optimize Performance

  • Limit the amount of data received by using pagination or server-side filtering.

  • Use $select queries in OData to fetch only necessary fields.

  • Avoid expensive calculations in front-end; offload to backend CDS or RAP.

  • Cache static or rarely changing data.

5. Extendability and Adaptability

  • Use extension points and hooks to add custom logic or UI elements without modifying standard Fiori Elements code.

  • Add custom fields by extending CDS views and enhancing OData service metadata.

  • Use UI adaptations in SAP Fiori tools for runtime changes.

6. Error Handling and Validation

  • Implement robust backend validations to avoid inconsistent states.

  • Use Fiori elements messages and parameters for user friendly error display.

  • Handle OData errors gracefully on the UI.

7. Security Best Practices

  • Implement proper authorization checks in backend (CDS/RAP layer).

  • Limit OData exposure only to necessary entities and operations.

  • Use SAP Gateway and backend roles effectively.

8. Use SAP Business Application Studio / Web IDE

  • Develop, test, and deploy your Fiori Elements app efficiently using SAP's cloud-based IDEs.

  • Use code snippets, templates, and wizards to speed up development.

  • Take advantage of integrated tools for annotation assistance and preview.

9. Testing and Quality Assurance

  • Test your Fiori Elements app extensively on different devices and browsers.

  • Use SAP Fiori tools to analyze performance and compliance.

  • Collect user feedback early and iterate.

10. Stay Updated with SAP Best Practices


Detailed Examples

a) List Report – Adding a Custom Action Button

Scenario:You want to add a custom action button to the toolbar of a List Report (e.g., “Approve Selected”).

Steps:

  • Step 1: Annotate the OData service (via CDS or metadata extension) with a @UI.LineItem action annotation.

@UI.lineItem: [{ type: #ACTION, label: 'Approve Selected', dataField: 'ApproveSelected' }] define action ApproveSelected for entity ZSalesOrder;

  • Step 2: Extend the Fiori Elements manifest to add semantic objects and action mapping if needed.

  • Step 3: Implement the backend logic to handle the action (BOPF/RAP behavior implementation or custom handler in gateway).

  • Step 4: (Optional) Extend UI with a UI5 controller to call custom logic if standard behavior is insufficient.

b) Object Page – Custom Section with Chart

Scenario:Show a chart in a custom facet of an Object Page.

Approach:

  • Annotate CDS with Analytical Chart annotations:

 @Analytics.chart: {   chartType: #COLUMN,   measureAttributes: [{ qualifier: 'Revenue', position: 1 }],   dimensionAttributes: [{ qualifier: 'Year', position: 1 }] } @UI.facet: [{ id: 'SalesChart', type: #Chart, label: 'Sales Overview' }] define view ZSalesData { ... }

  • Reference the annotation facet in the Object Page manifest or UI annotations.

  • Fiori Elements renders the chart automatically in the new facet.

c) Filters and Selection Fields in List Report

Example CDS annotation:

@UI.selectionField.position: 10 @UI.selectionField.label: 'Sales Region' @Consumption.filter: { selectionType: #SINGLE } define field SalesRegion type string;

Result: A filter field appears automatically on the List Report filter bar.

2. Recommended Tools

a) SAP Business Application Studio (BAS)

  • Full-featured cloud IDE tailored for SAP development.

  • Supports Fiori Elements project templates with wizards.

  • Annotation modeling support with syntax highlighting and validation.

  • Preview + deploy your app directly to SAP BTP or SAP S/4HANA Cloud.

b) SAP Fiori Tools (Visual Studio Code Extensions)

  • Plugins for annotation modeling, metadata explorer, and manifest editing.

  • Run and test apps locally with live preview.

  • Log and analyze OData requests/responses.

c) SAP Gateway Client (Transaction /IWFND/GW_CLIENT)

  • Tool to test OData services.

  • Execute, debug, and trace OData requests and responses.

d) SAP UI5 Diagnostics and Chrome DevTools

  • Use Chrome DevTools (Network, Console) to inspect UI5 app requests and errors.

  • Use sap-ui-debug=true URL parameter to load non-minified UI5 resources.

  • Enable UI5 diagnostics tools (Ctrl+Alt+Shift+S).

3. Troubleshooting Tips

a) UI Elements Not Displaying Correctly

  • Check Annotations: Invalid or missing CDS annotations are the most common cause. Use annotation validation in BAS or Eclipse.

  • Metadata Cache: Clear UI5 application/mime cache in browser or gateway servers.

  • Manifest Configuration: Ensure sap.ui.generic.app routing and entity sets are properly configured.

b) OData Service Errors

  • Test service in SAP Gateway Client or Postman.

  • Look for authorization failures, missing properties, or wrong URLs.

  • Check backend service implementation or annotations.

c) Action Buttons Not Active or Missing

  • Verify action annotations in CDS or metadata extension.

  • Ensure service is properly re-published (@OData.publish: true) and UI annotations are supported.

  • Confirm manifest defines correct entity sets and routing.

d) Filter Bar Fields Missing or Non-functional

  • Check @UI.selectionField annotations and ensure fields are exposed in OData.

  • Use transaction /IWFND/MAINT_SERVICE to refresh Metadata Cache.

  • Avoid unsupported data types for filtering.

e) Performance Issues

  • Use Chrome DevTools to analyze request payloads and response times.

  • Enable SAP Gateway tracing (/IWFND/TRACES) for slow queries.

  • Limit data page size with $top and $skip.

  • Push down filtering and aggregation logic to CDS views or RAP backend.



Here's a step-by-step guided example of debugging a common Fiori Elements problem along with a systematic approach to isolate and fix the issue.

Scenario:

Problem:Your Fiori Elements List Report loads with an empty table and no data is visible, although you know the backend has data.

Step-by-Step Debugging Guide

Step 1: Verify OData Service Correctness

  • Test OData endpoint directly:


    Open your browser or REST client (Postman/SAP Gateway Client) and call the OData entity set URL, e.g.:

  • Check response:

    • Is the HTTP status 200 OK?

    • Is the JSON/XML payload containing expected data?

If no data or error:

  • Check backend implementation or CDS service annotations.

  • Use SAP Gateway trace /IWFND/TRACES to track backend calls.

Step 2: Check OData Metadata Exposure

  • Access your service metadata at:

  • Verify that the entity sets and properties match your CDS definitions.

  • Check that all required fields exposed in UI annotations are included in metadata.

Step 3: Validate CDS Annotations

  • Open CDS view in ABAP development environment.

  • Verify annotations for @OData.publish: true and UI annotations like @UI.lineItem, @UI.selectionField are correctly defined.

  • Use Annotation Modeling tools (in SAP Business Application Studio or ADT Eclipse) for syntax checks.

Step 4: Check Fiori Elements Manifest Configuration

  • Open manifest.json of your Fiori Elements application.

  • Confirm correct dataSource and correct entitySet referenced under "sap.ui.generic.app" configuration:

"dataSources": {   "mainService": {     "uri": "/sap/opu/odata/sap/YOUR_SERVICE_SRV/",     "type": "OData",     "settings": {       "odataVersion": "2.0"     }   } }, "models": {   "": {     "dataSource": "mainService",     "preload": true,     "settings": {       "synchronizationMode": "None"     }   } }, "sap.ui.generic.app": {   "pages": [     {       "entitySet": "EntitySetName",       "component": {         "name": "sap.suite.ui.generic.template.ListReport"       }     }   ] }

Step 5: Enable UI5 Diagnostics & Debugging

  • Launch your app with URL parameter sap-ui-debug=true and open browser DevTools.

  • Check Console tab for any JS errors or warnings.

  • In Network tab, verify OData requests are executed and responses contain data.

Step 6: Analyze OData Query Options Sent by UI5

  • In DevTools Network tab, inspect the OData Model request URLs for query parameters ($filter, $select, $top, etc.).

  • Sometimes overly restrictive filters or wrong $select can cause empty results.

  • Adjust filters or reduce fields in CDS annotations.

Step 7: Check Authorization / Role Issues

  • Ensure the logged-in user has authorization to access the OData service and the backend data.

  • Use transaction SU53 after backend calls or check roles in PFCG.

Step 8: Clear Frontend/UI5 Cache and Service Metadata Cache

  • Clear browser cache, cookies, and hard reload the app.

  • In SAP backend, run /IWFND/MAINT_SERVICE to clear metadata cache and regenerate service registration.

Step 9: Test with Simplified CDS View or Gateway Service

  • Temporarily create a minimal CDS view or OData service exposing just basic data with no annotations.

  • Confirm UI app loads data with this simple service.

  • Incrementally add complexity back to isolate annotation or backend issue.

Step 10: Enable Backend Debugging

  • Set breakpoints in ABAP code (CDS enhancements, BOPF / RAP behavior, or Gateway Implementations).

  • Trace payloads and parameters being passed to backend logic.

 
 
 

Recent Posts

See All
Documentation Reduction Logic

This article provides a detailed explanation of a specific ABAP code segment that performs a reduction operation on tax-related data...

 
 
 

Comments

bottom of page