SuccessFactors: Extensions with SAPUI5 and the correct usage of SAP CP Destination Services

Overview

When developping SAPUI5 applications, which retrieve data from SuccessFactors instances it comes to the point when you have to read data from your SF instance.

In this blog I want to highlight the easy and comfortable use of SAP Cloud Platform Destination Services to read data for your web application, e.g. when developping extensions for SuccessFactors.

Scenario

Reading data from SuccessFactors can be achieved by two ways: SFAPI (WSDL-based SOAP webservice) or via OData API which is highly preferrable and the only way explained in this blog.

When reading data within the SAPUI5 application you have to decide to AJAX the data, work with an callback, set XHR headers etc. giving all kind of information to the XHR and at the end: No 'Access-Control-Allow-Origin' header is present...

Goal

This blog should provide an easy way to integrate third party SAP systems (via OData) or APIs from the SAP API Business Hub into your SAPUI5 application.

Realization

SAP Cloud Platform –> Connectivity -> Destinations -> New

Name: sap_hcmcloud_core_odata, 
Type: HTTP
URL:  https://api12preview.sapsf.eu <-- or acc. to your Endpoint: KBA 2215682
Auth: Internet, Basic Authentication
  Your User (Username@Company), 
  Your Password
Properties  
  WebIDEEnabled = true
  WebIDESystem = SFSF
  WebIDEUsage = odata_gen

Open SAP Web IDE Full-Stack -> Create a new SAPUI5 from a blank template

Adapt neo-app.json and add a route:

{ "path": "/sf-dest",
    "target": {
        "type": "destination",
        "name": "sap_hcmcloud_core_odata"
    },
    "description": "SFSF Connection"
}

Fill a JSON Model in your controller…

sap.ui.define([
	"sap/ui/core/mvc/Controller"
], function (Controller) {
	"use strict";

	return Controller.extend("yourNamespace.yourAppName.controller.Main", {
		onInit: function () {
			var oModel = new sap.ui.model.json.JSONModel();
			var sHeaders = {
				"Content-Type": "application/json",
				"Accept": "application/json",
			};

			//sending request
			oModel.loadData("/sf-dest/odata/v2/User('userID')", null, true, "GET", null, false, sHeaders);
			console.log(oModel);
			
		}
	});
});

Example for a POST request:

var oData = {
"name" : "test"
};

oModel.loadData("/sf-dest/odata/v2/YourEntity", oData, true, "POST", null, false, sHeaders);

Also a good feature instead of oModel.loadData is to use SAP Web IDE Full Stack Template for Worklists and/or Master/Detail-Lists, just reference on the Destination:

Security

Please create all your destinations with OAuth SAML Bearer using the NEO Command Line HCM Cloud Tools: CLI Installation | CLI Console Statements

The approach above should demonstrate the usage of SAP CP Destination Services.

It could also be applies to SAP ML APIs, with the same security aspects, rather use OAuth than Basic Authentication.

Conclusion

This way you avoid a lot of CORS / Cross-Origin-Problems.

This also applies to SAP API Business Hub ML APIs – an easy way to integrate APIs/OData Webservices.

Cheers

Chris