Référence – EndUserSharePoint.com – Tous Droits Réservés. Traduction – Groupe d’Usagers SharePoint Québec
Cet article décrit la façon d’implanter un tableau de bord simple (indicateurs de gestion) sous Windows SharePoint Services (WSS) 3.0 à partir des données d’une liste. C’est une approche simple est basée sur l’utilisation de colonnes calculées, de script JavaScript et de langage HTML.
On peut alors obtenir un résultat comme celui-ci:
Figure 1 – Un tableau de bord simple avec des indicateurs visuels
Fonctionnement général
Pour obtenir ce genre de résultat, on combine l’utilisation de balises HTML, de colonnes calculées et d’un script qui agit comme interpréteur HTML. La colonne calculée est basée sur la formulation suivante:
=SI(([Colonne 1]votre condition[Colonne 2]);"balise HTML 1 de type Image","balise HTML 2 de type Image")
Étant une colonne calculée, si la condition est vraie, la balise HTML 1 sera interprétée et si la condition est fausse, la balise HTML 2 sera interprétée. La balise HTML de type Image est formulée comme suit:
<DIV><img title='Votre Titre' border='0' alt='Votre valeur' src='URL source de l’Image A Afficher'></DIV>
Les images peuvent être emmagasinées dans une librairie de type Image dans le site où réside la liste ou encore dans le répertoire votreserveur/layouts/images sur les serveurs frontaux.
Il faut cependant un moyen d'interpréter le résultat de la colonne calculée qui est, pour l'instant, une balise HTML. C'est là que l'utilisation d'un script JavaScript entre en ligne de compte.
Pour ce faire, il faut insérer le script que vous trouvez à la fin de l'article dans une Web Part de type Édition de Contenu et déposer cette Web Part en mode Hidden après la Web Part affichant la liste dans laquelle est affiché notre indicateur visuel. Pour ce faire, vous devez donc éditer la page où est située votre liste. Il faut malheureusement répéter l'opération pour chaque vue où l'on désire utiliser les indicateurs.
Figure 2 – Disposition de la Web Part contenant le script d’interprétation du HTML
Implantation
Pour obtenir le tableau de la figure 1, créer une liste simple avec deux colonnes de type numérique; Valeur A et Valeur B. Par la suite, pour définir la colonne qui affichera l’icône, il faut créer une colonne ‘Indicateur’ de type Colonne Calculée et il faut utiliser la formule suivante:
=SI(([Valeur A]>[Valeur B]);"<DIV><img title='Indicateur' border='0' alt='Depassement' src='http://votreserveurWSS/_layouts/images/KPIDefault-2.GIF'></DIV>";"<DIV><img title='OK' border='0' alt='OK' src='http://votreserveurWSS/_layouts/images/KPIDefault-0.GIF'></DIV>")
Dans cet exemple, on compare la colonne Valeur A et la colonne Valeur B; dans le cas où A est supérieur à B, nous affichons un icône rouge . Dans le cas où les A est inférieur à B, nous affichons un icône vert .
Affichage de plusieurs états
On peut utiliser cette technique pour permettre l’affichage de plusieurs états différents. Pour ce faire, la formule utilisera l’approche de conditions imbriquées et ressemblera alors à :
=SI([Etat]="En Traitement";"<DIV><img title='En Traitement' border='0' alt='En Traitement' src='http://liaqcp2/_layouts/images/KPIDefault-0.GIF'></DIV>";SI([Etat]="En Attente";"<DIV><img title='En Attente' border='0' alt='Triage' src='http://liaqcp2/_layouts/images/KPIDefault-1.GIF'></DIV>";"<DIV><img title='Termine' border='0' alt='Termine' src='http://liaqcp2/_layouts/images/KPIDefault-2.GIF'></DIV>"))
Dans cet exemple, on supporte trois (3) états différents – En Traitement (icône vert), Terminé (icône rouge) et En Attente (icône jaune). Il faut donc que votre liste contienne une colonne ‘Etat’ de type Choix avec les valeurs ‘En Traitement’, ‘En Attente’ et ‘Termine’.
Figure 3 – Tableau de gestion supportant plusieurs états
Il faut noter qu’il y a cependant une limite au nombre de conditions SI imbriquées; SharePoint ne supporte que sept (7) conditions imbriquées dont il n’est pas possible d’avoir plus de sept (7) états différents.
Script d’interprétation HTML
Ce script permet de transformer le texte (code HTML) d’une colonne et d’afficher le contenu de cette colonne selon les instructions de type HTML qui sont alors interprétées dynamiquement au chargement de la page.
Il est recommandé de créer une bibliothèque de documents pour héberger les divers scripts utilisés sur votre site. Assurez-vous que les permissions de type écriture sont limitées pour ne pas compromettre le fonctionnement de ces scripts.
Copiez ce script dans une Web Part de type Éditeur de Contenu
<script type="text/javascript">
//
// Text to HTML
// Feedback and questions: Christophe@PathToSharePoint.com
// Copyright – EndUserSharePoint.com
//
var theTDs = document.getElementsByTagName("TD");
var i=0;
var TDContent = " ";
while (i < theTDs.length) {
try {
TDContent = theTDs[i].innerText || theTDs[i].textContent;
if ((TDContent.indexOf("<DIV") == 0) && (TDContent.indexOf("</DIV>") >= 0)) {
theTDs[i].innerHTML = TDContent;
}
}
catch(err){}
i=i+1;
}
//
// ExpGroupRenderData overwrites the default SharePoint function
// This part is needed for collapsed groupings
//
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>";
var theTBODYTDs = wrapDiv.getElementsByTagName("TD"); var j=0; var TDContent = " ";
while (j < theTBODYTDs.length) {
try {
TDContent = theTBODYTDs[j].innerText || theTBODYTDs[j].textContent;
if ((TDContent.indexOf("<DIV") == 0) && (TDContent.indexOf("</DIV>") >= 0)) {
theTBODYTDs[j].innerHTML = TDContent;
}
}
catch(err){}
j=j+1;
}
tbody.parentNode.replaceChild(wrapDiv.firstChild.firstChild,tbody);
}
</script>
Laissez aller votre imagination :-)
Alain Lord - MVP SharePoint Server