Use javascript/jquery to see if items in list are due soon in Sharepoint 2013

Question

I am trying to determine by date if an item is due. In my use case, my user will create an item with a date in the following format (MM/DD or 06/15). Now if the date the user chooses will fall in the next 30 days or month then it will turn red. If the date will fall within the next 60 days or less (until it reaches 30) then it will be orange and if greater than 60 they will be yellow.

so just to clarify, if my date <= 30 days from today's date then turn red and so on...

I was looking into Date.js to perform these calculations but unsure of how to get started.

What I was thinking so far was the following:

var _dueDate = new Date()
var now = Date();

var nowPlus30 = new Date();
nowPlus.setDate(now.getDate() + 30);

var nowPlus90 = new Date();
nowPlus.setDate(now.getDate() + 90);

if (_dueDate == '' || !_dueDate) {
    return '';
}

and then just using the values to change the background color for example:

  if( _dueDate <= nowPlus30 ) //find the data to use to determine the color
            {
                x[i].parentNode.style.backgroundColor = 'orange'; // set the color
            }

but doing these for each condition has not worked so far so I think using Date.js may help but again, no idea how to proceed and because I can't use SharePoint designer to use those built in conditional statements I have to use javascript to do the operation.

please help!

Do you want to achieve this on OOB all items view of a list? — Asad Refai
– Asad Refai, Commented Apr 22, 2015 at 14:26
This sounds like a basic javascript question (unless you're having issue with changing the colour of the SharePoint element). You'll probably get more help in StackOverflow. — wjervis
– wjervis, Commented Apr 22, 2015 at 15:14
@AsadRefai, yes I woud like this to work OOB on all items view. — Sadie
– Sadie, Commented Apr 22, 2015 at 17:16
Ok. You have an idea to write a JavaScript function. So now to start solving this use case i would suggest you to explore JSLink a new feature in 2013 which alows to manipulate views with help of JavaScript — Asad Refai
– Asad Refai, Commented Apr 22, 2015 at 18:29

Kesava · Accepted Answer · 2015-04-22 15:13:36Z

You can use a calculated field to calculate the days between two dates. DATEDIF (Date1, Date2, "D").
For a list view you can use xslt to format depening on the condition. For reference, I have used below xslt to do something similar to that show images depending on the status of the item.

<xsl:variable name="fieldValue" select="$thisNode/@*[name()=$fieldName]" />
<xsl:variable name="status">
  <xsl:choose>
    <xsl:when test="$fieldValue = 'GREEN'">green</xsl:when>
    <xsl:when test="$fieldValue = 'AMBER'">amber</xsl:when>
    <xsl:when test="$fieldValue = 'RED'">red</xsl:when>
    <xsl:otherwise>not_rated</xsl:otherwise>
  </xsl:choose>
</xsl:variable>

<xsl:variable name="statusIconImg" >
  <img>
    <xsl:attribute name="src">
      <xsl:text>/sitename/Pictures/</xsl:text>
      <xsl:value-of select="$status" />
      <xsl:text>.png</xsl:text>
    </xsl:attribute>
  </img>
</xsl:variable>

<div style="text-align: center;">
  <xsl:copy-of select="$statusIconImg"/>
</div>

Danny '365CSI' Engelman · Accepted Answer · 2015-08-04 18:01:15Z

OP stated SharePoint Designer can not be used

You can stuff Javascript in a Calculated Column; but its a real pita to debug if you make any typos.

Change the [Enddate] to your duedate field Change the Range setting to the timeslots you require

="<img src=""/_layouts/images/blank.gif"" onload=""{"
&"  var TRnode=this.parentNode.parentNode.parentNode;"
&"  var SPday=new Date();"
&"  SPday.setFullYear("
&YEAR([Enddate])
&","
&MONTH([Enddate])-1
&","
&DAY([Enddate])
&"  );"
&"  var days=Math.round((SPday.getTime()-new Date().getTime())/86400000);"
&"  if(days>-4100){"
&"  var Range=[-21,-14,-7,0,7,14,21];"
&"  var CSS=['salmon','lightCoral','Pink','lightGoldenrodYellow','lightGreen','mediumSeaGreen','limeGreen'];"
&"  for (i=0;i<Range.length;i++){Color=CSS[i];if(days<Range[i]){ break;}}"
&"    TRnode.style.backgroundColor=Color;"
&"    var text=document.createTextNode(days+' days '+((days<0)?'past':'left'));"
&"    this.parentNode.appendChild(text,this);"
&"  }"
&"}"">"

Stack Exchange Network

Use javascript/jquery to see if items in list are due soon in Sharepoint 2013

2 Answers 2

Your Answer

Linked

Hot Network Questions

Use javascript/jquery to see if items in list are due soon in Sharepoint 2013

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Hot Network Questions