cancel
Showing results for 
Search instead for 
Did you mean: 
Workflow Hero

Change Tab Order in Form

Jump to solution

I have a lot of fields in a form and I want to be able to choose which order the fields are in when tabbing using the tab key on the keyboard rather than the mouse.

Is this possible in Nintex?

0 Kudos
Reply
7 Replies
Workflow Hero

Re: Change Tab Order in Form

Jump to solution

no, it's unfortunately not possible, see plenty of requests for that on uservoice Knowledge Base – Customer Feedback for Nintex 

Reply
Workflow Hero

Re: Change Tab Order in Form

Jump to solution

Looks like JavaScript can be leveraged to set tab order.  Sean Fiene posted on his blog a method I have used and while annoying that we have to do this by hand, the process is pretty simple to follow.

Summary:

In the 'Control CSS class' field of the Formatting group of your Control, add an identifier that you can use to understand the order of your controls.

  • oneStop
  • twoStop
  • threeStop
  • etc

In the Custom CSS section of the Form Settings, add entries for each control you have previously labeled.

  • .oneStop{}
  • .twoStop{}
  • .threeStop{}
  • etc

In the Custom JavaScript section of the Form Settings, add the following code, repeating the attr line for each control you have identified.

NWF$(document).ready(function () {
    NWF$('.oneStop').attr("tabindex", "1");
    NWF$('.twoStop').attr("tabindex", "2");
    NWF$('.threeStop').attr("tabindex", "3");
});

All credit for this solution belongs to Sean.  Detailed instructions can be found on his blog, URL below.

http://www.slfiene.com/blog/2015/10/5/tab-indexing-in-nintex-forms

Reply
Workflow Hero

Re: Change Tab Order in Form

Jump to solution

thanks for sharing this.

important to note that tabindex functionality is only supported (as of now) with newest browser versions and support by mobile browsers is very limited

http://caniuse.com/#search=tabindex 

0 Kudos
Reply
Workflow Hero

Re: Change Tab Order in Form

Jump to solution

Hi , I tried this solution and it is not working for me. it is still using the random tab order.

I'm using SharePoint/Nintex 2010. any thoughts of the reason or is there any additional steps that need to be done for 2010? 

May be it will be also worth to mention that there was another class in the CSS class field. I tried removing it from all fields and compromise the formatting but it still doesn't work. 

In addition, my fields are not all single line of texts, some are list lookups and dates. 

any thoughts? 

 

0 Kudos
Reply
Workflow Hero

Re: Change Tab Order in Form

Jump to solution

I've tried this solution on a new form and I noticed that it works well when all the fields are single line of texts, once i started inserting other types, the form jumps from the single line of texts (in the correct order) --> to the "edit" tab which includes the [save, cancel, paste, cut, copy, attach file, print to pdf] -> then back to the other types of fields in the correct order.. 

How can I make it not give precedence to the "edit" ribbon before the other field types? 

0 Kudos
Reply
Workflow Hero

Re: Change Tab Order in Form

Jump to solution

Just had this question my self. Tabbing default seems to be across the page and then down to the next row. I needed the tab to jump directly to a field below another, before going across, so put the two fields into a panel and that solved the issue.

Reply
Workflow Hero

Re: Change Tab Order in Form

Jump to solution

Thanks for your reply and help .. 

 Yes, I did the same last week..  but didn't have the chance to update the community. 

I found that the solution should be a containing two things in order for it to work: 

1. Place each group of fields such as columns together in a panel; my form contained two sections (top & bottom) and each contains three columns. So I added 3 panels on the top section and another 3 on the bottom one and it worked nicely.

2. Add the JS above. 

These two together, work not only for single line of texts but also with any other type of columns.. 

Reply