How Do I Create A Follow Unfollow System In Bubble?

[edengaitor17]

How Do I Create A Follow Unfollow System In Bubble?

Hello Bubble Community. I’m having difficulty creating a Follow Unfollow system.

MY PROGRESS SO FAR:

1. I’ve created a field in User data type called Followers and I checked the multiple entries box so that it becomes a list.

2. I’ve created a field in User data type called Following and I checked the multiple entries box so that it becomes a list.

3. I’ve created a profile page displaying profile image and fullname of current page user, and I’ve created two hidden buttons, a Follow Button and an Unfollow Button on profile page.

4. Follow Button Condition:
   When Current User is not Current Page User and Current Page User’s Followers doesn’t contain Current User - make visible

5. Follow Button Workflow:
   Step 1 : When Follow Button is clicked make changes to current user - following list add current page user
   Step 2 :Make changes to current page user - followers list add current user

6. Unfollow Button Condition:
   When Current User is not Current Page User and Current Page User’s Followers contains Current User - make visible

7. Unfollow Button Workflow:

Step 1 : When Unfollow Button is clicked make changes to current user - following list remove current page user
Step 2 :Make changes to current page user - followers list remove current user

8. Finally I created two pages. One to display a list of followers and the other page to display a following.

MY ISSUE:

I want to display following list of users in a repeating group showcasing the associated username and profile image, but this is how it displays - It doesn’t show the following user’s name nor profile image. It only displays as a list of names in a cell:

ALSO when I made the count of following users dynamic, no following users were displayed

PLEASE HELP!

[ankur1]

Okay, I would suggest a couple of changes in your database.

I am thinking you are trying to make a twitter-like Following and Followers system.

In the user database, create the column, FollowingCount and FollowersCount and instead of having the list of Followers and Followings, create a table, that will consist of-

Following-Followers Details Data Type

1. FollowersUser
2. FollowingUser

For example- If Ankur Follow Eden

Make an entry in the table with “FollowersUser” should have “Ankur” and “FollowingUser” should have “Eden”

Now when you need to show Ankur Followers List-
Do Search For Following-Followers and find " FollowingUser " list.

Now when you need to show Ankur Following List-
Do Search For Following-Followers and find " FollowersUser " list.

Create a backend recursive workflow, that trigger database changes.
Increase/Decrease the FollowingCount and FollowersCount of the User Datatype when there is a new entry/delete entry in the Following-Followers Details Data Type

Hope you are able to understand. This sound might be confusing but when you do, you will find it pretty easy.

It solves you multiple problems-

1. Most of the time you just need to show the count instead of user list, so that info is always handy => fast search.
2. While using the list, you actually slow down your search.

[edengaitor17]

Okay, so far I’ve created the two columns in the User Data type as you suggested: Following Count and Followers Count

Then I created a new Data Type called Following-Followers Details with the 2 columns Follower and Following as suggested

However I’m unsure about 4 things:

1. what the workflow should be when the follow button is clicked

2. what the workflow should be when the unfollow button is clicked

3. what the conditional should be for the follow button so that it only show when the current user is not yet a follower of current page user

4. what the conditional should be for the unfollow button so that it only shows when the curent user is a follower of the current page user

[ankur1]

1. what the workflow should be when the follow button is clicked-

Let’s suppose “Ankur” is the current user and see the “Eden” Profile. When “Ankur” click on follow button- New entry in the Following-Followers Details Data Type with

FollowingUser = Eden
FollowersUser = Ankur

2. what the workflow should be when the unfollow button is clicked

Remove the entry from the Following-Followers Details Data Type where FollowingUser = Eden && FollowersUser = Ankur

3. what the conditional should be for the follow button so that it only shows when the current user is not yet a follower of the current page us -

Do search for where FollowingUser = Current page user && FollowersUser = loggedInUser :count > 0 - Show Unfollow option otherwise Follow option.

About backend database triggers (to update the Following Count and Followers Count)-

Set up the database trigger on Following-Followers Details Data Type so whenever users follow or unfollow someone you can update the count.

[edengaitor17]

Okay, I think I understand the logic that I should seek to apply. However, I’m confused about how to make that logic occur with the options provided in bubble.

Here’s a few images demonstrating step by step what I’ve done and where I’m stuck, so that you can see if I’m doing something wrong so that I can correct myself.

USER DATA TYPE:

FOLLOWING-FOLLOWERS DATA TYPE:

WHEN FOLLOW BUTTON IS CLICKED:

NOT SURE IF THIS IS HOW I’M SUPPOSED TO DO IT

WHEN UNFOLLOW BUTTON IS CLICKED:

AND I GET STUCK HERE:

[ankur1]

When unfollow button is clicked, Remove the entry(delete the entry) from the Following-Followers Details Data Type where FollowingUser = && FollowersUser =

[edengaitor17]

Okay I tried this, but still getting issue alert

IMAGE #1

IMAGE #2

IMAGE #3

IMAGE #4

Can you please point out exactly what it is that I am not doing right?

[ankur1]

Can we connect over zoom call?

[edengaitor17]

yes, we can