Answered

Putting a component or rectangle on the screen for each row in a collection

(0) Share

Report

Posted on by Maister

Hello,

I have a collection with data and would like to put a component or rectangle on the screen representing each row of data in the collection,

From what I have read it doesn't seem to be possible. But I thought it's worth asking here. If anyone is going to know if there is a way it'll be here.

Should be able to place them anywhere on the screen, and several of them on the same Y-pos or X-pos. Which means I can't use a gallery.

Something like this:

Does anyone know if there is a way to do it?

Thanks in advance,

Sebastian

Categories:

Building Power Apps

I have the same question (0)

All responses (7)

Answers (1)

Suggested answer

Daniel Bocklandt 5,114 Super User 2025 Season 2 on at

Like (0)

Report

Well what you could do to achieve it would be the following:

Add an empty gallery to your screen. in Items you can put the collection.

Instead of adding text labels just add your component into the gallery or the rectangle.

it will automatically put one rectangle for each row in the collection.

If this solved your problem, please mark it as Solved to help others find the solution faster.
If you found it helpful, consider giving it a Like to support each other in this community!

Thanks, and happy building!

Was this reply helpful? Yes No
Maister 19 on at

Like (0)

Report

Updated my post with an image to more clearly show what I'm after.

As you can see I want to have several rectangles/components on each row.

Was this reply helpful? Yes No
Suggested answer

timl 36,411 Super User 2025 Season 2 on at

Like (1)

Report
Hi Maister

The way I would approach this is to build an SVG image of the rectangles. Here's an example I put together with the following collection.

ClearCollect( RectangleCollection, {X: 10, Y: 20, Width: 100}, {X: 120, Y: 20, Width: 100}, {X: 60, Y: 80, Width: 150}, {X: 100, Y: 140, Width: 200} );

The basic SVG to plot this would look like this.

"data:image/svg+xml;utf8," & "<svg xmlns='http://www.w3.org/2000/svg' width='500' height='500'>" & Concat( RectangleCollection, "<rect x='" & X & "' y='" & Y & "' width='" & Width & "' height='50' style='fill:blue;stroke:black;stroke-width:1;' />" ) & "</svg>"

You would add this to the Image property of an image control. Here's how the output looks like.

Apart from using an SVG, the other alternative would be to a PCF component that takes an input table as an argument and plots the rectangles using an HTML canvas.

Was this reply helpful? Yes No
Maister 19 on at

Like (0)

Report

Hi timl,

That looks very interesting and something I can start looking into.

If I also wanted every rectangle to have a line of text on them and do something when you click every individual rectangle, PCF component is the only way to go, or?

Was this reply helpful? Yes No
Verified answer

timl 36,411 Super User 2025 Season 2 on at

Like (1)

Report

Hi Maister

To add text to each rectangle, you can add text elements to the SVG.

In my SVG formula below, you would duplicate the bit that adds a rect element and to add an additional text element.

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text

To make elements clickable, you can superimpose a gallery on top of the SVG and use the "gallery template 0" trick to define the clickable elements. Here are some links by Eric Thomas on this technique.

https://www.youtube.com/watch?v=SXBCR1Us1Jk
https://jgvjg48436.lithium.com/t5/Building-Power-Apps/Gallery-Overlay-Question/m-p/201631/highlight/true

Going down the PCF route would be more powerful, but technically more complex to build.

Was this reply helpful? Yes No
Maister 19 on at

Like (1)

Report

Thank you very much timl!

This is exactly what I needed to know. Now I can start working on it.

I will start with the SVG version first. Further down I will probably look into the PCF route.

I'm still very new to Power Apps but I love learning about it and improve.

Was this reply helpful? Yes No
timl 36,411 Super User 2025 Season 2 on at

Like (0)

Report

You're welcome Maister, glad to help!

Was this reply helpful? Yes No