Curious about how to get data from your non-SAP system into your UI5 application? There is a new tutorial series on
developers.sap.com that will introduce you to adding an external API call into your application using AJAX and JSONModels. I will guide you through how to
create a destination that will be used to access your API,
registering your application on the external system, and then finally
inserting the AJAX call into your application. This tutorial series uses Slack as the example, but I intended to make it flexible enough that you can use it for any API and use it in a new or existing application.
The first step is to create a destination in HCP. This will allow you to better manage the API endpoint if the URL changes or a new version is released. Add the API endpoint url as the destination URL and choose NoAuth if the API uses OAuth 2.0. For OAuth 2.0, you will need to add a header in the AJAX call, which is part of Tutorial #3. If the API uses Basic Authentication, select that option in the destination and enter your username and password.
You will need to register with the external API to get your developer or application Key. If you are using Slack, Tutorial #2 will guide you through how to get your API key. If you are using another API, visit their developer site (this can normally be found by searching for XXX Developers in your search engine) and set up an account so you can receive your Key or Token. This will be need for authentication in Tutorial #3.
In the final tutorial of this first series, you will add in your API call using AJAX. Most APIs have many methods you can call. Select one if you are following along with another API. If you are following along with Slack, you will start with the Channel History method. You will add a GET request to your application's main controller. You can start with a new application (steps are provided) or an existing application. The data returned from the API will be set as a property in a model that you need to bind to your view. Once the data is returned and bound, you can use the model in the view to create a table with the results. If you are using the Slack API, I have identified a couple of fields returned to display in the view. If you are using another API, review the documentation to see what information if available to you after a successful API call.
Feel free to add questions here if you get stuck! And stay tuned as more content about adding some more features to your API integration such as paging and navigation will be coming soon!
