Think of a multistep wizard interface where some steps do not fit on the screen and require the user to scroll. While I think we should try to avoid this, but well, sometime we can’t. Now, the user navigates forward and back, and Appian keeps the scroll position between the individual steps, instead of resetting it to top.

In this post, I want to shed some light on how Appian manages the scroll position, and the options we have to influence it.

Layout Components

Appian provides quite a few layout components, but only some of them support scrolling enclosed content. These are:

• Form Layout
• Pane Layout
• Header Content Layout
• Card Layout

Any other layout component only adjusts to the enclosed content, e.g., the columns layout.

Stable Scroll Position

Each of the layout components internally stores the current scroll position. When implementing dynamic content, the current scroll position stays stable, but the screen gets taller, moving components further down.

This es exactly the behavior we want, as long as we stay within one step in our wizard. But, how do we reset the scrolling position back to the top when switching steps?

Reset Scroll Position

Appian does not provide any support for direct control of the scroll position. But, each layout component manages its scroll position, and resets it in case it is hidden and made visible again. We can use this to achieve our goal, the user finds himself back to the top of the screen whenever switching steps in our wizard.

Instead of making the content of the layout component dynamic, we just put each step into an individual layout component.

This can make your code a bit more complex. Appian does not allow us to create a list of top-level layout components, so I have to use a nested if() to only ever have one of these. And, to avoid duplicate code, offload generic sections into separate interfaces.

I use a form layout in my example, but the same principle works for any other scrolling capable layout component just as well.

Summary

Using this mostly simple approach, we can decide to either keep or reset the scroll position as the user navigates our wizard. I hope this gets you one step further on the long ladder of UX and UI design, ultimately leading to a more intuitive and enjoyable user experience.

Keep rockin’!