3

I am displaying Sharepoint Tabs using CSR display templates. It is displaying properply. Now in the same code in Newform and editform i want' to display extra fields on top of the Tabs. Can you please help me

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 () {/**
.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;
}

**/
});

var tabsObj = [
    ["General", ["Title", "Age", "Married", "Mobile", "SSN"]],
    ["Work", ["Manager", "Salary", "Phone", "Email"]],
    ["Other", ["Comments"]]
];


(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>'));

    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("<style>" + tabsStyle + "</style>");
        });

    }
}

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 hereenter image description here

3

After tabsContext.Templates = {}; you can add the following line:

tabsContext.Templates.View = viewTemplate

where viewTemplate is a function e.g.:

function viewTemplate(ctx) {
  var formString = "<div><p>MyFieldName: {{MySharepointField}}</p></div>";
  return formString.replace("{{MySharepointField}}",getSPFieldRender(ctx, "MySharepointField")",
}

where getSPFieldRender does the following:

//This function code set the required properties and call the OOTB (default) function that use to render Sharepoint Fields  
function getSPFieldRender(ctx, fieldName) {
  var fieldContext = ctx;

  //Get the field Schema 
  var result = ctx.ListSchema.Field.filter(function (obj) {
    return obj.Name == fieldName;
  });

  //Set the field Schema  & default value 
  fieldContext.CurrentFieldSchema = result[0];

  //Call  OOTB field render function  
  return ctx.Templates.Fields[fieldName](fieldContext);
}  

So you can build your CSR form exactly as how you would like to have it. The absolute disadvantage is that you have to inculude all fields you want to show and render them with

getSPFieldRender()

I hope it helps.

  • Chris, I Just need to have Title , People Picker to be displayed On top of the Tabs in my New form and Edit form . when i just used f12 the tabs are loading first and my controls are loading next . I have attached screenshot above – santosh kondapalli Apr 3 '17 at 14:39
  • Yes I see. I faced the same issue when using tabs and displaying different data above them. My only solution which worked properly was what i posted in the answer. I think because your viewTemplate is the tab building you cant place some fields right before. – Chris K Apr 3 '17 at 14:42
  • you can try removing Title and Owner form your tabsObj[] array – Chris K Apr 3 '17 at 14:48

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.