Adalo Resources
Sign Up for Adalo
Ask or search…
⌃K
Links
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.

Setting up the Data

1) Add a Following relationship to your Users table

  1. 1.
    Open the Database section on the left toolbar.
  2. 2.
    Select the drop down arrow to expand the Users data table.
  3. 3.
    Select + ADD PROPERTY.
  4. 4.
    Hover over Relationship.
  5. 5.
    Select Users.
  6. 6.
    Select the option that states "A User can have multiple Users. A User can have multiple Users".
  7. 7.
    Select Done.
  8. 8.
    Back on the left toolbar, in the red box for the Users relationship select the Name field where it says Users.
  9. 9.
    Delete the text Users and rename it to Following.
  10. 10.
    Select Save

2) Add a Followers relationship to your Users table

  1. 1.
    Open the Database section on the left toolbar.
  2. 2.
    Select the drop drop down arrow to expand the Users data table.
  3. 3.
    Select + ADD PROPERTY.
  4. 4.
    Hover over Relationship.
  5. 5.
    Select Users.
  6. 6.
    Select the option that states "A User can have multiple Users. A User can have multiple Users".
  7. 7.
    Select Done.
  8. 8.
    Back on the left toolbar, in the red box for the Users relationship select the Name field where it says Users.
  9. 9.
    Delete the text Users and rename it to Followers.
  10. 10.
    Select Save

​

Set up Following? using a toggle

1) Set up the text label

  1. 1.
    Select the add component button
  2. 2.
    Select Text.
  3. 3.
    Place the text on the screen.
  4. 4.
    On the left toolbar, place your cursor in the grey box under, where it says Enter Text.
  5. 5.
    Delete the text.
  6. 6.
    Type in "Follow?"

2) Set theToggle and add the current user to users that the logged in user is following

  1. 1.
    Select the add component button
  2. 2.
    Scroll down to the Buttons section and select it to expand the menu.
  3. 3.
    Select the Toggle component.
  4. 4.
    Place the toggle on the screen.
  5. 5.
    Under What does this trigger?, select Logged in User > Following > Includes Current User?.

3) Set up an action to add the logged in user as a follower of the current user

  1. 1.
    Select the Toggle.
  2. 2.
    On the left toolbar, scroll down to the Click Actions section and select + ADD ACTION.
  3. 3.
    Select Update > Current User.
  4. 4.
    In the Update section that just appeared in the left toolbar, scroll down to Followers and select the drop down arrow.
  5. 5.
    Select ADD > Logged In User.
  6. 6.
    Select Show Advanced.
  7. 7.
    Under When does this happen? Select the drop down arrow where it says Always and change it to Sometimes.
  8. 8.
    Underneath where it says This Action will only happen if... select the drop down arrow next to where it says Select.
  9. 9.
    Set it to Current User > Followers > All
  10. 10.
    Next to where it says Contains, select the drop down arrow.
  11. 11.
    Select Does not contain.
  12. 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. 13.
    Select Done.

4) Set up an action to remove the logged in user as a follower of the current user

  1. 1.
    Select the Toggle.
  2. 2.
    On the left toolbar, scroll down to the Click Actions section and select + ADD ACTION.
  3. 3.
    Select Update > Current User.
  4. 4.
    In the Update section that just appeared in the left toolbar, scroll down to Followers and select the drop down arrow.
  5. 5.
    Select Remove> Logged In User.
  6. 6.
    Select Show Advanced.
  7. 7.
    Under When does this happen?, select the drop down arrow where it says Always and change it to Sometimes.
  8. 8.
    Underneath where it says This Action will only happen if... select the drop down arrow next to where it says Select.
  9. 9.
    Set it to Current User > Followers > All
  10. 10.
    The next field will auto populate as Contains. Leave that as is.
  11. 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. 12.
    Select Done.

​

Set up following users with buttons

1) Add the Follow button

  1. 1.
    On the left toolbar, select the Add Component button.
  2. 2.
    Select Button.
  3. 3.
    Place it on the screen.
  4. 4.
    On the left toolbar underneath where it says Text, select the text Button and removed it.
  5. 5.
    Add the text Follow.

2) Set up an action to add the current user to the Logged in User's Following list.

  1. 1.
    Select the follow button.
  2. 2.
    On the left toolbar, underneath Click Actions, select + ADD ACTION.
  3. 3.
    Set the action to Update > Logged In User
  4. 4.
    In the Update section that just appeared in the left toolbar, scroll down to Following and select the drop down arrow.
  5. 5.
    Set it to Add > Current User.
  6. 6.
    Select Done.

3) Set up an action to add the logged in user to the current user's list of followers

  1. 1.
    Select the follow button.
  2. 2.
    On the left toolbar, underneath Click Actions, select + ADD ANOTHER ACTION.
  3. 3.
    Set the action to Update > Current User
  4. 4.
    In the Update section that just appeared in the left toolbar, scroll down to Followers and select the drop down arrow.
  5. 5.
    Set it to Add > Logged In User.
  6. 6.
    Select Done.

4) Set up the Follow button to be conditionally visible

  1. 1.
    Select the Follow button.
  2. 2.
    On the left toolbar next the where it says the name of your button, select the overflow menu.
  3. 3.
    Select Change Visibility.
  4. 4.
    On the left toolbar in the Visibility section, select the drop down arrow next to where it says Always Visible.
  5. 5.
    Set it to Sometimes Visible.
  6. 6.
    Underneath where is says Will be visible if... select the drop down menu.
  7. 7.
    Set it to Logged in User > Following > All.
  8. 8.
    Next to where it says Contains, select the drop down arrow.
  9. 9.
    Select Does not contain.
  10. 10.
    For the last value of the condition, where it says Empty, select the drop down arrow and set it to Current User.
  11. 11.
    Select Done.

5) Add the Unfollow button

  1. 1.
    On the left toolbar, select the Add Component button.
  2. 2.
    Select Button.
  3. 3.
    Place it on the screen.
  4. 4.
    On the left toolbar underneath where it says Text, select the text Button and removed it.
  5. 5.
    Add the text Unfollow.
  6. 6.
    Underneath where it says Icon, select the x to remove the icon that is in place.
  7. 7.
    Select the drop down menu.
  8. 8.
    Select an icon that you would like to use. In this situation, I chose to use the cancel icon.

6) Set up an action to remove the current user from the list of users that the logged in user is following

  1. 1.
    Select the Unfollow button.
  2. 2.
    On the left toolbar, underneath Click Actions, select + ADD ACTION.
  3. 3.
    Set the action to Update > Logged In User
  4. 4.
    In the Update section that just appeared in the left toolbar, scroll down to Following and select the drop down arrow.
  5. 5.
    Set it to Remove > Current User.
  6. 6.
    Select Done.

7) Set up an action to remove the logged in user form the current users list of followers

  1. 1.
    Select the follow button.
  2. 2.
    On the left toolbar, underneath Click Actions, select + ADD ANOTHER ACTION.
  3. 3.
    Set the action to Update > Current User
  4. 4.
    In the Update section that just appeared in the left toolbar, scroll down to Followers and select the drop down arrow.
  5. 5.
    Set it to Remove > Logged In User.
  6. 6.
    Select Done.

8) Set up the Unfollow button to be conditionally visible

  1. 1.
    Select the Unfollow button.
  2. 2.
    On the left toolbar next the where it says the name of your button, select the overflow menu.
  3. 3.
    Select Change Visibility.
  4. 4.
    On the left toolbar in the Visibility section, select the drop down arrow next to where it says Always Visible.
  5. 5.
    Set it to Sometimes Visible.
  6. 6.
    Underneath where is says Will be visible if... select the drop down menu.
  7. 7.
    Set it to Logged in User > Following > All.
  8. 8.
    The next field will auto populate as Contains. Leave that as is.
  9. 9.
    For the last value of the condition, where it says Empty, select the drop down arrow and set it to Current User.
  10. 10.
    Select Done.
Previous
How to set up a Public Profile screen for Users
Next
How to have a Form Automatically Set a Status (or any other related record)
Last modified 2yr ago