Error or Notifications area Set Focus + save and close in child dialogue form header

Hello,
We are facing a problem with the end users as following:
80% of our forms are long, each time users will go up in order to press the save or the close button in the child list/form.
To solve this issue i created save and close buttons on each form footer with following script:
fd.save();
and
fd.close();

The problem is on save (in main page/form and on child list/form) :
If users forget required fields or getting some validation errors or notifications, they need to go up moving the page/form to check the errors list on top then go through the form again to fix those errors.

1)Are there a way to make the form go up alone and focus on the notifications section on save?

2)can i make those notifications show in the bottom of the page too (the notification error will be on top and bottom of the form in same time) for sure i will do it where my form is very long

Note that the save and close buttons in main form remains visible even if user move the form up or down in main form/Page
but if a child list is opened as dialogue form the save and close button are not visible when user move down the form/page.

Find below screenshots for more details.

Thank you

Hello @gkhadra,

Please see this community post to know how to duplicate the error message near the submit button.

And to fix the command bar position in the dialog window, please paste the below CSS to the CSS Editor.

#ms-notdlgautosize .ms-CommandBar.fd-form.fd-form-toolbar{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  z-index: 99;
}
​
#ms-notdlgautosize .container-fluid{
  padding-top: 40px;
  padding-bottom: 10px
}
1 Like

Dear @mnikitina
Thank you i will try rhis solution and get back to you.

Concerning the focus on top or scroll to error on top,
Are there any solution for this specific request?
Sometimes it is better to go direct to top or to a certain control instead of cloning the error next to a submit button.
I need to know if the focus process or scrolling up is applicable? And how?
Thank you

@gkhadra

To scroll to the top of the page, please use the follwoing code.

document.body.scrollTop = document.documentElement.scrollTop = 0;

And to csroll to a specific element, please use the follwoing.

var elementToJump = $(fd.field('Title').$parent.$el);


$([document.documentElement, document.body]).
animate({
        scrollTop: elementToJump.offset().top
    }, 1000);

1 Like

Hello @mnikitina

It is good to clone the error/validators message to another place.
But in some forms it more easier and faster to focus on top or on a certain control instead of cloning.

Thank you for your help you saved my time.
As usual perfect support :kissing_heart:

1 Like

Hi @mnikitina.
I tried this by adding a button control to the bottom of a form and added the below code to the Click handler. It doesn't work and this is the error I get in the console when I click on the "Go to Top" button as shown below.

To scroll to the top of the page, please use the follwoing code.

document.body.scrollTop = document.documentElement.scrollTop = 0;

Hello @stormanh,

Please try out this code instead to scroll to the top of the form:

$("[data-is-scrollable='true']")[0].scrollTo(0,0);

Works perfectly! Thanks very much @mnikitina! :grin:

1 Like

Hi @mnikitina.

I would like to hide/show the Go to Top button only when vertical scrollbar appears on the form. The form has different tabs with varying amounts of vertical content. Sometimes the vertical scrollbar of the form would appear based on which tab container I'm in. Is there a way to determine when vertical scrollbars appear in the form so that I can hide/show the Go to Top button accordingly?

Dear @stormanh ,
Please, try the following code (just replace 'ScrollButton' with button's Name):

(function($) {
  $.fn.hasScrollBar = function() {
    return this.get(0).scrollHeight > this.height();
  }
})($);

fd.spRendered(function(){
  $(fd.control('ScrollButton').$el).hide();
  if($("[data-is-scrollable='true']").hasScrollBar()){
    $(fd.control('ScrollButton').$el).show();
  }
});

Please, note that this will not update dynamically, and will only check for scroll bar while the form loads.

Thank you @Nikita_Kurguzov! I adapted it to dynamically show/hide the Go to Top button.