Creating a Clickable Image to Navigate to the Next Screen in Power Apps

Introduction:

In Power Apps, users often use a clickable image for navigation between screens. This guide will show you how to integrate this feature effortlessly.

Creating Interactive UI Elements:

Interactive UI elements enhance app development, especially in Power Apps. Often, developers embed clickable images that direct users to a specific screen when clicked.

Embedding the Clickable Image in Power Apps:

To illustrate, consider adding an image to your interface. When users click this image, it should take them to a designated screen. Here’s a simple process:

1. Add an image control to your screen.
2. Set the Image property to your preferred image.
3. Use the OnSelect property with a formula to guide the user to the right screen.

When you complete these steps and run the application, the image will work as planned, taking the user to the designated screen.

However, many images lack the hand cursor on hover. This omission can confuse users about whether the image is clickable.

Displaying the Hand Cursor on Hover in Power Apps:

Visual cues matter. To solve the cursor issue, overlay a button control on the image. Since Power Apps naturally displays the hand cursor for buttons, a transparent button over the image will both show the cursor and aid navigation.

To achieve this:

1. Set the button to a transparent color.
2. Remove the button’s text attribute.
3. Adjust properties like HoverColor, HoverFill, and HoverBorderColor to ensure transparency.
4. Set the button’s OnSelect attribute to the navigation formula.

This change will make the hand cursor appear over the image, indicating its clickable nature.

Design Considerations:

Incorporating a clickable image in Power Apps can make navigation smoother and enhance the user interface’s overall feel.

Conclusion:

Adding a clickable image in Power Apps becomes easier with a transparent button overlay. This method ensures that the hand cursor appears on hover, an essential feature missing when directly modifying the image’s OnSelect attribute. For more details or technical help, please reach out to us. Contact us