1

I've working on a SharePoint list and I would like to change the background color of a row based on another column. First, I have use a column named "Entité" as value to change the color but it seems the code is not working. So I've tried another way by using another column (calculated column) but it still not working too.

Could you please help me on this ?

 "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
 "groupProps": {
 "headerFormatter": {
     "elmType": "div",
     "style": {
       "padding-left": "12px",
       "font-size": "16px",
       "font-weight": "400",
       "cursor": "pointer",
       "outline": "0px",
       "white-space": "nowrap",
       "text-overflow": "ellipsis"
     },
     "children": [
       {
         "elmType": "div",
         "children": [
           {
             "elmType": "span",
             "style": {
               "padding": "5px 5px 5px 5px"
             },
             "txtContent": "@group.fieldData.displayValue"
           }
         ]
       },
       {
         "elmType": "div",
         "children": [
           {
             "elmType": "div",
             "style": {
               "display": "flex",
               "flex-direction": "row",
               "justify-content": "center"
             },
             "children": [
               {
                 "elmType": "div",
                 "txtContent": "=' (' + @group.count + ')'"
               }
             ]
           }
         ]
       }
     ]
   }
 },
 "hideSelection": true,
 "hideListHeader": true,
 "rowFormatter": {
   "elmType": "div",
   "style": {
     "display": "flex",
     "flex-wrap": "wrap",
     "align-items": "stretch",
     "padding": "8px",
     "margin-bottom": "16px",
     "max-width": "930px",
     "border-radius": "8px",
     "box-shadow": "4px 4px 8px darkgrey"
             },
   "attributes": {
       "class": "=if([$couleur] == '1' , 'ms-bgColor-themePrimary' , if([$couleur] == '2' , 'ms-bgColor-gray30' , if([$couleur] == '3' , 'ms-bgColor-greenLight' , if([$couleur] == '4' , 'ms-bgColor-themeTertiary' , if([$couleur] == '5' , 'ms-bgColor-neutralSecondaryAlt' , if([$couleur] == '6', 'ms-bgColor-error' , if([$couleur] == '7' , 'ms-bgColor-sharedYellow10' , 'ms-bgColor-themeSecondary'))))))) + 'ms-bgColor-success--hover'"
                  },
   "children": [
     {
       "elmType": "div",
       "style": {
         "flex-grow": "1",
         "display": "flex",
         "flex-wrap": "wrap",
         "align-items": "stretch",
         "max-width": "400px"
       },
       "children": [
         {
           "elmType": "div",
           "style": {
             "flex": "none"
           },
           "children": [
             {
               "elmType": "div",
               "style": {
                 "width": "100px",
                 "height": "100px",
                 "overflow": "hidden",
                 "border-radius": "50%",
                 "margin-right": "8px"
               },
               "children": [
                 {
                   "elmType": "img",
                   "attributes": {
                     "src": "=if([$Picture] == '', @currentWeb + '/_layouts/15/userphoto.aspx?size=M', [$Picture])",
                     "title": "=if([$Picture] == '', 'No picture available', [$Picture.desc])"
                   },
                   "style": {
                     "position": "relative",
                     "top": "50%",
                     "left": "50%",
                     "width": "100%",
                     "height": "auto",
                     "margin-left": "-50%",
                     "margin-top": "-50%"
                   }
                 }
               ]
             }
           ]
         },
         {
           "elmType": "div",
           "style": {
             "flex-grow": "1",
             "display": "flex",
             "flex-direction": "column",
             "flex-wrap": "nowrap",
             "align-items": "stretch",
             "max-width": "340px"
           },
           "children": [
             {
               "elmType": "div",
               "style": {
                 "flex-grow": "1"
               },
               "children": [
                 {
                   "elmType": "span",
                   "txtContent": "=[$Nom]+' '+[$Pr_x00e9_nom]",
                   "style": {
                     "display": "block"
                   },
                   "attributes": {
                     "class": "ms-fontSize-l ms-fontWeight-semibold ms-fontColor-neutralPrimary"
                   }
                 },
                 {
                   "elmType": "span",
                   "txtContent": "[$Entit_x00e9_]",
                   "style": {
                     "display": "=if([$Entit_x00e9_] == '', 'none', 'block')"
                   },
                   "attributes": {
                     "class": "ms-fontSize-m ms-fontWeight-regular ms-fontColor-neutralSecondary"
                   }
                 },
                 {
                   "elmType": "span",
                   "txtContent": "[$Organisation]",
                   "style": {
                     "display": "=if([$Organisation] == '', 'none', 'block')"
                   },
                   "attributes": {
                     "class": "ms-fontSize-m ms-fontWeight-regular ms-fontColor-neutralSecondary"
                   }
                 }
               ]
             },
             {
               "elmType": "span",
               "txtContent": "='Statut :' +' '+[$Statut]",
               "style": {
                 "display": "=if([$Statut] == '', 'none', 'block')"
               },
               "attributes": {
                 "class": "ms-fontSize-m ms-fontWeight-regular ms-fontColor-neutralSecondary"
               }
             },
             {
               "elmType": "div",
               "style": {
                 "flex-grow": "1",
                 "display": "flex",
                 "flex-direction": "row",
                 "flex-wrap": "wrap",
                 "align-items": "flex-end"
               },
               "children": [
                 {
                   "elmType": "a",
                   "style": {
                     "display": "=if([$Mail] == '', 'none', 'block')",
                     "width": "100%"
                   },
                   "attributes": {
                     "class": "ms-fontSize-xs ms-fontWeight-regular ms-fontColor-neutralPrimary ms-fontColor-themePrimary--hover",
                     "href": "='mailto:' + [$Mail] + '?body=Bonjour ' + [$Nom] + ',\r\n'"
                   },
                   "children": [
                     {
                       "elmType": "span",
                       "attributes": {
                         "iconName": "Mail",
                         "class": "ms-fontColor-themePrimary"
                       },
                       "style": {
                         "padding-right": "6px"
                       }
                     },
                     {
                       "elmType": "span",
                       "txtContent": "[$Mail]"
                     }
                   ]
                 }
               ]
             }
           ]
         }
       ]
     },
     {
       "elmType": "div",
       "style": {
         "flex-grow": "1",
         "display": "flex",
         "flex-direction": "column",
         "flex-wrap": "nowrap",
         "align-items": "stretch",
         "max-width": "200px",
         "min-width": "120px"
       },
       "children": [
         {
           "elmType": "div",
           "style": {
             "flex-grow": "1"
           },
           "children": [
             {
               "elmType": "span",
               "style": {
                 "display": "block"
               },
               "attributes": {
                 "class": "ms-fontWeight-semibold ms-fontSize-m"
               },
               "txtContent": "Team :"
             },
             {
               "elmType": "span",
               "style": {
                 "display": "=if([$Team] == '', 'none', 'block')",
                 "padding-left": "8px"
               },
               "txtContent": "[$Team]",
               "attributes": {
                 "class": "ms-fontSize-s ms-fontWeight-regular ms-fontColor-neutralSecondary"
               }
             },
             {
               "elmType": "span",
               "style": {
                 "display": "=if([$Team] == '', 'block', 'none')",
                 "padding-left": "8px"
               },
               "txtContent": "N/A",
               "attributes": {
                 "class": "ms-fontSize-s ms-fontWeight-semilight ms-fontColor-neutralTertiary"
               }
             }
           ]
         },
         {
           "elmType": "div",
           "style": {
             "flex-grow": "1"
           },
           "children": [
             {
               "elmType": "span",
               "style": {
                 "display": "block"
               },
               "attributes": {
                 "class": "ms-fontWeight-semibold ms-fontSize-m"
               },
               "txtContent": "Poste actuel :"
             },
             {
               "elmType": "span",
               "style": {
                 "display": "=if([$Poste_x0020_actuel] == '', 'none', 'block')",
                 "padding-left": "8px"
               },
               "txtContent": "[$Poste_x0020_actuel]",
               "attributes": {
                 "class": "ms-fontSize-s ms-fontWeight-regular ms-fontColor-neutralSecondary"
               }
             },
             {
               "elmType": "span",
               "style": {
                 "display": "=if([$Poste_x0020_actuel] == '', 'block', 'none')",
                 "padding-left": "8px"
               },
               "txtContent": "N/A",
               "attributes": {
                 "class": "ms-fontSize-s ms-fontWeight-semilight ms-fontColor-neutralTertiary"
               }
             }
           ]
         },
         {
           "elmType": "div",
           "style": {
             "flex-grow": "1"
           },
           "children": [
             {
               "elmType": "span",
               "style": {
                 "display": "block"
               },
               "attributes": {
                 "class": "ms-fontWeight-semibold ms-fontSize-m"
               },
               "txtContent": "Invitation Slack :"
             },
             {
               "elmType": "span",
               "style": {
                 "display": "=if([$Invitation_x0020_Slack] == '', 'none', 'block')",
                 "padding-left": "8px"
               },
               "txtContent": "=if([$Invitation_x0020_Slack] == 'true', 'Oui', 'Non')",
               "attributes": {
                 "class": "ms-fontSize-s ms-fontWeight-regular ms-fontColor-neutralSecondary"
               }
             },
             {
               "elmType": "span",
               "style": {
                 "display": "=if([$Invitation_x0020_Slack] == '', 'block', 'none')",
                 "padding-left": "8px"
               },
               "txtContent": "N/A",
               "attributes": {
                 "class": "ms-fontSize-s ms-fontWeight-semilight ms-fontColor-neutralTertiary"
               }
             }
           ]
         }
       ]
     },
     {
       "elmType": "div",
       "style": {
         "flex-grow": "1",
         "display": "flex",
         "flex-direction": "column",
         "max-width": "200px",
         "min-width": "155px"
       },
       "children": [
         {
           "elmType": "div",
           "style": {
             "flex-grow": "1"
           },
           "children": [
             {
               "elmType": "span",
               "style": {
                 "display": "block"
               },
               "attributes": {
                 "class": "ms-fontWeight-semibold ms-fontSize-m"
               },
               "txtContent": "Notes:"
             },
             {
               "elmType": "span",
               "style": {
                 "display": "=if([$Information] == '', 'none', 'block')",
                 "padding-left": "8px"
               },
               "txtContent": "[$Information]",
               "attributes": {
                 "class": "ms-fontSize-s ms-fontWeight-regular ms-fontColor-neutralSecondary"
               }
             },
             {
               "elmType": "span",
               "style": {
                 "display": "=if([$Information] == '', 'block', 'none')",
                 "padding-left": "8px"
               },
               "txtContent": "N/A",
               "attributes": {
                 "class": "ms-fontSize-s ms-fontWeight-semilight ms-fontColor-neutralTertiary"
               }
             }
           ]
         },
         {
           "elmType": "div",
           "style": {
             "flex": "none",
             "display": "flex",
             "flex-direction": "row-reverse",
             "flex-wrap": "nowrap"
           },
           "children": [
             {
               "elmType": "button",
               "customRowAction": {
                 "action": "share"
               },
               "attributes": {
                 "title": "Share",
                 "class": "ms-fontColor-neutralPrimary ms-fontColor-themePrimary--hover"
               },
               "style": {
                 "border": "none",
                 "background-color": "transparent",
                 "cursor": "pointer"
               },
               "children": [
                 {
                   "elmType": "span",
                   "attributes": {
                     "iconName": "Share"
                   }
                 }
               ]
             },
             {
               "elmType": "button",
               "customRowAction": {
                 "action": "delete"
               },
               "attributes": {
                 "title": "Delete",
                 "class": "ms-fontColor-neutralPrimary ms-fontColor-red--hover"
               },
               "style": {
                 "border": "none",
                 "background-color": "transparent",
                 "cursor": "pointer"
               },
               "children": [
                 {
                   "elmType": "span",
                   "attributes": {
                     "iconName": "Delete"
                   }
                 }
               ]
             },
             {
               "elmType": "button",
               "customRowAction": {
                 "action": "editProps"
               },
               "attributes": {
                 "title": "Edit",
                 "class": "ms-fontColor-neutralPrimary ms-fontColor-themePrimary--hover"
               },
               "style": {
                 "border": "none",
                 "background-color": "transparent",
                 "cursor": "pointer"
               },
               "children": [
                 {
                   "elmType": "span",
                   "attributes": {
                     "iconName": "Edit"
                   }
                 }
               ]
             },
             {
               "elmType": "button",
               "customRowAction": {
                 "action": "defaultClick"
               },
               "attributes": {
                 "title": "See more details",
                 "class": "ms-fontColor-neutralPrimary ms-fontColor-themePrimary--hover"
               },
               "style": {
                 "border": "none",
                 "background-color": "transparent",
                 "cursor": "pointer"
               },
               "children": [
                 {
                   "elmType": "span",
                   "attributes": {
                     "iconName": "ContactInfo"
                   }
                 }
               ]
             }
           ]
         }
       ]
     }
   ]
 }
}

Thank you in avance !

1 Answer 1

0

I haven't reviewed your whole format, but I believe the problem is that you are setting your background classes in an expression (not a problem) but not leaving a space when adding the --hover class will result in a something like ms-bgColor-themePrimaryms-bgColor-success--hover. So updating your expression to the following should fix the issue:

"attributes": {
  "class": "=if([$couleur] == '1' , 'ms-bgColor-themePrimary' , if([$couleur] == '2' , 'ms-bgColor-gray30' , if([$couleur] == '3' , 'ms-bgColor-greenLight' , if([$couleur] == '4' , 'ms-bgColor-themeTertiary' , if([$couleur] == '5' , 'ms-bgColor-neutralSecondaryAlt' , if([$couleur] == '6', 'ms-bgColor-error' , if([$couleur] == '7' , 'ms-bgColor-sharedYellow10' , 'ms-bgColor-themeSecondary'))))))) + ' ms-bgColor-success--hover'"
},
1
  • 1
    Thank you for your great help, after adding space before each value, it worked perfectly now. (y)
    – Tan Nguyen
    May 4, 2022 at 3:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.