3

I have been trying to create a java script to add onto my Sharepoint page which would make a cell fill with green if it contains the value 'x' (I do not have access to Sharepoint Designer). Below is a picture of my list: enter image description here

I do not want to use the gnatt layout in a calendar as it is too messy but that is the effect I am going for.

I got as far as being able to being able to get the cells to fill correctly in the first column but as soo as I extend the code to the next column, it is like it applies an 'AND' function whereby the next column will only fill green if the first one also is green. I am not sure how to re-write the script so this does not happen. Below is the script that I have so far - any suggestions (or new code) would be extremely helpful!

(function () {
    var calendarFieldCtx = {};

   calendarFieldCtx.Templates = {};

   calendarFieldCtx.Templates.Fields = {
        "Jan": {
            "View": CalendarViewTemplate
        },

    };

        SPClientTemplates.TemplateManager.RegisterTemplateOverrides(
    calendarFieldCtx
    );

})();

function CalendarViewTemplate(ctx) {

    var _janValue = ctx.CurrentItem.Jan;

     if (_janValue == 'x') //field value
     {
        return "<div style='background-color:green; width: 50px;  display:inline-block'>" + _janValue + "</div>";
     }

}

(function () {
    var calendarFieldCtx = {};

   calendarFieldCtx.Templates = {};

   calendarFieldCtx.Templates.Fields = {
        "Feb": {
            "View": CalendarViewTemplate
        },

    };

        SPClientTemplates.TemplateManager.RegisterTemplateOverrides(
    calendarFieldCtx
    );

})();

function CalendarViewTemplate(ctx) {

    var _febValue = ctx.CurrentItem.Feb;

     if (_febValue == 'x') //field value
     {
        return "<div style='background-color:green; width: 50px;  display:inline-block'>" + _febValue + "</div>";
     }

}
0

You have multiple functions with the same name (CalendarViewTemplate) so only the last one is the one that actualy gets executed when the data loads. You could do something like this:

(function () {
    var calendarFieldCtx = {};

   calendarFieldCtx.Templates = {};

   calendarFieldCtx.Templates.Fields = {
        "Jan": { "View": CalendarViewTemplate },
        "Feb": { "View": CalendarViewTemplate },
        "Mar": { "View": CalendarViewTemplate },
        "Apr": { "View": CalendarViewTemplate },
        "May": { "View": CalendarViewTemplate },
        "Jun": { "View": CalendarViewTemplate },
        "Jul": { "View": CalendarViewTemplate },
        "Aug": { "View": CalendarViewTemplate },
        "Sep": { "View": CalendarViewTemplate },
        "Oct": { "View": CalendarViewTemplate },
        "Nov": { "View": CalendarViewTemplate },
        "Dec": { "View": CalendarViewTemplate }
    };

        SPClientTemplates.TemplateManager.RegisterTemplateOverrides(
    calendarFieldCtx
    );

})();

function CalendarViewTemplate(ctx) {

    var _value = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];

     if (_value == 'x') //field value
     {
        return "<div style='background-color:green; width: 50px;  display:inline-block'>" + _value + "</div>";
     }
     return _value;
}
  • You are an absolute star! That has worked perfectly...Thank you so much! – Jaime Dec 17 '17 at 19:56

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.