0

I am displaying Sharepoint Tabs using CSR display templates.I want to color each tab which i was able to get it. Now I want to change the background color of the tab contents with the same color. For example if i click first tab where the color is Blue the fields in that tab also should display blue,Similarly for other tabs like orange, red . here is the code which i have tried. enter image description here

  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: #fff;
        text-decoration: none;
        background-color:RGB(0,109,182);
    }


    .tabs > li.active > a, .tabs > li.active > a:hover, .tabs > li.active > a:focus {
        color: #fff;
        font-style:oblique;
        background-color:RGB(0,109,182);
        border: 1px solid #ddd;
        border-bottom-color: transparent;
        cursor: default;
    }


    .tabs .Discovery a {
    background-color:RGB(38,165,112);
    font-color:#fff;
    }

    ul.tabs > li.Discovery > a, ul.tabs > li.Discovery > a:focus, ul.tabs > li.Discovery > a:hover{
        color: #fff;
        background-color:RGB(38,165,112);
        border: 1px solid #ddd;
        border-bottom-color: transparent;
        cursor: default;
    }

    .tabs .BusinessPlan a {
    background-color:RGB(236,176,34);
    font-color:#fff;
    }

    ul.tabs > li.BusinessPlan > a, ul.tabs > li.BusinessPlan > a:focus, ul.tabs > li.BusinessPlan > a:hover{
        color: #fff;
        background-color:RGB(236,176,34);
        border: 1px solid #ddd;
        border-bottom-color: transparent;
        cursor: default;
    }

    .tabs .Development a {
    background-color:RGB(165,79,139);
    font-color:#fff;
    }

    ul.tabs > li.Development > a, ul.tabs > li.Development > a:focus, ul.tabs > li.Development> a:hover{
        color: #fff;
        background-color:RGB(165,79,139);
        border: 1px solid #ddd;
        border-bottom-color: transparent;
        cursor: default;
    }

    .tabs .Implemetation a {
    background-color:RGB(192,0,0);
    font-color:#fff !important;
    }

    ul.tabs > li.Implemetation > a, ul.tabs > li.Implemetation > a:focus, ul.tabs > li.Implemetation> a:hover{
        color: #fff;
        background-color:RGB(192,0,0);
        border: 1px solid #ddd;
        border-bottom-color: transparent;
        cursor: default;
    }
    **/
    });
var tabsObj = [
    ["ProjectDetails", ["Title", "Age", "Married", "Mobile", "SSN"]],
    ["Discovery", ["Manager", "Salary", "Phone", "Email"]],
    ["BusinessPlan", ["Title", "Age", "Married", "Mobile", "SSN"]],
    ["Development", ["Manager", "Salary", "Phone", "Email"]],
    ["Implemetation", ["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 = tabsObj[i][0];
                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();
    }
}
0

Add the below code in CSS

.ms-formtable{
width:750px;
}
.ms-formtable.projectdetails{
    background:rgb(185,227,255);
}
.ms-formtable.discovery{
    background:rgb(190,240,219);
}
.ms-formtable.businessplan{
    background:rgb(248,230,186);
}
.ms-formtable.development{
    background:rgb(228,198,219);
}
.ms-formtable.implemetation{
    background:rgb(255,163,163);
}

and in th tab click event above change the below code

currentTabConent.addClass("projectdetails");

            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');
                var newClass = this.text.toLowerCase();
                var oldClass = currentTabConent.attr("class");
                currentTabConent.removeClass(oldClass).addClass("ms-formtable "+newClass);
                e.preventDefault();
            });

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.