At a recent Code Jam, some of the participants were curious and wanted to know how to take an image with their phone and display in the app (even though it had nothing to do with our exercise 😺).

Then, a few days ago, I was building an application to show a generated barcode, and it wasn’t clear how to display the image.

So here’s an explanation of the various ways for showing images. For all of them, we will use the standard Image component.

Image from API (URL)

This is the simplest and probably something everyone knows how to do.

I did the following:

1. Set the Source property of the Image component to the URL of my API.

In this example, I generated a barcode with a simple API URL. We could have made it into a formula so people could enter the barcode value and the barcode type.

https://barcode.orcascan.com/?type=code39&data=12345678901

This was the result:

It doesn’t make a difference if the URL is hardcoded to an image on the internet, or comes from an API call that returns a URL in the response, or from a simple API call (no headers, GET method) that returns an image like for baseball player headshot or the one above for generating barcodes.

Image from API (Stream)

But I had a different API, one that required a POST request and some headers, including an API key. This I could not do with the above method. So I asked one of my colleagues, Pekka Aaltonen, what to do and he was gracious to provide a simple script.

For this, I used a barcode-generating API, that requires a key, from Cloudmersive APIs.

I did the following:

1. Created a page variable, MyImage, of type text.
2. Set the Source property of the Image component to this variable.
3. Added a JavaScript flow function, whose output would be set into MyImage.
4. Added code to the JavaScript flow function to request the barcode and get the image as a stream.

The JavaScript flow function was set up with no inputs and a single output whose name was url of type text.

And this was the code:

const response = await fetch('https://testapi.cloudmersive.com/barcode/generate/upc-a', {

  method: 'POST',
  headers: {
    Apikey: '<your API Key>',
    'Content-Type': 'application/json'
  },
  body: '829576019311' // not json, but this is what the API expects despite the header
});

const blob = await response.blob();
const url = URL.createObjectURL(new Blob([blob]));

return [0, { url }];

This was the result:

You will have to create an account and supply an API key. We also could have made things more dynamic by letting the user enter a barcode value and then creating an input to the JavaScript flow function for the barcode value.

Image from API (Base64)

Many times images are converted to base64 text strings, so we must be able to handle these. Base64 is a way to encode binary data as text strings for channels that only reliably transmit text.

For this example, I will use the images supplied by Microsoft’s Northwind OData service within the Employee entity.

I did the following:

1. Created an OData data resource to the Northwind, and enabled the Employees entity.
2. Created a “single data record” data variable for this entity. For this example, I hardcoded employee 1.
3. Set the Source property of the Image component to the following formula:

   "data:image/png;base64," + SUBSTRING(data.Employees1.Photo, 104)​

   The Northwind images have 104 extra characters at the beginning that you have to strip off (if you’re curious why, Google it).

This was the result:

Image from Phone

You want to to take a picture with your phone and display it in an Image component.

I did the following:

1. Created a page variable called ImagePath of type Text → Image URL.
2. Set the Source property of the Image component to this page variable.
3. Added a button.
4. To the button’s logic, added flow functions to take a picture (Take photo, a standard flow function) and to set our page variable. You will have to use the following formula to set the variable.

   outputs["Take photo"].photoFile.path

   

Now, I can click the button, opening the camera interface on the phone.

I take a picture.

The picture now appears in the Image component.

Sending Images

For sending photos, I will not explain how to do but will give 2 examples from other people’s tutorials:

• Tutorial by Onno Bos. In this tutorial, Onno takes an image on the device and sends as a blob in an API to an AI service.
• Tutorial by Sergio Guerrero called Build Bros – Handling file upload via HTTP Request. In this tutorial, Sergio takes an image, converts to Base64, and uploads to AWS.

Let me know if you have additional questions or if there are other things you do or want to do with images in SAP Build Apps.