Performing actions in a repeated list item

1

https://monosnap.com/direct/XdgA4G7gWOTsp9UEAbKsyaIbzRtGRX

Hello all. I’m having a hard time trying to do something like :point_up_2:

I was able to implement it on a non repeated list/component. The moment i repeat the component, I’m not able to perform an action on any of the list items.

Is it possible to do something like this on Appgyver?

To explain some more I want to be able to show a list of items repeated on a page and instead of clicking through to the item detail page to perform actions, I want to perform the action directly on the repeated list item. An action a user can perform is add the item to cart and increment the quantity of that item.

I appreciate any help and support here. Thanks

2

https://docs.appgyver.com/app-logic/binding-data#repeated-components

maybe this helps

3

Thanks @Sasu_Makinen I have read the documentation too thanks. I can repeat and bind to variables but cannot perform actions from a repeated list item. So I can bind the things i want to display but actions part just eludes me

4

So something like this?

repeated_nest_like
repeated_nest_like1280×368 248 KB

It’s a bit complicated as you need to replace the whole variable with another.

If you have id’s to your repeated objects you could use in the add component tab button.

MAP<mapBar>(appVars.bar, IF(mapBar.id == repeated.bar.id, SET_KEY(repeated.bar,"likes", STRING(NUMBER(DEFAULT(repeated.bar.likes, 0)) + 1)), mapBar))

If you dont have ID’s you have to do something like this in the add component tab button.

SORT_BY_KEY(WITH_ITEM(WITHOUT_ITEM(appVars.bar, repeated.bar), SET_KEY(repeated.bar, "likes", STRING(NUMBER(DEFAULT(repeated.bar.likes, 0)) + 1))), "name", "desc")

or whichever you find more convenient.

My source data appVars.bar looks like this

[
  {
    "id": 1,
    "name": "Brewdog",
    "beers": [
      { "id": "", "hops": [], "name": "Koff", "count": "0" },
      { "id": "", "hops": [], "name": "Lapinkulta" },
      { "id": "", "hops": [], "name": "Double IPA #1", "count": "0" }
    ],
    "likes": "9"
  },
  {
    "id": "2",
    "name": "Beer Haus",
    "beers": [
      { "id": "", "hops": [], "name": "Duff", "count": "0" },
      { "id": "", "hops": [], "name": "Karhu", "count": "0" }
    ],
    "likes": "8"
  }
]
1 Like
5

Thanks @Sasu_Makinen. What variable are you setting this formula to
MAP<mapBar>(appVars.bar, IF(mapBar.id == repeated.bar.id, SET_KEY(repeated.bar,"likes", STRING(NUMBER(DEFAULT(repeated.bar.likes, 0)) + 1)), mapBar))
Is it appVars.bar or some other variable

If you could share your your logic flow.

6

Just an update, I’ve mostly figured it out using your examples

7

Hi @Sasu_Makinen, I need some help. Thanks for last week, used your example to figure things out. I have a new challenge. How can I selectively show and hide repeated components. The components i want to show and hide are nested in another component that is repeated.

8

Looks like i figured this out too, I’ll write a solution later

1 Like
9

@Dika_Oha I’d like to show/hide components within repeated components and haven’t figured it out yet.

Would you mind sharing the solution you came up with?

10

It’s pretty complex (that’s why I haven’t written the solution yet).

So the magic all happens in your variables. I have an array (PageVars.foodItems) that i repeated, i added a property to the object in my array, I call it ‘incrementState’ and its a boolean.

I set the Visible property of the component (under Advanced) i want to show and hide to a formula like this
DEFAULT(repeated.fooditem.incrementState, false). So by default the Visibility is false but if repeated.fooditem.incrementState has value and is not empty, it will use that instead and could be true or false. This is the first step

The second step focuses on triggering the component you want to show. So I have a button the when tapped, I want to show my component. I essentially set my PageVars.foodItems to MAP(pageVars.foodItems, IF(item.objectId==repeated.fooditem.objectId, SET_KEY(repeated.fooditem, "incrementState", true), item)). If you know how to use the MAP function then focus on the SET_KEY function. I’m setting the incrementState from false to true which then sets the Visible property of the component to true.

Then you need a final step to set to false. its pretty much reversing from incrementState = true to false.

This solution probably deserves a tutorial, but if you break things down to the smallest bit, you will eventually figure it out.

1 Like