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!