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
* [email protected]
* 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:[email protected]'>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