Mettre de la couleur dans les listes

Bonjour à tous,

Aujourd’hui je vais vous parler d’une petite requête que j’ai reçue récemment d’un client.

Il voulait avoir une liste de tâches en couleur !

Le principe était simple : Si une tâche est accomplie, elle apparait en vert, si la tâche n’est pas accomplie et a la priorité maximale (niveau (1) High), elle doit être affichée en rouge.

Pour une fois je me suis essayé au JavaScript au lieu de partir dans un développement custom. Ca n’avait pas l’air si compliqué que ça !

Voici un aperçu de notre liste de tâches.

Pour commencer ajoutons une Content Editor WebPart dans la page où se trouve la liste.On doit l’ajouter en dessous de la ListViewWebpart de la liste.  Si on vérifie les classes appliquées sur les cellules, nous pouvons voir que la classe utilisée pour les champs d’une liste est la classe « ms-vb2 ». Nous allons donc récupérer l’ensemble des cellules de la page et pour tester celles dont la classe est « ms-vb2 ». Ensuite nous allons vérifier le contenu de chaque cellule et éventuellement appliquer le style voulu.  Si la tâche est finie (« Completed »), on applique la couleur «lightgreen » a l’ensemble de la ligne. Si la tâche est en statut important (« (1) High») et non complétée,  nous appliquons la couleur « red » à la ligne.


<script language="javascript" type="text/javascript">

var x = document.getElementsByTagName("TD")

var i=0;

for (i=0;i<x.length;i++)

{

if (x[i].className=="ms-vb2")

{

if (x[i].innerHTML=="Completed")

{

x[i].parentNode.style.backgroundColor='lightgreen';

}

if (x[i].innerHTML=="(1) High" && x[i].parentNode.style.backgroundColor!='lightgreen')

{

x[i].parentNode.style.backgroundColor='red';

}

}

} </script>

Résultat :

Un petit code tout simple pour voir les tâches en couleur !

Ce petit code va regarder le contenu de chaque cellule de la liste et s’il trouve le texte correspondant il applique la bonne couleur. Attention toutefois, si vous avez «Completed» ou « (1) High » comme contenu d’un autre champ cela fera la modification de couleur.

Pour avoir des tests plus poussés du Jquery est nécessaire, j’en parlerai peut-être dans un futur article.

Christopher.

Cet article, publié dans SharePoint 2010, est tagué , , . Ajoutez ce permalien à vos favoris.

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s