SAP BLOG Create HTML5 based SuccessFactors extension app on SAP Cloud Platform trial account – Part 2

SAP Blog

Kayıtlı Üye
22 Ara 2017
Tepki puanı

In this blog series, you will learn how to create extension application for SuccessFactors instance using SAP Cloud Platform trial account. The whole idea is showcase how you can develop extension application on SAP Cloud Platform trial account consuming OData API’s from SuccessFactors instance. These steps can be also tried on SAP Cloud Platform Productive account which is paired with SuccessFactors instance.

This blog series is in continuation of what my Colleague Murali Shanmugham has already written to create HTML5 based SuccessFactors extension application blog series . With focus on developing extension application on extension account paired with you company SuccessFactors instance.

If you plan to do all these steps, you would need to have access to a SAP Cloud Platform trial account and access to SuccessFactors instance with required permission to consume OData service.

Developing HTML5 based extension application on SAP Cloud Platform

  1. Logon onto your SAP Cloud Platform trial account .
  2. Navigate to Connectivity tab and select Destination, to define outbound connectivity to SuccessFactors instance to consume OData API’s.
  3. Click on New Destination option on the top.

OData API’s on SuccessFactors are protected by Basic and OAuth 2.0. Define authentication type as required for your scenario. In this example we are going to basic authentication type but OAuth 2.0 is recommended for authentication type.

4. Define destination parameters as shown below.

Note:- URL might differ depending on data center hosting your SuccessFactors instance. To find right OData end point URL for your SuccessFactors instance refer this link.

User id should be specified as [email protected]


if you want to use OAuth2SAMLBearerAssertion for authentication type then refer this blog, for detailed configuration steps to create OAuth client key in SuccessFactors instance.

Note:- For this blog, i have used basic authentication but it is always recommended to use OAuth2SAMLBearerAssertion for authentication for productive deployments.

5. Navigate to Service tab, search for WEB IDE and select SAP Web IDE.


6. Click on Go to Service link


7. Click on File-> New -> Project from Template


8. Choose SAP Fiori Master-Detail Application template and click on Next


Note:- At the time of writing this blog, SAPUI5 version supported for SuccessFactors extension is the maintenance version.

9. Provide a name to your project “sfsfextensionapps” and click on Next


10. On the Data Connection tab, select Service URL as a source for OData service, from the drop select the destination that defined in step 4) and specify Service URL as /odata/v2/User. Finally click on Next button.

User is OData API that we will be using to create sample HTML5 application


if you want learn more about SAP API Hub and specially explore SuccessFactors OData API’s refer this blog.

11. Fill out details as shown below for Application Settings, Data Binding – Object and Data Binding – Line Item sections. Finally click on Next or Finish button to complete the template wizard.

Basically, we are settings all the fields that needs to be displayed on master and details tabs of the template. On the left hand of the list display user details and users direct reports on the detail screen.


12. Sample extension App created can be seen under WEB IDE Work space

13. Let’s try to do unit testing from WEB IDE. Click on Index.html and click on green run button.

You should see output something similar what is shown in the below screen. Since the data in your SuccessFactors instance might be different.

14. Go ahead and change field labels as required in file under i18n folder and save the changes.

15. modify neo-app.json to include path to index.html file. since we are going to deploy this extension as standalone application.
add “welcomeFile”: “/webapp/index.html”, as 1st line after “{” and save the changes.

16. Let’s deploy extension application to SAP Cloud Platform trial account.

17. Open the active version of the application Once successfully deployed to SAP Cloud Platform trial account.

18.You should see output as shown in the below screen.
Select the record with direct reports which is indicated by totalteam size number.


In this blog you learned how to develop SuccessFactors UI5 extension application development on SAP Cloud Platform trial account by connecting to your company SuccessFactors instance which is good for learning and demo purposes. If you want learn more about UI5 extension application development for productive use cases that is using extension account then follow this blog series by Murali.

In the next blog i will show how to do extension application development using portal service template to apply SuccessFactors branding and theming.

Reference Links:-

Want to learn more about SuccessFactors extension development follow learning journey links.

Okumaya devam et...