On a repeated list, when de user clicks on an item, I give him some alternative options to execute with the data of the current item. However, I can’t find a way to highlight the item so the user is sure on which is he executing the action. Is there a way to highlight the current item?
Thank you
Hi there!
For this you’ll need to setup just a couple of things:
first off setup a page variable to track the “current item” for example “current_item_id”
then as user taps any individual list item, you’ll set the value of “current_item_id” to some unique value of the item (such as name, id etc.)
finally you can use the this variable and an IF formula to configure styles for the list item
For example you could determine the “styles -> typography -> color” of the item in repeating list with something like this formula:
IF(repeated.item.id == current_item_id,"#65c7c2","#c78265")
Hope this helps!
Thanks Akseli. It worked perfectly.
Let me add two tips:
@Akseli_Virtanen How can I find the unique value for an individual list item without a tap event?
I’m showing a list of users and want to highlight the current user where they fall in the ranked list (i.e. change the background color for that single item).
When I go into isolation mode and put in a formula I seem to be changing the entire list vs. a single item.
Got it sorted! I was using current.item.id == appVars.currentUser.id in my formula and changed it to current.id == appVars.currentUser.id
A noob question here, but I’m struggling with how to change the background color of a list item component with the Set Component Property flow action. These are not repeated items but just a list of 1-5 items. I have a page variable to store the selected item ID and can successfully set this variable in a flow but can’t figure out how to change the color of the component background. The color property isn’t showing up anywhere in the Set Component Property and I’m not clear on the instructions in this thread on how to bind to a variable to get the style>typography>color property I need to set.
Hey there! You won’t be able to set style properties via Set Component Property. Instead the recommended approach is you that you bind the style property for the background color to a variable or a formula.
For example you could create a page variable “selected” that is updated when you select one of the items and then a formula binding for each item’s background color with something like:
IF(pageVars.selected == 1, ‘red’,‘white’)
And then upon clicking the item you’d simply set the pageVars.selected variable to the item’s id (in this example 1).
@Akseli_Virtanen Thanks. Still stuck with a potential noob question. Not really sure how to bind a variable to a style property. I can bind it to the UI element, in this case a list item, but not sure how to bind it to the list items background color. I checked documentation and went through the binding tutorial but I must be missing something. Thanks for your help.
The style bindings still have a bit different UI for bindings, you’ll want to hit the small icon in front of the property name and then the pen icon to edit the value itself. I made a gif below showing how to do this 
@Akseli_Virtanen Thanks. That’s very helpful. Unfortunately I’m not seeing the background color being exposed for a list item in the styles tab. I may have to rethink my design.
Ah, the list items (as many others) are composite components, to edit the sub-components double click on the list item to open it up, then you should be able to find the correct background property
Excellent! Thanks for the help. Are there tutorials that dig into some of these more advanced topics? I thought that I had covered them all and didn’t see anything in docs but I may have missed it.
No problem
The Academy homepage has a list of all the core lessons and power-ups (shorter videos on various helpful things) https://docs.appgyver.com/appgyver-academy#academy-core-lessons
We’ll have an in-depth lesson about Components soon when the runtime upgrade is done!
@Akseli_Virtanen, looks like the composite component doesn’t have visibility into any of my page variables so that’s a non-starter. Again, am I missing something?
I’m thinking about changing my list item to a Paragraph but now I’m not finding the ability to center the text in the middle of the paragraph similar to how a list item might look.
Oh sorry, I didn’t realize you would run into that next 
You can create a custom property for the composite component and then bind the page variable to that property, which you can then use in a formula inside the isolation.
Note “edit properties” in isolation mode
Bound “myPageVar” to to the new property.
“myProperty” can then be used inside the isolation mode in formulas etc.
Hope this helps!
any suggestion for this ?
