Display user profile picture from SAP SuccessFactors APIs in an AppGyver Image component

In this blog post, you will learn step-by-step how to call a user profile picture from your SAP SuccessFactors system and use it in an AppGyver Image component.

This may seams an “evidence” or something easy, yes! But there is a trick because the value retrieved from the SAP SuccessFactors system is not usable 1-to-1: you have to apply a transformation and I will explain you how.

⌨️ Step 1: Create an app variable

First, you have to create an app variable where you will persist the profile picture retrieved from the SAP SuccessFactors API.

1. Open you page where you want to display the picture
2. Switch to Variables (View ←→ Variables on top of your screen)
3. Select App Variables in the left menu
4. Click on Add app variable
5. Name it “profilePicture” and change the type to image URL

📄 Step 2: Add an image component to your page

Simply drag & drop your component in your page

🌎 Step 3: Create the query to the SAP SuccessFactors API 

Now it’s time to create the query to the SAP SuccessFactors API to retrieve the user profile picture.

1. Click on Data in the top menu bar (dark blue)
2. Click on Add data resource > REST API direct integration
3. ResourceID = getSFSFProfilePicture
4. ResourceURL = https://<YOUR_API_ENDPOINT>/odata/v2/Photo

Open the “Get collection” tab in the left panel and add the below settings:

• Relative path: ?$filter=userId eq ‘<USER_ID>’&$format=json
• Response key path: d.results (important!)

• Switch to the Test tab
• Click on Run test

You should get a Status : OK message with a result schema [{photoType, userId, width, photo, …}].

Click on Save and switch back to your view (Profile in my example)

⌗ Step 4: Add data variable to your view

Now, we will add a data variable (getSFSFProfilePicture created on step 3) to our view.

Switch to Variables (View ←→ Variables on top of your screen)

1. Click on Add data variable
2. Select getSFSFProfilePicture
3. In the right panel, make sure you selected Collection of data records
4. Click on Show logic for PROFILE on the bottom of your screen

By adding this data variable to your view, the query will be fired every time the page is mounted.

🖊 Step 5: Set app variable

The goal of this step is to persist the response of the Photo query to a data variable:

1. Click on the Set data variable block (blue)
2. Delete this block
3. Drag and drop a new Set app variable block to replace the Set data variable block
4. Draw a path between the DATA Get record collection block and the newly added VARIABLES Set app variable block

Your logic should look like this:

1. Select the VARIABLE Sett app variable block
2. In the right panel, under Assigned value, click on the ABC icon

1. Choose the Formula tile
2. Click on the formula input to change it
3. Copy and paste the formula below 💪

"data:image/jpeg;base64, " + REPLACE_ALL(outputs["Get record collection"].records[0].photo,"\r\n", "")

Why we have to change the value?! → This is due to the value returned by the SAP SuccessFactors API: you get the base64 encoded picture BUT this value need a transformation.The tip here, is to concatenate the base64 start string and a REPLACEALL formula to replace the extra \r\n.

Your formula panel should look like this:

🏞 Step 6: Display the photo in an Image component

The goal of this step is to map the image component source with the app variable.

1. Switch to View (View ←→ Variables on top of your screen)
2. Select the Image component created on Step 2
3. In the right panel, click on the Image icon below Source

1. A Popup is shown to select the data source
2. Select Data and variable > App variable
3. Choose the variable profilePicture (created on step 1)
4. Save

✨ Step 7: Result

It’s time to test the result by launching the preview portal.

1. Click on Launch in the top menu bar (dark blue)
2. Select PREVIEW in the left panel
3. Click on the OPEN APP PREVIEW PORTAL button

Tadaaaaaa 🪄

🙋‍♀️Any question? Suggestion? Don’t hesitate to post a comment.

Note: In this scenario, the userid for the profile picture is static but if you want to dynamically assign a userid, you should manage this with the query parameters or the URL placeholder.