UX Extension: Part 4-UX Extension

In This Part

This is the final part. We are going to import Fiori app from the back-end, enhance, and publish it to Launchpad.

Import Fiori App from Back-end to SCP

Import Application from ABAP Back-end

  1. Open Web IDE
  2. Go to File → Import → Application from SAPUI5 ABAP Repository
  3. Select the proper system and search with prod
  4. Select application EPMRA_PRODMAN and rename target folder to manageproducts
  5. Open Workspace → manageproducts → neo-app.json and look at the destination s4h-onpremise-http that is used in the extension app.

Test Running the App

  1. Run the app by clicking at manageproducts and click the green run icon.
  2. On the popup, click Open Run Configuration.
  3. Click + button and select SAP Fiori Component on Sandbox.
  4. Select /Component.js in Run Application File Name
  5. Keep all settings defined in run configuration Run Component.js unchanged. Click Save and Run
  6. Within the application preview of Web IDE you see that the imported application does not yet display image resources to be retrieved from the SAP S/4HANA back-end system.
  7. In the file neo-app.json, make the following changes:


"path": "/sap/opu/odata",
"target": {
"type": "destination",
"name": "s4h-onpremise-http",
"entryPath": "/sap/opu/odata"
"description": "S/4HANA HTTP API"


"path": "/sap",
"target": {
"type": "destination",
"name": "s4h-onpremise-http",
"entryPath": "/sap"
"description": "S/4HANA HTTP API"

Refresh the app and you should now see the images. Note that you cannot filter, sort, and group by Average Rating now but we will make it possible in the next step.

Note: The so-called SAP Fiori Reference Apps Shop and Manage Products used in this tutorial are sample applications for learning purposes. They do not access real product master data from the S/4HANA backend but are connected to the Enterprise Procurement Model.

Implement Custom UI Extension

  1. Download the file rating-extension.zip
  2. Right click at manageproducts and select Import → From File System
  3. Choose the downloaded zip file
  4. Change Import To and Select Folder /manageproducts
  5. Confirm to overwrite the files
  6. Run the app and now you can filter, sort, and group by Average Rating

Deploy the App to SCP and Fiori Lauchpad

Deploy the Application

  1. Right click at manageproducts and select Project Settings
  2. Select Project Types and check SAPUI5 Client Build and Save
  3. Right click at manageproducts and select Deploy → Deploy to SAP HANA Cloud Platform
  4. Keep default settings and click Deploy.

Register to Fiori Launchpad

  1. Click Register to SAP Fiori launchpad.
  2. Click Next, enter Title and Subtitle, and select icon as you want. Then click Next.
  3. Select Site Procurement Launchpad, Catalog Procurement Applications, Group Product Management
  4. Click Next and Finish
  5. You should see “Successfully Registered”. Click the link Open SAP Fiori launchpad.
  6. Open your app and test!

Continue Reading

Read More

Like what you read? Give Chairat Onyaem a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.