Navigate from one screen to a specific point on the Y axis of a new screen

[scarnell]

Hello everyone,

I currently have multiple vertical scrollable screens that each contain several datacards. I have also set all of these screens to reset the canvas, enabling the new screen to appear at the top every time a screen is viewed.

I would like to create a button which navigates from the current screen to another screen but I would like the view to be set to either a specific value on the Y axis or navigate to a specific datacard, essentially overriding the reset canvas variable and allowing the new screen to be viewed further down the Y axis. This should only be possible when the navigation button is pressed that specifies the Y value, otherwise the canvas will reset displaying the top of the screen (as per normal).

I am new to PowerApps and coding in general so apologies if I am not clear with my request. Thank you in advance, any assistance would be very much appreciated.

[Pstork1]

I don't know of any way to adjust the screen to a particular Y value when navigating, but this may work for you as well.

Assuming that the location you want to navigate to has a data card with an editable control, like a text box, you can set a context variable to that control when you navigate to that screen.  Then in the OnVisible property of the screen use a SetFocus() to set the input focus to that control, which will scroll the screen to that location.  For exapple, I have a data card with a text box, TextInput3, in it that is off the bottom of a scrollable screen.

If I use the following on a button and in the OnVisible the screen will scroll to that texbox during navigation.

Navigate(Screen3,ScreenTransition.Fade,{controlTop:TextInput3})

SetFocus(controlTop)

When doing regular navigation just set the focus to the default entry field in the topmost datacard in the screen.

[PowerAddict]

@Pstork1 this is exactly what I had in mind. To add to that, if there is no data card, may be we can add a label at exactly the Y position where the screen is expected to scroll to. We can then set the visibility of that label to false but if setfocus doesn't work with a control that's not visible, then we can simply set the width of the label to 0.

Hopefully, all of this helps you achieve your use case.

---
If you like this reply, please give kudos. And if this solves your problem, please accept this reply as the solution. Thanks!

Hardit Bhatia
https://thepoweraddict.com

[mdevaney]

@Pstork1
Interesting. This concept strikes me as similar to HTML anchor tags. I will have to try it out for myself. Thanks for sharing!

[Pstork1]

Unfortunately, labels won't work.  It has to be a control capable of receiving input.  Labels will work when you are in the designer, but not when you are in display mode.  Think of it like jumping to a particular Tab Stop. 

[PowerAddict]

@Pstork1 thank you for the update. That was a bad oversight on my part. Would a text input control with 0 width and height work?

Thanks,
Hardit Bhatia
https://thepoweraddict.com

[Pstork1]

Yes, I suspect that would work.  It doesn't really check that you enter text, just that you can.

[v-xida-msft]

Hi @scarnell ,

Could you please share a bit more about your scenario?

Do you want to navigate to specific point on the Y axis of a new screen?

Further, do you want to navigate from one screen to another screen at specific data card via pressing the Button control?

Based on the needs that you mentioned, I agree with @Pstork1 's thought almost. I think the SetFocus function could achieve your needs. If the specific point you want to navigate to is a Button, a Icon, a Image, a Label or a Text Input box, you could use the SetFocus function to set a focus on the control when you navigate from another screen.

Set the OnSelect property of the “Button” to following:

Navigate(TargetScrollableScreen)

Set the OnVisible property of the TargetScrollableScreen to following:

SetFocus(TextInput1)  // I assume that the specific data card you want to navigate to contains a Text Input box

Best regards,

[Pstork1]

One correction.  I've tested it and although the documentation says it works with a label, it doesn't since a label can't accept input at runtime.  It will work while in design when you can type the text of a label in the designer.  But it won't work at runtime when labels are read only.

[scarnell]

Thank you all for your speedy replies, I would like to try and clarify my issue a little more.

I currently have buttons that navigate from screen to screen which automatically reset the canvas to the first datacard each time it is viewed. I have achieved this using the following code:

Screen Code:

OnHidden

UpdateContext({resetCan: true})

OnVisible

UpdateContext({resetCan:false})

Datacard Code:

Visible:

resetCan=false

This works for me so far as the screen will automatically reset to show the first datacard every time the screen has been navigated to.

What I would like to do now is add another button that will allow me to navigate to a specific point (can be a datacard) on the y axis but only when that specific button is pressed. Navigation should return to normal otherwise, resetting the canvas as explained earlier.

Please see the attached picture:

I have tried the suggestion to add a TextInput and the 'SetFocus' function and this worked in terms of navigating to a specific point. My issue now is finding a way to retain my ability to reset the canvas to the top when navigating to the screen (Button 1) and still having the option of navigating to a specific datacard when Button 2 is selected.

Would you suggest using the 'If' statement to achieve this?