How to create a "Favorite" button

You might want to create an experience where your users can "Favorite" or "Like" certain content. In our example Trip Planning app, we want users to be able to "Favorite" different travel destinations.

Set up your Database

  • Create a Destinations collection with Name and Image properties

  • In your Users collection, add a relationship property relating a user to multiple Destinations. Name this relationship "Favorite Destinations"

Favoriting in Lists

  1. Add a Custom List to your screen

  2. In the left panel, set the custom list to be a list of Destinations

  3. Add a Toggle to your Custom List

  4. Set the Toggle to Logged In User's Favorite Destinations includes Current Destination

5. Change the Active Icon to be "favorite" (a filled in heart) and the Inactive Icon to be "favorite-border" (an outlined heart)

Favoriting in an App Bar

You may want to also include the favorite toggle button in the app bar of a screen where you are viewing a particular Destination.

  1. In the App Bar, turn OFF Icon 1 and Icon 2

  2. Click the Plus button to open the Add Panel

  3. Scroll down and expand the Buttons category

  4. Click and drag the Toggle button onto your screen's App Bar

  5. Set the Toggle to Logged In User's Favorite Destinations includes Current Destination

  6. Change the Active Icon to be "favorite" (a filled in heart) and the Inactive Icon to be "favorite-border" (an outlined heart). Note: Depending on the color of your App Bar you might also want to change both the Inactive and Active Icon colors to be white.

  7. Make sure the toggle is still selected and then, on your keyboard, press cmd+g (or crtl+g on Windows or ChromeOS) to create a Group

  8. In the left panel for the group's settings, click the "Edit Styles" button

  9. Select "Fixed Top"

Configure your Toggle
Set the Toggle Group to be Fixed to the top of the Screen