How to show cursor hand for images in Power Apps Canvas apps

I am back with another blog on Power Apps and this time again it’s on a requirement which is pretty simple and yet tricky.

We use images in our Canvas apps. And it’s quite obvious if you are building a canvas app for an organization, they will have their own themes and images you need to use in the canvas app as well.

But there is a problem with using images for icons, especially when you want to do something on click of the image. When you hover over the image to click it, the cursor is arrow.

For end-users this is problematic. As we all are accustomed to cursor changing to hand when we hover any clickable icon. If you are thinking there is a property to take care of this, unfortunately there is none.

So let’s see how we can accomplish this. There are multiple ways to accomplish this and the first thing that come to mind is HTML text control. We can use the img tag inside href tag and make it clickable.

However I will keep this for another blog. Today I am going to achieve this using a very simple technique. In canvas apps, button controls change to cursor when we hover about them. How about showing a button to achieve this?

Below is a clickable image where I want to show cursor as hand when hovered.

For that, I insert a button control and set the following properties

Now comes the important part. We need to go ahead and make sure the image is visible. For that, we the the following properties to Transparent.

• Color
• Fill
• FocusedBorderColor
• PressedBorderColor
• PressedColor
• PressedFill
• HoverBorderColor
• HoverFill
• HoverColor

I have set the PressedFill property for an example

All set and done, the final thing is to copy the OnSelect formula of the image to the button. After all this, below is the solution in action. As you can see when we hover over the image, the cursor changes to hand.

Hope this helped! You will also like the below posts.

Debajit Dutta
Business Solutions MVP