Implementing Tab Order In Custom NewForm And EditForm In SharePoint Office 365 – TabIndex Will Not Work

Recently I created a Custom NewForm and EditForm for a List in Office 365 and the default tab order was implemented as a ROW wise. But, in my case, I wanted the tab order to be on the Column Wise. Hence, tried to edit the page on the Designer, from which I created those pages, and added the TabIndex Values. But, it was not working. The workaround is, to implement the TabIndex after the pageload on the JavaScript.

The sample code is as below.

 ST.Util.FindControlFieldByInternalName("SIClientIDLookup").attr('tabindex', 1).focus();

The FindControl method will be something like,

 ST.Util.FindControlField = function ($td) {
 
         var $control = $();
 
         switch (ST.Util.FindFieldType($td)) {
             case "SPFieldText":
             case "SPFieldDateTime":
                 {
                     $control = $td.find("input[type=text]");
                     break;
                 }
             case "SPFieldNumber":
             case "SPFieldCurrency":
                 {
                     $control = $td.find("input[type=text]");
                     break;
                 }
             case "SPFieldLookup":
             
             case "SPFieldChoice":
                 {
                     $control = $td.find("select");
                     break;
                 }
             case "SPFieldNote":
                 {
                     $control = $td.find("textarea");
                     break;
                 }
         }
 
         return $control;
     };
 

The above piece of method is very simple and easy way to implement the TabOrder in the custom forms. Hope this helps !!

Happy Coding,

Sathish Nadarajan.