cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
stapes
Post Prodigy
Post Prodigy

Clickable Image - is this possible with Power Apps?

I am not sure what you would call this.

I want to display a simple map of a warehouse & have the users click on various locations using the map to get data on various locations.

This would not be a Google Maps or Bing Maps. Just a Jpeg.

Is it even possible with Power Apps?

13 REPLIES 13

Not my video, but @ericonline made the video. I would be interested to know how you made the 'sliders'. My app requires the user to enter numerical x & y coordinates to add or move waypoints. It's a little clunky but it works.

@stapes, I know that it is @ericonline 's video, I replied to his comment. 🙂 

 

I have two sliders (I made the app in Teams, for some of the properties, I needed to use the Slider from Classic menu).

My image has the property CalculateOriginalDimensions set to true.

SliderX: Covers the whole image, Max property is Img_Map.Width, handle, rail colors has 0 alphas, so they aren't shown.

SliderY: Height is the Img_Map.Height (the Max property also). X coordinate is SliderX.Value-Self.Width/2, so it moves with the invisible X Slider. 

 

To store the information:

 

Xcoord: Img_Map.OriginalWidth/Img_Map.DisplayedWidth*(SliderX.Value-(Img_Map.Width-Img_Map.DisplayedWidth)/2)

Ycoord: Img_Map.OriginalWidth/Img_Map.DisplayedWidth*((Img_Map.Height - SliderY.Value)-(Img_Map.Height-Img_Map.DisplayedHeight)/2)

 

Note that in case of the Ycoord, the SliderY.Value needs to be subtracted from the Img_Map.Height, as the vertical slider starts from the bottom of the image (the SliderX start at 0,0 coordinate).

 

Using OriginalWidth and DisplayedWidth allows the responsive design, as the Dataverse / Collection stores the coordinates for the original image.

 

To display the information:

 

X:
Img_Map.X+(Img_Map.Width-Img_Map.DisplayedWidth)/2+Img_Map.DisplayedWidth/Img_Map.OriginalWidth*ThisItem.Xcoord-Self.Width/2

Y:
Img_Map.Y+(Img_Map.Height-Img_Map.DisplayedHeight)/2+Img_Map.DisplayedHeight/Img_Map.OriginalHeight*ThisItem.Ycoord-Self.Height/2

 

 

First you need to select X with the invisible slider, and than the Y with the visible Y slider. 

It's a little clunky too, this it how it looks. (I didn't show the actual saving part)

 

I hope this helps!

Thank you @mate_toth 

 

What did you mean by this?

 

"(I made the app in Teams"

@stapes,

I meant that I created the app in Power Apps Studio in the Teams desktop client. 
I highlighted this because the "Teams version" has the modern Fluent UI controls, and those don't have the same set of properties as the classic controls. The classic controls are off by default, they need to be enabled on in the settings.

 

Helpful resources

Announcements
PA_User Group Leader_768x460.jpg

Manage your user group events

Check out the News & Announcements to learn more.

Power Query PA Forum 768x460.png

Check it out!

Did you know that you can visit the Power Query Forum in Power BI and now Power Apps

Carousel 2021 Release Wave 2 Plan 768x460.jpg

2021 Release Wave 2 Plan

Power Platform release plan for the 2021 release wave 2 describes all new features releasing from October 2021 through March 2022.

R2 (Green) 768 x 460px.png

Microsoft Dynamics 365 & Power Platform User Professionals

DynamicsCon is a FREE, 4 half-day virtual learning experience for 11,000+ Microsoft Business Application users and professionals.

Users online (1,123)