Enhancing a Standard SAP Fiori App: A Technical Deep Dive

Enhancing a Standard SAP Fiori App: A Technical Deep Dive

This guide provides a comprehensive walkthrough of the technical steps involved in enhancing an existing SAP standard Fiori app with new features.

Table of Contents

1. Analyze the Standard App
   • Identify App Details
   • Analyze the App in SAP Gateway
2. Enhance the Backend (if needed)
   • Extend CDS View
   • Enhance OData Service
3. Frontend Enhancement
   • Extend the Fiori App
   • Extend UI Elements
   • Add Annotations for Enhanced UI
4. Test the App
5. Deploy and Configure
   • Deploy the Extended App
   • Update Launchpad Configuration
6. Authorization Adjustments
7. Final Testing and Validation

1. Analyze the Standard App

a. Identify App Details

• Locate the App: Open the SAP Fiori Launchpad and navigate to the standard app you intend to enhance.
• Access App Details: Click on "User Settings" -> "About" to view the app's details.
• Record Key Information: Note the following essential information:
  • App ID
  • OData Service
  • Component Name
  • Semantic Object

b. Analyze the App in SAP Gateway

• Open SAP Gateway: Use transaction code /IWFND/MAINT_SERVICE to access the SAP Gateway service builder.
• Locate the OData Service: Find the OData service associated with the app.
• Examine Metadata: Analyze the service's metadata to understand the structure of the data being used by the app. This will help you identify potential extension points.

2. Enhance the Backend (if needed)

a. Extend CDS View

• Open ABAP Development Tools (ADT): Use ADT in Eclipse to access and modify the CDS view.
• Create an Extension: Create a CDS view extension to add new fields or associations to the existing CDS view. This allows you to incorporate additional data into the app without modifying the original view.

@EndUserText.label: 'Extension for ZPO_Lines'  extend view ZPO_Lines with ZPO_Lines_Extension {      ekpo.lgort  // Storage Location  }  

• Activate the Extension: Activate the CDS view extension to make the changes effective.

b. Enhance OData Service

• Open Service Builder: Open the OData service project in SEGW (SAP Gateway Service Builder).
• Add New Fields: Include the new fields from the CDS view extension to the entity sets of the OData service.
• Regenerate and Activate: Regenerate the runtime artifacts for the service and activate it to reflect the changes.

3. Frontend Enhancement

a. Extend the Fiori App

• Choose Development Environment: Use either SAP Business Application Studio (BAS) or SAP Web IDE.
• Create Extension Project: Create a new UI5 extension project.
  • In Web IDE, right-click and select "New" -> "Extension Project."
  • Import the standard Fiori app using its component name.

b. Extend UI Elements

• Extend Views: Extend the relevant views (e.g., List Report, Object Page) to add new UI controls such as fields, buttons, or charts.

<Table id="POItems" items="{path: 'PO>/Items'}">      <columns>          <Column>              <Text text="Storage Location"/>          </Column>      </columns>      <items>          <ColumnListItem>              <cells>                  <Text text="{PO>lgort}"/>              </cells>          </ColumnListItem>      </items>  </Table>  

• Modify Controllers: Extend the controllers to add custom logic for new features, such as navigation, calculations, or event handling.

onPressCustomButton: function() {      sap.m.MessageToast.show("Custom feature triggered!");  }  

c. Add Annotations for Enhanced UI

• Create Local Annotations: Use local annotations in your extension project to modify or add UI features like charts, fields, or filters.

<Annotations Target="ZPO_Lines">      <Annotation Term="UI.Chart">          <Record>              <PropertyValue Property="Title" String="PO Quantity by Material"/>              <PropertyValue Property="ChartType" EnumMember="UI.ChartType.Line"/>          </Record>      </Annotation>  </Annotations>  

4. Test the App

• Local Testing: Run the enhanced app locally in Web IDE/BAS to test the new features and ensure everything is functioning as expected.

5. Deploy and Configure

a. Deploy the Extended App

• Deploy to ABAP Repository: Deploy the extended app from your development environment (Web IDE/BAS) to the ABAP repository.
• Create Transport Request: Assign the deployed app to a transport request to move it to other systems (e.g., quality assurance, production).

b. Update Launchpad Configuration

• Open Launchpad Designer: Access the Fiori Launchpad Designer.
• Configure Tile: Create a new tile or update the existing tile for the app to point to the newly deployed extended app.

6. Authorization Adjustments

• Update Roles: If you have added new fields or functionalities that require authorization checks, update the relevant roles in PFCG (Role Maintenance) to include the necessary authorizations.

7. Final Testing and Validation

• End-to-End Testing: Conduct thorough end-to-end testing in a quality system to ensure all functionalities, including the new features, are working correctly in an integrated environment.
• User Acceptance Testing (UAT): Involve business users in UAT to validate the new features and gather feedback before deploying the enhanced app to the production environment.

This detailed guide provides a comprehensive overview of the technical steps involved in enhancing a standard SAP Fiori app. Remember to adapt the specific steps and configurations to your particular app and desired enhancements. Utilize the extensive resources available in the SAPUI5 and SAP Fiori documentation for further guidance.