Skip to main content

Module 19: Advanced Fiori Elements

Advanced Fiori Elements development focuses on controlled extensibility, not customization.
You extend behavior where SAP allows, ensuring upgrades remain safe.

This module covers:

  • Custom actions
  • Extension points
  • Controller extensions
  • Side effects
  • Draft handling
  • RAP-based Fiori applications

1. Custom Actions​

What are Custom Actions?​

Custom actions are business actions exposed to the UI, such as:

  • Approve
  • Reject
  • Post
  • Submit

They go beyond standard CRUD operations.

SAP Pattern

Actions represent business behavior, not UI logic.

Defining Actions in CDS (RAP)​

define behavior for ZI_SalesOrder
{
  action approve result [1] $self;
}

UI Placement (Annotation)

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

Actions are defined in backend, rendered automatically in UI.

2. Extension Points​

What are Extension Points?​

Extension points are predefined hooks where you can:

  • Add UI fields
  • Add sections
  • Add logic

They ensure:

  • Upgrade safety
  • Clean separation

Common Extension Types​

ExtensionPurpose
View ExtensionsAdd UI elements
Controller ExtensionsAdd logic
Manifest ExtensionsApp configuration
Rule

Only extend where SAP allows.

3. Controller Extensions​

Why Controller Extensions?​

  • Add custom logic
  • React to UI events
  • Keep standard UI intact
Best Practice

Never modify generated controllers directly.

4. Side Effects​

What are Side Effects?​

Side effects tell UI:

  • Which fields need refresh
  • After an action or update

Side Effect Example (RAP)​

define behavior for ZI_SalesOrder
{
  side effects {
    action approve affects field Status;
  }
}
Benefit

UI refreshes only impacted fields.

5. Draft Handling​

What is Draft?​

Draft allows:

  • Incomplete data
  • Save as draft
  • Resume later

Draft in RAP​

Draft is:

  • Built-in
  • Automatically managed
  • UI-supported
define behavior for ZI_SalesOrder
{
  draft action Edit;
  draft action Activate;
}

Draft UX Benefits​

  • No data loss
  • Multi-user editing
  • Lock management
Enterprise Apps

Draft is essential for long-running transactions.

6. RAP-Based Fiori Apps​

RAP + Fiori Elements Flow​

CDS Interface View
   ↓
Behavior Definition
   ↓
Service Binding
   ↓
Fiori Elements App

Benefits of RAP-Based Apps​

BenefitDescription
Zero UI codingMostly annotation-driven
Draft enabledBuilt-in
AuthorizationCDS-based
Upgrade safeYes
SAP Strategy

RAP + Fiori Elements is the future of SAP UI.

7. When to Extend vs When Not To​

Extend When​

Allowed
  • Adding actions
  • Adding validations
  • Adding custom fields

Avoid Extending When​

Avoid
  • Changing standard layout
  • Overriding SAP logic
  • Forcing custom UX

8. Common Advanced FE Mistakes​

Avoid These
  • Heavy controller extensions
  • Ignoring side effects
  • Manual UI refreshes
  • Disabling draft

9. Interview-Grade Explanation​

Q: How do you extend Fiori Elements applications?

Answer:

Fiori Elements applications are extended using predefined extension points, custom actions defined in CDS or RAP behavior, and controller extensions. This ensures upgrade safety while allowing controlled customization.

10. Summary​

  • Advanced FE is about extensibility
  • Actions are backend-defined
  • Controller extensions add logic
  • Side effects optimize refresh
  • Draft handling improves UX
  • RAP is the preferred backend model

11. What's Next?​

➡️ Module 20: Reusable UI Components

Learning Tip

In Fiori Elements, less UI code means more stability.