0

am trying to create a tabbed form for my newform.aspx in my SPList. below is the code i got from the code.msdn ...,and added as a jslink custom but am unable to render this as tabs and instead am able to see only three orderd LIs !! i took the code from here : https://code.msdn.microsoft.com/office/Client-side-rendering-code-b2eedf92

add-jslink1

  var currentFormUniqueId; 
var currentFormWebPartId; 

 // Use "Multi String" javascript to embed the required css 
         var MultiString = function (f) { 
   return f.toString().split('\n').slice(1, -1).join('\n'); 
 } 
var tabsStyle = MultiString(function () {
}); 
    var tabsObj = [ 
["General", ["column1internalnameTitle", "column2internalnameSummary", 
    "column3t"]], 
["Admin", ["Status", "Summary2", "AssignmentTo"]] 
];

... below link is having the code, https://social.msdn.microsoft.com/Forums/Windows/en-US/a90ecf14-4f34-4870-b408-bbcdaa65c89b/how-to-add-tabs-for-sharepoint-list-forms?forum=sharepointdevelopment

the below is the UI i got , which is wrong one. after adding the js link no-tabbed-ui-form

2

Did you, by any chance, auto format the JavaScript (i.e. tidy)? That MultiString function that he's using is very touchy, and could easily break if the value of tabsStyle is reformatted in any way. And since that string contains all of the CSS to make your list look like tabs, if that function is incorrectly parsing the string, you will get un-styled tabs (i.e. exactly what you are getting).

1

Save the CSS code below as a .css file "tabsform.css", then upload the file into Site Assets library.

.tabs { 
border-bottom: 1px solid #ddd; 
content: " "; 
display: table; 
margin-bottom: 0; 
padding-left: 0; 
list-style: none; 
width: 100%; 
} 

.tabs > li { 
    float: left; 
    margin-bottom: -1px; 
    position: relative; 
    display: block; 
} 

.tabs > li > a { 
    margin-right: 2px; 
    line-height: 1.42857143; 
    border: 1px solid transparent; 
    position: relative; 
    display: block; 
    padding: 10px 15px; 
} 

.tabs a { 
    color: #428bca; 
    text-decoration: none; 
} 

.tabs > li.active > a, .tabs > li.active > a:hover, .tabs > li.active > a:focus { 
    color: #555; 
    background-color: #fff; 
    border: 1px solid #ddd; 
    border-bottom-color: transparent; 
    cursor: default; 
} 

And modify the JSLINK code as below.

var currentFormUniqueId; 
var currentFormWebPartId; 

var tabsObj = [ 
    ["General", ["Title", "column1", "column2", "column3", "column4"]], 
    ["Admin", ["column5", "column6"]]
]; 


(function () { 

    // jQuery library is required in this sample 
    // Fallback to loading jQuery from a CDN path if the local is unavailable 
    (window.jQuery || document.write('<script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.0.min.js"><\/script>')); 
    document.write('<link type="text/css" rel="stylesheet" href="../../SiteAssets/tabsform.css" >')
    var tabsContext = {}; 
    tabsContext.OnPreRender = TabsOnPreRender; 
    tabsContext.OnPostRender = TabsOnPostRender; 


    // accordionContext.OnPostRender = accordionOnPostRender; 
    tabsContext.Templates = {}; 

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(tabsContext); 

})(); 

function TabsOnPreRender(ctx) { 
    if (!currentFormUniqueId) { 

        currentFormUniqueId = ctx.FormUniqueId; 
        currentFormWebPartId = "WebPart" + ctx.FormUniqueId; 

        jQuery(document).ready(function () { 

            var tabHTMLTemplate = "<li class='{class}'><a href='#{Index}'>{Title}</a></li>"; 
            var tabClass; 
            var tabsHTML = ""; 

            for (var i = 0; i < tabsObj.length; i++) { 
                tabClass = ""; 
                if (i == 0){ tabClass = "active";} 
                tabsHTML += tabHTMLTemplate.replace(/{Index}/g, i).replace(/{Title}/g, tabsObj[i][0]).replace(/{class}/g, tabClass) 
            } 

            jQuery("#" + currentFormWebPartId).prepend("<ul class='tabs'>" + tabsHTML + "</ul>"); 


            jQuery('.tabs li a').on('click', function (e) { 
                var currentIndex = jQuery(this).attr('href').replace("#",""); 
                showTabControls(currentIndex); 
                jQuery(this).parent('li').addClass('active').siblings().removeClass('active'); 
                e.preventDefault(); 
            }); 

            showTabControls(0); 

            jQuery("#" + currentFormWebPartId).prepend("<!--mce:0-->"); 
        }); 

    } 
} 

function TabsOnPostRender(ctx) { 
    var controlId = ctx.ListSchema.Field[0].Name + "_" + ctx.ListSchema.Field[0].Id; 
    jQuery("[id^='" + controlId + "']").closest("tr").attr('id', 'tr_' + ctx.ListSchema.Field[0].Name).hide(); 
} 

function showTabControls(index) 
{ 
    jQuery("#" + currentFormWebPartId + " [id^='tr_']").hide(); 

    for (var i = 0; i < tabsObj[index][1].length; i++) { 
        jQuery("[id^='tr_" + tabsObj[index][1][i] + "']").show(); 
    } 
} 

enter image description here

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.