Skip to main content
M
martinaj0002
November 28, 2023
Question

Move the focus to top or bottom of the UI on click of button!

  • November 28, 2023
  • 4 replies
  • 0 views

Received requirement where needs to introduce 2 button named "TOP" and "BOTTOM" in the UI.

On click of "TOP" button the focus of the UI should be moved to top of the UI and on click of "BOTTOM" button the focus of the UI should be moved to bottom of the UI.

Is this achievable in Appian? If any suggestions please share.

4 replies

konduruc733182
konduruc733182
November 28, 2023

Hello martinaj0002,

I don't think there is any such option as of now that is available for your requirement

davidj137213
davidj137213
November 28, 2023

Could working with collapsable sections be an option? or even with the visibility of the components?

    stewart.burchell
    stewart.burchell
    November 28, 2023

    So it's probably a bit of a hack...but in 23.4 the User Interface will now scroll to the first field in a form that has a validation error. So, you could add a text field with no visible label and read-only and empty (but not null) content and a validation on it that can be controlled by the value set in a local!variable.

    You could then add a "Scroll to Top" button at the bottom of your form that saves a value into the local!variable that triggers the validation error. Because the validation message has to be a non-blank value you could use a Unicode character e.g. char(128285) to display something that doesn't look like an error message.

    To scroll to the bottom you do exactly the same thing but flip the value set for the variable used to scroll to the top.

    In your actual Submit button you need to set both top/bottom local!variables so that they don't throw the validation errors so that you can proceed the process.

    L
    linog0001
    January 16, 2025

    Do you have a working example of this? I have tried using the textfield like you suggested but it does not scroll to the top.  The only way that I am able to get it working is to add validation to an empty sectionLayout then it will scroll to the top but that causes the pink/red  validation rectangle banner to appear.  Anyway around this? I'm on version 24.4.

    Terms & ConditionsAccessibility statement