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!