Changing some items in a list repeat to instead repeat a component property?

[Annie_C]

First, thanks to all question askers and answerers here, the tutorials and documentation are good but here in the forums is where I’ve learned the most in this journey

I have my app working with each subtopic of a topic in a separate database object (firebase), loaded in a repeat. Eg past, past1, past2 only they’re all named ‘past’ (different id-s). I’d like to be able to list just topics and have circles that can be filled so the user knows which subtopics they’ve done. I do have savedAnswer and answerSaved tf so I can check for completion and fill the circles but am confounded by how I could filter the repeat for, well, repetition, and list circles instead for any with more than one of the same name.

For clarity, what I have now : a selectable list (background changes when completed) -
yesterday
yesterday
today
today
today

What I’d like to have : where x is a circle that takes the user to the page for that specific subtopic and can be filled when completed -

yesterday o o
today o o o

If I break it down, I’d (I think) :

check if there is more than one object with the same name (maybe IF((LOOKUP(dataCollection, current.name)>1), something?, something?)

display that name only once in the repeated list (set a variable to filter for unique names and a different variable to show any subtopic circles? Something from here maybe? - Performing actions in a repeated list item - #9 by Erin_Wagner? or IF condition for dropdowns hooked to map() REST API or Sets currently repeated item property to a new value)

display the right count of circles (component element icon in repeat I imagine, with a two-way variable to pass the number?)

and have each circle pass the right id to the next page (definitely no clue, as I failed in many different ways to call records from non-repeating items when trying to bypass the in-repeat problem and just have the right number of subtopic circles non-dynamically, and if I can’t do this last bit then working on the first ones are fun but not terrifically productive)

Is this even possible? Is there a more elegant way to look at the problem? Any and all guidance appreciated! Changing data structure is an option if it’s the best way to make this work, I’m only using a few records while building

(The topics will not be changing, so if the most reasonable solution is actually to hard layout the main page and do everything else dynamically, guidance into why get record might succeed but not pass the name or id to the alert I used to troubleshoot would be welcome)

[Vili]

Hi,

If I’m understanding correctly, you could make a custom component to achieve this. If your data looks something like this

We can make this work by first adding a container (set style class to “list item” for the list item look), and set it to repeat with UNIQUE_BY_KEY(appVars.myItems, "date"). Then, inside the container, add a text component and set its value to repeated.current.date. Next, for the circle icons, we’ll simply create another repeated container inside this one. Add another container, name it “Container: Icons”, set the layout of both of your containers to horizontal, and add an icon inside the icons container. You can now set the icon to repeat with SELECT_BY_KEY(appVars.myItems, "date", repeated.current.date). You can now set any tap events you want for said icon using their repeated property.

Above is the basic idea of having a two-dimensional repeated component. To have different icons for completed tasks, we recommend using a conditional renderer. This requires some additional containers.

Here, instead of repeating the icons, you should repeat the conditional renderer (using the same formula). I’ve set it up like so:

Where the active render ID is IF(repeated.current.done, "done", "notDone").
Then, simply choose the different icons you want to display for each option. I went for circle for Icon: Done, and circle-o for Icon: Not done. With some layout styling (icon gaps & set container:icons to justify right), this is the end result:

As before, you can set up the tap event for the icons (or their surrounding containers) and use their repeated property for whatever purpose you want. Hopefully this helps!

[Annie_C]

Thank you so much Vili!

I don’t know why it didn’t occur to me that one could have different things repeating in the same ‘context’ as it were, that unlocked a lot!

(Which was lucky, as I hadn’t noticed that if all subtopics were under the main topic I’d have to do numbered isDones, which would definitely lead to mistakes eventually.)

I wasn’t able to find the conditional renderer for a while. Did find this page but it’s a 404. https://docs.appgyver.com/appgyver-academy/tutorials/power-ups/power-up-conditional-renderer Eventually ran across it by accident in the component market but by then I’d already come up with an alternate solution. Mentioning it here for future searchers

I was also able to modify the advice to work with each subtopic as a separate data object, which is good as the volume of information is much easier to wrangle that way. Thus my unique by key became UNIQUE_BY_KEY(data.firebase, “name”) and my icons repeated based on SELECT_BY_KEY(data.firebase, “name”, repeated.current.name)

I then used the ‘use formula’ in the icon selection area to add IF(repeated.current.isDone, {set: “fontAwesome”, name: “circle”}, {set: “fontAwesome”, name: "circle-thin”})

Is this an ok alternative or are there likely to be problems with it?

Again, thank you for unlocking this for me!