CODEWITHSUNDEEP
sharepointcolorsheader
user103408
user103408

Reputation: 1

sharepoint header trying to get the background to change based on a status

I am trying to get the header of a sharepoint submission form to change color based on what a status says.

I sas able to get the header to contain the status ex: In progress and the reservation # as pictured, but I cannot get the background of the header color to change based on the status

I cannot get the code to work any help would be greatly appreciated code part 4 is what I am trying to get the color to change

Thanks

I cannot get the color to change I provided pictures of the code

submission form header

  1. "elmType": "div", "attributes": { "class": "ms-borderColor-neutralTertiary" }, "style": { "width": "99%", "border-top-width": "0px", "border-bottom-width": "1px", "border-left-width": "0px", "border-right-width": "0px", "border-style": "solid", "margin-bottom": "16px" }, "children": [ { "elmType": "div", "style": { "display": "flex", "box-sizing": "border-box", "align-items": "center" }, "children": [ { "elmType": "div", "attributes": { "iconName": "Vacation", "class": "ms-fontSize-42 ms-fontWeight-regular ms-fontColor-themePrimary", "title": "Details" }, "style": { "flex": "none", "padding": "0px", "padding-left": "0px", "height": "36px" } } ] }, { "elmType": "div", "attributes": { "class": "ms-fontColor-neutralSecondary ms-fontWeight-bold ms-fontSize-24" }, "style": { "box-sizing": "border-box", "width": "100%", "text-align": "left", "padding": "21px 12px", "overflow": "hidden" }, "children": [ { "elmType": "div", "txtContent": "=[ $Status] + ' Reservation Number ' + [$Reservation_x0020_Number ]" } ] } ] } { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "div", "txtContent": "@currentField", "style": { "background-color": "=if([$Status] =='Not Started' , 'grey', if([$Status] == 'Completed-Fixed by Other' ,'#0078d4', 'green', if([$Status] == 'In Progress' ,'#106ebe', 'themeDarkAlt', if([$Status] == 'Completed-Fixed by Other' ,'#0078d4', 'green'))))” "padding-left": "14px"

Upvotes: 0

Views: 492

Answers (1)

ChengFeng - MSFT
ChengFeng - MSFT

Reputation: 141

Can you provide the code (in text form)? I can try to modify your code for you. I did a test to simulate your scene, and I found that the color you used could not be recognized. I used the officially supported color, which can change the background color according to the value of the state. Here is code for your reference:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "txtContent": "@currentField",
  "style": {
    "background-color": "=if([$Status] =='Not Started' , 'grey', if([$Status] == 'In Progress' ,'#0078d4', 'green'))",
    "padding-left": "14px"
  }
}

Here is test result

Here is theme color

Here is link about color for your reference: https://learn.microsoft.com/en-us/sharepoint/dev/design/themes-colors

Upvotes: 2

Related Questions