Skip to Content

Add API Business Hub API to a UI5 Application

Previous

Add API Business Hub API to a UI5 Application

By Meredith Hassett

Incorporate a SAP API into your UI5 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 set of tiles. Each User will have a tile that displays relevant information about that person.

Details

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 AJAX REST call available in 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: Create a basic UI5 application

In your Web IDE, create a new application from template by selecting File > New > Project from Template.

file path to create a new application from template

Select the SAPUI5 Application template. Click Next.

template to select on 1st wizard screen

Name the application. You should use a descriptive name.

| Project Name | APIHubTutorial |

You can leave the namespace blank to use the default one. Click Next.

details to enter on 2nd wizard screen

If you want, go ahead and rename the initial view.

| View Name | Main |

Leave the View Type as XML. Click Finish.

details to enter on the 3rd wizard screen

Open the initial controller by selecting APIHubTutorial > webapp > controller > Main.controller.js and double clicking the file name.

file path to find the controller files

Add an onInit function to the controller and SAVE your changes.

onInit: function() {

}
updated main controller file with init code
Please log in to access this content.
Step 2: Get Javascript pre-generated code

In the API Business Hub, click APIs and on the Discover page, go to All. Search for the Success Factors from the Discover APIs page. Find the SAP Success Factors API package and select it.

location of API packages in API Business Hub

Once on the API package documentation, select Artifacts to see all the APIs available. Find the User Information API in the listing. Select the API to open the documentation.

Location of User Information API

On the documentation, select Resource to find the methods. Find the GET /User method and click the Generate Code link.

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

Pick the JavaScript tab and then click the Copy to Clipboard button.

Javascript pre-generated code for API call
Please log in to access this content.
Step 3: Use the API in your application

Back in your Web IDE, in the controller file, add the copied code from the API Business Hub to your onInit function.

updated controller with pre-generated API call code

Make sure to update the <API_KEY> to your Application Key from the API Business Hub. It is found at the top of the API Documentation page by clicking the Key icon.

Comment out the xhr.withCredentials line. You can a single line comment by adding a double slash // to the beginning of a line. To add a comment block (multiple lines), use /* */ around the code to remove.

commented out line of code in controller

SAVE your changes.

Please log in to access this content.
Step 4: Run your application

Run your application by right clicking on your project name and selecting Run > Run as > Web Application.

path to run your application

You should see a blank application with a title of Title. The pre-generated put the results of the API in the developer console. To find the results, take a look at the console. To get there, in your browser menu, go to View > Developer Tools > JavaScript Console.

The path to get to the developer tools might be slightly different on your computer based on your browser and operating system.

path to find the developer tools in the browser

If you API call was successful, you should see the JSON in your JavaScript console.

image of successful API result
Please log in to access this content.
Step 5: Add query parameters in the controller

Back in your controller, add in your query parameters to the URL so that the results only return the top 5 results and just the User’s first and last name and job title. Remember to URL encode your parameters.

+
"?%24top=5&%24select=firstName%2ClastName%2CjobTitle"
update get request URL in controller

SAVE your changes and RUN your application. Looking in the console, you should only see 5 results with a much smaller data set for each result.

updated results in the Javascript console
Please log in to access this content.
Step 6: Display your results in the view

Open up your main view. It can be found in the view folder under the webapp folder.

location of view files in project folder

The results from the API call being displayed in the console is not very helpful to the end user. You need to create a holder in the main view file to display the results. Add a TileContainer with a StandardTile in between the <content> tags.

<TileContainer
  id="userTiles">
  <StandardTile
    title="First Last"
    info="Job Title"
    icon="sap-icon://person-placeholder" />
</TileContainer>
view with added tile container

SAVE your changes and RUN your application. A single tile should appear on the screen.

application with single, hard-coded tile

Back in the view, update your title to use results model data instead of hard coded values. Set the title to be the first name and last name of the user and the info to be the user’s job title. Update the <StandardTile> definition. Leave the placeholder as the icon.

<StandardTile
  title="{results>firstName} {results>lastName}"
  info="{results>jobTitle}"
  icon="sap-icon://person-placeholder" />

To have a tile appear for each user in the results model data, you need to define the aggregation for the <TileContainer>. Set the aggregation property tiles to be the "{results>/data}".

<TileContainer
  id="userTiles"
  tiles="{results>/data}">

The updated code should look like this.

updated view code with model binding defined

SAVE your changes.

Please log in to access this content.
Step 7: Set your data model

Back in your main controller file, you will need to define the model used in the view. You will need to add the JSONModel library to your controller. In the define at the top of the controller, add the JSONModel library by adding "sap/ui/model/json/JSONModel". Also, define the JSONModel in the controller function.

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/ui/model/json/JSONModel"
], function(Controller, JSONModel)

In onInit function, you will need to create a new JSONModel to house your results model data. After the definition of the data variable, add a new variable called userResults. Give it one property called data.

var userResults = new JSONModel({"data": {}});

Additionally, you will need to save the current version of this so that you can access the view associated with controller in your API call response. To say this current reference, define a new variable called self and set it to this.

var self = this;

To bind the userResults JSONModel to the view to use it as the results model in the view, you need to set the model for the view and name it results.

self.getView().setModel(userResults, "results");
updated controller code to initialize variables for model

Once data is returned from the API call, you can bind it to the results model. In the xhr.addEventListener function, you can process the data and set it to the model. The response from the API is coming back as text, so you will need to parse it to JSON. To do that, use the JSON.parse() method. As you saw in the console previous, the actual data you would like to display is inside the results array in the response. To get to that array, you will need to index out the d property first.

var jsonResults = JSON.parse(this.response).d.results;

Finally, set the parsed response to be the data property in the results model by using the setProperty method. This is where the preservation of this is important as it has changed since you entered the listener function. Using self allows you access to the original controller and its view.

self.getView().getModel("results").setProperty("/data", jsonResults);
updated listener function code to set data property

SAVE your changes.

updated controller code
Please log in to access this content.
Step 8: Run your application

RUN your application. You should now see 5 tiles with the name of the first 5 users and their job titles. As you change the query parameters in the URL, you would be able to see more users or adjust the details displayed on the title. For example, if a user profile picture was an available field, you could additionally select that field and replace the hard-coded icon with that user’s picture. You are just getting started with the SAP API Business Hub. Stayed tuned for more of it’s cool features!

final running UI5 application
Please log in to access this content.

Next Steps

Updated 06/27/2017

Time to Complete

20 Min

Beginner

Tags

Prerequisites

Next
Back to top