Comment on page
How to Allow Users to Follow Others
If your app has a social element where users can follow one another, check out this tutorial.
This tutorial starts with a View User's Profile screen already created. To learn more about how to create profile screen, you can review the How to set up a Public Profile screen for Users tutorial.
- 1.Open the Database section on the left toolbar.
- 2.Select the drop down arrow to expand the Users data table.
- 3.Select + ADD PROPERTY.
- 4.Hover over Relationship.
- 5.Select Users.
- 6.Select the option that states "A User can have multiple Users. A User can have multiple Users".
- 7.Select Done.
- 8.Back on the left toolbar, in the red box for the Users relationship select the Name field where it says Users.
- 9.Delete the text Users and rename it to Following.
- 10.Select Save
.gif?alt=media&token=c3446fc2-7dcd-4ed9-a1df-d2047bc3bbd9)
- 1.Open the Database section on the left toolbar.
- 2.Select the drop drop down arrow to expand the Users data table.
- 3.Select + ADD PROPERTY.
- 4.Hover over Relationship.
- 5.Select Users.
- 6.Select the option that states "A User can have multiple Users. A User can have multiple Users".
- 7.Select Done.
- 8.Back on the left toolbar, in the red box for the Users relationship select the Name field where it says Users.
- 9.Delete the text Users and rename it to Followers.
- 10.Select Save
.gif?alt=media&token=7f6053a9-36e3-4bec-b3a6-1c81834860a1)
- 1.Select the add component button
- 2.Select Text.
- 3.Place the text on the screen.
- 4.On the left toolbar, place your cursor in the grey box under, where it says Enter Text.
- 5.Delete the text.
- 6.Type in "Follow?"
.gif?alt=media&token=f598cd8f-430b-4ac4-9e1f-4096391399ce)
- 1.Select the add component button
- 2.Scroll down to the Buttons section and select it to expand the menu.
- 3.Select the Toggle component.
- 4.Place the toggle on the screen.
- 5.Under What does this trigger?, select Logged in User > Following > Includes Current User?.
.gif?alt=media&token=c61da2d8-9760-4294-ac88-b6983d14ad90)
- 1.Select the Toggle.
- 2.On the left toolbar, scroll down to the Click Actions section and select + ADD ACTION.
- 3.Select Update > Current User.
- 4.In the Update section that just appeared in the left toolbar, scroll down to Followers and select the drop down arrow.
- 5.Select ADD > Logged In User.
- 6.Select Show Advanced.
- 7.Under When does this happen? Select the drop down arrow where it says Always and change it to Sometimes.
- 8.Underneath where it says This Action will only happen if... select the drop down arrow next to where it says Select.
- 9.Set it to Current User > Followers > All
- 10.Next to where it says Contains, select the drop down arrow.
- 11.Select Does not contain.
- 12.For the last value of the condition, where it says Empty, select the drop down arrow and set it to Logged in User.
- 13.Select Done.
.gif?alt=media&token=5055a564-084c-464c-a3b2-1725b1b91710)
- 1.Select the Toggle.
- 2.On the left toolbar, scroll down to the Click Actions section and select + ADD ACTION.
- 3.Select Update > Current User.
- 4.In the Update section that just appeared in the left toolbar, scroll down to Followers and select the drop down arrow.
- 5.Select Remove> Logged In User.
- 6.Select Show Advanced.
- 7.Under When does this happen?, select the drop down arrow where it says Always and change it to Sometimes.
- 8.Underneath where it says This Action will only happen if... select the drop down arrow next to where it says Select.
- 9.Set it to Current User > Followers > All
- 10.The next field will auto populate as Contains. Leave that as is.
- 11.For the last value of the condition, where it says Empty, select the drop down arrow and set it to Logged in User.
- 12.Select Done.
.gif?alt=media&token=13cc5394-5588-430e-8f53-c0b9d4f29aac)
- 1.On the left toolbar, select the Add Component button.
- 2.Select Button.
- 3.Place it on the screen.
- 4.On the left toolbar underneath where it says Text, select the text Button and removed it.
- 5.Add the text Follow.
.gif?alt=media&token=8f005aca-2a2d-4509-b269-e9a65aa47717)
- 1.Select the follow button.
- 2.On the left toolbar, underneath Click Actions, select + ADD ACTION.
- 3.Set the action to Update > Logged In User
- 4.In the Update section that just appeared in the left toolbar, scroll down to Following and select the drop down arrow.
- 5.Set it to Add > Current User.
- 6.Select Done.
.gif?alt=media&token=77c01ec8-2679-4aa5-9574-cf68b37b3a65)
- 1.Select the follow button.
- 2.On the left toolbar, underneath Click Actions, select + ADD ANOTHER ACTION.
- 3.Set the action to Update > Current User
- 4.In the Update section that just appeared in the left toolbar, scroll down to Followers and select the drop down arrow.
- 5.Set it to Add > Logged In User.
- 6.Select Done.
.gif?alt=media&token=1f5a5e5c-38bc-4a21-b267-ef5a550a8f1e)
- 1.Select the Follow button.
- 2.On the left toolbar next the where it says the name of your button, select the overflow menu.
- 3.Select Change Visibility.
- 4.On the left toolbar in the Visibility section, select the drop down arrow next to where it says Always Visible.
- 5.Set it to Sometimes Visible.
- 6.Underneath where is says Will be visible if... select the drop down menu.
- 7.Set it to Logged in User > Following > All.
- 8.Next to where it says Contains, select the drop down arrow.
- 9.Select Does not contain.
- 10.For the last value of the condition, where it says Empty, select the drop down arrow and set it to Current User.
- 11.Select Done.
.gif?alt=media&token=ca12a0f7-a35d-45a7-ab85-da00192a9603)
- 1.On the left toolbar, select the Add Component button.
- 2.Select Button.
- 3.Place it on the screen.
- 4.On the left toolbar underneath where it says Text, select the text Button and removed it.
- 5.Add the text Unfollow.
- 6.Underneath where it says Icon, select the x to remove the icon that is in place.
- 7.Select the drop down menu.
- 8.Select an icon that you would like to use. In this situation, I chose to use the cancel icon.
.gif?alt=media&token=89fb84dd-2702-45e6-9e7b-d3e389051620)
- 1.Select the Unfollow button.
- 2.On the left toolbar, underneath Click Actions, select + ADD ACTION.
- 3.Set the action to Update > Logged In User
- 4.In the Update section that just appeared in the left toolbar, scroll down to Following and select the drop down arrow.
- 5.Set it to Remove > Current User.
- 6.Select Done.
.gif?alt=media&token=1b8e56b4-418e-43cd-84ec-6649fc9707ce)
- 1.Select the follow button.
- 2.On the left toolbar, underneath Click Actions, select + ADD ANOTHER ACTION.
- 3.Set the action to Update > Current User
- 4.In the Update section that just appeared in the left toolbar, scroll down to Followers and select the drop down arrow.
- 5.Set it to Remove > Logged In User.
- 6.Select Done.
.gif?alt=media&token=d3b6df53-0ff7-4560-b163-f532e5bbe18f)
- 1.Select the Unfollow button.
- 2.On the left toolbar next the where it says the name of your button, select the overflow menu.
- 3.Select Change Visibility.
- 4.On the left toolbar in the Visibility section, select the drop down arrow next to where it says Always Visible.
- 5.Set it to Sometimes Visible.
- 6.Underneath where is says Will be visible if... select the drop down menu.
- 7.Set it to Logged in User > Following > All.
- 8.The next field will auto populate as Contains. Leave that as is.
- 9.For the last value of the condition, where it says Empty, select the drop down arrow and set it to Current User.
- 10.Select Done.
.gif?alt=media&token=134ab141-6fcf-4777-8189-dd2b03031911)