Prevent form position reset upon save Topic is solved

[Paul]

I have a custom 'Save' button on my form and it works fine. However, when the button is clicked the data is saved but the form gets scrolled to the top of the page. I'd like to stay in the same place where I was before I clicked the 'Save' button. How do I accomplish this?

[steven]

Hi Paul,

You could place this in the Form's Browse & Edit or Edit JavaScript.

Code: Select all

if(window.previousID != null || window.previousID === undefined){
    $('#'+window.previousID).focus();
    
}

document.addEventListener('focusout', (event) => {
    
    if(event.target.id != 'nuSaveButton'){
        window.previousID = event.target.id;
    }
    
});

Steven

[Paul]

If I put the 'Save' button near the bottom of the form, then the provided code works. However, if I place it in the middle of the form, then it does not.

[steven]

Hi Paul,

I'm unclear on what you are trying to do.

You said

If I put the 'Save' button near the bottom of the form,

Can you share some screen shots?


Steven

[kev1n]

Also try this approach:

Code: Select all

if (nuHasBeenSaved() > 0) {
    // Restore the scroll position
    window.scrollTo(0, window.scrollTop);
}

function nuBeforeSave() {
    // Get current vertical scroll position
    window.scrollTop = window.scrollY;
    return true; // Allow the save to proceed
}

[Paul]

I have two Save buttons on the form, one in the middle and one near the bottom. The form is a long one. That is the reason why I want additional Save buttons.

Per your instructions, I have placed your code (first version) in the Form's Browse & Edit JavaScript area.
If I click the first one, focus jumps to the top - not what I want.
If I click on the lower one, the focus remains where it is.

[Paul]

The second bit of code works. Tried it several times with both Save buttons. Thanks!

[kev1n]

Instead of adding more Save buttons, make the Action Holder—the toolbar with actions like Save and Delete—sticky so it stays visible at the top as you scroll down the page.

To do so, add the following CSS under Setup → Style:

Code: Select all

.nuBreadcrumbHolder {
  position: sticky;
  top: 0;
  z-index: 1000;
}

.nuActionHolder {
  position: sticky;
  top: 33px;
  z-index: 999;
}

[Paul]

Very cool! Thank you!