Power Apps: Using the Image Control to Trigger a Logic App

If you ever need to get data from a 3rd party API, or any premium data source in Power Apps, you need to license each user with a Per App plan at the very least. In a large organisation that cost can ramp up significantly, and if your app is only used once in a while, or even used frequently but the feature that requires the API call is used infrequently, it can feel like not good value for money.

You might consider workarounds to this like emailing a serialised JSON file as an attachment to a mailbox to be picked up by a Logic App, processed and have the response written into a SharePoint list. While these kinds of workarounds will work, there’s always a bit of a delay in processing as the Logic App that watches the mailbox will only poll every few minutes and you also have no direct feedback mechanism to the app.

There’s an elegant solution to this: The Image control.

The Image control can take a URL as its input (The .Image property).

For example, this image control has a URL as its Image property that returns the Microsoft logo:

This is actually a good example because you can see in the URL there’s a query parameter, ver=5c31

So what if this URL was the trigger for a Logic App with the method set to GET?

Could we pass data to the Logic App using query parameters and return an image as a response and display it in the app?

Let’s try

Here’s a very simple Logic App that triggers on HTTP GET, retrieves some file content for a file called index.jpg (it’s a picture of a thumbs up) then responds to the client with the file content as the body and image/jpeg as the content type.

Let’s put the trigger URL into the image property and see what happens:

It works! Looking at the Logic App history, the run took 593ms. This is easily short enough for a user-interactive experience

That’s all well and good, but what about getting data from somewhere and returning that to the app.

Let’s see if we can do branching conditions based on a URL query. I add a new query parameter to the string in the Image property of the Image control in the app.

In the run history of the Logic App, here is the URL query in the outputs of the trigger:

I think if you’re still following this you probably don’t need much of an explanation of how you can pass these parameters into your Logic App and take actions on them.

In the app, it works!

So we can retrieve different images based on the input coming from the URL query parameter.

Now you can imagine how you can pass data from the Power App to a Logic App to use in a SQL query or an API call, and return an image to show whether it succeeded or failed.

But what about the data? We can lookup data in the Logic App, write it to a standard data source, like SharePoint, and display this in the app.

Let’s start with a dropdown:

Now, in the Dropdown’s OnChange, set a couple of string variables: A GUID and some queries to append to the web request

Hit the drop down to change the thumb direction and we generate a GUID, store it and then pass it, plus the thumb direction to the Logic App:

In the Up branch of the switch, I’m going to get a random Chuck Norris joke from a public API and write it into a SharePoint List.

I created a SharePoint list with one extra column: Joke. The Title column can be used to store the GUID that comes in from the Power App and the Joke column can contain the response from the API.

So back in the Power App I set the drop down to up, and the Logic App successfully gets a random Chuck Norris joke and writes that into a SP list

But we still have no way to tell the Power App how and when to look for the joke in the SP list. We need a way to refresh the data source (or more to the point, flush the cache).

The idea I came up with is using a timer. If we could trigger a timer when we invoke the HTTP request that refreshes the data source, and repeat that timer if the data isn’t available, and so on, then stop it when we get the data, that would be ideal.

I spent a bit of time getting this to work, and this is what I came up with.

My timer duration is 2000ms (2 seconds). I experimented with shorter durations but the app does not seem to like hammering the SharePoint API that frequently and it never refreshes.

Starting with triggering the timer from the OnChange of the drop down

1. Blank out an object variable (oJoke)
2. Create the GUID
3. Generate the URL query parameters
4. Toggle a Boolean variable from false to true

Here are some of the properties of the timer:

• OnTimerStart: Do nothing
• OnTimerEnd: Set the object variable (oJoke) to be the list item that corresponds to the GUID we sent to the Logic App via the Image control
• Start: The Boolean variable from the OnChange property of the drop down
• Repeat: Evaluate whether oJoke is blank. As soon as it’s not (e.g. we successfully set that object variable to a valid list item) then we stop repeating the timer.
• Reset is the inverse of of the boolean variable we start the timer with, in other words, it’s reset when the drop down’s OnChange action is invoked, right before it’s started again.

Finally, add a text label to display the joke, with the Text property being oJoke.Joke

Here it is in action. In production you would set the Visible property of this timer to false.

The two second timer runs once after the joke appears. The text property of the timer is just showing fractions so it looks like a one second timer running twice, but it’s actually just a single run of 2000ms.