SharePoint Form Conditional Formatting

Question

Hello Community!I am working to have an image display in my sharepoint header if it isn't nullCurrently it is displaying the image great, I have the image stored in a column titled 'Headshot' that's an Image column, but I want to only show the image and frame if the value isn't null for this column.Any help would be great!&nbsp;Visual of Current Header:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Current Header Code:&nbsp;&nbsp;

pankajbadoni · Answer

I think this is a duplicate issue:&nbsp;https://techcommunity.microsoft.com/discussions/sharepoint_general/sharepoint-form-header-conditional-formatting/4445234Try this, working at my end:Also, instead of column formatting, use header formatting.&nbsp;{&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; ]}

Forum Discussion

SharePoint Form Conditional Formatting

1 Reply

Resources