Skip to Content
Author's profile photo Archana Shukla

Part 3: Calling external service in Task UI of SAP Cloud Platform Workflow

We are now in final and concluding part of this blog series. While most of the use cases, I receive queries on, are covered in the previous part of the blogs but I wanted to cover yet another aspect of calling external service from custom UI that is configured as the user-task in workflow.

When you use external service in your custom UI, it will work when the application is opened in a browser in standalone mode; but as soon as you integrate the UI with user-task in workflow, it would stop working. The reason is that the custom UI when shown as task in My Inbox, get routed via an internal destination named html5apps and so all the external call must include this destination in their relative path to be able to make the right call.

This can be achieved in 3 simple steps.

In this example, I will show you how to call SAP Cloud Platform Identity Authentication service implementation of the System for Cross-domain Identity Management (SCIM) REST API for User search, in your HTML5 application that is used as user-task in workflow.

Prerequisite:
You must have all desired authorisations to access the IDP. For more information refer the official guide of SAP Platform Identity Authentication Service API

  1. In your SAP Cloud Platform tenant, create a destination of the system that exposes the service. Note: If you want to propagate the user from My Inbox to your REST service, select App2App SSO as the authentication type to use.
  2. In your HTML5 application that is used as the task UI in workflow, define an additional route in the neo-app.json file. This destination targets the path pointing to your service, in the routes array:
    {
          "path": "/SCI",
          "target": {
            "type": "destination",
            "name": "identity_service_scim",
            "entryPath": "/service/scim/Users"
          },
          "description": "SAP IDP Service"
    }
    ​

     

  3. In your custom task UI application, call your service with the following URL: /html5apps/<taskui_application_name>/<destination_name>/<relative_api_path>
    _callSCIMService: function() {
        $.ajax({
            url: "/html5apps/mywfapp/SCI/”,
            method: "GET",
            contentType: "application/scim+json",
            async: false,
            data: ""
        });
    }
    

    » where mywfapp is the SAPUI5 application project name

     

  4. Save and Deploy the HTML5 application to SAP Cloud Platform
  5. Now open the application and you will see that your external services are fetching or posting the data as required.

You can apply the same steps to call SAP Cloud Platform Business Rules REST APIs or SAP SuccessFactors OData APIs etc. in your workflow user-task directly. You can also refer to the blog series by Murali Shanmugham  where he explains this beautifully using self-registration scenario.

With this I complete the final part of the blog series covering all the information dimensions that you might need to include custom HTML5 application as user-task in workflow and various other overhauling aspects that your custom application might need in order to work correctly when used as Task UI. Example used were deliberately chosen to be simple so that I can communicate the objective clearly.

Hope all your queries get answered with this blog series. If not then I will be happy to help you!

Previous Related Blogs
Understanding Custom UI Integration with SAP Cloud Platform Workflow
Part 1A: Build your Custom HTML5 application in SAP WebIDE for Workflow
Part 1B: Using your Custom HTML5 application as User Task in Workflow
Part 1C: Working with Task APIs in your Custom HTML5 application
Part 2: Start Workflow from your HTML5 application

Assigned Tags

      17 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Shilpa .
      Shilpa .

      Hi Archana,

      The AJAX call with URL with prefix “html5apps” doesn’t work on Cloud Fiori LP tile and standalone. How do I define the URL If I have to call same application from Cloud Fiori LP tile and via Inbox? Do I need to maintain 2 URLs based on where the application is accessed from? Like:

      If(Inbox)
      
      $.ajax({
      
              url: "/html5apps/mywfapp/SCI/”,
      
              method: "GET",
      
              contentType: "application/scim+json",
      
              async: false,
      
              data: ""
      
          });
      
      Else
      
      $.ajax({
      
              url: /SCI”,
      
              method: "GET",
      
              contentType: "application/scim+json",
      
              async: false,
      
              data: ""
      
          });

       

      Thanks,

      Shilpa

      Author's profile photo Archana Shukla
      Archana Shukla
      Blog Post Author

      Hello Shilpa,

      Yes, you are right the relative URL wont work if you are not trying to open it via MyInbox. The same application wont work if you want to add a tile and open that application.

      For that, you have to use the normal destination based relative URL like "/bpmworkflowruntime/workflow-service/rest/v1/xsrf-token", in your application code. And then add the application as tile in FLP. You cannot use the same application for MyInbox and for custom application. You can read other blogs in the series that talk explicitly about custom application

      Author's profile photo Shilpa .
      Shilpa .

      Ok, Thanks Archana.

       

      Author's profile photo Former Member
      Former Member

      Hi Archana,

      When I was updating my Usertask UI, it can't be updated correctly in My Inbox even though I deployed again the project and republish my site in portal service. I have updated the codes of my Usertask UI in web ide actually, I don't know what should I do to update the UI in My Inbox correctly.

      When you feel free, could you please tell me the solution?

      Best regards,

      Joy Lee

      Author's profile photo Cesar Felce
      Cesar Felce

      Hi Archana Shukla  ,

      Awesome blog, but i'm trying to call an external OData Provisioning Service. I couldn't make it.

      I have been searching for a solution and i found this url: https://blogs.sap.com/2017/06/08/consume-sap-gateway-odata-service-in-sap-cloud-platform-workflow/ and in comment they say:

      "Hi Seshadri,

      We finally were able to make it work! We followed the documentations below:

      Configure Principal Propagation for Service Tasks

      Configure a Service Task Destination with OAuth2SAMLBearerAssertion for Principal Propagation

      Configure Service Task – Step 10"

      But i can't make it to work.

      Can you guide me how to properly call the OData Provisioning service.

      Kind regards,

      Cesar

      Author's profile photo Archana Shukla
      Archana Shukla
      Blog Post Author

      Yes ofcourse. Can you please drop me an email for the same

      Author's profile photo Cesar Felce
      Cesar Felce

      Hi Archana Shukla,

      I don't see you email in your Personal Data. My email is cesar.felce@inbergroup.com

       

      Thanks,

      César

       

      Author's profile photo Prasad Peketi
      Prasad Peketi

      Hi Archana,

       

      We are facing one issue which we would require your advise.

      1. We would like to call a oData service from SAP Cloud Workflow task once the user clicks on Approve button
      2. We have registered the service in oData provisioning instead of gateway system and trying to trigger post the data to ECC system through the service from oData provisioning.
      3. In this regard, We want to know is there any configuration to be done from anywhere to make the posting working from ECC.

      Errors we face:

      HTTP Status 500 - An internal application error occurred. Request: 1111 ******:flpnwc

      URL from Developer tools Network trace:https://flpnwc-**********.dispatcher.ap1.hana.ondemand.com/sap/fiori/bpmmyinbox/sap/opu/odata/Z******_SRV/$metadata?sap-language=EN

      Error response: HTTP Status 500 - An internal application error occurred.

       

      Appreciate your help in resolving this issue

      Thanks,

      Sankar

      Author's profile photo Lucas Frattini Lopez
      Lucas Frattini Lopez

      Hi Prasad,

       

      Did you solved it? I've the same error when I'm trying to call an oData from the User Task.

       

      Regards!

      Author's profile photo Ramon Lee
      Ramon Lee

      Hi Archana,

      I have the similar issue with SuccessFactors Extension SAPUI5 where ajax call is added with

      https://flpnwc-c6d698ada.dispatcher.ap1.hana.ondemand.com/sap/fiori/portalsfextsitetemplates/se_application_service/?module=se

      and resulted with http status code 404

       

      Author's profile photo Ramon Lee
      Ramon Lee

      Hi Gurus,

      The similar has been raised in here https://answers.sap.com/questions/12698134/successfactors-extensions-ajax-call-not-woorking-b.html

      Cheers,

      RL

      Author's profile photo Ramon Lee
      Ramon Lee

      This is the solution, you need to change the ajax call reflecting your project structure

      sap/fiori/schoolentitlements/

      Author's profile photo Jeremy Chabert
      Jeremy Chabert

      Hi Archana,

      I have read all this blog along with the previous parts but I'm still struggling to connect my external oData service .

      I also came across this post ,through my researches, where the developper got the same issue and succeed to solve it with your  and someone else's help.

      https://answers.sap.com/questions/12652598/no-items-shown-in-list-in-custom-user-task-ui-in-s.html?childToView=12659285#answer-12659285

      However, in my case, even with the "right prefix" of destination and all, the request to my oData service fails to succeed and returns a 404 error.

      Here's the structure of my app as shown in Chrome debugger

      And here's the call that is failing when opening the task from MyInbox

      and here's the definition of my destination in neo-app.json

      {
      			"path": "/sap/opu/odata",
      			"target": {
      				"type": "destination",
      				"name": <myDestinationName>,
      				"entryPath": "/sap/opu/odata"
      			},
      			"description": "Gateway to XXX service"
      		}

      Do you have any suggestions ?

      Regards,

      Jérémy

       

      Author's profile photo Yordan Yurukov
      Yordan Yurukov

      Hi Jérémy,

       

      In MyInbox we have the same route path defined and for some reason the routes might overlap even if they are defined in two different applications.

       

      I have spoken with the experts responsible for the routing. Please create an incident to EP-CPP-NEO-SFC component and they will troubleshoot this case.

      Best regards,
      Yordan

      Author's profile photo Jeremy Chabert
      Jeremy Chabert

      Thanks for you reply.

      I'll create an incident for this.

      Author's profile photo manisha sabale
      manisha sabale

      Hi Archana and Yordan,

      I am facing same routing issue while giving a call to SAP Odata service on premise from custom UI using service task.
      In my case i am trying to bind view properties to oData model properties in controller.js below is my code and error of oData undefined:
      Is my code alright? do you have any suggestions or work around to make this work?  I need some workround since my development is very urgent :(.
      I have also tried using Workflow Task UI but I am facing same issue as above.
      Does SAP has any workaround for routing issue to get this work using custom UI/workflow task UI?
      Any help would be appreciated.
      Thanks in advance.
      Manisha.
      Author's profile photo Francisco Jhonathan Rodriguez D
      Francisco Jhonathan Rodriguez D

      Did you solve that situation? I am facing the same issue