# Change Icon when Clicked?

**URL:** <https://forum.bubble.io/t/change-icon-when-clicked/204491>\
**Category:** Questions\
**Created:** [April 29, 2022, 5:14pm UTC](https://forum.bubble.io/t/change-icon-when-clicked/204491 "2022-04-29T17:14:55Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Vishera](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/vishera/32/128075_2.png) [@Vishera](https://forum.bubble.io/u/Vishera)\
**Post date:** [April 29, 2022, 5:14pm UTC](https://forum.bubble.io/t/change-icon-when-clicked/204491/1 "2022-04-29T17:14:55Z")

</div>

My users can “like” each other’s profiles. There is the Open Heart Icon and a # next to it to show how many likes they have. The idea is to click the open heart icon, the # updates and the icon changes to the full? heart icon.

This way I can say “+1 to likes only when icon = open heart icon” This would prevent people from just clicking 100x. I want them to only be able to do this once

---

<div class="post-metadata">

**Author:** ![adamhholmes](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/adamhholmes/32/100510_2.png) [@adamhholmes](https://forum.bubble.io/u/adamhholmes)\
**Post date:** [April 29, 2022, 5:36pm UTC](https://forum.bubble.io/t/change-icon-when-clicked/204491/2 "2022-04-29T17:36:04Z")

</div>

First, you need to save in your database somehow which User has ‘liked’ which other User’s profile.

Then just use a conditional on the icon to change it from an empty heart to a full heart when the Current User has liked the particular User’s Profile.

Also use conditionals on your workflow actions and/or on the icon itself to ensure a User can only ‘like’ something once.

---

<div class="post-metadata">

**Author:** ![Vishera](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/vishera/32/128075_2.png) [@Vishera](https://forum.bubble.io/u/Vishera)\
**Post date:** [April 29, 2022, 6:02pm UTC](https://forum.bubble.io/t/change-icon-when-clicked/204491/3 "2022-04-29T18:02:30Z")

</div>

hmm. This is difficult to wrap my head around.

So when a user likes another user’s profile. It should store that user’s profile in a list I assume? and then on the “View profiles I like” page, it would need to display all the profiles in an RG.

I am not sure how to do this.

Also, I set the condition  
 ![image](https://us1.discourse-cdn.com/bubble/original/3X/a/4/a450cf9883c66cc4b95148b86dc8b3e665fddfdb.png)  
To change the icon when pressed. It changes it briefly and then back to the open heart. It also doesn’t update the # of likes.  
 ![image](https://us1.discourse-cdn.com/bubble/original/3X/7/0/706450fa724b702163f6237cac7c5e1e9acac812.png)  
This works however IF I remove the conditional.

Thanks for the help BTW. 🙂

---

<div class="post-metadata">

**Author:** ![adamhholmes](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/adamhholmes/32/100510_2.png) [@adamhholmes](https://forum.bubble.io/u/adamhholmes)\
**Post date:** [April 29, 2022, 6:19pm UTC](https://forum.bubble.io/t/change-icon-when-clicked/204491/4 "2022-04-29T18:19:14Z")

</div>

> [@Vishera](#):
>
> So when a user likes another user’s profile. It should store that user’s profile in a list I assume?

You _could_ do that, but it’s probably not the recommended way to do it (for performance reasons)…

A better approach is probably to create a separate datatype for ‘likes’, with a field for the User who’s liking, and a field for the User being liked (and if your users can like other things beside just other users, have fields for those things as well).

> and then on the “View profiles I like” page, it would need to display all the profiles in an RG.

Yes, if that’s what you’re trying to do.

> To change the icon when pressed. It changes it briefly and then back to the open heart.

Yes, indeed… the condition ‘is pressed’ is only true whilst the User’s mouse button is held down…

In any case, that’s irrelevant here…

Your conditional needs to be based on whether or not the Current User has liked the User’s profile (not whether or not the mouse button is being held down)… so depending on how you’re storing the ‘Like’ in your database it might be `when: search for Likes: 'User = Current User' and 'Liked User = Parent Group's User': count < 0` `Change the icon to a full heart and make the element unclickable`

---

<div class="post-metadata">

**Author:** ![Vishera](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/vishera/32/128075_2.png) [@Vishera](https://forum.bubble.io/u/Vishera)\
**Post date:** [April 29, 2022, 9:08pm UTC](https://forum.bubble.io/t/change-icon-when-clicked/204491/5 "2022-04-29T21:08:52Z")

</div>

> [@adamhholmes](#):
>
> Your conditional needs to be based on whether or not the Current User has liked the User’s profile (not whether or not the mouse button is being held down)… so depending on how you’re storing the ‘Like’ in your database it might be `when: search for Likes: 'User = Current User' and 'Liked User = Parent Group's User': count < 0` `Change the icon to a full heart and make the element unclickable`

So I got it to add the current user’s username to the list when they click the icon. It displays the count of that list as well in the text next to it.

All I have now is the conditional, which I can’t get right.  
 ![image](https://us1.discourse-cdn.com/bubble/original/3X/b/e/be4ad47069ee7e9e62dca5b68bb9689a8b3b88d8.png)  
I have it set to search “Builds” which is where the liked users list is stored. To me this says When “Builds” contains the Current User’s Username, then change the icon. but it doesn’t like that.

---

<div class="post-metadata">

**Author:** ![adamhholmes](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/adamhholmes/32/100510_2.png) [@adamhholmes](https://forum.bubble.io/u/adamhholmes)\
**Post date:** [April 29, 2022, 9:19pm UTC](https://forum.bubble.io/t/change-icon-when-clicked/204491/6 "2022-04-29T21:19:56Z")

</div>

I don’t know how your database is set up, (so I can only really guess)… but, assuming you’re storing actual Users on the list (and not texts) then you don’t want to use Username, just the User itself… but it depends on how your database is set up…

As it is, that expression doesn’t make sense… hence why it’s red… it needs to evaluate to a yes/no.

Again, without knowing how your database is set up i can’t be very specific, but assuming you’re using a list to store the users who have liked whatever it is they’re liking (which as I said previously, is not the best way to do it), you’ll just want to say when the Buildss’s list of Users contain the current user.

Or, if you’re doing it the other way round, then use ‘when the current users list of liked things contains the thing’.

---

<div class="post-metadata">

**Author:** ![Vishera](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/vishera/32/128075_2.png) [@Vishera](https://forum.bubble.io/u/Vishera)\
**Post date:** [April 29, 2022, 9:43pm UTC](https://forum.bubble.io/t/change-icon-when-clicked/204491/7 "2022-04-29T21:43:02Z")

</div>

> [@adamhholmes](#):
>
> I don’t know how your database is set up, (so I can only really guess)… but, assuming you’re storing actual Users on the list (and not texts) then you don’t want to use Username, just the User itself… but it depends on how your database is set up…

ah I gotcha. So I changed it to store the User on a list of Users rather than the username on a list of text.

 ![image](https://us1.discourse-cdn.com/bubble/original/3X/7/9/79fa74f4b27cff80bdabce20133b1662b1acab2f.png)  
This adds the email of the user that clicks “Like”

 ![image](https://us1.discourse-cdn.com/bubble/original/3X/0/6/0651d7306a26576e7fcf4f61ca3b5923d51ce1f3.png)  
I feel like I am on the right track though.

---

<div class="post-metadata">

**Author:** ![adamhholmes](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/adamhholmes/32/100510_2.png) [@adamhholmes](https://forum.bubble.io/u/adamhholmes)\
**Post date:** [April 29, 2022, 9:48pm UTC](https://forum.bubble.io/t/change-icon-when-clicked/204491/8 "2022-04-29T21:48:54Z")

</div>

> [@Vishera](#):
>
> This adds the email of the user that clicks “Like”

It doesn’t add the email (which is a text), it adds the User itself… (it might _display_ the email on your data tab, if that’s what you’ve got it set to display, but it’s the actual User object that’s being added to the list)…

You don’t need to do a search for Buildss if you’re referring to the current page Builds…

So get rid of the 'Search for Buildss contains the current User (that doesn’t make any sense anyway - a search for Buildss will return a list of Buildss, so it can’t contain a User)…

And just use `when: current page's Builds's Users That Liked contains Current User`

---

<div class="post-metadata">

**Author:** ![Vishera](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/vishera/32/128075_2.png) [@Vishera](https://forum.bubble.io/u/Vishera)\
**Post date:** [April 29, 2022, 10:35pm UTC](https://forum.bubble.io/t/change-icon-when-clicked/204491/9 "2022-04-29T22:35:03Z")

</div>

ah okay that makes more sense now. It works perfect! This clarified things how to do the reverse as well - _remove_ the like when clicked.

Now to figure out how to display profiles I’ve liked on another page. And that’s when things get _really_ complicated

Thanks again, I’m sure I’ll be asking a million other things in the future 😆