Skip to Content

Call API Business Hub API from a SAPUI5 Application

test
0 %
Call API Business Hub API from a SAPUI5 Application
Details

Call API Business Hub API from a SAPUI5 Application

2020-02-06
Incorporate a SAP API into your SAPUI5 application using Web IDE.

You will learn

In this tutorial, you will build a basic UI5 application that uses data from the SAP Success Factors API, that you test in the SAP Business Hub, to populate a list. Each User will have a list item that displays relevant information about that person.

Prerequisites

It is important to note that in UI5, it is recommended to use an ODataModel with an OData service, which is what the Success Factors APIs provided in the API Business Hub are, as UI5 will optimize the data parsing for you. This tutorial uses the pre-generated SAPUI5 JSON model from the code snippets section of the API Business Hub. Using an ODataModel is the best practice for UI5 applications but it is not covered in this tutorial. You can find more information about ODataModels in the UI5 Demo Kit.

final output of the UI5 app that includes data from Success Factors
Step 1: Open the project wizard

Please double check that your subaccount lives in the eu10 region. If not, please follow this tutorial to create the project instead. Don’t forget the use the module name and name space mentioned here.

Select File –> New –> Project From Template

Activating the SAP Web IDE search pane
Log on to answer question
Step 2: Select a Cloud Foundry SAPUI5 project

Filter the tiles sapui5 and make sure the environment is set to Cloud Foundry. Select the tile called SAPUI5 Application, then click Next.

Leave the SAPUI5 Versions select box on SAPUI5 Innovation.

Activating the SAP Web IDE search pane
Log on to answer question
Step 3: Configure the UI module

Fill in the form as follows:

Module Name app
Name Space sapcp.cf.tutorial
Activating the SAP Web IDE search pane
Log on to answer question
Step 4: Create the project

Keep the default values and click Finish.

Activating the SAP Web IDE search pane
Log on to answer question
Step 5: Get the pre-generated SAPUI5 snippet

In the API Business Hub, search for the Success Factors from the Discover APIs page. Find the SAP Success Factors Foundation API package and select it.

location of API packages in API Business Hublocation of API packages in API Business Hub

Once on the API package documentation, find the User Management API in the listing. Select the API to open the documentation.

Location of User Information API

On the documentation, find the GET /User method and click the Code Snippet link.

how to find the API methods and get the pre-generated code

Pick the SAPUI5 tab and then copy the entire code up to the oModel.loadData call (we won’t need the rest).

JavaScript pre-generated code for API call
Paste the copied code snippet in the below text box.
×
Step 6: Call the API from your application

Back in your Web IDE, open the controller file mta_app/app/webapp/controller/View1.controller.js.

  1. Paste the copied code from the API Business Hub to your onInit function. This code will load the data from the API Business Hub in a JSON model.
  2. Add the following line after the code you pasted to use the created model in the view.

    this.getView().setModel(oModel, "results");
    
  3. Save your changes and compare the controller to this file:updated controller with pre-generated API call code

It is important to note that we just inserted and API key in the UI file, that is being server to all consumers. This is only okay for demo and tutorial scenarios, never ever insert API keys in production applications!

You’ll get a warning that hard-coded URL should not be used in JavaScript files (rule sap-no-hardcoded-url). As this is a tutorial, we can ignore it and disable the warning by adding the following comment in the respective line:

// eslint-disable-line sap-no-hardcoded-url

Log on to answer question
Step 7: Add a list
  1. Open the view file mta_app/app/webapp/view/View1.view.xml.
  2. Replace the existing <Page> element with the following snippet to change the title and include a list that is bound to the model.

    <Page id="page" title="Data from the SAP API Business Hub">
    	<content>
    		<List items="{results>/d/results}">
    			<StandardListItem title="{results>firstName} {results>lastName}" description="{results>email}"/>
    		</List>
    	</content>
    </Page>
    
  3. Save your changes and compare the controller to this file:updated view
Log on to answer question
Step 8: Run your application
  1. Click the green run icon to start your application.

    run UI5 application
  2. A new tab will open. Log on with your SAP user to see your running app.

    log in UI5 application
  3. You should now see a list with the name and email address of the users.

    final running UI5 application

Feel free to add filters to the URL that you specified in the controller to display only a subset of the users. You can also change the bound properties in the view of you rather want to display other attributes of the users. You are just getting started with the SAP API Business Hub.

Log on to answer question

Next Steps

Back to top