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 Platform Conf 2022 768x460.jpg

Join us for Microsoft Power Platform Conference

The first Microsoft-sponsored Power Platform Conference is coming in September. 100+ speakers, 150+ sessions, and what's new and next for Power Platform.

May UG Leader Call Carousel 768x460.png

June User Group Leader Call

Join us on June 28 for our monthly User Group leader call!

PA Virtual Workshop Carousel 768x460.png

Register for a Free Workshop

This training provides practical hands-on experience in creating Power Apps solutions in a full-day of instructor-led App creation workshop.

PA.JPG

New Release Planning Portal (Preview)

Check out our new release planning portal, an interactive way to plan and prepare for upcoming features in Power Platform.

Top Solution Authors
Users online (2,098)