Moustafa Refaat
Login   Search
Skip Navigation Links
Home
Publications
Service Offerings
Downloads and Samples
My Resume
Endorsements
Contact Me
Books
Technical Articles
Software Packages
Scroll up
Scroll down
BizTalk The Practical Course
Mastering The BizTalk Technical Interview
Soduku:Challenging Puzzels
Scroll up
Scroll down
Design Patterns Review
Software Architecture Basics Review
Simplified BizTalk Content Based Routing for a Pass_Throu data
An Extensible Light Xml Rules Engine Component
Secure Messaging Solution
Create a SQL Database Programmatically
BizTalk Unzip Adapter
Implementing Singleton pattern with BizTalk Orchestrations
Developing BizTalk Custom Adapters
BizTalk ESB Toolkit Experience Series
Scroll up
Scroll down
Setting the ESB Toolkit on the 64 Bit Machines
How The ESB Works
Sample Custom Resolver
Scroll up
Scroll down
Recent Training
Scroll up
Scroll down

News List

  • iBTSInterview (BizTalk Technical Interview) is available on iPhone and iPad
  • Toronto Code Camp Presentation is uploaded
  • BizTalk: The Practical Course is recommended by Micorsoft
  • Canadian Gigs Network (www.CanadianGigs.Net) a job web site focusing on Canadian Jobs
  • BizTalk Technical Interview Preparation
  • GT-DataSafe© Online Backup for Amazon Storage Services 3.0 is released
  • Soduku Challenging Puzzles
  • BizTalk: The Practical Course
  • Mastering The BizTalk Technical Interview is Published Now Avaliable on iPhone an iPad

Technical Articles

  • ArchiMate 3.0 Simplified
  • http://moustafarefaat.blogspot.ca/2016/11/installing-hadoop-273-on-macos-sierra.html
  • BizTalk: Implementing Web Pages with a BizTalk Endpoint
  • BizTalk: Process HTTP Post Information
  • BizTalk: ESB Itinerary as a Template
Skip Navigation Links
> Blog entries about: JavaScript
JavaScript, and SharePoint Calculated Field Trick

I had a client who wanted to display and indicator showing the task list status as of today, for example: if  there is more than 15 days for the task due date display a green light image, less than 15 days display yellow light image, the task is already late display a red light image.

 

 

Simple, however, this client is hosting the SharePoint out of site and we can not deploy custom code at all. I can use an calculate field to select the image to display however that image would not get updated unless a user updates the task, I can write a timer that would run daily and update the filed but that is not possible as I can not deploy custom code, or I can write a custom code that runs a client machine using SharePoint APIs iterates through the task list and updates the items causing all calculated fields to be re-evaluated. The problem with this solution is that it is kind of dependent on having a client machine that would run this code periodically and frankly kind of a messy solution. After researching many of the info on the internet, and a friend’s brains, we devised the following solution.

 

The calculated field would contain a simplified date and a javascript would run in the browser updating the field with HTML with the proper image info and executing that HTML.

 

 

 

<script type="text/javascript">

//<!-- This script searches for calculated fields that are "marked" vith "Due:" and         -->

//<!-- Create a calculated field in the list with the following formula:                    -->

//<!-- =IF(DueDate="","N/A","Due: "&MONTH(DueDate)&"/"&DAY(DueDate)&"/"&YEAR(DueDate))      -->

//<!-- The data type returned from this formula is: Date and Time                           -->

// call script

findDatefields();

function findDatefields() {

    var d = new Date();

    var today = new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();

 

    var arr = document.getElementsByTagName('td');

    for (var i = 0; i < arr.length; i++) {

        // Check if it is "our field"

        if ((arr[i].className == "ms-vb2") && (arr[i].innerHTML.indexOf("Due:") == 0)) {

            var sepDate = arr[i].innerHTML.substring(5).split("/", 3);

            var m = sepDate[0];

            var d = sepDate[1];

            var y = sepDate[2];

 

            // build the datestring

            var fieldDate = new Date(y, m - 1, d, 00, 00, 00).getTime();

            if (fieldDate > today) {

                arr[i].innerHTML = "<IMG src='_layouts/images/KPIDefault-0.gif' Title='On track' />";

            }

            else if (fieldDate == today) {

                arr[i].innerHTML = "<IMG src='_layouts/images/KPIDefault-1.gif' Title='Due today' />";

            }

            else {

                arr[i].innerHTML = "<IMG src='_layouts/images/KPIDefault-2.gif' Title='Overdue' />";

            }

        }

    }

}

// For it to work in collapsed views

function ExpGroupRenderData(htmlToRender, groupName, isLoaded) {

    var tbody = document.getElementById("tbod" + groupName + "_");

    var wrapDiv = document.createElement("DIV");

    wrapDiv.innerHTML = "<TABLE><TBODY id=\"tbod" + groupName + "_\" isLoaded=\"" + isLoaded + "\">" + htmlToRender + "</TBODY></TABLE>";

    tbody.parentNode.replaceChild(wrapDiv.firstChild.firstChild, tbody);

    findDatefields();

}

</script>

 

You can check the following links for information on this subject  

  •  Dynamically Updating A SharePoint Calculated Column Containing A "Today" Reference http://vspug.com/dez/2008/07/31/dynamically-updating-a-sharepoint-calculated-column-containing-a-quot-today-quot-reference/
  • Date Functions in Calculated Fields http://blogs.msdn.com/b/sharepointdesigner/archive/2008/08/01/date-functions-in-calculated-fields.aspx
{28/02/2011 9:17 AM} {2 comments}  {Tags: SharePoint, JavaScript}

Copyright © Moustafa Refaat 2016. All Rights Reserved.