Skip to content

Instantly share code, notes, and snippets.

@waldekmastykarz
Created January 30, 2024 11:53
Show Gist options
  • Save waldekmastykarz/a112d641945dd093f358edcc6f68a646 to your computer and use it in GitHub Desktop.
Save waldekmastykarz/a112d641945dd093f358edcc6f68a646 to your computer and use it in GitHub Desktop.
List board view with colored cards following the card status
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/board-formatting.schema.json",
"hideSelection": false,
"formatter": {
"elmType": "div",
"attributes": {
"class": "sp-card-container sp-card-container-noPadding"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "=if([$Status]=='Waiting to deal with','sp-css-backgroundColor-BgLightGray',if([$Status]=='Waiting to deal with (time-sensitive)','sp-css-backgroundColor-BgDustRose',if ([$Status]=='Waiting to hear back','sp-css-backgroundColor-BgRed',if ([$Status]=='To discuss','sp-css-backgroundColor-BgCornflowerBlue',if ([$Status]=='Working on this week','sp-css-backgroundColor-BgMintGreen',if ([$Status]=='Done','sp-css-backgroundColor-BgMintGreen','ms-bgColor-white')))))) + ' sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer sp-card-subContainer-borderRadius'"
},
"children": [
{
"elmType": "div",
"children": [
{
"elmType": "p",
"attributes": {
"title": "[$Title]",
"class": "=if([$Status]=='Waiting to deal with','sp-css-color-LightGrayFont',if([$Status]=='Waiting to deal with (time-sensitive)','sp-css-color-DustRoseFont',if ([$Status]=='Waiting to hear back','sp-css-color-WhiteFont',if ([$Status]=='To discuss','sp-css-color-CornflowerBlueFont',if ([$Status]=='Working on this week','sp-css-color-MintGreenFont',if ([$Status]=='Done','sp-css-color-MintGreenFont','ms-fontColor-neutralPrimary')))))) + ' sp-card-content sp-card-highlightedContent'",
"role": "heading",
"aria-level": "3"
},
"txtContent": "=if ([$Title] == '', '–', [$Title])"
}
],
"attributes": {
"class": "sp-card-displayColumnContainer"
}
},
{
"elmType": "div",
"style": {
"display": "=if ([$Tags] == '', 'none', '')"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "sp-card-content sp-card-formatterRef"
},
"children": [
{
"columnFormatterReference": "[$Tags]"
}
]
}
],
"attributes": {
"class": "sp-card-displayColumnContainer"
}
}
]
}
]
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment