Tinder-like Element
This plugin enables you to add a stack of pictures to your application, which your users can swipe through to like or dislike.
This element shows a Tinder-like pile of pictures to users, and they will be able to swipe right or left. Run workflows when the users swipe in either direction.
Define which type of thing the pile should use as the source of pictures.
Specify the list of things that will contain the pictures to display. It can be, for instance, 'User's profile pictures.'
Select the field that contains the image for each thing. This can be 'Profile pictures,' for instance, and should be of type image.
When checked, each picture will have a title defined in the Picture caption field.
Enter the expression for the caption of each picture. For example, it could be 'Current card's first name Current card's last name.'
Select the background color to be applied behind the pictures.
Enter the border width in pixels to apply to each picture.
Select the title's font color.
Define the image to show on top of the picture when the user likes the picture, e.g., swipes right.
Define the image to show on top of the picture when the user did not like the picture, e.g., swipes left.
This event is triggered when the user swipes left on a tinder pile. Refer to the current image just swiped using the expression 'This TinderPile's current slide.'
This event is triggered when the user swipes right on a tinder pile. Refer to the current image just swiped using the expression 'This TinderPile's current slide.'
This action forces a swipe left of a tinder pile.
This action forces a swipe right of a tinder pile.
You can customize your Tinder pile to choose which images you want to display, your caption, and the images your users see when they like or dislike an image. In this case, we are searching for our "Examples" data type and using the "Name" as a caption. We have uploaded our images for "Yes" and "No," respectively.
​
​
Once we preview the page, we will see the first of our images on the top of the pile. Note that the grey shadow will get bolder automatically based on the number of images in the pile. In our case, we only have 3 images in our pile, so the shadow is light.
Tip: If the data source of a tinder pile changes, it will cause the data in the pile to refresh (just like a repeating group updating its contents).
The Tinder Pile element simply loads all elements at once. This can cause the element to glitch or crash when there are a lot of images used and the page is opened on an Android mobile device using the Chrome browser due to heavy GPU usage. Consider using a different plugin or fewer images in the mean time if the Tinder Pile element is accessible via mobile web.
