Discussion :

[kerichen]

Bonjour à tous,

J'ai réalisé il y a quelques années pour des besoins professionnels un site d'équipe Office 365 P1 qui gère les patients d'une maison de retraite.

Les mises en forme conditionnelles étaient réalisées à l'époque avec SharePoint designer 2010 sans aucune difficulté ni saisie de code. depuis les diverses évolution d'Office 365 c'est aujourd'hui SharePoint 2013 qui est utilisé, et malheureusement pour moi qui ne suit pas programmeur ça me semble être une véritable usine à gaz.

Heureusement les modifications effectuées avec la version 2010 ont été conservées dans le site d'équipe mais je ne sais pas comment procéder avec la version 2013 pour réaliser de nouvelles colonnes.

Exemple: dans le site d'équipe on gère des patients et certaines colonnes de la liste changent de couleur en fonction de la valeur contenue dans la colonne. Si par exemple un patient est hospitalisé la cellule est rouge quand la valeur est oui. Quand le traitement médicamenteux a été délivré, si la cellule de cette colonne qui peut prendre les valeurs "à faire" ou "fait" est indiquée comme "à faire" le fond de cellule est rouge, dans l'autre cas il est vert.

Auriez-vous des pistes pour réaliser ce type de modification avec SP designer 2013.

Merci d'avance

[jubourbon]

A ma connaissance sur SharePoint 2013 il faut passer par javascript pour réaliser ce genre d’opération. SharePoint Designer ne le permet plus.

[kerichen]

Merci pour la réponse,

C'est malheureusement ce que je craignais, dommage car ce type de modification était très simple avec SPDesigner 2010

[ludojojo]

Je confirme, il faut utiliser du JSLink pour réaliser proprement ton besoin...
Cependant c'est très simple à mettre en oeuvre ! Même sans être développeur, je pense que si on te donne le squelette tu peux le faire en 30 minutes !

Tu veux tenter le coup ?

[kerichen]

Bonjour Ludojojo,

Oui avec plaisir

[ludojojo]

Ok donc pour faire simple (n'hésites pas à demander des précisions sur les différentes étapes)

1. Créer une page avec une XSLListViewWebPart
   XslListViewWebPart est le terme technique qui représente une webpart (native) permettant d'afficher une vue spécifique d'une liste.
   Il te suffit d'ajouter, dans ta page, une webpart de type application qui pointe vers ta liste cible.
2. Créer un fichier JS qui sera utiliser comme JSLink
   Pour que ce soit plus simple pour toi, tu peux stoquer le fichier JavaScript dans la bibliothèque "Style Library" (ou tu le souhaites) que l'on appellera 'MonJSLink.js'
3. Récupérer les informations sur la liste
   Cette étape est une astuce que j'ai découvert récemment et qui permet d'afficher les propriétés du contexte d'exécution du script.
   En gros il va nous permettre de récupérer le 'BaseViewID' de la liste que l'on utilise. Cette information est indispensable pour la suite.
   
   Voici le contenu du fichier :
   

   Code :

   Sélectionner tout - Visualiser dans une fenêtre à part

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   (function () {
       var context = {};
       context.Templates = {};
    
       context.Templates.Item = itemTemplate;
    
       context.BaseViewID = '';
       context.ListTemplateType = '';
    
       SPClientTemplates.TemplateManager.RegisterTemplateOverrides(context);
    
           ExecuteOrDelayUntilScriptLoaded(function () {
                   RenderListView = function (overrideContext, webPartID) {
                       console.log(ctx)
                   }
           }, 'ClientTemplates.js');
   })();
    
   function itemTemplate(ctx) {
       return "item template";
   }

4. Lier le JSLink à ma vue :
   Très simple, il suffit d'afficher les propriétés de la webpart et de modifier le dernier champ en y insérant un lien vers le fichier 'MonJSLink.js'.
   Maintenant pour récupérer les données, il faut que tu utilises la console développeur de ton navigateur (généralement F12) et que tu nous copie ici le contenu de cette dernière.
5. Créer un rendu personnalisé
   C'est l'étape la plus marante, mais pour cela on a besoin d'un peu plus d'information sur la liste, que nous donnera l'étape précédente

J'espère que ce n'est pas trop confu

[kerichen]

Merci pour ton aide. Je me penche là dessus dès que possible et je te tiens au courant. A+

[Do0dX]

Bonjour,
Je me permet de relancer le sujet car j'ai la même problématique et j'ai beaucoup de mal à trouver de l'aide à ce sujet sur internet.
Que dois-je récupéré sur l'inspecteur ?

[kerichen]

N'étant pas suffisamment doué en développement j'avais laissé tomber cela malgré l'aide de Ludojojo. Tu peux éventuellement jeter un coup d’œil sur le site "istep.fr" qui avait publié dans son blog un billet traitant d'une aide sur la colorisation des listes en jslink avec sharepoint 2013 dont voici le lien: http://www.istep.fr/blog/ArticleID/2...-ou-Office-365

A partir de ce blog on peut remonter sur différents liens qui reprennent tous la solution de ludojojo mais que malheureusement je n'avais jamais réussi à appliquer dans mon propre projet.

Bon courage

[Do0dX]

Merci Kerichen pour ta réponse, désolé que tu n'ai pas réussi à le mettre en place.
Leur billet m'a l'air bien documenté, je vais étudié ça.

Cordialement,
EG

PS:Je continuerai à posté mes questions sur ce post si jamais je rencontre le moindre soucis à ce sujet.

[kerichen]

Comme le projet que j'utilise avait été créé avec sharepoint 2010 qui permettait facilement de traiter la fonctionnalité de couleur dynamique le passage à la version 2013 avait conservé la mise en place des couleurs donc je n'ai pas cherché à creuser quelque chose qui fonctionnait chez moi.

De plus je ne sais pas si un hypothétique passage à une version sharepoint 2016 ne va pas encore tout modifier.

Par contre si tu trouve la solution je suis preneur pour l'utiliser sur d'autres projets.

A+

[Do0dX]

Malgré le fait d'avoir suivis le tuto à la lettre cela ne fonctionne pas.

J'avais trouvé un script sur internet que je trouvais simple d'utilisation:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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=="Not Completed")
{
x[i].parentNode.style.backgroundColor='red';
}
}
} </script>

Le script analyse le tableau et en fonction d'une donnée qu'il trouve dans la ligne, il change sa couleur de fond.

Je l'ajoute dans un WebPart éditeur de script et cela ne fonctionne pas non plus.
Je vais retenter en faisant un lien JS sur le WebPart ListvVew directement et voir ce que ça donne.
Je garde espoir de trouvé une solution relativement simple et rapide.
Je retourne vers vous dès que j'ai fait mon test. D'ici la si quelqu'un à une idée je suis preneur.


EDIT:

Je vais retenter en faisant un lien JS sur le WebPart ListvVew directement et voir ce que ça donne.

Cela ne marche pas non plus .....
Et l'inspecter d'élément ne m'affiche aucune erreur.

[Do0dX]

Bonjour Kerichen,
J'ai trouvé une solution:
Source : http://sharepoint.stackexchange.com/...oundation-2013

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {
 
   SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
     OnPostRender: function(ctx) {
 
       var statusColors =  {
          'Marquion' : '#FFF1AD',   // La valeur qui t’intéresse et son code couleur. ici lorsque ma colonne prendra la valeur Marquion, ma ligne sera colorer en jaune 
          'Rouvignies' : '#FFD800', 
       };
 
       var rows = ctx.ListData.Row;
       for (var i=0;i<rows.length;i++)
       {
          var status = rows[i]["Port"];   //ici remplace Port par le nom de la colonne qui t’intéresse . Il ira donc chercher les valeurs Marquion ou Rouvignies dans ma colonne "Port"
          var rowId = GenerateIIDForListItem(ctx, rows[i]);
          var row = document.getElementById(rowId); 
          row.style.backgroundColor = statusColors[status];
       }
     }
   }); 
 
});

J’espère bien me faire comprendre dans les commentaires.
Si tu as la moindre question n'hésite pas.

[melkaspa]

Bonjour,

Je remplace une personne de l'équipe informatique dans ma société qui est en congé longue maladie. Je suis novice sur Sharepoint et je ne comprends pas certaines choses.

J'ai besoin de mettre en couleur une cellule selon un statut. Par exemple, sujet 1 "en cours" en orange, "concrétisé" en vert, "abandonné" en rouge.
J'ai bien compris qu'il fallait créer un script.
Mais comment arriver à cette étape ? Dois-je insérer le script directement sur la page ? Faut-il créer une page .js dans les documents ?
Je ne comprends pas le fonctionnement.

Merci pour votre aide.
Cdt,
Melkaspa

[kerichen]

Bonjour,

En réponse au dernier message voici un lien intéressant sur l'utilisation de JSON dans les colonnes pour modifier leur apparence selon certains critères. Je n'ai pas encore testé mais ça semble prometteur:
https://trupel.com/blog_sharepoint/default.aspx

[kerichen]

Suite à mon précédent message je viens de tester à partir de l'article et ça fonctionne parfaitement MAIS il faut impérativement utiliser la nouvelle présentation de Sharepoint à laquelle je ne me suis jamais vraiment habitué et non utiliser l'affichage standard qui ne donne alors aucun résultat, raison pour laquelle je n'arrivais à rien en copiant-collant dans les paramètres des colonnes les codes proposés sur le site avec l'affichage standard.

[melkaspa]

Bonjour,

J'ai réussi entre temps à obtenir une couleur sur le texte du statut de la colonne, avec la fonction SI, voir PJ1. Néanmoins, si je veux filtrer par statut, j'ai le script de la balise qui s'affiche...voir PJ2

Merci pour votre aide.

[kerichen]

Bonjour,

Tu utilises SharePoint avec un abonnement Office 365 ou SharePoint directement sur un serveur ? Moi j'ai un abonnement Office 365 avec un plan p3, je ne sais pas si cela implique des différences avec la version que tu utilises.

Quand je vois ta copie d'écran il me semble que tu utilises l'affichage standard de Sharepoint pour lequel le lien avec l'utilisation de javascript tel que je te le donnais plus haut ne fonctionne pas.

En bas à gauche de ton écran quand tu es sur une des listes tu dois avoir un lien qui t'indique "quitter l'expérience classique" ou 'revenir à l'affichage standard".

Si tu quittes l'expérience classique et que tu suis la procédure du lien que je t'ai communiqué dans les messages précédents il te suffira de copier-coller les codes en indiquant "Abandonnée" et "En cours" dans ces codes pour voir apparaitre les couleurs que tu as choisies.

[melkaspa]

Bonjour,

Je pense que c'est Sharepoint server 2013, je sais que nous avons la version standard, certaines options n'existent pas....