Dynamic Banners in Power Apps

Hello Power People,

Today we're going to learn how to create Dynamic banners in Power Apps Canvas apps, no need to upload and store the banner images in Media within Power Apps applications.

Quick demo (YouTube)

Prerequisites

1. Power Apps Canvas App
2. SharePoint Online Site

Let's build

Step 1 : Go to SharePoint Online Site and create a list, I've created list with the name "Banner" and two columns

1. "BannerImage" column of Image type
2. "RedirectLink" column of Hyperlink type

Step 2: Go to Power Apps Portal and create an app, I've create an app with the name "Dynamic Banner App".

Add Data source and App Background Image

Design the app accordingly.

I've added below controls

1. Label with text "Dynamic Banner in Power Apps".
2. Image control (where we'll populate banner images from SharePoint on dynamic basis)
3. A clear button on top of the Image control to give hover pointing finger hand gesture👆 (a better way from UI/UX POV to let user know that this control is clickable).i. Set all below Properties to RGBA(0, 0, 0, 0)Color, Fill, DisabledColor, DisabledFill, DisabledBorderColor, PressedColor, PressedFill, PressedBorderColor, HoverColor, HoverFill and HoverBorderColorii. Set BorderStyle property to BorderStyle.Noneiii. Border Radius to 20
4. A button at the bottom "Change Banner Image and Redirect link" to redirect user to SharePoint record edit mode to modify the Banner Image and Redirect link (optional)

Step 3:

a. Add the SharePoint list as data source in the app

b. Upload a background in Media for your app (optional)

c. Select "BannerImage" control and add this lookup Power FX code on Image property

LookUp(Banner,ID=1,BannerImage).Full

d. Select "ClearButton" control and add this lookup Power FX code on OnSelect propery

Launch(LookUp(Banner,ID=1,RedirectLink))

e. Go to "Banner" SharePoint List and follow below steps and copy the record edit link On select property of "ModifyBannerButton" in below format

Launch("EditRecordLink")

Step 4: Check for any errors , if not save and play the app.

Note: This is just one way to accomplish the dynamicity, there could be more, feel free to share if you know any other way, would be happy to learn.

[End of article]

Feel free to Like , Comment , Share and Subscribe to my YouTube for more content like this, I'm open to constructive feedback, feel free to let me know.

Follow for more:

• LinkedIn: http://linkedin.com/in/powertrainer
• YouTube: http://youtube.com/@powertrainer
• LinkTree : http://linktr.ee/powertrainersk
• X (Formerly Twitter) : https://twitter.com/powertrainersk
• Instagram : https://www.instagram.com/powertrainersk/
• Threads : https://www.threads.net/@powertrainersk