Hi everyone
I have just read through a lot and am very desperate about one (actually simple) thing, here is my initial situation:
I have a RepeatingGroup that shows all notifications of a user in multiple cells. What I simply want is when the user swipes left in the current cell of the RG, a delete icon on the right hand side should be visible and the user can click it.
My problem is that when I use plugins like TikTok like swipe, JavaScript Swipe Detector, BetterSwipev2, Swipe detector,⌠it does not work. I tried to set a custom status for a group in the RG (custom status: delete-icon-visible âyes/noâ default ânoâ). And then when the user swipes left, action: set state of the group⌠to âyesâ and make the delete-icon visible when this custom state is âyesâ (and hide the other group, I tried both). I also tried the simple action when a user swipes left: âshow an elementâ (delete-icon), which was also unsuccessful. All swipe plugins failed to reference the current repeatinggroup cell. Either they displayed all delete icons of all cells of the RG, or they did not display a delete icon at all.
The only way it worked was with the plugin Draggable Elements, which is not what I want because itâs not really a responsive swipe for my problem.
Is there a solution for my problem? Is there a responsive way, how I can show the delete-icon only in the current cell of my RG when the user swipes this cell to the left? Any plugin recommendations or am I just too stupid to use them?
I have decided to take this as a challenge for myself. I have tried all the free plugins there are and bumped into the same roadblock as you. They work great but not in a repeating group. They apply the same thing to each cell (view button in each cell etc.)
The blue is the DropArea. The green is the Drag/dropGroup. And yellow is the Trash group.
The idea is having this Drag/dropGroup stay on the left of the screen and it can be dragged into the DropArea. However, when the dropArea receives something, it will show the Trash group and put the Green area back and hide it. I set the green area to low transparency, thatâs why it look invisible. Of course, the green area is blocked, no clicks can happen.
It actually works like this:
And here are the other layouts and conditionals of all the groups I mentioned:
Known issues:
Sometimes the dragged group stuck over there whever is left and doesnât come back (even if it is set to come back to the original position). I have tested and it is probably because I conditionally hide it. Maybe there is a solution, I donât know.
Thanks hergin, that could be a great solution. But in my case I need the whole cell in the RG for elements like text, images and so onâŚ
So it wonât be very pretty if I would let a big space for the Drag/dropGroup.
As @cmarchan suggested, I could put some more button in the draggable. Although it looks weird (because it is swiped different than the company name), it works. You can click on the buttons though while swiping, so need to be careful while designing this interface.
You can put the company name and other stuff in there too but if you make the width of the draggable 100%, someone has to swipe back to hide it, instead of clicking.
Another problem I couldnât figure out yet. If I click outside the repeating group, can I hide all the trash groups? No answer yet.
It works, I got no problems now. Thanks a lot!
I work with a custom state, maybe you could also do. When Element XYZ (outsite the RG) is clicked, set state of Drag/dropGroup toâŚ
I had the same problem you described above in your first answer:
" Known issues:
Sometimes the dragged group stuck over there whever is left and doesnât come back (even if it is set to come back to the original position). I have tested and it is probably because I conditionally hide it. Maybe there is a solution, I donât know."
The solution I got was just to edit the Drag/dropGroupâs behaviour post drop to âmove backâ, after that it worked.
