How to create a "Favorite" button
You might want to create an experience where users can favorite items within your app. In this tutorial we will cover:
1) Adding a Favorite Toggle to a List 2) Adding a Favorite Toggle to a Details Screen 3) Showing a List of the User's Favorites 4) Using Conditional Visibility to use a Button to Favorite an Item

Set up the Database

  • Create a Collection for “Favorite Places” and add a “Name” (Text property) and “Image” (Image property) then you want to create a Relationship between your “Favorite Places” collection and the “Users” collection that Adalo automatically creates.
  • This relationship will be a many-to-many relationship so that you can have multiple users favoriting multiple trips and multiple trips being favored by multiple users.
  • Next, update the “Favorite Places” relationship property that you just added to read “Favorited By” - this will help make it clearer in your database to see which users have favorited which places.

Favoriting an Item on a List

  • Create a new Screen for your Favorite’s List
  • Then drag on a Custom List and customize it however you like
  • Connect your list to the Favorite Places Collection
  • Once you’ve customized your list, go to the Components panel and drag in a Toggle button
  • On the left panel, under “What does this toggle?”, select for the Toggle to connect to the Current Favorite Place - Favorited By - Includes the Logged in User?. This will connect the favorited items to the logged in user.
  • Customize your icons to be Favorite for “Active” and Favorite_Border for “Inactive Icon”
  • Then preview and woo! You can now favorite an item within a list!

Favoriting an Item on a Details Screen

  • Create a new Screen for your Details Screen
  • Customize your screen however you like
  • Once you’ve customized your screen, go to the Components panel and drag in a Toggle button to the App Bar
  • On the left panel, under “What does this toggle?”, select for the Toggle to connect to the Current Favorite Place - Favorited By - Includes the Logged in User?. This will connect the favorited items to the logged in user.
  • Customize your icons to be Favorite for “Active” and Favorite_Border for “Inactive Icon”
    • Pro Tip: Change your “Active” color to be something other than the default color, if the default color is the same as your App Bar to prevent them blending in together
  • Select the App Bar and press Shift and also select the Favorite icon
  • On the left panel, select “Make Group”
  • Then go to Edit Styles and select “Top” on Fixed (this will keep the App Bar fixed to the top of the screen)
  • Now, preview your app and hooray! You can now favorite an item on a details screen!

Filter Favorite Items

  • Create a new Screen for your Filtered Favorites Screen
  • From the Components panel, add a Simple list
  • Bind the Simple List to the collection of Favorite Places
  • Select the to Filter and set the filter to Logged In User - Favorite Places - All
  • Preview and viola! You can now add a filter to your favorite items within a list!

Use Conditional Visibility to Create a Favorite Button

  • Create a new Screen that will contain your Favorite button
  • Add a button to the screen and duplicate it
  • Place them either side-to-side or one directly above (or below) the other one
  • Style the buttons (we chose to do Favorite and Favorited)
  • Select the button that is going to show as the Favorite
  • On the left panel, click on the 3 dots next to the button name
  • Select to change the visibility to
    • Sometimes Visible - Current Favorite Place - Favorite Places - All
    • Does not contain
    • Logged in user
  • Select the button that is going to show as the Favorited
    • Sometimes Visible - Current Favorite Place - Favorite Places - All
    • Contains
    • Logged in user
  • Add an Action for the Favorite button to Update the Current Favorite Place
  • Scroll down within the Action to Favorite Places to ‘Add the Logged in User’
  • Now, we’ll do the reverse for the Favorited button. Add an Action for the Favorited button to Update the Current Favorite Place
  • Scroll down within the Action to Favorite Places to Remove the Logged in User’
  • Happy day! Preview and now you can show Favorite and Favorited using Conditional Visibility!
Copy link
Outline