Skip to Content
Technical Articles
Author's profile photo SaiNithesh Gajula

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

Hello Everyone

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

 

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

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

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

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

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

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

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

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

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

Step 13: Open the project in the New Workspace.

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

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

Step 16: Select start as shown below

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

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.

 

Hope you guys like this blog post.

Feel free to comment

 

Regards,

Sai Nithesh Gajula

Assigned Tags

      10 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Nanda Kishore Kishore
      Nanda Kishore Kishore

      Keep going Sai....Great work

      Author's profile photo SaiNithesh Gajula
      SaiNithesh Gajula
      Blog Post Author

      Thanks Nanda 🙂

      Author's profile photo Krishna vs
      Krishna vs

      Hi Sai,

      I am getting below response when i try to check if destination is working.

      Connection to "RAPM" established. Response returned: "302: Redirect"

       

      Also cannot see the services listed in ABAP on Cloud. It says services unavailable.

      Can you please help.

       

      Thanks,

      Subba

       

      Author's profile photo SaiNithesh Gajula
      SaiNithesh Gajula
      Blog Post Author

      Hi Krishna,

      Connection to “RAPM” established. Response returned: “302: Redirect” is an expected message in the destination. Can you please elaborate on the "Also cannot see the services listed in ABAP on Cloud. It says services unavailable." with screenshot.

      Regards,
      Sai Nithesh Gajula

      Author's profile photo Krishna vs
      Krishna vs

      Hi Sai,

      Here's the attachmentServices%20unavailable. I do now see any services listed in dropdown.Not sure what i am missing.

      Services unavailable

       

      Thanks,

      Subba

      Author's profile photo SaiNithesh Gajula
      SaiNithesh Gajula
      Blog Post Author

      Hi Subba,

      Seems like there some issue in accessing destination. Make sure you have added all the additional properties in the destination.

       

      Regards,

      Sai Nithesh Gajula

      Author's profile photo Orhan Er
      Orhan Er

      Hello SaiNithesh,

      First of all, thank you for your writing. However, I think there are very important problems in reaching RAP with SAPui5. So the situation is not as easy as you say.
      Do you have an answer to the following question?

      Access RAP CDS behavior implementations (backend), via the Business App.Studio-UI5 (Frontend) button

       

      Thank you

      Orhan

      Author's profile photo Orhan Er
      Orhan Er

      Hello SaiNithesh,

      The main purpose of accessing RAP via SAPUI5 should be to access and manage CDS Behavior Implementation Classes in RAP, right?
      But unfortunately this cannot be done, or I could not find a way. Do you know about this?

      Access RAP CDS behavior implementations (backend), via the Business App.Studio-UI5 (Frontend) button

      Thank you

      Orhan

      Author's profile photo SaiNithesh Gajula
      SaiNithesh Gajula
      Blog Post Author

      Hi Orhan Er,

      I have gone through your query in the link and understand you want to create custom UI5 app and use the RAP service and add any any action button of your choice. To perform the CRUD, you have to add OData calls manually from UI5 app to perform any create, update and delete action.

      Also there is alternative, you can make use of SAP Flexible Programming Model where you can customize the Fiori Elements Templates easily

      Regards,

      Sai Nithesh

       

      Author's profile photo Orhan Er
      Orhan Er

      Hello Sai,

      I can access RAP-oData from an empty UI5 project. No problem with that. However, I don't know how to reach the annotation (action-button) in this RAP-oData. Because when I press the button on the UI, I want this button to be able to reach the "Behavior Implementation Class" that I created together with the CDs, as in fiori. But I can't find how to do this? I have also read the SAP Flexible Programming Model topic, but I do not think it is relevant to my position.
      If you know this, could you suggest me how to do it please?
      Thank you very much in advance.

      Kind regards

      Orhan