How to create a "Favorite" button (Legacy Builder)
Last updated
Last updated
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
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.
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!
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!
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!
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!