Wizard Navigation

Forms
1

Hi, the wizard control is great but for forms which requires a fair amount of vertical scrolling, there is a downside. Clicking the “Next” or “Back” button doesn’t scroll you back to the top of the next section.

Can this be implemented ?

2

Dear @kb_tt,
Thank you for asking! It’s a good question, and yes, there is a method. If you have only one Wizard container, the following JavaScript should scroll to the top each time users goes between steps:

fd.rendered(function() {
   fd.container("Wizard0").widget.$on("update:startIndex", function() {
       $('.wizard-progress-bar')[0].scrollIntoView({ behavior: 'smooth' });
    });
});
3 Likes
3

Thanks @Nikita_Kurguzov , this solved it.

4

HI Nikita,

How can I scroll down to a certain point? I want to add this code to the button click property.

I have this code in my button:

fd.container('Wizard').widget.navigateToTab(1); 
$('.EditAccess').show();

function scroll(){
$('.EditAccess')[1].scroll({
top:-100,
behavior: 'smooth'})
}

I think it would be better to add all of this into a function so that it works better

Cheers!

5

Dear @DryChips,
You can try something like this:

fd.container('Wizard').widget.navigateToTab(1); 
$('.EditAccess').show();
fd.container("Wizard").widget.$on("update:startIndex", function() {
   if(fd.container('Wizard').widget.activeTabIndex == 1){
      $('.EditAccess')[0].scrollIntoView({ behavior: 'smooth' });
   }
});
6

Hmmm, it hasn't scrolled down to the .EditAccess grid. It scrolls to the top of the page.

7

Dear @DryChips,
Try playing around with different settings, maybe this will help:

$('.EditAccess')[0].scrollIntoView({ behavior: 'smooth', block: 'end'});

You can find out about how it works here - Element.scrollIntoView() - Web APIs | MDN

9

Dear @DryChips,
Try a simple timeout instead:

fd.container('Wizard').widget.navigateToTab(1); 
$('.EditAccess').show();
setTimeout(function(){ 
    $('.EditAccess')[0].scrollIntoView({ behavior: 'smooth' });
}, 100);
1 Like
10

This is perfect!

Thank you soooo much man!

1 Like
11

Hi Nikita,

back again with another request! I know, I know, I ask stupid questions :sweat_smile:

So, I have this globally defined function below, which is being called on button click:

//Function will send Pnp request to search for value in list and let user know if name exists in list 
window.val = function validateCC(value){
    pnp.sp.web.lists.getByTitle("POWERBiV2").items.filter("User_Principle_Name eq '" + fd.field('User_Principle_Name').value + "'").get().then(function(items){
           if (items.length > 0){
           alert("This user already exists, please edit this record below.");
           fd.field('SUPN').value = fd.field('User_Principle_Name').value;
           $('.EditAccess').show();
           $('.ManagerOrganisation').hide();
           $('.SubmitGrid').hide();
           scroll();
           }
           else{
           alert("This user does not exist, please create a new record below");
           $('.ManagerOrganisation').show();
           $('.SubmitGrid').show();
           $('.EditAccess').hide();
           }
    });
}

I want to it to run this scroll function below but it doesn't work for some reason:

//Scrolls to that section
setTimeout(function scroll(){ 
    $('.EditAccess')[0].scrollIntoView({ behavior: 'smooth' });
}, 100);

Do you know why that is?

I placed this code outside of fd.spRendered and an error appeared in the console:

image
image881×68 5.73 KB

I also placed this inside fd.spRendered but the scroll function did not run after clicking "Ok" in the browser alert dialog.

12

Dear @DryChips,
Most likely it's running too early before the the element is created, though it's hard to say from code pieces.

Why don't you use it like this?

window.val = function validateCC(value){
    pnp.sp.web.lists.getByTitle("POWERBiV2").items.filter("User_Principle_Name eq '" + fd.field('User_Principle_Name').value + "'").get().then(function(items){
           if (items.length > 0){
           alert("This user already exists, please edit this record below.");
           fd.field('SUPN').value = fd.field('User_Principle_Name').value;
           $('.EditAccess').show();
           $('.ManagerOrganisation').hide();
           $('.SubmitGrid').hide();
           setTimeout(function(){ 
               $('.EditAccess')[0].scrollIntoView({ behavior: 'smooth' });
           }, 100);
           }
           else{
           alert("This user does not exist, please create a new record below");
           $('.ManagerOrganisation').show();
           $('.SubmitGrid').show();
           $('.EditAccess').hide();
           }
    });
}
1 Like
13

Awesome! That worked - I didn't know you could do that.

Cheers!