3

I am trying to split a SharePoint 2013 list form into multiple tabs. I have tried below code but it is throwing an error "Unable to get property 'substring' of undefined or null reference".

PFB my code:

<script type="text/javascript" src="http://sharepoint.pfizer.com/sites/Test/Resources/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://sharepoint.pfizer.com/sites/Test/Resources/TabsForSharePointForms.js"></script>
<script type="text/javascript">
var tabConstructor = {tabs:
        [{name:'Project Details',
            fields:['MPSID','Category','CompanyCode','CostCenter','CurrentFYBudget','DomainOwner','EndDate','FundingSource','ProgramName','ProjectName'],
            mouseOver:'Project Details',tabStyle:'',clickFunction:''},
        {name:'Accounting Details',
            fields:['Category','ProjectManager','ProjectWBSCode','StartDate','TotalProjectBudget','Title'],
            mouseOver:'Accounting Details',tabStyle:'',clickFunction:''}
        ],
        settings:{
            viewAllFields:{show:true,name:'All fields',mouseOver:'This tab shows all fields',tabStyle:''},
            orphanFields:{show:true,name:'...',mouseOver:'All orphan fields',tabStyle:''},
            breakTabRowAt:null,
            hoverTabColor:'#FFF68F',
            selectedTabColor:'#B9D3EE'
        }
    };

init_buildTabbedForm(tabConstructor);
</script>

Code in TabforSharepoint.js

 /* Tabs for SharePoint Forms
 * ---------------------------------------------
 * Created by Alexander Bautz
 * alexander.bautz@gmail.com
 * http://sharepointjavascript.wordpress.com
 * Copyright (c) 2010 Alexander Bautz (Licensed under the MIT X11 License)
 * ---------------------------------------------
 * Include reference to:
 *  jquery - http://jquery.com
 * ---------------------------------------------
*/

var scriptVersion = '2.0 (17.01.2011)';

function addSelectedTabToFormAction(tabID){
    var ca = $("#aspnetForm").attr('action');
    if(ca.indexOf('sTab=')>0){
        ca = ca.substring(0,ca.indexOf('sTab=')-1);
    }
    if(ca.indexOf('?')>0){
        $("#aspnetForm").attr('action',ca+"&sTab="+tabID);
    }else{
        $("#aspnetForm").attr('action',ca+"?sTab="+tabID);
    }   
}

function dynResizeDialog(){
var pWh,wpd,dlgBorder,dlgTitle,dlgTH,dlgFrame,dlgContent,formH,cField,top;
    pWh = $(window.parent.document).height()-172;
    wpd = $(window.parent.document);
    dlgBorder = wpd.find("div.ms-dlgBorder");
    dlgTitle = wpd.find("div.ms-dlgTitle");
    dlgTH = dlgTitle.height();  
    dlgFrame = wpd.find("iframe[id^='DlgFrame']");
    dlgContent = dlgFrame.parent().parent().parent();
    if(dlgContent.attr('DragBehavior')!==null&&dlgContent.css('left')!=='10px'){
        formH = 265+dlgTH;
        formH+=$("#tabOuterWrap").height();
        if($("#aboutTabsSolution").css('display')!=='none'){
            formH+=$("#aboutTabsSolution").height();
        }
        $.each(fields,function(fin){
            cField = $(fields[fin]);
            if(cField.css('display')!=='none'){
                formH += cField.height();
            }
        });
        if(formH>pWh){
            formH = pWh;
        }
        if(pWh!==formH){
            top = (pWh-formH)/2;
            if(top<0){
                top = 10;
            }
        }else{
            top = 10;
        }           
        dlgBorder.css({height:(formH)+'px'});
        dlgFrame.css({height:(formH-dlgTH)+'px'});
        dlgContent.css({position:'absolute',top:top+"px",height:(formH)+'px'});
        if(parseInt(dlgTitle.css('width'),10)<700){     
            dlgTitle.css({width:'700px'});
            dlgContent.css({width:'700px'});
            dlgBorder.css({width:'700px'});
            dlgFrame.css({width:'700px'});
        }
    }
}

function selectTab(elm,onload){
var top,bottom,tId,arrToShow,fieldTR,ct;
    // Handle lookup columns with more than 20 items
    $("#_Select").remove();
    // Unselect all tabs
    $("#tabInnerWrap").find("span[id^='tab_']").removeClass('tabSelected');
    // Select the tab that was clicked
    $(elm).addClass('tabSelected');
    if($(elm).attr('tabrow')==='1'){
        top = $("div.tabWrappedTop");
        top.append($("#aboutAndCopyright"));
        bottom = $("div.tabWrappedBottom");
        top.find("span[id^='tab_']").attr('tabrow','2');        
        bottom.find("span[id^='tab_']").attr('tabrow','1');
        bottom.insertBefore($("div.tabWrappedTop"));
        top.toggleClass('tabWrappedTop tabWrappedBottom');
        bottom.toggleClass('tabWrappedBottom tabWrappedTop');
    }
    tId = $(elm).attr('id').substring(4);
    // Preserve selection on postback
    addSelectedTabToFormAction(tId);
    // Show the fields assosiated with the selected tab
    if(tId==='About'){
        $.each(fields,function(fin){
            $(fields[fin]).hide();
            $("#aboutTabsSolution").show();
        });
    }else{
        $("#aboutTabsSolution").hide();
        arrToShow = $(elm).attr('fields').split(',');
        if(arrToShow.length===1&&arrToShow[0]==='_All_Fields_'){
            arrToShow=[];
            $.each(fields,function(fin){
                $(fields[fin]).show();
                arrToShow.push(fin);
            });
        }else{
            $.each(fields,function(fin){
                fieldTR = $(fields[fin]);
                if($.inArray(fin,arrToShow)===-1){
                    fieldTR.hide();
                }else{
                    fieldTR.show();                 
                }
                if(onload){
                    // Check form validation and highlight tab if a field in that tab is not validated
                    if(fieldTR.find("td.ms-formbody .ms-formvalidation").length>0){     
                        ct = $("#tab_"+fieldTR.attr('tabid'));
                        if(!ct.hasClass('tabFormValidation')){
                            ct.addClass('tabFormValidation');
                        }
                    }
                    // UserField validation error
                    if(fieldTR.attr('FieldType').match('SPFieldUser')!==null){
                        if(fieldTR.html().match("IsResolved=\"False\"")!==null||fieldTR.find('td.ms-error').length>0){  
                            ct = $("#tab_"+fieldTR.attr('tabid'));
                            if(!ct.hasClass('tabFormValidation')){
                                ct.addClass('tabFormValidation');
                            }
                        }
                    }
                }
            });
        }
    }
    if(!onload && _isV4Dlg){
        dynResizeDialog();
    }
}

function buildTabbedForm(argObj,selectedTab){
var cFields,tBuffer,tabRow,orphans,cTab,wrapTabs,aBuffer,cBuffer;
    if(typeof(selectedTab)==='undefined'||selectedTab===''||selectedTab==='0'){
        selectedTab=1;
    }
    cFields = [];   
    tBuffer = [];
    tabRow = 0;
    tBuffer.push("<div id='tabOuterWrap' style='padding-top:6px;'>");
    tBuffer.push("<div id='tabInnerWrap' style='padding-top:2px'>");    
    wrapTabs = (argObj.settings.breakTabRowAt!==''&&argObj.settings.breakTabRowAt!==0&&argObj.settings.breakTabRowAt!==null)?true:false;
    if(wrapTabs){
        tBuffer.push("<div class='tabWrappedTop'>");
        tabRow = 1;
    }
    $.each(argObj.tabs,function(i,obj){
        $.each(obj.fields,function(idx,fin){
            cFields.push(fin);
            if($(fields[fin]).attr('tabid')===undefined){
                $(fields[fin]).attr('tabid',(i+1));
            }
        });     
        tBuffer.push("<span title='"+obj.mouseOver+"' style='padding:2px 3px 2px 0px'>");
        tBuffer.push("<span tabrow='"+tabRow+"' style='"+obj.tabStyle+"' onclick='selectTab(this,false)' onmouseover='$(this).toggleClass(\"tabHover\")' ");
        tBuffer.push("onmouseout='$(this).toggleClass(\"tabHover\")' fields='"+obj.fields+"' id='tab_"+(i+1)+"' ");
        tBuffer.push("class='tabMasterStyle'><span style='white-space:nowrap'>"+obj.name+"</span></span>");
        tBuffer.push("</span>");
        if(wrapTabs&&argObj.settings.breakTabRowAt===(i+1)){
            tBuffer.push("</div><div class='tabWrappedBottom'>");
            tabRow = 2;
        }
    });
    if(argObj.settings.viewAllFields.show){
        tBuffer.push("<span title='"+argObj.settings.viewAllFields.mouseOver+"' style='padding:2px 3px 2px 0px'>");
        tBuffer.push("<span tabrow='2' style='"+argObj.settings.viewAllFields.tabStyle+"' onclick='selectTab(this,false)' onmouseover='$(this).toggleClass(\"tabHover\")' ");
        tBuffer.push("onmouseout='$(this).toggleClass(\"tabHover\")' fields='_All_Fields_' id='tab_all' ");
        tBuffer.push("class='tabMasterStyle'><span style='white-space:nowrap'>"+argObj.settings.viewAllFields.name+"</span></span>");
        tBuffer.push("</span>");
    }   
    if(argObj.settings.orphanFields.show){
        orphans = [];
        $.each(fields,function(fin){
            if($.inArray(fin,cFields)===-1){
                $(fields[fin]).attr('tabid','allFields');
                orphans.push(fin);
            }
        });
        if(orphans.length>0){
            tBuffer.push("<span title='"+argObj.settings.orphanFields.mouseOver+"' style='padding:2px 3px 2px 0px'>");
            tBuffer.push("<span tabrow='2' style='"+argObj.settings.orphanFields.tabStyle+"' onclick='selectTab(this,false)' onmouseover='$(this).toggleClass(\"tabHover\")' ");
            tBuffer.push("onmouseout='$(this).toggleClass(\"tabHover\")' fields='"+orphans+"' id='tab_orphans' ");
            tBuffer.push("class='tabMasterStyle'><span style='white-space:nowrap'>"+argObj.settings.orphanFields.name+"</span></span>");
            tBuffer.push("</span>");
        }
    }
    // About
    tBuffer.push("<span id='aboutAndCopyright' title='About' style='padding:0px;cursor:pointer'>");
    tBuffer.push("<span tabrow='"+tabRow+"' style='padding:0px;font-size:6px;color:gray;background-color:#ffffff;vertical-align:bottom' ");
    tBuffer.push("onclick='selectTab(this,false)' id='tab_About'>(c)</span>");
    tBuffer.push("</span>");
    if(wrapTabs){
        tBuffer.push("</div>");
    }
    tBuffer.push("</div>");
    tBuffer.push("</div>"); 

    // About
    cBuffer = [];
    cBuffer.push("");
    cBuffer.push("Copyright (c) 2011 Alexander Bautz");
    cBuffer.push("");
    cBuffer.push("Permission is hereby granted, free of charge, to any person obtaining a copy");
    cBuffer.push("of this software and associated documentation files (the \"Software\"), to deal");
    cBuffer.push("in the Software without restriction, including without limitation the rights");
    cBuffer.push("to use, copy, modify, merge, publish, distribute, sublicense, and/or sell");
    cBuffer.push("copies of the Software, and to permit persons to whom the Software is");
    cBuffer.push("furnished to do so, subject to the following conditions:");
    cBuffer.push("");
    cBuffer.push("The above copyright notice and this permission notice shall be included in");
    cBuffer.push("all copies or substantial portions of the Software.");
    cBuffer.push("");
    cBuffer.push("THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR");
    cBuffer.push("IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,");
    cBuffer.push("FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE");
    cBuffer.push("AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER");
    cBuffer.push("LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,");
    cBuffer.push("OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN");
    cBuffer.push("THE SOFTWARE.");  
    aBuffer = [];
    aBuffer.push("<div id='aboutTabsSolution' style='text-align:center;display:none'>");
    aBuffer.push("<div style='padding:10px'>");
    aBuffer.push("<table style='text-align:center' cellpadding='0' cellspacing='0' width='100%'>"); 
    aBuffer.push("<tr>");
    aBuffer.push("<td style='font-size:18px'>Tabs for SharePoint forms</td>");
    aBuffer.push("</tr>");
    aBuffer.push("<tr>");
    aBuffer.push("<td style='font-size:14px'>by <a href='mailto:alexander.bautz@gmail.com'>Alexander Bautz</a></td>");
    aBuffer.push("</tr>");  
    aBuffer.push("<tr>");
    aBuffer.push("<td style='font-size:10px'>v"+scriptVersion+"</td>");
    aBuffer.push("</tr>");
    aBuffer.push("<tr>");
    aBuffer.push("<td style='font-size:10px'><a href='http://sharepointjavascript.wordpress.com/aboutthescript/' target='_blank'>SharePoint JavaScripts</a></td>");
    aBuffer.push("</tr>");
    aBuffer.push("<tr>");
    aBuffer.push("<td style='padding-top:10px;font-size:10px'>"+cBuffer.join('<br />')+"</td>");
    aBuffer.push("</tr>");      
    aBuffer.push("</table>");
    aBuffer.push("</div>");
    aBuffer.push("</div>");
    // Insert tabs before the formtable
    $("table.ms-formtable").css({'border-top':'1px gray solid'})
        .before(tBuffer.join(''))
        .after(aBuffer.join(''));

    // Select tab
    cTab = GetUrlKeyValue('sTab');  
    if(cTab!==null&&cTab!==''&&$("#tab_"+cTab).length!==0){
        selectedTab = cTab;
    }
    // Select tab
    selectTab($("#tab_"+selectedTab),true);
}

function init_buildTabbedForm(argObj,selectedTab){
    var styleBuffer = [];
    styleBuffer.push("<style>");
        styleBuffer.push("span.tabMasterStyle{");
            styleBuffer.push("border:1px silver solid;");
            styleBuffer.push("font-size:x-small;");
            styleBuffer.push("padding:5px;");
            styleBuffer.push("background-color:#ffffff;");
        styleBuffer.push("}");
        styleBuffer.push("span.tabHover{");
            styleBuffer.push("background-color:"+argObj.settings.hoverTabColor+";");
            styleBuffer.push("cursor:pointer;");
        styleBuffer.push("}");
        styleBuffer.push("span.tabSelected{");
            styleBuffer.push("background-color:"+argObj.settings.selectedTabColor+";");
            styleBuffer.push("border-color:gray;");
            styleBuffer.push("border-bottom:1px transparent solid;");
            styleBuffer.push("padding:7px 5px 8px 5px;");
        styleBuffer.push("}");
        styleBuffer.push("span.tabFormValidation{");
            styleBuffer.push("color:red;");
            styleBuffer.push("border-color:red;");
        styleBuffer.push("}");      
        styleBuffer.push("div.tabWrappedTop{");
            styleBuffer.push("padding-bottom:12px;");
        styleBuffer.push("}");
        styleBuffer.push("div.tabWrappedBottom{");
            styleBuffer.push("");
        styleBuffer.push("}");
    styleBuffer.push("</style>");
    document.write(styleBuffer.join(''));

    if(typeof(fields)==='undefined'){
        fields=init_fields_v2();
    }
    if($("#idAttachmentsRow").length>0){
        fields.attachments=$("#idAttachmentsRow").attr('FieldType','attachments');
    }
    if(GetUrlKeyValue('IsDlg')==='1'){
        _isV4Dlg = true;
        $(document).ready(function(){
            buildTabbedForm(argObj,selectedTab);        
        });
    }else{
        _isV4Dlg = false;
        buildTabbedForm(argObj,selectedTab);
    }
}

// Catch validation on empty DateAndTime-fields
function preSaveHighlightTabOnValidation(){
var fieldTR,ct;
    $.each(fields,function(fin){
        fieldTR = $(fields[fin]);
        if(fieldTR.attr('FieldType')==='SPFieldDateTime'){
            if(fieldTR.find("td.ms-formbody span[controltovalidate][display!='none']").length>0&&fieldTR.find('input:first').val()===''){
                ct = $("#tab_"+fieldTR.attr('tabid'));
                if(!ct.hasClass('tabFormValidation')){
                    ct.addClass('tabFormValidation');
                }
            }
        }   
    });
}

function init_fields_v2(){
var res,myMatch,disp,fin,type;
    res = {};
    $("td.ms-formbody").each(function(){
    myMatch = $(this).html().match(/FieldName="(.+)"\s+FieldInternalName="(.+)"\s+FieldType="(.+)"\s+/);    
        if(myMatch!==null){
            // Display name
            disp = myMatch[1];
            // FieldInternalName
            fin = myMatch[2];
            // FieldType
            type = myMatch[3];
            if(type==='SPFieldNote'){
                if($(this).find('script').length>0){
                    type=type+"_HTML";
                }
            }
            if(type==='SPFieldLookup'){
                if($(this).find('input').length>0){
                    type=type+"_Input";
                }
            }
            // Build object
            res[fin] = this.parentNode;
            res[fin].FieldDispName = disp;
            res[fin].FieldType = type;
        }       
    });
    return res;
}

// Native SharePoint function - last line added
function RTE_OnFocus(strBaseElementID){
    g_strRTETextEditorWithTheFocus=strBaseElementID;
    RTE_GetEditorDocument(strBaseElementID).body.contentEditable=true;
    if((g_strRTEPrevTextEditor!=null)&&(g_strRTEPrevTextEditor.length>0)&&(g_strRTEPrevTextEditor!=strBaseElementID)){
        RTE_DisableToolBar(g_strRTEPrevTextEditor);
    }
    RTE_StartResetToolBarTimer(strBaseElementID);
    // Select current RTE 
    g_elemRTELastTextAreaConverted=document.getElementById(strBaseElementID);
}

// Native SharePoint function - first line added
function PreSaveItem(){
preSaveHighlightTabOnValidation();
    if("function"==typeof(PreSaveAction)){
        return PreSaveAction();
    }
    return true;
}

Can somebody help please? Thanks in advance

  • This must be coming from somewhere in the "TabsForSharePointForms.js" file. Can you post the code in that file to help people to analyze the problem? – Venkat Konjeti Jun 20 '17 at 13:27
  • @Vankat Here is the link forTabForSharepointForms JS file: spjsfiles.com/… – Mathew Jun 20 '17 at 20:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.