Breathing Life in to Power Apps with the Unsplash API

How to use REST APIs in Microsoft Power Automate (AKA Flow) to add random, but oh so beautiful, images to your SharePoint List

Changi airport in Singapore on peak form. Good pictures make stuff look better. Photo by Kamil Tatol on Unsplash

Watching Power App tutorials can be a bit like watching grass grow. On drying paint. While you wait for the kettle to boil. The disappointment of just how bland your “SharePoint List with buttons” looks at the end of it is enough to make anyone reach for that lockdown gin and tonic.

Don’t fret. We can steal other people’s pictures and make them look pretty.

Power Apps are ugly

Below is our classic personality-free Canvas app from SharePoint.

Grade A Example of why everyone thinks Power Apps are rubbish (sorry Microsoft). They’re just mostly drab looking. Tutorial from Microsoft Canvas app from SharePoint.

Don’t get me wrong, Microsoft is dropping releases for Power Apps faster than anybody can learn them. There is no shortage of things they can do, and the lengths to which you can extend them. The problem is that they just never quite look as good as when you go down the Web App route directly (just look at those fancy Bootstrap themes)

Well, a quick fix is to add some images, so let’s start robbing them from the internet’s many photographers.

The Game Plan

The SharePoint List Picture Field

Take that SharePoint list from the Microsoft tutorial and add a column of type ‘Picture’.

Add a Picture column. Sometimes, inspiration for column names comes hard.

Adding or updating an item in this list, the user is asked for a URL and an alternative text field. A classic use case for this field would be using it to store the image URL of the ice cream you just dropped with the Power Apps Camera control.

SharePoint list fields of type ‘Picture’ want a URL

Getting Unsplash URLs into the List

The idea is that we get these URLs from Unsplash with some search parameters. It would be good if these are random (don’t just want the same picture over and over again) and if it gets done automatically.

In the world of Microsoft, automating things is done easiest with Power Automate. Here’s the plan.

The plan for a brighter and more exciting Power App using Power Automate

1 - Create Power Automate Flow.

Triggered when we create a list item.

Flow is triggered when we create a new item in the Boring App SharePoint list.

2 - Get Unsplash Image.

Retrieve an image URL of a photo from Unsplash using the Title of the SharePoint item.

The unsplash documentation is pretty comprehensive, and possibly a bit overwhelming. Here’s an example of searching for a picture related to the SharePoint list item using the HTTP connector (note that this is a premium connector).

The xxxxx’s after Client-ID should be replaced with your Unsplash application Access Key. To do this you need to set up a developer account on Unsplash and register an application.

3 - Parse the JSON Returned from the Unsplash API.

Parsing the JSON allows use of fields from the response when we update the SharePoint list.

Power Automate can figure out the JSON structure for you with the ‘Generate from sample’ button. Pass the Body of the Unsplash response to the Content of this step.

Generate from sample will get Power Automate to guess the schema for you from an example response. Run a test to get an example response from the HTTP request above, or use the API documentation response (but take the comments out)

The JSON Schema used for the response from the Unsplash HTTP request is on GitHub here. This needed to be amended from the schema generated automatically by Power Automate, so that it allowed fields to be NULL (e.g. Unsplash misses out the number of Instagram followers). Every field is made nullable by providing an array of two types for each value in the JSON schema (e.g. [“string”,”null”] instead of just “string”). Do a find and replace, otherwise, you’ll be there a long time.

4 - Request the SharePoint list property ‘ListItemEntityTypeFullName’ using SharePoint REST API.

Annoyingly, you can’t access SharePoint list ‘Picture’ fields directly in Power Automate. They just don’t appear in an Update SharePoint Item step.

It’s okay. We can use the SharePoint REST API to update a list item, and there’s some more documentation here to explain how the SharePoint API works.

We can access the SharePoint API using the SharePoint HTTP request step in Power Automate, unlike the generic HTTP request this is not a premium connector. In this step, we need a GET request for ListItemEntityTypeFullName property of our list. Don’t forget to parse the JSON this returns.

Getting the ListItemEntityTypeFullName property of the SharePoint BoringAppList

5 - Update the SharePoint List Item Picture Field

SharePoint HTTP request comes to the rescue again. This time a POST request is sent to stick the Unsplash URL from our earlier response into the Picture field of the created/modified item.

The headers in this request are critical. The body needs the ListItemEntityTypeFullName property that was retrieved from SharePoint and the URL from Unsplash. Here the small URL is used (400x400) and the photo description is put in the Alternative Text of the SharePoint image.

POST request to SharePoint API that puts the Unsplash URL into the list item

Some copy and past friendly bits are on the GitHub.

The plan comes together!

The Not-Quite-So-Boring App

As you can see, a few images make a world of difference. Personally I can’t wait to log my next ice cream.

Adding random images from Unsplash brings a little colour and could win over those pesky users. At Wise Technical we make proper web apps too, and the data platforms to maximise their business benefits. Reach out! https://www.wisetechltd.com/

Niggles of Note

• You only get 50 requests an hour on the Unsplash API
• Don’t set your content type in the POST request for Sharepoint item update as application/json (as per the documentation) set it as “application/json;odata=verbose”