How to Customize SAP Fiori Apps for Your Business Needs

How to Customize SAP Fiori Apps for Your Business Needs

SAP Fiori has revolutionized the way businesses interact with SAP systems by providing a modern, user-friendly interface. However, out-of-the-box Fiori apps may not always align perfectly with your organization’s unique processes. Customizing SAP Fiori apps allows you to tailor the user experience, improve efficiency, and ensure that your workforce has the tools they need to succeed.

In this guide, we’ll explore five key strategies for customizing SAP Fiori apps to fit your business needs. Whether you’re adjusting layouts, extending functionality, or integrating with other systems, these actionable insights will help you maximize the value of your SAP investment.

Understanding SAP Fiori Customization Options

Before diving into customization, it’s essential to understand the different ways you can modify SAP Fiori apps. SAP provides multiple approaches, each suited for different levels of complexity and business requirements.

SAP Fiori Personalization vs. Customization

Personalization refers to user-specific adjustments that don’t require development skills, such as:

• Rearranging tiles on the Fiori launchpad
• Hiding or showing specific apps based on user roles
• Adjusting theme colors and layouts

Example: A sales manager might personalize their launchpad to prioritize “My Opportunities” and “Customer Reports” tiles while hiding less relevant apps.

Customization, on the other hand, involves system-wide changes that affect all users, such as:

• Modifying app logic using SAPUI5 or JavaScript
• Extending OData services to include custom fields
• Creating entirely new Fiori apps from scratch

Actionable Tip: Start with personalization to improve user adoption before investing in deeper customizations.

Key Tools for Fiori Customization

SAP provides several tools to customize Fiori apps, depending on your technical expertise:

Example: If you need to add a custom field to a standard Fiori app (e.g., “Customer Priority” in a sales order), you might use SAP Web IDE to extend the OData service and modify the UI.

When to Customize vs. When to Use Standard Apps

Not every business process requires customization. Before modifying an app, ask:

• Is the standard app missing critical data? (e.g., a custom field for regulatory compliance)
• Does the app’s workflow conflict with our business process? (e.g., approval steps in a purchase requisition)
• Can personalization solve the issue? (e.g., rearranging fields instead of rebuilding the app)

Decision Flowchart:

1. Can personalization meet the need? → Yes → Use Fiori Launchpad Designer.
2. Is the change minor (e.g., adding a field)? → Yes → Use SAP Fiori Elements or Web IDE.
3. Is the change complex (e.g., new workflow)? → Yes → Build a custom Fiori app in Business Application Studio.

Pro Tip: Always check SAP’s [Fiori Apps Library](https://fioriappslibrary.hana.ondemand.com/) to see if a standard app already meets your needs before customizing.

Extending Standard Fiori Apps with SAPUI5

Many businesses need to add custom fields, buttons, or logic to standard Fiori apps without rebuilding them from scratch. SAPUI5, the underlying framework of Fiori, allows for flexible extensions.

Adding Custom Fields to Standard Apps

One of the most common customizations is adding a custom field to an existing Fiori app (e.g., adding “Customer Segment” to the Sales Order app).

Step-by-Step Guide:
1. Extend the OData Service
– Use Transaction SEGW (Gateway Service Builder) to extend the standard OData service.
– Add a new property (e.g., CustomerSegment) to the entity.
– Re-generate the service.

2. Modify the Fiori App’s UI
– Open the app in SAP Web IDE.
– Locate the view (e.g., SalesOrder.view.xml) and add a new input field:

<Label text="Customer Segment" />
     <Input value="{CustomerSegment}" />

– Bind the field to the extended OData property.

3. Test & Deploy
– Test the app in the Fiori Sandbox.
– Deploy the changes to your Fiori launchpad.

Example: A manufacturing company adds a “Priority Code” field to the Production Order app to flag urgent jobs.

Enhancing App Logic with JavaScript Extensions

Sometimes, you need to modify the app’s behavior (e.g., auto-populating a field based on another selection).

Example: In a Purchase Requisition app, you want the “Cost Center” field to auto-fill based on the selected “Department.”

Steps to Implement:
1. Locate the Controller File
– In SAP Web IDE, open the app’s controller (e.g., PurchaseReq.controller.js).

2. Add Custom Logic

onDepartmentChange: function(oEvent) {
       const sDepartment = oEvent.getSource().getSelectedKey();
       let sCostCenter = "";

       // Business logic to determine cost center
       if (sDepartment === "SALES") {
           sCostCenter = "1000";
       } else if (sDepartment === "HR") {
           sCostCenter = "2000";
       }

       // Set the cost center field
       this.getView().byId("costCenterInput").setValue(sCostCenter);
   }

3. Bind the Event
– In the view (PurchaseReq.view.xml), add the event handler:

<Select change="onDepartmentChange" items="{path: '/Departments'}" />

Pro Tip: Use SAP Fiori Tools in VS Code to debug and test extensions before deployment.

Creating Custom Buttons & Actions

Standard Fiori apps may lack specific actions your business needs (e.g., “Approve All” in a workflow).

Example: Adding a “Bulk Approve” button to the Purchase Order app.

Implementation Steps:
1. Add the Button in the View

<Button text="Bulk Approve" press="onBulkApprove" />

2. Implement the Action in the Controller

onBulkApprove: function() {
       const oModel = this.getView().getModel();
       const aSelectedItems = this.byId("table").getSelectedItems();

       aSelectedItems.forEach(function(oItem) {
           const sPath = oItem.getBindingContext().getPath();
           oModel.setProperty(sPath + "/ApprovalStatus", "APPROVED");
       });

       oModel.submitChanges();
   }

3. Add Authorization Checks
– Ensure only authorized users can see the button by adding a visibility condition:

<Button text="Bulk Approve" press="onBulkApprove"
             visible="{= ${/UserRole} === 'MANAGER' }" />

Best Practice: Always test custom actions in a sandbox environment before deploying to production.

Building Custom Fiori Apps from Scratch

When standard Fiori apps don’t meet your needs, building a custom app may be the best solution. SAP provides tools like SAP Fiori Elements and SAP Business Application Studio to streamline development.

Choosing Between SAP Fiori Elements & Freestyle Apps

Example Use Cases:

• Fiori Elements: A Customer Master Data app with a list view and detail page.
• Freestyle SAPUI5: A Custom Dashboard for real-time production monitoring.

Developing a Custom Fiori App with SAP Fiori Elements

Step-by-Step Guide (List Report App):
1. Set Up the Project
– Open SAP Business Application Studio.
– Create a new project using the Fiori Elements List Report template.

2. Define the OData Service
– Connect to an existing OData service (e.g., Z_CUSTOMER_SRV).
– Configure the metadata.xml to define entities and annotations.

3. Customize the UI with Annotations
– Use CDS annotations to control the app’s behavior:

annotate Z_CUSTOMER with @(
         UI: {
             LineItem: [
                 { Value: CustomerID, Label: 'ID' },
                 { Value: CustomerName, Label: 'Name' }
             ],
             SelectionFields: [CustomerID, Country]
         }
     );

– Deploy the annotations to the OData service.

4. Test & Deploy
– Preview the app in the Fiori Sandbox.
– Deploy to the Fiori launchpad via Transaction /UI2/FLPD_CUST.

Pro Tip: Use SAP Fiori Tools to generate annotations automatically, reducing manual coding.

Integrating Custom Apps with SAP Backend Systems

Custom Fiori apps must seamlessly integrate with SAP backend systems (e.g., S/4HANA, ECC).

Key Integration Methods:
1. OData Services
– Expose backend data via SAP Gateway (Transaction SEGW).
– Use CDS Views in S/4HANA for optimized data access.

2. SAP Cloud Platform Integration (CPI)
– For hybrid scenarios (e.g., connecting Fiori to non-SAP systems like Salesforce).

3. SAP API Management
– Secure and monitor API calls between Fiori and backend systems.

Example: A custom Employee Onboarding app integrates with:

• S/4HANA (for payroll data)
• SuccessFactors (for HR processes)
• Microsoft Teams (for notifications)

Best Practice: Use SAP’s API Business Hub to discover pre-built integrations before developing custom solutions.

Optimizing Fiori Apps for Performance & User Experience

Customizations can sometimes slow down Fiori apps or create a cluttered UI. Optimizing performance and UX ensures high adoption rates.

Improving App Performance

Slow Fiori apps frustrate users and reduce productivity. Here’s how to optimize:

Example: A Sales Dashboard app loads slowly because it fetches all customer data. Optimize by:

• Adding $filter=Region eq 'EMEA' to the OData call.
• Using $select=CustomerID,Name,Revenue to reduce payload size.

Enhancing Mobile Responsiveness

Many users access Fiori apps on mobile devices, so responsive design is critical.

Best Practices:
1. Use SAPUI5 Responsive Controls
– Replace sap.m.Table with sap.m.List for better mobile scrolling.
– Use sap.m.FlexBox for dynamic layouts.

2. Test on Multiple Devices
– Use SAP Fiori Client for mobile testing.
– Simulate different screen sizes in Chrome DevTools.

3. Optimize Touch Targets
– Ensure buttons are at least 48×48 pixels for touch.
– Avoid hover-dependent interactions (mobile has no hover).

Example: A Field Service App should:

• Use a bottom navigation bar for easy access.
• Replace dropdowns with radio buttons for better touch input.

Implementing Accessibility Best Practices

Fiori apps must be accessible to users with disabilities (e.g., screen readers, keyboard navigation).

Key Accessibility Fixes:

Example: A Leave Request App should:

• Allow keyboard-only navigation (no mouse dependency).
• Provide text alternatives for icons (e.g., "Submit" instead of just a checkmark).

Pro Tip: Use SAP’s Accessibility Checker in SAP Web IDE to identify issues.

Deploying & Maintaining Custom Fiori Apps

Customizations don’t end at development—deployment, testing, and maintenance are equally critical.

Testing Custom Fiori Apps

Thorough testing prevents bugs and performance issues in production.

Testing Checklist:

Example: Before deploying a custom Inventory App, test:

• OData calls (Postman) to ensure correct data retrieval.
• UI responsiveness (Chrome DevTools) on different devices.
• User workflows (UAT with warehouse staff).

Deploying Customizations to Production

Deploying Fiori customizations requires careful planning to avoid disruptions.

Deployment Steps:
1. Transport Customizations
– Use SAP Transport Management System (TMS) to move changes from development → quality → production.
– Ensure OData services, UI5 apps, and launchpad changes are included in the transport.

2. Update the Fiori Launchpad
– Use Transaction /UI2/FLPD_CUST to assign custom apps to catalogs/groups.
– Clear the Fiori cache (/UI2/INVALIDATE_CLIENT_CACHE) after deployment.

3. Monitor Post-Deployment
– Check SAP Fiori Monitoring (/n/UI2/FIORI_MONITOR) for errors.
– Use SAP Solution Manager for long-term app health tracking.

Pro Tip: Deploy during low-usage periods to minimize impact on users.

Maintaining & Upgrading Custom Fiori Apps

SAP frequently releases Fiori updates, which can break customizations if not managed properly.

Maintenance Best Practices:
1. Document All Customizations
– Maintain a customization log (e.g., Confluence, SharePoint) with:
– Modified apps and fields
– OData service extensions
– Transport requests

2. Test After SAP Updates
– Before applying SAP S/4HANA or Fiori upgrades, test custom apps in a sandbox.
– Use SAP’s Upgrade Impact Analysis to identify potential conflicts.

3. Leverage SAP Support
– For complex issues, open a SAP Incident with details of your customizations.
– Use SAP Notes to find fixes for known issues.

Example: After an S/4HANA 2023 upgrade, a custom Purchase Requisition app stops working. Steps to resolve:

1. Check SAP Note 3214567 for known issues.
2. Test the app in the sandbox and reapply customizations if needed.
3. Update the OData service to align with new backend changes.

Final Thoughts

Customizing SAP Fiori apps empowers businesses to align SAP with their unique processes, improving efficiency and user satisfaction. Whether you’re extending standard apps, building custom solutions, or optimizing performance, the key is to start small, test thoroughly, and document everything.

By following the strategies in this guide—from personalization to full-scale app development—you can ensure your Fiori implementation delivers maximum value to your organization.