Deck Swiper
Add a Tinder-like deck swiper to your app so your users can easily drag cards left or right to vote on records, favorite them, dislike them, or even take quizzes!
Last updated
Add a Tinder-like deck swiper to your app so your users can easily drag cards left or right to vote on records, favorite them, dislike them, or even take quizzes!
Last updated
Skill Level: Intermediate
Know about Databases, Screens & Components, and Actions
Know how to add components from the Component Marketplace
Know about Magic Text
This component is created and maintained by a third party developer, Minimum Studio
You do not need a paid Adalo plan to use this feature
1.) In order for the deck swiper to work, we will need to setup a collection in our database for the items that we want the deck swiper to display. Click on the database tab in the left menu of the Adalo Builder, then click +Add Collection and give it a name such as "Posts".
2.) Now we need an image property for the deck swiper to display. Click on +Add Property within the new Posts collection. Then choose Image and give it a name such as "Post Image"
3.) Now let's add a one-to-many Relationship property to the Users collection so we know who the Creator of each post is. Click on +Add Property , then choose Relationship > Users.
4.) Since each post can only have one creator, we'll choose the first option, then click Done in the lower right. Don't forget to change the name of the property to "Creator" here and also change the auto-created Posts field in the Users collection to "Created Posts"
5.) Now we can install the component and place it on the desired screen. The setup for the deck swiper is very similar to setting up lists. Click on the deck swiper and in the What is this a deck of? dropdown, select Posts (or whatever you named your collection). You can also add filtering to the collection to only see specific posts.
6.) In the Card section dropdown of the component, we have lots of options for what the cards look like and what they display. Let's make sure our image property is set. Click on the Image dropdown and choose Database > Current Post > Image
7.) The name of the post is input as Magic Text by default, but you can change this and replace it with any Magic Text you like or leave it blank to display nothing.
8.) Now, displaying Post cards and swiping them is great, but that's not useful if swiping doesn't actually favorite, save, or upvote them. Back in the Posts collection, let's add a many-to-many Relationship property to the Users collection. Click on +Add Property , then choose Relationship > Users.
9.) Since each user can like multiple posts and each post can be liked by multiple users, we'll choose the third option, then click Done in the lower right. Don't forget to change the property name to "Favoriting Users" or similar and also change the auto-created Posts field in the Users collection to "Favorited Posts"
10.) Now let's add some swipe actions so the user is actually adding the post to their favorites. Click on the deck swiper component, then click on the Actions section dropdown.
12.) Click the "Favorited Posts" property (from Step 9) of the new Update action, then choose Add > Current Post. Now whenever a user swipes a card to the right, it will add that post to their Favorites.
13.) That's the basic functionality of the Deck Swiper! Be sure to go back to check out the other options in the Card, Left Swipe, End of Deck, and Right Swipe section dropdowns of the components where you can change:
Swiping labels
Colors
Card rounding
Actions that occur once the last card is reached in the deck
Font weights and colors
Icons
Placeholder images
Actions for right swipe, left swipe, and on card click
Want to see the app we used to make this walkthrough? Click Here to use or clone the example app. If you don't know how to clone apps, you can learn to do that here.
This component was created and is maintained by Minimum Studio. Please reach out to them regarding bug reports or feature requests.
The deck swiper is also a great way to build quizzes! You can set up a scoring system using left and right swipe actions and even grade the quiz using an "End of Deck" action.
If you want to prevent users from seeing the same cards again, you can apply a "favorite" type setup by creating a similar relationship for "disliking" posts on left swipe. Then filter the cards to only show the ones where the Logged In User is not in the Post's "Disliking Users" property.
If you need additional help with this article, you can always ask in our community forum! Be sure to paste the link to this article in your post as well!
Do you have a tutorial or help doc request? Let us know!
11.) By default swiping right is labeled as "Liking" a post (you can change this in the Right Swipe section dropdown) so we're going to add an action to the Right Swipe Actions area. Click on the +Add Action button, then choose Update > Logged In User
1.) In order for the deck swiper to work, we will need to setup a collection in our database for the items that we want the deck swiper to display. Click on the database tab in the left menu of the Adalo editor, then click +Add Collection and give it a name such as "Posts".
2.) Now we need an image property for the deck swiper to display. Click on +Add Property within the new Posts collection. Then choose Image and give it a name such as "Post Image"
3.) Now let's add a one-to-many Relationship property to the Users collection so we know who the Creator of each post is. Click on +Add Property , then choose Relationship > Users.
