• Yash Agarwal

Show Bing image of the day as the background in Power Apps

In this #PowerShot, I will show you how to get the image from Bing image of the day and set it as a background on a canvas app screen. We will create a flow in Power Automate to call the API and get the image and then set it as a background on a canvas app screen in Power Apps.


Let's Get Started!


Power Automate


Step 1: Trigger: From Power Apps: To trigger the flow from Power Apps.


Step 2: Action: Send an HTTP request: To get the Bing Image of the Day


URI: http://www.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1&mkt=en-US


Step 3: Action: Send an HTTP request 2: To get the content of the image


URI: http://www.bing.com/@{first(body('HTTP')?['images'])?['url']}


Step 4: Action: Response: To send the image as response to the Power App.

JSON Schema:

{ "type": "object", "properties": { "image": { "type": "string" } } }


Body:

{ "image": "@{body('HTTP_2')?['$content']}" }

Power Apps


1. On the OnVisible property of the screen use the expression:

ClearCollect(test,'Button->HTTP-5'.Run().image)


Explanation: Run the flow when the screen is visible


2. On the BackgroundImage property of the screen, use the expression:

Concatenate("data:image/jpeg;base64,",First(test).Value)


Explanation: Concatenate the expression with the file content from the flow to create the data uri of the image to be set as the background.

In Action

In this post, we saw how to use Power Automate to get the Bing Image of the Day and set it as a background on a canvas app screen. The image takes a couple of seconds to load based on the flow run as the image needs to be extracted and passed to Power Apps. Appropriate logic can be setup that shows the image of the previous day until the new image is loaded or shows a loading spinner to notify the user that the data and the app is getting set up.


I hope you liked this and it helped you. Thank you for reading!

Recent Posts

See All

Working with Throttling Limits in Power Automate

In this #PowerShot, I will show you how to better handle throttling limits for API requests actions, connectors and flow runs in Power Automate. Let's Get Started Connectors in Power Automate have a s

SUBSCRIBE VIA EMAIL

Yash Agarwal

  • Black LinkedIn Icon
  • Black Twitter Icon
  • Black Facebook Icon
  • Black Instagram Icon
  • Black RSS Icon

© 2019 By the Devs