Part 7: Setting Up a Grid repeater

Setting up my cards in a repeating grid pattern turned out to be a little trickier than I had expected.  Here’s the steps I ended up needing to follow:

Create the Repeater component and map it to the Data array from my “Get Card Definitions” data resource:

Under Styles, you have to “Enable Styles” and set the Direction to “Row”, and under “Show advanced layout options” select “Wrap child elements to multiple lines”.

I also ensured that the width was 100% of the viewport (so that I can set smaller percentages for each card component that gets repeated):

in my Card component, I want to make it Interaction: Click so that I can define an event handler for when the whole card gets clicked (which created my Deck Modification Event record).  

In style for the card, I want the width to be 16.6% (roughly 1/6 of 100%) so that I can split the row into 6 tiles:

Finally I could set up the Card Image component to retrieve the repeater item’s “image” attributes:

with a bit more styling of the card, this gets me something roughly what I was looking for:

This took AGES to work out, and I got some help from an ex colleague who has done quite a bit of UIB.  Good outcome though!