SharePoint Form (Header) Conditional Formatting

Question

Hello Community!I am working to make an image column only display if it is not Null. The header is currently displaying fine, but I only need the image frame to be present if the headshot is nullThe column is $HeadshotAny help would be very much appreciatedCurrent Header:&nbsp;&nbsp;&nbsp;&nbsp;Current Header JSON:{&nbsp; &nbsp; "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",&nbsp; &nbsp; "elmType": "div",&nbsp; &nbsp; "style": {&nbsp; &nbsp; &nbsp; &nbsp; "display": "flex",&nbsp; &nbsp; &nbsp; &nbsp; "align-items": "center",&nbsp; &nbsp; &nbsp; &nbsp; "background-color": "=if([$IsDarkTheme], '#1f1f1f', '#f3f2f1')",&nbsp; &nbsp; &nbsp; &nbsp; "padding": "20px",&nbsp; &nbsp; &nbsp; &nbsp; "border-radius": "12px",&nbsp; &nbsp; &nbsp; &nbsp; "box-shadow": "0 4px 12px rgba(0, 0, 0, 0.15)",&nbsp; &nbsp; &nbsp; &nbsp; "width": "100%",&nbsp; &nbsp; &nbsp; &nbsp; "margin-bottom": "20px",&nbsp; &nbsp; &nbsp; &nbsp; "border": "2px solid #e1dfdd"&nbsp; &nbsp; },&nbsp; &nbsp; "children": [&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "elmType": "img",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "style": {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "width": "80px",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "height": "80px",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "border-radius": "50%",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "object-fit": "cover",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "margin-right": "20px",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "border": "2px solid #ccc"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "attributes": {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "src": "=''+[$Headshot.serverRelativeUrl]"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "elmType": "div",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "style": {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "text-align": "left"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "children": [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "elmType": "div",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "style": {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "font-size": "26px",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "font-weight": "600",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "color": "=if([$IsDarkTheme], '#ffffff', '#323130')",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "margin-bottom": "6px"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "txtContent": "= 'Employee Overview for ' + [$Nickname]"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "elmType": "div",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "style": {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "font-size": "14px",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "color": "=if([$IsDarkTheme], '#cccccc', '#605e5c')"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "txtContent": ""&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; ]}{&nbsp; &nbsp; "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",&nbsp; &nbsp; "elmType": "div",&nbsp; &nbsp; "style": {&nbsp; &nbsp; &nbsp; &nbsp; "display": "flex",&nbsp; &nbsp; &nbsp; &nbsp; "align-items": "center",&nbsp; &nbsp; &nbsp; &nbsp; "background-color": "=if([$IsDarkTheme], '#1f1f1f', '#f3f2f1')",&nbsp; &nbsp; &nbsp; &nbsp; "padding": "20px",&nbsp; &nbsp; &nbsp; &nbsp; "border-radius": "12px",&nbsp; &nbsp; &nbsp; &nbsp; "box-shadow": "0 4px 12px rgba(0, 0, 0, 0.15)",&nbsp; &nbsp; &nbsp; &nbsp; "width": "100%",&nbsp; &nbsp; &nbsp; &nbsp; "margin-bottom": "20px",&nbsp; &nbsp; &nbsp; &nbsp; "border": "2px solid #e1dfdd"&nbsp; &nbsp; },&nbsp; &nbsp; "children": [&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "elmType": "img",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "style": {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "width": "80px",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "height": "80px",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "border-radius": "50%",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "object-fit": "cover",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "margin-right": "20px",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "border": "2px solid #ccc"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "attributes": {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "src": "=''+[$Headshot.serverRelativeUrl]"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "elmType": "div",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "style": {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "text-align": "left"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "children": [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "elmType": "div",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "style": {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "font-size": "26px",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "font-weight": "600",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "color": "=if([$IsDarkTheme], '#ffffff', '#323130')",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "margin-bottom": "6px"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "txtContent": "= 'Employee Overview for ' + [$Nickname]"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "elmType": "div",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "style": {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "font-size": "14px",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "color": "=if([$IsDarkTheme], '#cccccc', '#605e5c')"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "txtContent": ""&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; ]}

pradejain · Answer

bryanfrumkin220​ Please mark as resolved if this fixes your issue.In SharePoint column formatting JSON, you can wrap your img element with a conditional "display" style or use the ="if()" expression.{&nbsp; "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",&nbsp; "elmType": "div",&nbsp; "style": {&nbsp; &nbsp; "display": "flex",&nbsp; &nbsp; "align-items": "center",&nbsp; &nbsp; "background-color": "=if([$IsDarkTheme], '#1f1f1f', '#f3f2f1')",&nbsp; &nbsp; "padding": "20px",&nbsp; &nbsp; "border-radius": "12px",&nbsp; &nbsp; "box-shadow": "0 4px 12px rgba(0, 0, 0, 0.15)",&nbsp; &nbsp; "width": "100%",&nbsp; &nbsp; "margin-bottom": "20px",&nbsp; &nbsp; "border": "2px solid #e1dfdd"&nbsp; },&nbsp; "children": [&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; "elmType": "img",&nbsp; &nbsp; &nbsp; "style": {&nbsp; &nbsp; &nbsp; &nbsp; "width": "80px",&nbsp; &nbsp; &nbsp; &nbsp; "height": "80px",&nbsp; &nbsp; &nbsp; &nbsp; "border-radius": "50%",&nbsp; &nbsp; &nbsp; &nbsp; "object-fit": "cover",&nbsp; &nbsp; &nbsp; &nbsp; "margin-right": "20px",&nbsp; &nbsp; &nbsp; &nbsp; "border": "2px solid #ccc",&nbsp; &nbsp; &nbsp; &nbsp; "display": "=if([$Headshot] == '', 'none', 'block')" &nbsp; // &lt;-- Hide if null&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; "attributes": {&nbsp; &nbsp; &nbsp; &nbsp; "src": "=''+[$Headshot.serverRelativeUrl]"&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; "elmType": "div",&nbsp; &nbsp; &nbsp; "style": {&nbsp; &nbsp; &nbsp; &nbsp; "text-align": "left"&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; "children": [&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "elmType": "div",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "style": {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "font-size": "26px",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "font-weight": "600",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "color": "=if([$IsDarkTheme], '#ffffff', '#323130')",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "margin-bottom": "6px"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "txtContent": "= 'Employee Overview for ' + [$Nickname]"&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "elmType": "div",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "style": {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "font-size": "14px",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "color": "=if([$IsDarkTheme], '#cccccc', '#605e5c')"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "txtContent": ""&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; }&nbsp; ]}

pankajbadoni · Answer

Try this, working at my end:Also, instead of column formatting, use header formatting.{&nbsp; &nbsp; "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/header-formatting.schema.json",&nbsp; &nbsp; "elmType": "div",&nbsp; &nbsp; "style": {&nbsp; &nbsp; &nbsp; &nbsp; "display": "flex",&nbsp; &nbsp; &nbsp; &nbsp; "align-items": "center",&nbsp; &nbsp; &nbsp; &nbsp; "padding": "20px",&nbsp; &nbsp; &nbsp; &nbsp; "border-radius": "12px",&nbsp; &nbsp; &nbsp; &nbsp; "background-color": "#f3f2f1",&nbsp; &nbsp; &nbsp; &nbsp; "border": "1px solid #ccc"&nbsp; &nbsp; },&nbsp; &nbsp; "children": [&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "elmType": "div",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "style": {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "margin-right": "20px"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "children": [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "elmType": "img",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "attributes": {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "src": "=if([$Headshot.serverRelativeUrl] != '', [$Headshot.serverRelativeUrl], '')"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "style": {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "width": "80px",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "height": "80px",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "border-radius": "50%",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "object-fit": "cover",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "border": "2px solid #ccc",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "display": "=if([$Headshot.serverRelativeUrl] != '', 'block', 'none')"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "elmType": "div",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "children": [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "elmType": "div",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "txtContent": "= 'Employee Overview for ' + [$Nickname]",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "style": {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "font-size": "20px",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "font-weight": "bold"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; ]}

bryanfrumkin220 · Answer

Thank you

Forum Discussion

SharePoint Form (Header) Conditional Formatting

3 Replies

Resources