Add an External API call to your app (Slack)

Add an External API call to your app (Slack)

By Meredith Hassett

Call an external API and display the data in a table

Details

You will learn

In this tutorial, you will either create a new app or modify an existing app you have to add a table with the message history from one of your Slack channels. If you are using a different API, feel free to follow along and swap out the Slack specific data for the equivalent entry for your API.

Step 1: Create or open an application in SAP Web IDE

If you already have an app created that you want to add external API data to, feel free to use that app. Go to your Web IDE, and open that application’s folder. If you already have an application you want to use, go on to Step 2 in this tutorial.

If you need to create a new application for your external API, use the Project from Template feature in SAP Web IDE. In your SAP Web IDE, click File > New > Project from Template.

If you created a new application, your neo-app.json should match the image below.

SAVE your changes.

If you have not refreshed your SAP Web IDE since you added the new Slack destination to your SAP Cloud Platform trial account, please do so now. SAP Web IDE needs to be refreshed before being able to run your application with a new destination.

Open View1.controller.js or the controller corresponding to your main view.

You will need access to the JSONModel library, so you will need to add JSONModel to your define dependencies array.

, "sap/ui/model/json/JSONModel"

You will also need to add it as a parameter to your controller function.

, JSONModel

The declaration of your controller should look similar to the code below.

You will now create an onInit function for your controller. In this function, you will initialize your JSONModel and set it as a model available in your view. If your application’s controller for the main view already has an onInit function, simply add the 2 lines in the function to your onInit function.

Set your view to busy and set the current context of this to a variable so it can be used in your AJAX call. Before the call, this is in context of your controller. Once you make the AJAX call, this will refer to the AJAX functions and you will not be able to access your view or methods. By setting this to a variable, which is named self in this example, you will have access to your view and methods inside the AJAX call.

Replace YOUR_CHANNEL_ID and YOUR_TOKEN with the values from your Slack API. Visit the Slack API pages to get your Slack Team test token value and your Slack channel value. To get the channel value, select the channel you want to use on the test page, and copy the value that is populated into the channel box.

On the Slack Tester page, feel free to test the method with your credentials to see what the results look like from the API call. This will help in the next step of the tutorial.

As part of the URL for the call, you will add in your channel and token values using the preset variables. If you are working with another API, you may find that it does not accept a token parameter for OAuth. If this is the case, go to the Optional steps to see how to add an OAuth token in the header of an AJAX request.

You have done and failure functions defined as part of the AJAX call. If the AJAX call gets a positive response (a 200 status), the done function will be executed. Your done function sets a property to your messages model to bind the results from Slack to your JSONModel. The failure function toasts the error to help with debugging.

If your Slack team or channel used for the API call is new, there won’t be a whole lot of data in the channel history. Add some more messages to your Slack channel to see more data being pulled through to your SAPUI5 app!

Open your Developer Tools (F12) in the running app. Find the objects array for the Slack call in the Console tab. Copy one of the items from the Messages array into the below text box.

×

Optional

Step 9: Use headers for API Authentication

Different APIs have different ways of using OAuth tokens for Authentication. In the above tutorial for Slack, the token as added directly into the REST call using a token parameter. Not all APIs allow for this. For example, if you are using the Facebook API, they require the OAuth token to be part of the header for the request.

To add a header to your AJAX, remove the token parameter from the URL, and add a header parameter to the AJAX request. The header parameter for OAuth should look like the code below.

headers: {"Authorization": "Bearer YOUR_TOKEN"}

An example of the AJAX call construction for the Facebook API with an Authorization header would look like the code below.

Some networks block the header parameter in an AJAX. If you are seeing authentication or authorizations errors in your failure response, try testing the API with a service such as Postman. If Postman is able to successfully authenticate, it is most likely an issue with your network. Try again when you are able to access a less restrictive network or use the token parameter method of Authorization.