Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Développement Sharepoint .NET Discussion :

Couleur d'une cellule de colonne de liste de site d'équipe


Sujet :

Développement Sharepoint .NET

  1. #1
    Nouveau membre du Club
    Couleur d'une cellule de colonne de liste de site d'équipe
    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

  2. #2
    Membre habitué
    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.
    Les meilleures sauces de salade sont sur www.sauce-salade.com
    SpBreak la pause SharePoint: SP Break

  3. #3
    Nouveau membre du Club
    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

  4. #4
    Expert confirmé
    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 ?
    Aide les autres...
    Et les autres t'aideront....
    Mon site DVP
    N'oubliez pas de consulter les FAQ SharePoint et les cours et tutoriels SharePoint

    N'oubliez pas de voter pour les messages dont la réponse est pertinente

  5. #5
    Nouveau membre du Club
    Bonjour Ludojojo,

    Oui avec plaisir

  6. #6
    Expert confirmé
    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
    Aide les autres...
    Et les autres t'aideront....
    Mon site DVP
    N'oubliez pas de consulter les FAQ SharePoint et les cours et tutoriels SharePoint

    N'oubliez pas de voter pour les messages dont la réponse est pertinente

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

  8. #8
    Membre habitué
    Même problématique
    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 ?

  9. #9
    Nouveau membre du Club
    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

  10. #10
    Membre habitué
    Merci
    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.

  11. #11
    Nouveau membre du Club
    De rien
    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+

  12. #12
    Membre habitué
    :/
    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.

  13. #13
    Membre habitué
    Solution
    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.

  14. #14
    Candidat au Club
    couleur cellule
    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

  15. #15
    Nouveau membre du Club
    Mise en forme
    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

  16. #16
    Nouveau membre du Club
    JSON suite
    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.

  17. #17
    Candidat au Club
    Couleur cellule
    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.

  18. #18
    Nouveau membre du Club
    version
    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.

  19. #19
    Candidat au Club
    Bonjour,

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

###raw>template_hook.ano_emploi###