Custom Like and Dislike

[A_VA_Help]

Hello everyone! I want to create custom like and dislike, using images like this:

I have to create three cases:

1. Only Like
2. Only Dislike
3. Without Likes and Dislikes

And I set visibility my like_active and dislike_active as false at first:

Then instead of flow functions, I used a formula for like and dislike.

First of all I gave page variables for like and dislike:

And then for each visibility of these components I gave formulas like these:

!

And it is working, when i tap to the like and dislike separately:

But I have a problem and I can’t solve it:

When I tap to the dislike_inactive(gray) from the like_active(yellow) it shows me all custom images…
Or vice versa, from dislike_active(yellow) to the like_inactive(gray).

I tried to set formulas many times, but I can’t solve it…

Could anyone help?

For more details you can run and see my app…

my app id: 190519.

[Mari]

Hi!

The || operator evaluates to true if either one of the statements evaluate to true, that’s why you’re getting double visibilities.

Visibilities should work like this:

Like_Inactive: pageVars.likeTab === "likeInactive"
Like_Active: pageVars.likeTab === "likeActive"
Dislike_Inactive: pageVars.dislike_Tab === "dislikeInactive"
Dislike_Active: pageVars.dislike_Tab === "dislikeActive"

[A_VA_Help]

What does it “===” mean?

I set as written above, but I have empty image icons there… Although I set like_inactive and dislike_inactive as True…

[Mari]

Hi, === signifies deep equality, check out this article.

I assumed that you were giving likeTab text values because you were comparing them to texts ("") in the formulas, not variables. If you give likeTab and dislikeTab true/false values, you can just write:

Like_Inactive: !pageVars.likeTab
Like_Active: pageVars.likeTab
Dislike_Inactive: !pageVars.dislike_Tab
Dislike_Active: pageVars.dislike_Tab

[A_VA_Help]

Okay. Could you just explain how to create custom like and dislike?)

[Mari]

Hi, I would have the four images like you do, then two true/false variables like and dislike with an initial value of false for both.

On component tap, I would set the variable to the opposite value with a formula: !like or !dislike.

The visibility bindings for the images would be:
Thumbs up (active) like
Thumbs up (inactive) !like
Thumbs down (active) dislike
Thumbs down (inactive) !dislike