# 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 {% embed url="" %} #### 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!