Step-by-Step Guide to Display System Details on SAP Fiori Launchpad Shell

Estimated read time 6 min read

Use Case:

In this blog, I’ll demonstrate how to display system details—such as the System ID and Client—or any custom text directly on the SAP Fiori Launchpad Shell.

This is achieved by creating a simple OData service in the backend and integrating it into a Shell Plugin using SAP Business Application Studio.

It’s a useful enhancement to clearly identify the system context on the launchpad.

Steps to Implement:

Create an OData service in SEGW TCode.Create a project in BAS and integrate OData service to your project.Modify only the Component.js and manifest.json files.Deploy the application.Create a Catalog and Target mapping.Go to SEGW TCode and click on Create Project button.

After that, provide the necessary details such as Project, Description, and Package. If saving as a Local Object, the Package field is not required.

After creating the project, the following folders will be generated within the project.

After that click on Generate Runtime Objects button.

Some classes and services will be created. Click the Continue button to proceed.

 

Some class will be generated in Runtime Artifacts folder.

Add the required properties in the Data Model folder.
To do this, right-click on the project and create an Entity Type.

Enter the Entity Type name, select ‘Create Related Entity Set,’ and click ‘Continue’.

Entity types is created in Data Model Folder.

Now double click on properties and Append SYSID and CLIENT in entity types.

In the Runtime Artifacts folder, right-click on DPC_EXT and select ‘Go to ABAP Workbench’.

 

In the Methods folder, expand the Inherited Methods folder. Right-click on the Get_EntitySet method and select ‘Redefine’ to override it.

Go to redefined method and activate it.

Paste the following code into your Entity Set and activate it.

The RSAPI_CTC_GET_SYSTEM_DETAILS function module, provided by SAP, retrieves the System ID and Logon Client.

Now register and activate the service.

Create a project in BAS and integrate OData service to your project.

Set the data source to ‘Connect to System.’ The systems added in the destination will be displayed here.

Here, I am selecting the S4 system.

Provide the service name and click on Next button.

Provide View Name and click on Next button.

Enter the Project Attributes such as Project Name, Application Title, and Namespace, then click the ‘Finish’ button.

In the manifest.json file, change the type to “component”.

Paste the following code inside the init function of the Component.js file and make the necessary changes based on your service.

 

Run the application in local by using npm run start command.

Output:

After deploying the file to your system, I deployed my application to an on-premises system.

In Open Integrated Terminal.

Provide the Command npm run deploy-config and provide necessary details.

npm run build.npm run deploy.

Now you can see your application with BSP name in SE80 Tcode.

Next, create a Catalog ID in the designer URL and set up target mapping for that catalog. No need of creation Tile for catalog.

The URL should be the SICF path of your deployed application.The ID should be the manifest ID.The Semantic Object should be Shell, and the Action should be Plugin.Assign roles to users.

Output on FLP:

Conclusion:

By following the steps outlined in this blog, you’ve successfully built and deployed a Shell Plugin that dynamically displays system-specific details like the System ID and Client on the Fiori Launchpad.

Thanks,

Venkata Rahul M.

 

​ Use Case:In this blog, I’ll demonstrate how to display system details—such as the System ID and Client—or any custom text directly on the SAP Fiori Launchpad Shell.This is achieved by creating a simple OData service in the backend and integrating it into a Shell Plugin using SAP Business Application Studio.It’s a useful enhancement to clearly identify the system context on the launchpad.Steps to Implement:Create an OData service in SEGW TCode.Create a project in BAS and integrate OData service to your project.Modify only the Component.js and manifest.json files.Deploy the application.Create a Catalog and Target mapping.Go to SEGW TCode and click on Create Project button.After that, provide the necessary details such as Project, Description, and Package. If saving as a Local Object, the Package field is not required.After creating the project, the following folders will be generated within the project.After that click on Generate Runtime Objects button.Some classes and services will be created. Click the Continue button to proceed. Some class will be generated in Runtime Artifacts folder.Add the required properties in the Data Model folder.To do this, right-click on the project and create an Entity Type.Enter the Entity Type name, select ‘Create Related Entity Set,’ and click ‘Continue’.Entity types is created in Data Model Folder.Now double click on properties and Append SYSID and CLIENT in entity types.In the Runtime Artifacts folder, right-click on DPC_EXT and select ‘Go to ABAP Workbench’. In the Methods folder, expand the Inherited Methods folder. Right-click on the Get_EntitySet method and select ‘Redefine’ to override it.Go to redefined method and activate it.Paste the following code into your Entity Set and activate it.The RSAPI_CTC_GET_SYSTEM_DETAILS function module, provided by SAP, retrieves the System ID and Logon Client.Now register and activate the service.Create a project in BAS and integrate OData service to your project.Set the data source to ‘Connect to System.’ The systems added in the destination will be displayed here.Here, I am selecting the S4 system.Provide the service name and click on Next button.Provide View Name and click on Next button.Enter the Project Attributes such as Project Name, Application Title, and Namespace, then click the ‘Finish’ button.In the manifest.json file, change the type to “component”.Paste the following code inside the init function of the Component.js file and make the necessary changes based on your service. Run the application in local by using npm run start command.Output:After deploying the file to your system, I deployed my application to an on-premises system.In Open Integrated Terminal.Provide the Command npm run deploy-config and provide necessary details.npm run build.npm run deploy.Now you can see your application with BSP name in SE80 Tcode.Next, create a Catalog ID in the designer URL and set up target mapping for that catalog. No need of creation Tile for catalog.The URL should be the SICF path of your deployed application.The ID should be the manifest ID.The Semantic Object should be Shell, and the Action should be Plugin.Assign roles to users.Output on FLP:Conclusion:By following the steps outlined in this blog, you’ve successfully built and deployed a Shell Plugin that dynamically displays system-specific details like the System ID and Client on the Fiori Launchpad.Thanks,Venkata Rahul M.   Read More Application Development and Automation Blog Posts articles 

#SAP

You May Also Like

More From Author