Hello,
I am working on developing a tile view for a listing of courses but getting stuck with some of the json formatting.
I have a column [$CompletedBy] that lists all users that have completed a course. What I would like to do is have the tiles be red if the current signed in user has not completed the course (i.e. name is not inside the column CompletedBy) and the tiles be green if the current signed in user has completed the course (i.e their name is inside the column CompletedBy).
Any assistance would be greatly appreciated, below is what I have so far.
{
"schema": "<a href="https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json" target="_blank">https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json</a>",
"tileProps": {
"height": "250",
"width": "350",
"hideSelection": false,
"formatter": {
"elmType": "div",
"style": {
"display": "flex",
"align-items": "stretch",
"margin-bottom": "16px",
"min-width": "150px",
"flex-grow": "1",
"justify-content": "space-around",
"padding": "5px"
},
"children": [
{
"elmType": "div",
"style": {
"width": "95%",
"height": "92%",
"color": "#ffc83d",
"box-shadow": "0px 1.6px 3.6px 0 #00000024, 0px 0.3px 0.9px 0 #00000024",
"overflow": "hidden",
"border-radius": "2px",
"padding-left": "16px",
"padding-top": "16px"
},
"attributes": {
"class": "ms-bgColor-neutralLighterAlt"
},
"children": [
{
"elmType": "div",
"style": {
"text-align": "left"
},
"children": [
{
"elmType": "div",
"style": {
"color": "#ffc83d",
"font-size": "18px",
"font-weight": "600",
"margin-bottom": "5px"
},
"txtContent": "[$Title]"
},
{
"elmType": "div",
"style": {
"color": "#ffc83d",
"font-size": "12px",
"line-height": "1.8"
},
"attributes": {
"class": "sp-row-listPadding"
},
"txtContent": "[$Module]"
},
{
"elmType": "div",
"style": {
"color": "#ffc83d",
"font-size": "12px",
"line-height": "1.8"
},
"attributes": {
"class": "sp-row-listPadding"
},
"txtContent": "[$Department]"
},
{
"elmType": "button",
"customRowAction": {
"action": "defaultClick"
},
"txtContent": "Take the Quiz",
"attributes": {
"class": "sp-row-button"
},
"style": {
"display": {
"operator": "?",
"operands": [
{
"operator": "==",
"operands": [
"@me",
""
]
},
"",
"none"
]
}
}
}
]
}
]
}
]
}
}
}
