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
- 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!
Last modified 2yr ago