Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
i834235
Product and Topic Expert
Product and Topic Expert

Overview


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 muralidaran.shanmugham2  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.

Note:- SAP Cloud Platform trial account is not suited for productive extension development. It should be only used only for learning purposes.

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 userid@SuccessFactorcompanyid.



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 i18n.properties 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.




Summary


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.

Part 3 : How to apply SuccessFactors header and footer to HTML5 extension app on SAP Cloud Platform

Reference Links:-


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

 
1 Comment