How to create a "Favorite" button (Legacy Builder)

Please note: This setup is for the Legacy Mobile Builder and may be different in the responsive Adalo 2.0 Builder.

You might want to create an experience where users can favorite items within your Adalo Legacy 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!