Part 5: UI for building a deck

Since I now have a subflow flow for adding cards to a deck, I should probably start thinking about my “Deck selection” UI.

The mobile app shows you the list of cards and shows you your selected cards at the top.  

Screenshot 2023 11 07 at 22 17 36

I’ll create a Portal Experinece shell – I shouldn’t need any workspace-type behaviour.  Let’s start by creating a page to represent the specific deck we’re building with a repeater that shows the avialable cards to select.

I’ll create 3 containers for my header, my Current Deck and my Card selection:

Screenshot 2023 11 07 at 22 28 55

Next I’ll add my repeater to the Card Selection container and add a Data Resource to retrieve the Card Definition records including my card_image field.

Screenshot 2023 11 07 at 23 31 14

Screenshot 2023 11 07 at 23 31 33

This will give me all the card definitions returned in a repeater:

Screenshot 2023 11 07 at 23 31 46

Here’s the result – it’s not pretty, and it’ll need some layout work to get it to repeat in a grid, but we have data coming back with images!

Screenshot 2023 11 07 at 23 32 21


Comments

One response to “Part 5: UI for building a deck”

  1. August Dunnihoo Avatar
    August Dunnihoo

    So this step took me a while since I don’t have much UI Builder experience but I was able to do it! I’m honestly glad that there wasn’t step by step instructions on the exact text that needs to be used for the data array fields. I had to do my own research and trouble shooting in order to get it. I’m so excited to continue!

Leave a Reply to August Dunnihoo Cancel reply

Your email address will not be published. Required fields are marked *

We noticed you're visiting from Australia. We've updated our prices to Australian dollar for your shopping convenience. Use United States (US) dollar instead. Dismiss