pnp
Microsoft Lists: How to change the background color of cards in the Gallery View
Microsoft Lists: How to change the background color of cards in the Gallery View
Introduction Have you ever used the Gallery View in Microsoft Lists?
https://pnp.github.io/blog/post/how-to-change-the-background-color-of-cards-in-the-gallery-view/
Hello! I tried using this code but my cards turned invisible, does somebody know what could've happened?
Hi @TWEagle .
Is it also possible to change te width of those blocks too?
Yes! The width of the card can be changed by changing the value of the width property listed on the line 4 of the JSON.
Hello, I tried to use this code, but, this turned invisible e doesnt work correct. This is the code:
{ "$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": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer sp-card-subContainer-borderRadius" }, "style": { "background-color": "=if([$Cor_do_card]=='Concluído','#d5ffd5',if([$Cor_do_card]=='Em andamento','#c4c4ff',if([$Cor_do_card]=='Atraso','#ffd5ea','#ffd589')))" }, "children": [ { "elmType": "div", "children": [ { "elmType": "p", "attributes": { "class": "ms-fontColor-neutralSecondary sp-card-label sp-card-boldText" }, "txtContent": "[!Title.DisplayName]" }, { "elmType": "p", "attributes": { "title": "[$Title]", "class": "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 ([$teste2_x0020_op_x00e7__x00e3_o1] == '', 'none', '')" }, "children": [ { "elmType": "p", "attributes": { "class": "ms-fontColor-neutralSecondary sp-card-label sp-card-boldText" }, "txtContent": "[!teste2_x0020_op_x00e7__x00e3_o1.DisplayName]" }, { "elmType": "p", "attributes": { "title": "[$teste2_x0020_op_x00e7__x00e3_o1]", "class": "ms-fontColor-neutralPrimary sp-card-content " }, "txtContent": "=if ([$teste2_x0020_op_x00e7__x00e3_o1] == '', '–', [$teste2_x0020_op_x00e7__x00e3_o1])" } ], "attributes": { "class": "sp-card-displayColumnContainer" } } ] } ] } }
The card to be only color, the color as doesnt reference.
Please help.
Hi @deborabrica .
Looking at the code, I saw the words board view.
Am I correct in understanding that you want to change the background color of the card in board view, not in gallery view?
If so, please refer to the following article. https://pnp.github.io/blog/post/how-to-change-the-background-color-of-cards-in-the-board-view/
Hello, @tecchan1107
Yes, you is right. I need to chance the background color. I used the code as you give me, it the same as I used, but is still wrong. This card stay gold. In the columns I use with reference there an "if" formula, can this damage this code?
Sincerely deborabrica
@deborabrica
In the columns I use with reference there an "if" formula, can this damage this code?
I tried your code and the background color changed depending on the value of Cor_do_card. So it seems that there is no problem with your code.
Please make sure of the following two points
- Whether the view contains a column with an internal name of
Cor_do_card - Whether a column with the internal name
Cor_do_cardexists.
*The above image is taken from How to change the background color of cards in the Board View.
Dear Tetsuya Kawahara
Thank you.
The Cor_do_card column is not the same column for determining bucket.
Other column, please refer below.
@.***
This is my list: Testehttps://brwgroupcombr-my.sharepoint.com/:l:/g/personal/debora_bricailo_brwgroup_com_br/FLEMwse28fpHmbQ_vkfc_cIBYc2L0KbqjdZ8bqU7wBve0g
Sincerely Deborabrica.
De: Tetsuya Kawahara @.> Enviada em: terça-feira, 18 de junho de 2024 21:10 Para: pnp/blog @.> Cc: Debora Regina Bricailo @.>; Mention @.> Assunto: Re: [pnp/blog] Microsoft Lists: How to change the background color of cards in the Gallery View (Issue #1319)
@deborabricahttps://github.com/deborabrica
In the columns I use with reference there an "if" formula, can this damage this code?
I tried your code and the background color changed depending on the value of Cor_do_card. So it seems that there is no problem with your code.
image.png (view on web)https://github.com/pnp/blog/assets/51254139/3cf1c49c-fb51-4f2b-9a33-3966ce4ee5fa
Please make sure of the following two points
- Whether the view contains a Cor_do_card column
- Whether a column with the internal name Cor_do_card exists.
image.png (view on web)https://github.com/pnp/blog/assets/51254139/3beac2d2-4bbb-42da-ab68-38e15d35c052
*The above image is taken from How to change the background color of cards in the Board Viewhttps://pnp.github.io/blog/post/how-to-change-the-background-color-of-cards-in-the-board-view/.
— Reply to this email directly, view it on GitHubhttps://github.com/pnp/blog/issues/1319#issuecomment-2177281159, or unsubscribehttps://github.com/notifications/unsubscribe-auth/BJISH6UVE2S65ZCZETYJ2CTZIDD45AVCNFSM6AAAAAAYECXJOCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCNZXGI4DCMJVHE. You are receiving this because you were mentioned.Message ID: @.***>
@deborabrica
The Cor_do_card column is not the same column for determining bucket.
If so, please rewrite the internal name of the column in the code.
How to find out the internal name of a column is also described in the following article. How to change the background color of cards in the Board View
Hello. Tetsuya Kawahara
Thank you again.
I fixed the background color, but I still is bug when I change the look to "All Items". All cards back to Gold color. And when I move it, the color change for correct color. Its normal?
Sincerery Deborabrica.
De: Tetsuya Kawahara @.> Enviada em: quinta-feira, 20 de junho de 2024 00:29 Para: pnp/blog @.> Cc: Debora Regina Bricailo @.>; Mention @.> Assunto: Re: [pnp/blog] Microsoft Lists: How to change the background color of cards in the Gallery View (Issue #1319)
The Cor_do_card column is not the same column for determining bucket.
If so, please rewrite the internal names of the column in the code.
image.png (view on web)https://github.com/pnp/blog/assets/51254139/478b56e4-8807-4638-bc52-09333096fde1
How to find out the internal name of a column is also described in the following article. How to change the background color of cards in the Board Viewhttps://pnp.github.io/blog/post/how-to-change-the-background-color-of-cards-in-the-board-view/
— Reply to this email directly, view it on GitHubhttps://github.com/pnp/blog/issues/1319#issuecomment-2179739746, or unsubscribehttps://github.com/notifications/unsubscribe-auth/BJISH6QHCMSSXFYNX4SNBULZIJEA7AVCNFSM6AAAAAAYECXJOCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCNZZG4ZTSNZUGY. You are receiving this because you were mentioned.Message ID: @.***>
@deborabrica
I fixed the background color, but I still is bug when I change the look to "All Items". All cards back to Gold color. And when I move it, the color change for correct color. Its normal?
That is not normal. I suspect that you did not press the [Save] button after formatting. Please check again.
Hello, Tetsuya.
Thank you again.
I saved the list before, but I tryed save again and doesnt work. I am send you one vídeo as I insert the code, you can see bether who its happen.
[Ícone de mp4] Teste - Google Chrome 2024-06-21 08-13-07.mp4https://brwgroupcombr-my.sharepoint.com/:v:/g/personal/debora_bricailo_brwgroup_com_br/EQkI2-cjlKFBkNvIP3tAAxYBhRxzIX65mSgGTPAW-Xku6w?nav=eyJyZWZlcnJhbEluZm8iOnsicmVmZXJyYWxBcHAiOiJPbmVEcml2ZUZvckJ1c2luZXNzIiwicmVmZXJyYWxBcHBQbGF0Zm9ybSI6IldlYiIsInJlZmVycmFsTW9kZSI6InZpZXciLCJyZWZlcnJhbFZpZXciOiJNeUZpbGVzTGlua0NvcHkifX0&e=kLcdKN
This format will help my process a lot, but I can’t find the error At.te.
deborabrica
De: Tetsuya Kawahara @.> Enviada em: quinta-feira, 20 de junho de 2024 22:44 Para: pnp/blog @.> Cc: Debora Regina Bricailo @.>; Mention @.> Assunto: Re: [pnp/blog] Microsoft Lists: How to change the background color of cards in the Gallery View (Issue #1319)
@deborabricahttps://github.com/deborabrica
I fixed the background color, but I still is bug when I change the look to "All Items". All cards back to Gold color. And when I move it, the color change for correct color. Its normal?
That is not normal. I suspect that you did not press the [Save] button after formatting. Please check again.
image.png (view on web)https://github.com/pnp/blog/assets/51254139/8608e89d-b576-4308-b859-5407dafa98f3
— Reply to this email directly, view it on GitHubhttps://github.com/pnp/blog/issues/1319#issuecomment-2181829675, or unsubscribehttps://github.com/notifications/unsubscribe-auth/BJISH6WS6OMYMHIX7WO5YSDZIOAOHAVCNFSM6AAAAAAYECXJOCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCOBRHAZDSNRXGU. You are receiving this because you were mentioned.Message ID: @.***>
@deborabrica
I don't think there is any mistake in the code.
I think the background color is all the same because the Cor_do_card column is not included in the view. Please try including the Cor_do_card column in the view.
Hello Tetsuya Kawahara
Thank you, for help.
This procedure worked until I move this card, if you see this video, you will see this problem.
This is the first problem I’ve had on this list.
[Ícone de mp4] Teste - Google Chrome 2024-06-24 11-20-50.mp4https://brwgroupcombr-my.sharepoint.com/:v:/g/personal/debora_bricailo_brwgroup_com_br/EWnPRRBNAPlAicN8lRFI37MBTPuPP_V0mnphImzyPSk-fA?nav=eyJyZWZlcnJhbEluZm8iOnsicmVmZXJyYWxBcHAiOiJPbmVEcml2ZUZvckJ1c2luZXNzIiwicmVmZXJyYWxBcHBQbGF0Zm9ybSI6IldlYiIsInJlZmVycmFsTW9kZSI6InZpZXciLCJyZWZlcnJhbFZpZXciOiJNeUZpbGVzTGlua0NvcHkifX0&e=hTPR3W
At.te. Deborabrica.
De: Tetsuya Kawahara @.> Enviada em: domingo, 23 de junho de 2024 07:20 Para: pnp/blog @.> Cc: Debora Regina Bricailo @.>; Mention @.> Assunto: Re: [pnp/blog] Microsoft Lists: How to change the background color of cards in the Gallery View (Issue #1319)
@deborabricahttps://github.com/deborabrica
I don't think there is any mistake in the code.
I think the background color is all the same because the Cor_do_card column is not included in the view. Please try including the Cor_do_card column in the view.
image.png (view on web)https://github.com/pnp/blog/assets/51254139/0566db20-1f37-4f23-a128-7605ef37fb35
— Reply to this email directly, view it on GitHubhttps://github.com/pnp/blog/issues/1319#issuecomment-2184933520, or unsubscribehttps://github.com/notifications/unsubscribe-auth/BJISH6TVQJNSYEJD5XFIO43ZI2ONFAVCNFSM6AAAAAAYECXJOCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCOBUHEZTGNJSGA. You are receiving this because you were mentioned.Message ID: @.@.>>
@deborabrica
Perhaps the Cor_do_card column you are using for the background color condition is the Calculated column? Is it possible that the values in the Calculated column are not calculated correctly?
Hello Tetsuya Kawahara
The condition calculated in the column is correct, but there is a delay in this calculation. I did some tests and waited a few seconds to fill out, this calculation works, but I have to update this page for the color of the card to work.
Sincerily Deborabrica
De: Tetsuya Kawahara @.> Enviada em: terça-feira, 25 de junho de 2024 22:53 Para: pnp/blog @.> Cc: Debora Regina Bricailo @.>; Mention @.> Assunto: Re: [pnp/blog] Microsoft Lists: How to change the background color of cards in the Gallery View (Issue #1319)
@deborabricahttps://github.com/deborabrica
Perhaps the Cor_do_card column you are using for the background color condition is the Calculated column? Is it possible that the values in the Calculated column are not calculated correctly?
image.png (view on web)https://github.com/pnp/blog/assets/51254139/5c90a260-5a3d-40ba-93ea-96901e7c74fa
— Reply to this email directly, view it on GitHubhttps://github.com/pnp/blog/issues/1319#issuecomment-2190382896, or unsubscribehttps://github.com/notifications/unsubscribe-auth/BJISH6WRUYUYYLIRTMC4OB3ZJINHXAVCNFSM6AAAAAAYECXJOCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCOJQGM4DEOBZGY. You are receiving this because you were mentioned.Message ID: @.@.>>
@deborabrica
I checked today and the same thing happened in my environment: all columns, not just the Calculated column, had to be refreshed on the screen to take effect. This is probably a temporary bug in Microsoft Lists. (However, I am not a Microsoft employee, so I don't know exactly if it is a bug or not.)
Hi Tetsuya Kawahara
I believe this is a bug, but if I refreshed the page and the color of cards works. I think as the problem is on calculated column.
Thank you very Much for you help, and Count with me for.
Best Regards. Deborabrica
De: Tetsuya Kawahara @.> Enviada em: quinta-feira, 27 de junho de 2024 00:13 Para: pnp/blog @.> Cc: Debora Regina Bricailo @.>; Mention @.> Assunto: Re: [pnp/blog] Microsoft Lists: How to change the background color of cards in the Gallery View (Issue #1319)
@deborabricahttps://github.com/deborabrica
I checked and the same thing happened in my environment: all columns, not just the Calculated column, had to be refreshed on the screen to take effect. This is probably a temporary bug in Microsoft Lists. (However, I am not a Microsoft employee, so I don't know exactly if it is a bug or not.)
— Reply to this email directly, view it on GitHubhttps://github.com/pnp/blog/issues/1319#issuecomment-2193182471, or unsubscribehttps://github.com/notifications/unsubscribe-auth/BJISH6TKFRNC2JBT2L6ZF4LZJN7MTAVCNFSM6AAAAAAYECXJOCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCOJTGE4DENBXGE. You are receiving this because you were mentioned.Message ID: @.***>
Good afternoon
this is my json
{ "$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": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer sp-card-subContainer-borderRadius" }, "style": { "background-color": "=if([$KH]=='1','#9999BB',if([$KH]=='2','#4AA91F',if([$KH]=='3','#BB6666',if([$KH]=='7','#BB66BB','#cccccc'))))" }, "children": [ { "elmType": "div", "style": { "font-style": "italic", "font-weight": "bold" }, "children": [ { "elmType": "p", "attributes": { "title": "[$Orgnaam]", "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent", "role": "heading", "aria-level": "3" }, "txtContent": "=if ([$Orgnaam] == '', '–', [$Orgnaam])" } ], "attributes": { "class": "sp-card-displayColumnContainer" } }, { "elmType": "div", "style": { "font-weight": "bolder" }, "children": [ { "elmType": "p", "attributes": { "title": "[$field_1]", "class": "ms-fontColor-neutralPrimary sp-card-content " }, "txtContent": "=if ([$field_1] == '', '–', [$field_1])" } ], "attributes": { "class": "sp-card-displayColumnContainer" } }, { "elmType": "div", "style": { "display": "=if ([$field_4.displayValue] == '','none', ''" }, "children": [ { "elmType": "p", "attributes": { "title": "=if ([$field_4.displayValue] == '', '–', [$field_4.displayValue])", "class": "ms-fontColor-neutralPrimary sp-card-content " }, "txtContent": "=if ([$field_4.displayValue] == '', '–', [$field_4.displayValue])" } ], "attributes": { "class": "sp-card-displayColumnContainer" } }, { "elmType": "div", "style": { "display": "=if(length([$Author]) == 0, 'none', '')" }, "children": [ { "elmType": "div", "attributes": { "class": "ms-fontColor-neutralPrimary sp-card-userContent ", "title": "[$Author.title]" }, "children": [ { "elmType": "p", "txtContent": "=if(length([$Author]) == 0, '–', '')" }, { "forEach": "personIterator in [$Author]", "elmType": "p", "defaultHoverField": "[$personIterator]", "style": { "display": "=if(loopIndex('personIterator') >= 1, 'none', '')" }, "txtContent": "[$personIterator.title]" }, { "elmType": "p", "txtContent": "=if(length([$Author]) > 1, ', +' + (length([$Author]) - 1) , '')" } ] } ], "attributes": { "class": "sp-card-displayColumnContainer" } } ] } ] } }
I want in the div of the field_1 also add next to it the text content of CNOK
How do I do that?
Hi @TWEagle .
I tried to make it, is it what you imagined?
Sample Code
{
"$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": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer sp-card-subContainer-borderRadius"
},
"style": {
"background-color": "=if([$KH]=='1','#9999BB',if([$KH]=='2','#4AA91F',if([$KH]=='3','#BB6666',if([$KH]=='7','#BB66BB','#cccccc'))))"
},
"children": [
{
"elmType": "div",
"style": {
"font-style": "italic",
"font-weight": "bold"
},
"children": [
{
"elmType": "p",
"attributes": {
"title": "[$Orgnaam]",
"class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent",
"role": "heading",
"aria-level": "3"
},
"txtContent": "=if ([$Orgnaam] == '', '–', [$Orgnaam])"
}
],
"attributes": {
"class": "sp-card-displayColumnContainer"
}
},
{
"elmType": "div",
"style": {
"display": "flex"
},
"children": [
{
"elmType": "div",
"style": {
"font-weight": "bolder",
"flex":"1"
},
"children": [
{
"elmType": "p",
"attributes": {
"title": "[$field_1]",
"class": "ms-fontColor-neutralPrimary sp-card-content "
},
"txtContent": "=if ([$field_1] == '', '–', [$field_1])"
}
],
"attributes": {
"class": "sp-card-displayColumnContainer"
}
},
{
"elmType": "div",
"style": {
"font-weight": "bolder",
"flex":"1"
},
"children": [
{
"elmType": "p",
"attributes": {
"title": "[$CNOK]",
"class": "ms-fontColor-neutralPrimary sp-card-content "
},
"txtContent": "=if ([$CNOK] == '', '–', [$CNOK])"
}
],
"attributes": {
"class": "sp-card-displayColumnContainer"
}
}
]
},
{
"elmType": "div",
"style": {
"display": "=if ([$field_4.displayValue] == '','none', ''"
},
"children": [
{
"elmType": "p",
"attributes": {
"title": "=if ([$field_4.displayValue] == '', '–', [$field_4.displayValue])",
"class": "ms-fontColor-neutralPrimary sp-card-content "
},
"txtContent": "=if ([$field_4.displayValue] == '', '–', [$field_4.displayValue])"
}
],
"attributes": {
"class": "sp-card-displayColumnContainer"
}
},
{
"elmType": "div",
"style": {
"display": "=if(length([$Author]) == 0, 'none', '')"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "ms-fontColor-neutralPrimary sp-card-userContent ",
"title": "[$Author.title]"
},
"children": [
{
"elmType": "p",
"txtContent": "=if(length([$Author]) == 0, '–', '')"
},
{
"forEach": "personIterator in [$Author]",
"elmType": "p",
"defaultHoverField": "[$personIterator]",
"style": {
"display": "=if(loopIndex('personIterator') >= 1, 'none', '')"
},
"txtContent": "[$personIterator.title]"
},
{
"elmType": "p",
"txtContent": "=if(length([$Author]) > 1, ', +' + (length([$Author]) - 1) , '')"
}
]
}
],
"attributes": {
"class": "sp-card-displayColumnContainer"
}
}
]
}
]
}
}
はじめまして。ListsとJSON初心者です。こちらのページがやりたいビジュアル化の参考になりました。 すべてのアイテムの背景色を変更するということはできました。ここに条件を追加して、アイテムが例えば「2025年3月7日から2025年3月14日に更新された場合」もしくは「2025年3月7日から2025年3月14日に新しくアイテムが追加された場合」に背景色を変更(該当しない場合は背景色はなし)という期間の条件設定をしたいと考えております。 そのようなことは可能でしょうか？
現在の私のコードです。 {
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
"height": 379,
"width": 254,
"hideSelection": false,
"fillHorizontally": true,
"formatter": {
"elmType": "div",
"attributes": {
"class": "sp-card-container"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "sp-card-defaultClickButton"
},
"customRowAction": {
"action": "defaultClick"
}
},
{
"elmType": "div",
"style": {
"background-color": "MistyRose"
},
"attributes": {
"class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "sp-card-displayColumnContainer"
},
"children": [
{
"elmType": "p",
"attributes": {
"class": "ms-fontColor-neutralSecondary sp-card-label"
},
"txtContent": "[!x8ab2__x984c.DisplayName]"
},
{
"elmType": "p",
"attributes": {
"title": "[$x8ab2__x984c]",
"class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent sp-card-multiline",
"role": "heading",
"aria-level": "3"
},
"txtContent": "=if ([$x8ab2__x984c] == '', '–', [$x8ab2__x984c])",
"style": {
"-webkit-line-clamp": "2",
"height": "40px"
}
}
]
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-displayColumnContainer"
},
"children": [
{
"elmType": "p",
"attributes": {
"class": "ms-fontColor-neutralSecondary sp-card-label"
},
"txtContent": "[!x65e5__x7a0b.DisplayName]"
},
{
"elmType": "p",
"attributes": {
"title": "=if ([$x65e5__x7a0b.displayValue] == '', '–', [$x65e5__x7a0b.displayValue])",
"class": "ms-fontColor-neutralPrimary sp-card-content "
},
"txtContent": "=if ([$x65e5__x7a0b.displayValue] == '', '–', [$x65e5__x7a0b.displayValue])"
}
]
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-displayColumnContainer"
},
"children": [
{
"elmType": "p",
"attributes": {
"class": "ms-fontColor-neutralSecondary sp-card-label"
},
"txtContent": "[!x671f__x9650.DisplayName]"
},
{
"elmType": "p",
"attributes": {
"title": "=if ([$x671f__x9650.displayValue] == '', '–', [$x671f__x9650.displayValue])",
"class": "ms-fontColor-neutralPrimary sp-card-content "
},
"txtContent": "=if ([$x671f__x9650.displayValue] == '', '–', [$x671f__x9650.displayValue])"
}
]
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-displayColumnContainer"
},
"children": [
{
"elmType": "p",
"attributes": {
"class": "ms-fontColor-neutralSecondary sp-card-label"
},
"txtContent": "[!x72b6__x614b.DisplayName]"
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-content sp-card-formatterRef"
},
"children": [
{
"columnFormatterReference": "[$x72b6__x614b]"
}
]
}
]
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-displayColumnContainer"
},
"children": [
{
"elmType": "p",
"attributes": {
"class": "ms-fontColor-neutralSecondary sp-card-label"
},
"txtContent": "[!Hirisk.DisplayName]"
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-content sp-card-formatterRef"
},
"children": [
{
"columnFormatterReference": "[$Hirisk]"
}
]
}
]
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-lastTextColumnContainer"
},
"children": [
{
"elmType": "p",
"attributes": {
"class": "ms-fontColor-neutralSecondary sp-card-label"
},
"txtContent": "[!x6a5f__x7a2e.DisplayName]"
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-content sp-card-formatterRef"
},
"children": [
{
"columnFormatterReference": "[$x6a5f__x7a2e]"
}
]
}
]
}
]
}
]
}
}
言葉足らずのところがございましたら、すみません。よろしくお願いいたします。
@rinalina66
アイテムが例えば「2025年3月7日から2025年3月14日に更新された場合」もしくは「2025年3月7日から2025年3月14日に新しくアイテムが追加された場合」に背景色を変更(該当しない場合は背景色はなし)という期間の条件設定をしたいと考えております。 そのようなことは可能でしょうか？
可能です！例として、次のように設定いただくと、2025年3月7日から2025年3月14日までの日付のデータの背景色が変更されます。
"style": {
"background-color": "=if(Number(Date([$DateColumnInternalName]))>=Number(Date('2025/03/07')) && Number(Date([$DateColumnInternalName]))<=Number(Date('2025/03/14')), 'MistyRose', '')"
},
※@now や addDays 演算子を活用すると、現在の日時を起点にした書式設定も可能です。
"style": {
"background-color": "=if(Number(Date([$DateColumnInternalName]))>Number(Date(addDays(@now,-8))), 'MistyRose', '')"
},
期間の条件指定のご教授ありがとうございます。 ギャラリービューに更新日時を追加し、コードを修正してみました。更新日時なので「Modified」にしてみたのですが、背景が全て白色で上手くいかず、、、(反映に時間がかかっている可能性もあります)
再度コードのアドバイスをいただけますと幸いです。よろしくお願いいたします。 { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json", "height": 429, "width": 254, "hideSelection": false, "fillHorizontally": true, "formatter": { "elmType": "div", "attributes": { "class": "sp-card-container" }, "children": [ { "elmType": "div", "attributes": { "class": "sp-card-defaultClickButton" }, "customRowAction": { "action": "defaultClick" } }, { "elmType": "div", "style": { "background-color": "=if(Number(Date([$Modified.DisplayValue]))>=Number(Date('2025/03/07')) && Number(Date([$Modified.DisplayValue]))<=Number(Date('2025/03/18')), 'MistyRose', '')" }, "attributes": { "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer" }, "children": [ { "elmType": "div", "attributes": { "class": "sp-card-displayColumnContainer" }, "children": [ { "elmType": "p", "attributes": { "class": "ms-fontColor-neutralSecondary sp-card-label" }, "txtContent": "[!x8ab2__x984c.DisplayName]" }, { "elmType": "p", "attributes": { "title": "[$x8ab2__x984c]", "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent sp-card-multiline", "role": "heading", "aria-level": "3" }, "txtContent": "=if ([$x8ab2__x984c] == '', '–', [$x8ab2__x984c])", "style": { "-webkit-line-clamp": "2", "height": "40px" } } ] }, { "elmType": "div", "attributes": { "class": "sp-card-displayColumnContainer" }, "children": [ { "elmType": "p", "attributes": { "class": "ms-fontColor-neutralSecondary sp-card-label" }, "txtContent": "[!x65e5__x7a0b.DisplayName]" }, { "elmType": "p", "attributes": { "title": "=if ([$x65e5__x7a0b.displayValue] == '', '–', [$x65e5__x7a0b.displayValue])", "class": "ms-fontColor-neutralPrimary sp-card-content " }, "txtContent": "=if ([$x65e5__x7a0b.displayValue] == '', '–', [$x65e5__x7a0b.displayValue])" } ] }, { "elmType": "div", "attributes": { "class": "sp-card-displayColumnContainer" }, "children": [ { "elmType": "p", "attributes": { "class": "ms-fontColor-neutralSecondary sp-card-label" }, "txtContent": "[!x671f__x9650.DisplayName]" }, { "elmType": "p", "attributes": { "title": "=if ([$x671f__x9650.displayValue] == '', '–', [$x671f__x9650.displayValue])", "class": "ms-fontColor-neutralPrimary sp-card-content " }, "txtContent": "=if ([$x671f__x9650.displayValue] == '', '–', [$x671f__x9650.displayValue])" } ] }, { "elmType": "div", "attributes": { "class": "sp-card-displayColumnContainer" }, "children": [ { "elmType": "p", "attributes": { "class": "ms-fontColor-neutralSecondary sp-card-label" }, "txtContent": "[!x72b6__x614b.DisplayName]" }, { "elmType": "div", "attributes": { "class": "sp-card-content sp-card-formatterRef" }, "children": [ { "columnFormatterReference": "[$x72b6__x614b]" } ] } ] }, { "elmType": "div", "attributes": { "class": "sp-card-displayColumnContainer" }, "children": [ { "elmType": "p", "attributes": { "class": "ms-fontColor-neutralSecondary sp-card-label" }, "txtContent": "[!Hirisk.DisplayName]" }, { "elmType": "div", "attributes": { "class": "sp-card-content sp-card-formatterRef" }, "children": [ { "columnFormatterReference": "[$Hirisk]" } ] } ] }, { "elmType": "div", "attributes": { "class": "sp-card-displayColumnContainer" }, "children": [ { "elmType": "p", "attributes": { "class": "ms-fontColor-neutralSecondary sp-card-label" }, "txtContent": "[!x6a5f__x7a2e.DisplayName]" }, { "elmType": "div", "attributes": { "class": "sp-card-content sp-card-formatterRef" }, "children": [ { "columnFormatterReference": "[$x6a5f__x7a2e]" } ] } ] }, { "elmType": "div", "attributes": { "class": "sp-card-lastTextColumnContainer" }, "children": [ { "elmType": "p", "attributes": { "class": "ms-fontColor-neutralSecondary sp-card-label" }, "txtContent": "[!Modified.DisplayName]" }, { "elmType": "p", "attributes": { "title": "=if ([$Modified.displayValue] == '', '–', [$Modified.displayValue])", "class": "ms-fontColor-neutralPrimary sp-card-content " }, "txtContent": "=if ([$Modified.displayValue] == '', '–', [$Modified.displayValue])" } ] } ] } ] } }
@rinalina66
ギャラリービューに更新日時を追加し、コードを修正してみました。更新日時なので「Modified」にしてみたのですが、背景が全て白色で上手くいかず、、、(反映に時間がかかっている可能性もあります)
[$Modified.DisplayValue] を [$Modified] に変更してみていただきたいです！
"style": {
"background-color": "=if(Number(Date([$Modified]))>=Number(Date('2025/03/07')) && Number(Date([$Modified]))<=Number(Date('2025/03/18')), 'MistyRose', '')"
},
[$Modified.DisplayValue] を [$Modified] に変更してみたところ無事、期間指定した更新日時に該当するアイテムだけ色を付けることができました！ありがとうございます。
今後も他の記事もあわせて参考にさせていただきます。
2度目のコメントさせていただきます。背景色の設定をさらに工夫したく、ご相談させていただきます。現在指定した期間に更新された項目は、背景色を変更するところまで設定しており、ここに追加して、「日程」欄(内部名：x65e5__x7a0b)が今日以前の場合は、MistyRoseの色に背景色を変更するコードを追加したいです。もし、更新日時の条件と「日程」欄の条件の両方が当てはまる場合は、「日程」列の背景色を優先して表示させるといったことは可能でしょうか？？
以下現在のコードをお送りいたします。 アドバイスいただけますと幸いです。よろしくお願いいたします。 { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json", "height": 429, "width": 254, "hideSelection": false, "fillHorizontally": true, "formatter": { "elmType": "div", "attributes": { "class": "sp-card-container" }, "children": [ { "elmType": "div", "attributes": { "class": "sp-card-defaultClickButton" }, "customRowAction": { "action": "defaultClick" } }, { "elmType": "div", "style": { "background-color": "=if(Number(Date([$Modified]))>=Number(Date('2025/04/07')) && Number(Date([$Modified]))<=Number(Date('2025/04/10')), '#E5F6FF', '')" }, "attributes": { "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer" }, "children": [ { "elmType": "div", "attributes": { "class": "sp-card-displayColumnContainer" }, "children": [ { "elmType": "p", "attributes": { "class": "ms-fontColor-neutralSecondary sp-card-label" }, "txtContent": "[!x8ab2__x984c.DisplayName]" }, { "elmType": "p", "attributes": { "title": "[$x8ab2__x984c]", "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent sp-card-multiline", "role": "heading", "aria-level": "3" }, "txtContent": "=if ([$x8ab2__x984c] == '', '–', [$x8ab2__x984c])", "style": { "-webkit-line-clamp": "2", "height": "40px" } } ] }, { "elmType": "div", "attributes": { "class": "sp-card-displayColumnContainer" }, "children": [ { "elmType": "p", "attributes": { "class": "ms-fontColor-neutralSecondary sp-card-label" }, "txtContent": "[!x65e5__x7a0b.DisplayName]" }, { "elmType": "p", "attributes": { "title": "=if ([$x65e5__x7a0b.displayValue] == '', '–', [$x65e5__x7a0b.displayValue])", "class": "ms-fontColor-neutralPrimary sp-card-content " }, "txtContent": "=if ([$x65e5__x7a0b.displayValue] == '', '–', [$x65e5__x7a0b.displayValue])" } ] }, { "elmType": "div", "attributes": { "class": "sp-card-displayColumnContainer" }, "children": [ { "elmType": "p", "attributes": { "class": "ms-fontColor-neutralSecondary sp-card-label" }, "txtContent": "[!x671f__x9650.DisplayName]" }, { "elmType": "p", "attributes": { "title": "=if ([$x671f__x9650.displayValue] == '', '–', [$x671f__x9650.displayValue])", "class": "ms-fontColor-neutralPrimary sp-card-content " }, "txtContent": "=if ([$x671f__x9650.displayValue] == '', '–', [$x671f__x9650.displayValue])" } ] }, { "elmType": "div", "attributes": { "class": "sp-card-displayColumnContainer" }, "children": [ { "elmType": "p", "attributes": { "class": "ms-fontColor-neutralSecondary sp-card-label" }, "txtContent": "[!x72b6__x614b.DisplayName]" }, { "elmType": "div", "attributes": { "class": "sp-card-content sp-card-formatterRef" }, "children": [ { "columnFormatterReference": "[$x72b6__x614b]" } ] } ] }, { "elmType": "div", "attributes": { "class": "sp-card-displayColumnContainer" }, "children": [ { "elmType": "p", "attributes": { "class": "ms-fontColor-neutralSecondary sp-card-label" }, "txtContent": "[!Hirisk.DisplayName]" }, { "elmType": "div", "attributes": { "class": "sp-card-content sp-card-formatterRef" }, "children": [ { "columnFormatterReference": "[$Hirisk]" } ] } ] }, { "elmType": "div", "attributes": { "class": "sp-card-displayColumnContainer" }, "children": [ { "elmType": "p", "attributes": { "class": "ms-fontColor-neutralSecondary sp-card-label" }, "txtContent": "[!x6a5f__x7a2e.DisplayName]" }, { "elmType": "div", "attributes": { "class": "sp-card-content sp-card-formatterRef" }, "children": [ { "columnFormatterReference": "[$x6a5f__x7a2e]" } ] } ] }, { "elmType": "div", "attributes": { "class": "sp-card-lastTextColumnContainer" }, "children": [ { "elmType": "p", "attributes": { "class": "ms-fontColor-neutralSecondary sp-card-label" }, "txtContent": "[!Modified.DisplayName]" }, { "elmType": "p", "attributes": { "title": "=if ([$Modified.displayValue] == '', '–', [$Modified.displayValue])", "class": "ms-fontColor-neutralPrimary sp-card-content " }, "txtContent": "=if ([$Modified.displayValue] == '', '–', [$Modified.displayValue])" } ] } ] } ] } }
@rinalina66
@now と記載すると現在日時を取得でき、これを書式設定に利用できます！（参考：日付の範囲に基づいて書式を設定する）
例えば "background-color": "=if([$Date]<@now,'MistyRose','') のように記述すると、Date 列の値が現在日時以下の場合に背景色が MistyRose になります。
現在指定した期間に更新された項目は、背景色を変更するところまで設定しており、ここに追加して、「日程」欄(内部名：x65e5__x7a0b)が今日以前の場合は、MistyRoseの色に背景色を変更するコードを追加したいです。もし、更新日時の条件と「日程」欄の条件の両方が当てはまる場合は、「日程」列の背景色を優先して表示させるといったことは可能でしょうか？？
backgroud-color の設定のサンプルを作ってみました！お試しいただき、もしうまくいかない場合は調整してみていただきたいです！
"background-color": "=if([$日程列の内部名]<@now, 'MistyRose', if(Number(Date([$Modified]))>=Number(Date('2025/04/07')) && Number(Date([$Modified]))<=Number(Date('2025/04/10')), '#E5F6FF', ''))"
@tecchan1107 さん 提案いただいたサンプルコードを参考にして編集したところ理想としていた表示ができるようになりました。 解説もとても分かりやすく、構造が理解しやすくなりました。ありがとうございます。