cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Anonymous
Not applicable

Changing an image when clicking an image

Hello everyone,

 

I have a question regarding the image OnSelect.

What I would like to do is when I click on an image (happy smiley), I would like to gray (or change opacity) out the other 2 (neutral and sad) (or replace them by greyed out images).

However they still need to be able to click the other smileys, because a user might change the way he/ she feels.

Screenshot_24.png

 

I can't seem to get this to work...

1 ACCEPTED SOLUTION

Accepted Solutions
WarrenBelz
Super User
Super User

Hi @Anonymous ,

I assume you are using Image controls here.

You can conditionally change their properties (actual image shown) with the Image property based on a Variable that can be set with the OnSelect property of the image. So if you have a variable called vImage (or whatever), and two icons (one grayscale and one color), each icon could have something like (the Smiley Image property)

If(
  vImage = "Smiley",
  colorSmiley,
  greySmiley
)

and the OnSelect of the Smiley

UpdateContext({vImage:"Smiley"})

with these names being the names of the images loaded into your Media.

So each time an icon is pressed, it would go to the color version and the others to the grayscale version.

 

Please click Accept as solution if my post helped you solve your issue. This will help others find it more readily. It also closes the item. If the content was useful in other ways, please consider giving it Thumbs Up.

 

View solution in original post

2 REPLIES 2
WarrenBelz
Super User
Super User

Hi @Anonymous ,

I assume you are using Image controls here.

You can conditionally change their properties (actual image shown) with the Image property based on a Variable that can be set with the OnSelect property of the image. So if you have a variable called vImage (or whatever), and two icons (one grayscale and one color), each icon could have something like (the Smiley Image property)

If(
  vImage = "Smiley",
  colorSmiley,
  greySmiley
)

and the OnSelect of the Smiley

UpdateContext({vImage:"Smiley"})

with these names being the names of the images loaded into your Media.

So each time an icon is pressed, it would go to the color version and the others to the grayscale version.

 

Please click Accept as solution if my post helped you solve your issue. This will help others find it more readily. It also closes the item. If the content was useful in other ways, please consider giving it Thumbs Up.

 

Anonymous
Not applicable

Hello @WarrenBelz.


Thank you for your reply.

This did the trick!

Thank you very much!

Helpful resources

Announcements
Power Apps Africa Challenge 2022

Power Apps Africa Challenge

Your chance to join an engaging competition of Power Platform enthusiasts.

Super User 2 - 2022 Congratulations

Welcome Super Users

The Super User program for 2022 - Season 2 has kicked off!

September Events 2022

Check out all of these events

Attend in person or online, there are incredible conferences and events happening all throughout the month of September.

Government Carousel

New forum: GCC, GCCH, DoD - Federal App Makers (FAM)

In response to the unique and evolving requirements of the United States public sector, Microsoft has created Power Apps US Government.

Users online (1,946)