Where in the world is #APIFriday?

It’s here today!

Where in the world is #APIFriday? is back and we’re trying something new today. Watch the video below for a live coding session with me on integrating the SAP API Business Hub into your UI5 app! It’s super easy and can be done in about 10 minutes…I know, CRAZY COOL! I know I promised you all a fireside chat with my AR/VR developer friend, but we had some scheduling issues ???? but that will be coming your way soon too!

For this #APIFriday, open up your SAP Cloud Platform account, go to api.sap.com, and get ready to CODE!

Was that a little too fast for you?

No worries, I’ll break it down a bit.

Let’s start with the SAP API Business Hub. Go to api.sap.com to get to the API Hub. Click on Browse and search for Recruiting. Select the SAP SuccessFactors Recruiting package from the list when it loads. Under Artifacts, we’ll be using the Job Applications artifact today, so jump into that one.

In the Job Application API, there are a bunch of resources available for you. One new thing to note if you haven’t been the to API Hub lately is the Endpoint dropdown. SAP API Business Hub provides you with a started sandbox to develop against, but now you can add your own! If you or you company already has a test endpoint, you can use that endpoint instead to get data relevant to your work. We’ll leave it as is for now, but you can change it if you want.

On the Job Application API resources, take a look at JobApplication. This is the entity we’ll be working with today. Try out a GET to under the data structure and what info is available, and then get ready to head over to your SAP Cloud Platform account!

In your SAP Cloud Platform, go to your Services and search for Web IDE. Today we’ll being using the new SAP Web IDE Full-Stack version, so click that one. The full-stack version allows you to create more that frontends (as the name implies ???? ) with Web IDE, which is awesome and I am sure it will make many of your lives easier. So go ahead and enable it, and then go to the Service.

The Web IDE Full-Stack looks just like our frontend version, so the interface should be easy to pick up. It does include some fun surprises we’ll find soon :).

Go ahead and create a new project from template in your favorite manner. If you forget how to do this, one way is to go File > New > Project from Template. Choose the Fiori Worklist template, click next, add a name, click next, and meet in the next step.

So now you are on the Data Connection tab and if you are a Web IDE regular, you’ll notice there are 5, not 4, options here. That last one is what we are interested in…SAP API BUSINESS HUB! What?! It’s right there in the Web IDE?! I didn’t have to configure some destinations or plugins?!! This is the best day ever <– probably what you are thinking right now. Go ahead and choose that option from the list of Data Sources. This while change the table to the list of available APIs and the dropdown to the list of API Packages. From the Package list, select SAP SuccessFactors Recruiting. From the API list, then choose Job Application. Click Next when you are the Job Application API selected. (Wasn’t that easy?)

Now you can configure the template as you like or is most relevant for you. Some of the settings I used in the above video are in the table below. Key things here are to set the type to Standalone App so you can run it as a normal Web App and to use JobApplication as the Object Collection as this will be the most interesting entity set for the app.

Go ahead and click Finish once your attributes are set.

If it is taking a while for the wizard to close out (you see those 3 dots blinking across your screen), it is a pretty safe bet that you can refresh your Web IDE without losing you work. After about 10 seconds if it hasn’t loaded, go ahead and refresh your Web IDE. When the Web IDE loads again, you should see the new project package in your workspace. Go ahead and run your application. One way is right click on the project, choose Run > Run as > Web Application. Choose the index.html file if prompted to select a file to run. If you are asked to log in, it is your Single Sign On credentials.

My application threw an error when loaded because it cannot sort on the currentTitle. To fix this issue, back in the Web IDE, open the Worklist.view.xml file in the View folder. Change the path in the sorter to lastModifiedDateTime. This is a sortable field.

Save your changes and re-run your app. Now we should be getting some data.

It isn’t looking too interesting, so let’s make a quick change. Back in the Worklist.view.xml file in your Web IDE, let’s update the ObjectIdentifier. Change the word “title” to “text”. Next add the title property and set it equal to “{firstName} {lastName}”. Save your changes.

Now when you run you app, it looks a little more interesting ???? .

I hope you enjoy this week’s #APIFriday whether you tried to follow along with the live coding or even if you just followed along with the breakdown. As always, I would love to hear from you guys about what you want to see or learn about. Join me every Friday to learn more about integrating with SAP and can’t wait to see you all next #APIFriday!