1

Team,

I've got a list to record a shift roster. I have two Date/Time columns recording (1) Start of the shift and (2) End of the Shift.

I want a view that only shows who is rostered on right now!

I can use OOTB list filters to filter by [today] but not by time - which means it picks up all shifts that either start or end on the same date as "today".

The code below paints any row green if shift start date/time <= to "now" AND if shift end date/time => to "now" and anything that does not match that criteria is painted red (my workaround to the whole inability of filtering by time).

GREAT! - however, rather than paint green or red, I want to show TRUE rows and hide FALSE rows.

I just haven't found the code yet on the 'net that I can scavenge and rejig to do the job. Any help would be appreciated.

Don't care if its a pre or post render. Thought pre-render will probably by better?

<script type="text/javascript">

SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {

SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
    //OnPreRender: function(ctx) {
    OnPostRender: function(ctx) {

       var rows = ctx.ListData.Row;
       for (var i=0;i<rows.length;i++)
       {
            // get today's date
            var today = new Date();

            // get the Start Date and Time          
            var startDateTime = rows[i]["StartDateTime"]; //static name "StartDateTime"  Format: 31/03/2018 7:00 AM
            var startDateTimeParts = startDateTime.split(" ");
            var startDate = (startDateTimeParts[0]); // date
            var startTime = (startDateTimeParts[1]); // time

            // Split startDate
            var startDateParts = startDate.split("/");
            var startDateYear = (startDateParts[2]); // Year
            var startDateMonth = (startDateParts[1]); // Month
            var startDateDay = (startDateParts[0]); // Day              

            // Split startTime
            var startTimeParts = startTime.split(":");
            var startTimeHour = (startTimeParts[0]); // Hour
            var startTimeMinutes = (startTimeParts[1]); // Minute
            var startTimeSeconds = (startTimeParts[2]); // Seconds

            var startDateTimeValue = new Date(startDateYear,startDateMonth-1,startDateDay,startTimeHour,startTimeMinutes,0,0);

            // get the End Date and Time            
            var endDateTime = rows[i]["EndDateTime"]; //static name "EndDateTime" Format: 31/03/2018 7:00 AM
            var endDateTimeParts = endDateTime.split(" ");
            var endDate = (endDateTimeParts[0]); // date
            var endTime = (endDateTimeParts[1]); // time

            // Split endDate
            var endDateParts = endDate.split("/");
            var endDateYear = (endDateParts[2]); // Year
            var endDateMonth = (endDateParts[1]); // Month
            var endDateDay = (endDateParts[0]); // Day              

            // Split endTime
            var endTimeParts = endTime.split(":");
            var endTimeHour = (endTimeParts[0]); // Hour
            var endTimeMinutes = (endTimeParts[1]); // Minute
            var endTimeSeconds = (endTimeParts[2]); // Seconds

            var endDateTimeValue = new Date(endDateYear,endDateMonth-1,endDateDay,endTimeHour,endTimeMinutes,0,0);



            var rowId = GenerateIIDForListItem(ctx, rows[i]);
            var row = document.getElementById(rowId); 

//alert("new start d/t: " + startDateTimeValue);
//alert("new end d/t: " + endDateTimeValue);

            if (startDateTimeValue <= today && endDateTimeValue >= today) {
                row.style.backgroundColor = '#01DF3A';  //green
//alert("startDateTimeValue: " + startDateTimeValue + " <= today: " + today + " && endDateTimeValue: " + endDateTimeValue);
            } else {
                row.style.backgroundColor = '#ff4d4d';  //red
//alert("NOT = startDateTimeValue: " + startDateTimeValue + " <= today: " + today + " && endDateTimeValue: " + endDateTimeValue);                   
            }

        }
    }
}); 
});

</script>

Regards Michael

5

First of all, you definitely don't want pre-render because there are no DOM elements there to hide yet.

I believe you should be able to set the row's display style setting to "none" right in the code that you have.

Something like this:

SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function () {

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
        OnPostRender: function (ctx) {

            var rows = ctx.ListData.Row;
            for (var i = 0; i < rows.length; i++) {

                var today = new Date();

                // can you not just create the DateTime objects directly from
                // the field values?  i am certain i have done this before,
                // i don't think you need to do all the string splitting

                var startDateTimeValue = new Date(rows[i]["StartDateTime"]);
                var endDateTimeValue = new Date(rows[i]["EndDateTime"]);

                var rowId = GenerateIIDForListItem(ctx, rows[i]);
                var row = document.getElementById(rowId);

                if (startDateTimeValue <= today && endDateTimeValue >= today) {
                    row.style.backgroundColor = '#01DF3A';  //green
                } else {
                    row.style.display = 'none'; // hidden                   
                }
            }
        }
    });
});

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.