# 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](https://help.adalo.com/~/changes/u7hGXGFGahgZx26fqIxT/how-to/how-to-have-a-profile-page-for-current-user) tutorial.<br>

### Setting up the Data

#### 1) Add a *Following* relationship to your *Users* table

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*

![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LhGHkPsv15svPIU5I7C%2F-M3rL3tx83R0hRyTbb1i%2F-M3r_JeqwLIyTnYtMttQ%2FProfile%20Page%20Example%20\(25\).gif?alt=media\&token=c3446fc2-7dcd-4ed9-a1df-d2047bc3bbd9)

#### 2) Add a *Followers* relationship to your *Users* table

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*

![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LhGHkPsv15svPIU5I7C%2F-M3rL3tx83R0hRyTbb1i%2F-M3rjBLH4eWmA55hObGw%2FProfile%20Page%20Example%20\(26\).gif?alt=media\&token=7f6053a9-36e3-4bec-b3a6-1c81834860a1)

###

### Set up *Following?* using a toggle

#### 1) Set up the text label

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.*&#x20;
5. Delete the text.
6. Type in "Follow?"

![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LhGHkPsv15svPIU5I7C%2F-M3vvwAPmmmM8GBPYUBP%2F-M3vwjf-X38ncnWEM-MN%2FProfile%20Page%20Example%20\(28\).gif?alt=media\&token=f598cd8f-430b-4ac4-9e1f-4096391399ce)

#### 2) Set the*Toggle* and add the current user to users that the logged in user is following

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?.*

![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LhGHkPsv15svPIU5I7C%2F-M3vvwAPmmmM8GBPYUBP%2F-M3w-gnrBebO03AKEaOP%2FProfile%20Page%20Example%20\(29\).gif?alt=media\&token=c61da2d8-9760-4294-ac88-b6983d14ad90)

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

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.&#x20;
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.*

![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LhGHkPsv15svPIU5I7C%2F-M3vvwAPmmmM8GBPYUBP%2F-M3w5j9kiDnidI2-LzUl%2FProfile%20Page%20Example%20\(30\).gif?alt=media\&token=5055a564-084c-464c-a3b2-1725b1b91710)

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

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.&#x20;
5. Select *Remove> Logged In User.*
6. Select *Show Advanced.*
7. Under *When does this happen?, s*elect 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.*

![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LhGHkPsv15svPIU5I7C%2F-M3w6rBKynco9qmQenyT%2F-M3wEH_-r8WZ_CpOvT2k%2FProfile%20Page%20Example%20\(31\).gif?alt=media\&token=13cc5394-5588-430e-8f53-c0b9d4f29aac)

###

### Set up following users with buttons&#x20;

#### 1) Add the Follow button

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*.

![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LhGHkPsv15svPIU5I7C%2F-M3wEKcOIfjVMpS_GBik%2F-M3wIWFyB3-VeTXu90-d%2FProfile%20Page%20Example%20\(32\).gif?alt=media\&token=8f005aca-2a2d-4509-b269-e9a65aa47717)

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

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*&#x20;
4. In the *Update* section that just appeared in the left toolbar, scroll down to *Following* and select the drop down arrow.&#x20;
5. Set it to *Add > Current User.*
6. Select *Done.*

![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LhGHkPsv15svPIU5I7C%2F-M3wEKcOIfjVMpS_GBik%2F-M3wJ56L7AvOfWgGAvmq%2FProfile%20Page%20Example%20\(33\).gif?alt=media\&token=77c01ec8-2679-4aa5-9574-cf68b37b3a65)

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

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.&#x20;
5. Set it to *Add > Logged In User.*
6. Select *Done.*

![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LhGHkPsv15svPIU5I7C%2F-M3wEKcOIfjVMpS_GBik%2F-M3wKziVQiGbG0gM5Zdk%2FProfile%20Page%20Example%20\(34\).gif?alt=media\&token=1f5a5e5c-38bc-4a21-b267-ef5a550a8f1e)

#### 4) Set up the Follow button to be conditionally visible

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.*

![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LhGHkPsv15svPIU5I7C%2F-M3wmrMttciO_jVOjZnf%2F-M3wtek982cRoyIFnNVd%2FProfile%20Page%20Example%20\(36\).gif?alt=media\&token=ca12a0f7-a35d-45a7-ab85-da00192a9603)

#### 5) Add the Unfollow button

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.<br>

![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LhGHkPsv15svPIU5I7C%2F-M3wvIxWzFSJuJojK5po%2F-M3wvmjF6EDvIaICGscQ%2FProfile%20Page%20Example%20\(37\).gif?alt=media\&token=89fb84dd-2702-45e6-9e7b-d3e389051620)

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

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*&#x20;
4. In the *Update* section that just appeared in the left toolbar, scroll down to *Following* and select the drop down arrow.&#x20;
5. Set it to *Remove > Current User.*
6. Select *Done.*

![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LhGHkPsv15svPIU5I7C%2F-M3wvIxWzFSJuJojK5po%2F-M3wx7okwoUyGXN7gDw0%2FProfile%20Page%20Example%20\(38\).gif?alt=media\&token=1b8e56b4-418e-43cd-84ec-6649fc9707ce)

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

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.&#x20;
5. Set it to Remove *> Logged In User.*
6. Select *Done.*

![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LhGHkPsv15svPIU5I7C%2F-M4-hquMVlYeavs5JxwC%2F-M40-hinMzckLcl9d9uZ%2FProfile%20Page%20Example%20\(39\).gif?alt=media\&token=d3b6df53-0ff7-4560-b163-f532e5bbe18f)

#### 8) Set up the Unfollow button to be conditionally visible

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.*

![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LhGHkPsv15svPIU5I7C%2F-M40-r_D7rol9xgJGvxO%2F-M400KRW1QqQ4SrG656z%2FProfile%20Page%20Example%20\(40\).gif?alt=media\&token=134ab141-6fcf-4777-8189-dd2b03031911)

<br>
