Five Gallery Upgrades That Make Your Power Apps Pop

A gallery is often the centrepiece of a canvas app. With a few deliberate design choices you can turn a standard vertical list into an engaging interface that users enjoy interacting with. In this article we'll build a task‑management gallery step by step, applying five practical upgrades that cover background, card styling, typography, icons, and colour cues. You'll walk away with a reusable pattern you can adapt to any data source.

Let's start with a collection that mimics a real‑world project list. Each record has a task name, an owner, a status, a deadline, a priority, and a colour we'll use later for visual status badges.

ClearCollect(
  ProjectTasks,
  {Task:"Design new dashboard", Owner:"Maria", Status:"In Progress", Deadline:Date(2025,5,20), Priority:"High", BadgeColor:RGBA(255,140,0,1)},
  {Task:"Update user permissions", Owner:"John", Status:"Not Started", Deadline:Date(2025,6,1), Priority:"Medium", BadgeColor:RGBA(0,140,200,1)},
  {Task:"Deploy v2.1", Owner:"Sofia", Status:"Completed", Deadline:Date(2025,4,30), Priority:"High", BadgeColor:RGBA(0,200,100,1)},
  {Task:"Security audit", Owner:"Raj", Status:"In Progress", Deadline:Date(2025,6,15), Priority:"Critical", BadgeColor:RGBA(200,0,0,1)}
)

We'll bind the gallery's Items property to ProjectTasks as we go.

Background – Move Beyond Flat Colours

A plain white or grey screen can make your app feel unfinished. A subtle SVG pattern adds texture without distracting from content, and it looks crisp at every screen size.

1. Create a simple pattern SVG (or download one from a free resource like Hero Patterns).
2. Upload the file in Power Apps Studio via Media > Upload file.
3. Set the screen's BackgroundImage property to the uploaded media name.

Here's a lightweight dot pattern you can save as dots-background.svg:

<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
<rect width="120" height="120" fill="#f0f2f5"/>
<circle cx="20" cy="20" r="6" fill="#d0d5dd" opacity="0.5"/>
<circle cx="60" cy="60" r="6" fill="#d0d5dd" opacity="0.5"/>
<circle cx="100" cy="100" r="6" fill="#d0d5dd" opacity="0.5"/>
<circle cx="20" cy="100" r="6" fill="#d0d5dd" opacity="0.5"/>
<circle cx="100" cy="20" r="6" fill="#d0d5dd" opacity="0.5"/>
</svg>

After uploading, set Screen.BackgroundImage = 'dots-background'. The pattern tile gives the screen a soft, professional look.

Cards – Add Depth with Drop Shadows

Instead of flat rows, wrap each gallery item in a card container. The easiest way is to use an HTML text control styled with inline CSS.

Insert a Blank vertical gallery and adjust these properties:

Inside the gallery add an HTML text control and set:

• X = 0, Y = 0
• Width = Parent.Width
• Height = Parent.TemplateHeight

Then give it this HtmlText property:

"<div style='margin:12px; width:" & (Parent.Width - 24) & "px; height:" & (Parent.TemplateHeight - 24) & "px; background:white; border-radius:10px; box-shadow:0 2px 8px rgba(0,0,0,0.08);'></div>"

This creates a white card with rounded corners and a light shadow. Every control you place on top of it will appear inside the card.

Typography – Guide the Reader's Eye

Establish a clear information hierarchy with size, colour, and font weight. Add a Label for each data field inside the gallery.

Task name – the most important element. X = 20, Y = 15, Width = Parent.Width - 40, Height = 30 Font = Font.'Open Sans', FontWeight = FontWeight.Semibold, Size = 18 Color = ColorValue("#2b2b2b") Text = ThisItem.Task

Owner – secondary information. X = 20, Y = 50, Width = 160, Height = 20 Font = Font.'Open Sans', FontWeight = FontWeight.Normal, Size = 14 Color = ColorValue("#808080") Text = ThisItem.Owner

Deadline – supporting detail, placed on the right side. X = Parent.Width - 140, Y = 50, Width = 120, Height = 20 Font = Font.'Open Sans', FontWeight = FontWeight.Normal, Size = 13 Color = ColorValue("#909090"), Align = Align.Right Text = Text(ThisItem.Deadline, "shortdate")

Icons – Replace Default Graphics with Custom SVGs

Power Apps built‑in icons are limited. You can use any SVG from a library like Material Design Icons or Font Awesome. The trick is to encode the SVG as a data URI and use it in an Image control.

For a priority indicator, let's use a star icon. Add an Image control next to the priority field (or wherever you want it) and set its Image property:

"data:image/svg+xml;utf8," & EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='#f2c94c' d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/></svg>")

Set Width = 16, Height = 16 and position it at X = 20, Y = 80. Then add another small label beside it for the Priority text. You can use the same technique for any icon – user, calendar, comment, etc.

To obtain your own SVG code, visit a free icon site, copy the <svg> markup, and follow these edits:

• Replace every double quote inside the tag with single quotes.
• Prepend "data:image/svg+xml;utf8," & EncodeUrl(.
• Append ).

Status Colour – Visual Cues at a Glance

Instead of reading status text, users can instantly see the state of a task via a coloured circle. Add another Image control and use the BadgeColor column from our collection.

"data:image/svg+xml;utf8," & EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='" & ThisItem.BadgeColor & "'/></svg>")

Place this control near the status text (e.g., X = 20, Y = 80, Width = 16, Height = 16). Add a label next to it with Text = ThisItem.Status.

If your data source doesn't include a colour column, you can derive the colour with a Switch:

Switch(ThisItem.Status,
  "Completed", ColorValue("#27AE60"),
  "In Progress", ColorValue("#F39C12"),
  "Not Started", ColorValue("#3498DB"),
  "Critical", ColorValue("#E74C3C"),
  ColorValue("#95A5A6")
)

Performance & Delegation Notes

• SVG backgrounds are static – they don't affect delegation or per‑item evaluation.
• HTML text controls and Image controls with inline SVG are evaluated client side; they won't cause delegation warnings.
• If your gallery binds to a large SharePoint list, make sure any filters in the Items property are delegation‑compatible. The design tips themselves are purely cosmetic.
• For collections with hundreds of items, consider limiting the gallery size (e.g., with Top(…, 200)) to keep the UI responsive.

Common Pitfalls

• TemplateHeight too small: If your card margins overflow, increase the gallery's TemplateSize.
• Double‑quote mismatch: When using inline CSS inside a string, either escape the quotes or (easier) wrap the string in double quotes and use single quotes inside the CSS.
• SVG not rendering: Forgot the "data:image/svg+xml;utf8," prefix? Missing EncodeUrl? Double‑check the formula.
• Colour not appearing: The BadgeColor must be a Color value. Power Apps automatically converts RGBA(r,g,b,a) to the correct string when concatenated in the SVG.
• Responsiveness: If the app runs on different screen sizes, use formulas like Min(App.Width, 800) for the gallery width and adjust font sizes conditionally.

Final Thoughts

Great gallery design doesn't require a degree in graphic arts. With a textured background, card containers, deliberate typography, custom icons, and colour status badges you can transform a default vertical list into an interface that feels both modern and purposeful. Try these techniques on your next app, test with real users, and iterate.

References

• Original article: 5 Power Apps Gallery Design UX Tips by Matthew Devaney
• Microsoft Learn – Responsive gallery in Power Apps
• Microsoft Learn – Add media to a canvas app