Monday 23 November 2020

Consume ABAP RESTful Application Programming Model (RAP) Service in SAP UI5 Application

In this blog will see how to consume RAPM (ABAP RESTful Application Programming Model) service in SAP UI5 App through SAP Business Application Studio (BAS).

Step 1: Required SAP Cloud Platform Trial account. Refer below link to create.

https://developers.sap.com/tutorials/hcp-create-trial-account.html

Step 2: Considering we have ABAP RESTful Application Programming Model (RAP) service developed in SAP Cloud Platform ABAP Environment. To create one you can follow OpenSAP course Building Apps with the ABAP RESTful Application Programming Model

Step 3: Create Destination for RAP

Name RAPM 
Type  HTTP
Description  ABAP Restful Service
URL  Enter the URL of the ABAP system that you copied from the <url> element in the service key 
ProxyType  Internet 
Authentication  OAuth2UserTokenExchange 
Client ID   Enter the content of the <clientID> element that you copied from the service key
Client Secret   Enter the content of the <clientsecret> element that you copied from the service key
Token Service URL   Enter <uaa-url>/oauth/token, where is the content of the element that you copied from the public key section of the service key https://xxxxx.authentication.eu10.hana.ondemand.com/oauth/token
Token Service URL Type   Choose Dedicated 

SAP ABAP Tutorial and Material, SAP ABAP Certification, SAP ABAP Guides, SAP ABAP Learning

SAP ABAP Tutorial and Material, SAP ABAP Certification, SAP ABAP Guides, SAP ABAP Learning

Step 4: Configure SAP Business Application Studio and create dev by following below links.

https://developers.sap.com/tutorials/appstudio-onboarding.html

https://developers.sap.com/tutorials/appstudio-devspace-fiori-create.html

SAP ABAP Tutorial and Material, SAP ABAP Certification, SAP ABAP Guides, SAP ABAP Learning

Step 5: Launch SAP Business Application Studio, use Ctrl+Shift+P to launch command palette and search for Yeoman Generator

SAP ABAP Tutorial and Material, SAP ABAP Certification, SAP ABAP Guides, SAP ABAP Learning

Step 6: Select SAP Fiori freestyle SAP UI5 application and click on “Next”.

SAP ABAP Tutorial and Material, SAP ABAP Certification, SAP ABAP Guides, SAP ABAP Learning

Step 7: Select SAP Fiori Worklist application and click on “Next”.

SAP ABAP Tutorial and Material, SAP ABAP Certification, SAP ABAP Guides, SAP ABAP Learning

Step 8: Choose Connect to an SAP System and click on “Next”.

SAP ABAP Tutorial and Material, SAP ABAP Certification, SAP ABAP Guides, SAP ABAP Learning

Step 9: Select RAPM (SCP), which is our destination name, and click on “Next”.

SAP ABAP Tutorial and Material, SAP ABAP Certification, SAP ABAP Guides, SAP ABAP Learning

Step 10: Select service ZUI_RAP_TRAVEL_O2_2143, which was developed in ABAP environment, and click on “Next”.

SAP ABAP Tutorial and Material, SAP ABAP Certification, SAP ABAP Guides, SAP ABAP Learning

Step 11: Select fields for the floorplan as mentioned below or anything of your choice, and click on “Next”.

SAP ABAP Tutorial and Material, SAP ABAP Certification, SAP ABAP Guides, SAP ABAP Learning

Step 12: Provide Project Attributes as shown below and click on “Finish”.

SAP ABAP Tutorial and Material, SAP ABAP Certification, SAP ABAP Guides, SAP ABAP Learning

Step 13: Open the project in the New Workspace.

SAP ABAP Tutorial and Material, SAP ABAP Certification, SAP ABAP Guides, SAP ABAP Learning

Step 14: We can see the project file in the explorer section as below

SAP ABAP Tutorial and Material, SAP ABAP Certification, SAP ABAP Guides, SAP ABAP Learning

Step 15: Right click on the webapp and we can see below popup. Choose Preview Application.

SAP ABAP Tutorial and Material, SAP ABAP Certification, SAP ABAP Guides, SAP ABAP Learning

Step 16: Select start as shown below

SAP ABAP Tutorial and Material, SAP ABAP Certification, SAP ABAP Guides, SAP ABAP Learning

SAP ABAP Tutorial and Material, SAP ABAP Certification, SAP ABAP Guides, SAP ABAP Learning

Step 17: Application will be launched in the New Tab as shown below and click on the Tile “ABAP Env UI5 APP”

SAP ABAP Tutorial and Material, SAP ABAP Certification, SAP ABAP Guides, SAP ABAP Learning

Step 18: Finally, we can see our application data loading from ABAP RESTful Application Programming Model (RAP) Service developed in ABAP Environment in SAP Cloud Platform.

SAP ABAP Tutorial and Material, SAP ABAP Certification, SAP ABAP Guides, SAP ABAP Learning

No comments:

Post a Comment