Adalo Resources
Search…
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!
Skill Level: Intermediate

Before You Begin

Walkthrough

Simple
In-Depth
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.
​
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.
​
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
​
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
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.
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.
​
​
​
​
​
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

Example

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.

Learn More

  • 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.

Help

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!​
​