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

Forms SharePoint Online
1

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

ScreenShot
ScreenShot.jpg1373×500 58.3 KB

ScreenShot02
ScreenShot02.jpg1738×840 120 KB

2

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
3

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

4

@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
5

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
6

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.

image
image741×322 12.4 KB

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

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

Hello @stormanh,

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

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

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

1 Like
9

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?

10

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.

11

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

12

Hi @Nikita_Kurguzov

Is there a way to modify this scroll to top button functionality to work in a panel as well please?

Thanks,
stormanh

13

Dear @stormanh,
The following code works for the panel:

$(".ms-Panel-scrollableContent")[0].scrollTo(0,0);

You can check it like this:

if(fd.isPanel){
    $(".ms-Panel-scrollableContent")[0].scrollTo(0,0);
}
else{
    $("[data-is-scrollable='true']")[0].scrollTo(0,0);
}
14

Works great, thanks again @Nikita_Kurguzov!