Modification de la couleur des lignes de la liste SharePoint

Question

J'essaye d'écrire du javascript pour pouvoir lire la date d'une colonne d'une liste SharePoint. Par exemple si dans ma colonne de date (MonthNeeded) la date est 03/15 je veux être en mesure de vérifier si la date est < 30 jours à compter de la date d'aujourd'hui ou < = 90 jours à compter de la date d'aujourd'hui et ainsi de suite. Quand il vérifie cela, il changera la couleur de ligne correspondant à cette date d'une certaine couleur. Moins de 30 jours à compter d'aujourd'hui il sera rouge, supérieur ou égal à 30 jours il sera orange, etc ...

J'ai écrit du code dans Visual Studio car je ne peux malheureusement pas utiliser SharePoint Designer avec mon instance de SP donc je ne peux pas tester mon code en temps réel.

Voici ce que j'ai jusqu'à présent:

function CheckStatus() { 
    var x = document.getElementsByTagName("TD") // find all of the TDs 
    var _dueDate = new Date(ctx.CurrentItem.MonthNeeded) 
    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 ''; 
    } 
    var i = 0; 
    for (i = 0; i < x.length; i++) { 

     if (x[i].className == "ms-vb2") //find the TDs styled for lists 
     { 

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

      //repeat the above for each data value 

      if (_dueDate <= nowPlus90) { 
       x[i].parentNode.style.backgroundColor = 'yellow'; // set the color 
      } 

      if (_dueDate > nowPlus30) { 
       x[i].parentNode.style.backgroundColor = 'red'; // set the color 
      } 


     } 

    } 
} 

Toute aide serait grandement appréciée!

Answer 1

Votre code ne fonctionne pas correctement car vous avez des erreurs mineures dans votre JS.

Tout d'abord, vérifiez que nowPlus n'est pas défini, mais vous essayez de l'utiliser et la fonction se brise, ce qui crée une exception.

Vous devez utiliser nowPlus30 et nowPlus90 lors de la mise à la date, plus de 30 jours, et en plus de 90 jours, respectivement.

En outre, vérifiez la ligne:

var now = Date(); 

Vous devez remplacer la ligne ci-dessus:

var now = new Date(); 

Comme date est un objet JS qui doit être initialisé avant de l'utiliser.

S'il vous plaît consulter le violon suivant pour une référence :)

http://jsfiddle.net/canolucas/gmw9tr5h/

Answer 2

Je l'ai utilisé la bibliothèque date.js dans le passé pour faire la mise en forme conditionnelle voir: http://code.google.com/p/datejs/

Voici un extrait de mon code:

var created = oListItem.get_item('Created').toLocaleDateString(); 
 
var dateCreated = Date.parse(created); 
 
var lastWeek = Date.today().add(-7).days(); 
 
var newIcon = ''; 
 
if (dateCreated >= lastWeek) { 
 
     newIcon = "<span class='newIcon'> new!</span>"; 
 
}