Skip to Content

How to consume restful web services in sap ui5

Hello Developers,

How to consume open restful web services or soap services in SAP UI5? Please suggest in SAP Web IDE full stack with CRUD operation implementation.

For Example : https://jsonplaceholder.typicode.com/posts

Thanks and Regards

RK

Add comment
10|10000 characters needed characters exceeded

  • Follow
  • Get RSS Feed

7 Answers

  • Nov 04, 2018 at 05:18 PM

    Hello Ram,

    This blog was really helpful when we were trying to build something similar

    https://blogs.sap.com/2012/12/07/building-a-crud-application-with-sapui5-and-icf-restjson-service-part-3/

    Thanks,

    Piyush

    Add comment
    10|10000 characters needed characters exceeded

  • Nov 05, 2018 at 11:50 AM

    Hi Ram, SAPUI5/OpenUI5 is shipped with jQuery inside of it.

    You can easily use jQuery.ajax() inside your code to make RESTful HTTP call to your server endpoint. I would suggest you, if possible, to always use OData protocol because it has a native and well-made support with this framework.

    Add comment
    10|10000 characters needed characters exceeded

  • Nov 05, 2018 at 07:36 PM

    Hello Ram, how are you today ?

    Try follow these steps below:

    1. Add a destination on your SCP Cockpit:

    On your SCP account, navigates through to Destination > New destination, and add a new destination poiting to the https://jsonplaceholder.typicode.com (just the URI, with no resources at the ending). Just like below:

    The procedure of creating a destination for a URI prevents the expose of sensitive information needed for accessing a service, such as credentails, headers, and so on. For example, a certain API service needs BasicAuthentication to establish connection with a client. In this manner, a destination can hide sensitive data, and consequently prevent anyone to intercept easily.

    2. Update neo-app.json with the newly destination:

    Go to the neo-app.json of your project (most located on the root project), and update the segment routes with the following information (be aware with the right use of commas)

    ...{
      "path": "/jsonplaceholder",
      "target": {
        "type": "destination",
        "name": "jsonplaceholder"
      },
      "description": "JSON Placeholder"
    },... 

    The procedure above connects your application with the destination jsonplaceholder. In the general, services are most connected with some type of authentication (BasicAuth, oAuth, KeyStore ..), and as long we're using SCP to establish connection with the endpoint, all configuration will be mantained by the Destinations menu on your SCP.

    3. Create a JSON model, and create requets to the jsonplaceholder

    The simplest example below, creates a JSON model, and request id 1. The destination jsonplaceholder is used to differ the service among others used by the application. Take in mind that an application might be connected to N others destination.

    // creates a model and attach it to the view
    this.getView().setModel(new JSONModel(), "jsonplaceholder");
    // do a GET request this.getModel("jsonplaceholder").loadData( "/jsonplaceholder/posts/1" );
    // called when the request is complete this.getModel("jsonplaceholder").attachRequestCompleted( function(oData) { ... });

    Hope it worked.

    BR
    Arthur Silva


    Add comment
    10|10000 characters needed characters exceeded

    • Hi Arthur,

      Thanks for your response.

      I am getting error while connection test. I have created destination in the same manner shared by you.

      Failure Reason : Peer not authenticated

      Thanks and Regards

      RK

  • Nov 06, 2018 at 02:59 PM

    Hi Ram,

    The "peer not authenticated" is suppose to happen in the SCP cockpit, so no worries. I've analysed the message, and the connection is established successfully, there s some missing configuration on the SCP side. This won't prevent your application to create requests.


    BR
    Arthur Silva

    Add comment
    10|10000 characters needed characters exceeded

  • Nov 08, 2018 at 10:10 AM

    Hello ram,

    Try to implement the code in the oninit method of your controller. The request will be made during the view instantiation, and the result saved on model "jsonplaceholder".

    I've create an example for you https://jsfiddle.net/7wdv8pL1/

    BR
    Arthur Silva

    Add comment
    10|10000 characters needed characters exceeded

    • Hi Arthur Silva,

      I have created one work list application using north wind odata service. If I am running as webservice application I can see data but after integration with fiori launchpad .

      I am getting couldn't find application and failing with 404 status code. Please help how can I solve this issue.

      Error : \{ "requestUri": "/northwind/V2/Northwind/Northwind.svc/$metadata?sap-client=100&sap-language=EN", "statusCode": 404, "statusText": "Not found", "headers": [], "body": "2018 SAP SE, All rights reserved." }

      jquery-dbg.js:9203 Failed to load resource: the server responded with a status of 404 () + SAP Fiori launch pad

      Thanks and Regards

      Ram Krishna Mishra

      standalonne-application.png

  • Nov 14, 2018 at 12:24 PM

    Why are you using sap-client=100&sap-language=EN parameters in a third-party service call ? Have you define them in the Destination settings ? If so, remove and try it again.

    BR
    Arthur Silva

    Add comment
    10|10000 characters needed characters exceeded

  • Nov 14, 2018 at 01:41 PM

    Here a few points to check:

    • Remove parameter WebIDEAddiotionalData;
    • Change value of parameter WebIDESystem from Northwind to northwind (lower case).

    Refresh WebIDE after changes, and test it again.

    BR
    Arthur Silva

    Add comment
    10|10000 characters needed characters exceeded