How to create nice swipe action workflows for your mobile apps
Want to build this on Bubble?
Let’s go:
1) Go to your app settings / general and check “Expose the option to add an ID attribute to HTML elements.”
2) Build your repeating group and group all the content inside. Give the new group a unique ID Attribute that references the cell’s index. E.g.
3) Install the Swipe to Workflow Action plugin (or a similar one, but make sure it allows you to reference individual elements; I’m not affiliated), drag the Swipe_detector element into your repeating group, and set it to reference the group created in the previous step:
4) Create a delete button inside the repeating group and set it to not visible on page load:
Your element tree should now look something like this:
5) Install the Toolbox Plugin.
6) Add the following workflows:
6.1) Swipe left:
$(swipe…).animate({marginLeft: "-75px"}, 300, 'swing');
6.2) Swipe right:
$(swipe…).animate({marginLeft: "0px"}, 300, 'swing');
That’s it. Have fun playing around.
Last but not least
Do you want me to write about a specific topic, or do you have an awesome Bubble hack you would like to share? I'd love to hear from you, and I'm looking forward to engaging in the post comments or the Bubble forum.
That’s it. See you in two weeks.
Keep it simple!
Damian
A Video for this will be appreciated fr...
For the dumb ones like me, who cannot comprehend simple texts :()
Thanks Damian,
one question: what is the layout configuration you have to your RG? How you made the Button delete over the text?
I'm using a row layout to use responsive feature on different screen sizes, but struggling to align and make the function work.