Scroll to anchor on button onActionPerformed

Ignition
, ,
1

I’m trying to scroll to a specific section on the view to improve user experience on long pages. This would be especially useful on smaller devices, which normally have content laid out vertically instead of horizontally.

Here is what I have done:

  • created a sample long scrollable view (added a few components, set basis to 1000px, set shrink to false)
  • added a label on the very bottom of the view
  • added meta property domId with a value of labelBottom to said label
  • added a button at the top of the view
  • added onActionPerformed script with body
    system.perspective.navigate('#labelBottom')

I’m not sure if system.perspective.navigate() is the correct function to use here. I see that it appends #labelBottom to the URL. However, nothing happens unless I refresh the page.

Workaround

What I can do is use a Perspective Link component and link to #labelBottom, in which case it works as expected. However, I’d like to have the flexibility of using a button for that purpose.

PS

Also another question: when did domId become available? My coworker and I were trying to do something similar a few months ago and we didn’t see it. I just happened to stumble upon it a few days ago messing around in the designer.

Thanks in advance.

1 Like
2

It's been "available" since 8.0.0, but we didn't expect customers to make much use of it (outside of this exact scenario). The primary benefit in the product is for us in the QA department so that we can easily identify components during our automated testing.

try this:

    system.perspective.navigate(url='#labelBottom')

This works for me because it's using the browser's navigation "system" instead of using the Gateway to navigate. Note that this will only work while you're already on the page with the id present within the element.

2 Likes
3

That is exactly what I was looking for. Thanks @cmallonee

1 Like
4

How did you define your #labelbottom ?

Is is a label component or it could be the meta name every comonent?

5

You put #labelbottom into the meta.domId property, if I remember correctly.

image
image367×525 26.1 KB

1 Like