Step-by-Step Guide: Deploying Fiori Elements and Adding to Fiori Launchpad for Seamless Integration

Step-by-Step Guide: Deploying Fiori Elements and Adding to Fiori Launchpad for Seamless Integration


In the dynamic landscape of SAP development, deploying Fiori applications using the Reuse-Adapt-Repeat (RAP) methodology has become a cornerstone for creating responsive and efficient user experiences. In this blog post, we'll guide you through the process of deploying a Fiori Elements app and seamlessly integrating it into the Fiori Launchpad.

Steps to deploy SAP Fiori Elements (RAP) app

Step 1: Set the Stage

Begin by publishing your RAP-based Fiori Elements app in Eclipse. Once done, transition to SAP Business Application Studio (BAS) or Visual Studio Code (VSCode) for the subsequent steps.

Step 2: Create a Fiori Application Project

Initiate a new project using templates in SAP BAS or VSCode, selecting the SAP Fiori Application template.

Step 3: Choose List Report

Opt for the List Report template, setting the foundation for your Fiori Elements app.

Step 4: Configure Data Source

Connect your app to a system by choosing the appropriate SAP system and service binding name set in Eclipse.

Fiori Elements - Data Source Config

Step 5: Entity Selection

Specify the root or master entity for your List Report app and select any child entities for navigation.

Fiori Elements - Entity Selection

Step 6: Deployment Configuration

Add module details and check true for 'Configure deployment Settings' and 'Fiori Launchpad Settings', ensuring to include Fiori Launchpad details if needed. Add deployment configuration details where the SAPUI5 ABAP Repository is the name of BSP application that will be created and can be accessed from the T-code: SE80. Add Fiori Launchpad settings with a Semantic Object and action.

Fiori Elements - DeploymentFiori Elements - Launchpad Config

Step 7: Build and Deploy

Run the necessary commands in the terminal to build and deploy your Fiori Elements app.

npm run build : To build app

npm run deploy-config : To make sure the configuration details are entered correct

npm run deploy : To deploy app

Fiori Elements - Run Commands

Step 8: Troubleshooting Deployment

Handle potential deployment errors by checking package, transport request (TR), and app name details. For status code 400, the possible errors could be due to wrong package, TR or name of the app to deploy. When it throws error during deployment - 

  • If BSP app name doesn’t start with Y or Z
  • If package/TR entered in ui5-deploy.yaml is incorrect
  • If package is under software component other than HOME (related to cloud development) and deployed app is generating web dynpro components which are not supported for ABAP language version – “ABAP for Cloud Development”.

Fiori Elements - Deployment Errors

Step 9: Fiori Launchpad Integration

Once deployed without any errors, you can access the deployed app through SE80 and proceed to the Fiori Launchpad for further process.

Step 10: Fiori Launchpad Designer

Open the Launchpad Designer app in Fiori Launchpad, where you can set up tiles and target mappings. Select transport request from the right top cog icon and then from left portion of the app, create a new catalog or choose an existing custom catalog you have created before.

Step 11: Semantic Object Creation

Create a semantic object using SAP Help or use an existing one because you will need it for configuration of Tiles and Target mapping.

Step 12: Tile Creation

Build a tile using your custom semantic object, ensuring consistency with the target mapping.

Step 13: Target Mapping Configuration

Configure the target mapping in Fiori Launchpad Designer with the created semantic object. For the target mapping, you must remember to enter relative URL path taken you can get from t-code /IWFND/GW_CLIENT and the ID must be the same as you find in manifest.json file in SAP BAS or VSCode.

Fiori Elements - Target Mapping

Fiori Elements - Target mapping config

Fiori Elements - Manifest.json

Step 14: Catalog Assignment

Assign the custom catalog to a role from T-code: PFCG and assign that role to you using T-code: SU01.

Step 15: Enjoy the Results

Once these steps are completed, revel in the seamless integration of your Fiori Elements app within the Fiori Launchpad, offering an enhanced user experience and accessibility.

By following these steps meticulously, you pave the way for a smooth deployment process and a well-integrated Fiori application in your SAP environment. Let's delve into each step in detail to empower you in mastering the art of deploying Fiori Elements apps with RAP methodology.