I borrowed (and manipulated a bit) this JSON code from github. This was originally called a praise card. And I would like to add the date that the "praise" was given...basically add the date created to the displayed tile.
This is my current code:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
"width": 300,
"height": 500,
"hideSelection": true,
"formatter": {
"elmType": "div",
"style": {
"width": "95%",
"height": "95%",
"border": "1px solid",
"box-shadow": "0 3.2px 7.2px 0",
"border-radius": "6px",
"display": "flex",
"flex-direction": "column",
"justify-content": "center"
},
"attributes": {
"class": "ms-fontColor-neutralTertiaryAlt"
},
"children": [
{
"elmType": "div",
"style": {
"width": "70%",
"display": "flex",
"flex-direction": "row-reverse",
"height": "35px"
},
"children": [
{
"elmType": "div",
"style": {
"position": "relative",
"display": "flex",
"justify-content": "center"
},
"children": [
{
"elmType": "div",
"style": {
"position": "absolute",
"width": "50px",
"height": "50px",
"border-radius": "50%",
"border": "2px solid",
"z-index": "2",
"display": "flex",
"justify-content": "center",
"align-items": "center",
"font-size": "28px"
},
"attributes": {
"class": "ms-bgColor-themePrimary ms-fontColor-white",
"iconName": "favoritestar"
}
},
{
"elmType": "div",
"style": {
"position": "absolute",
"top": "45px",
"z-index": "1"
},
"children": [
{
"elmType": "div",
"style": {
"width": "40px",
"height": "20px"
},
"attributes": {
"class": "ms-bgColor-themePrimary"
}
},
{
"elmType": "div",
"style": {
"border-left": "20px solid",
"border-right": "20px solid",
"border-bottom": "10px solid transparent"
},
"attributes": {
"class": "ms-fontColor-themePrimary"
}
}
]
}
]
}
]
},
{
"elmType": "img",
"style": {
"width": "150px",
"height": "150px",
"border-radius": "50%",
"border": "1px solid"
},
"attributes": {
"src": "=getUserImage([$To.email], 'L')",
"class": "ms-fontColor-neutralTertiaryAlt"
},
"defaultHoverField": "[$To]"
},
{
"elmType": "div",
"txtContent": "[$To.title]",
"style": {
"font-size": "12px",
"padding": "5px"
},
"attributes": {
"class": "ms-fontColor-neutralSecondary"
}
},
{
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "column",
"width": "85%",
"height": "27%",
"overflow": "scroll",
"margin-top": "15px"
},
"attributes": {
"class": "ms-fontColor-neutralSecondary"
},
"children": [
{
"elmType": "div",
"txtContent": "[$Title]",
"style": {
"font-weight": "bold",
"font-size": "13px"
}
},
{
"elmType": "div",
"txtContent": "[$Description]",
"style": {
"margin-top": "1px"
}
}
]
},
{
"elmType": "div",
"txtContent": "= 'From : ' + [$From.title]",
"defaultHoverField": "[$From]",
"style": {
"width": "90%",
"display": "flex",
"flex-direction": "row-reverse",
"height": "25px",
"align-items": "center",
"overflow": "hidden"
},
"attributes": {
"class": "ms-fontColor-neutralSecondary"
}
},
{
"elmType": "div",
"style": {
"width": "90%",
"display": "flex",
"justify-content": "space-between",
"font-size": "14px",
"margin-top": "10px"
},
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"justify-content": "center",
"align-items": "center",
"width": "30px",
"height": "30px",
"cursor": "pointer",
"border-radius": "50%"
},
"attributes": {
"iconName": "OpenPane",
"class": "ms-fontColor-themePrimary ms-fontColor-themeDark--hover ms-bgColor-themeLighter--hover"
},
"customRowAction": {
"action": "defaultClick"
}
},
{
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "row"
},
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "row",
"align-items": "center",
"cursor": "pointer",
"padding": "3px 5px 3px 5px",
"border-radius": "5px"
},
"attributes": {
"class": "ms-fontColor-themePrimary ms-fontColor-themeDark--hover ms-bgColor-themeLighter--hover"
},
"customRowAction": {
"action": "setValue",
"actionInput": {
"Likes": "=if(indexOf([$Likes.email] , @me) > -1 , removeFrom([$Likes.email] , @me) , appendTo([$Likes.email] , @me) )"
}
},
"customCardProps": {
"openOnEvent": "hover",
"directionalHint": "rightCenter",
"isBeakVisible": true,
"formatter": {
"elmType": "div",
"style": {
"max-height": "300px",
"padding": "5px 20px 5px 20px",
"display": "flex",
"flex-direction": "column"
},
"children": [
{
"elmType": "div",
"style": {
"padding": "10px",
"font-weight": "bold",
"font-size": "20px",
"display": "flex",
"align-items": "center",
"flex-direction": "row"
},
"attributes": {
"class": "ms-fontColor-themePrimary"
},
"children": [
{
"elmType": "div",
"style": {
"margin-right": "5px"
},
"attributes": {
"iconName": "HeartFill"
}
},
{
"elmType": "div",
"txtContent": "=length([$Likes])"
}
]
},
{
"elmType": "div",
"children": [
{
"forEach": "personIterator in [$Likes]",
"elmType": "div",
"style": {
"margin-bottom": "5px",
"display": "flex",
"align-items": "center"
},
"children": [
{
"elmType": "img",
"style": {
"width": "32px",
"height": "32px",
"border-radius": "50%",
"margin-right": "5px"
},
"attributes": {
"src": "=getUserImage([$personIterator.email], 'S')",
"title": "[$personIterator.title]"
}
},
{
"elmType": "span",
"txtContent": "[$personIterator.title]"
}
]
}
]
}
]
}
},
"children": [
{
"elmType": "div",
"style": {
"margin-right": "5px"
},
"attributes": {
"iconName": "=if(indexOf([$Likes.email] , @me) > -1 , 'HeartFill' , 'Heart' )"
}
},
{
"elmType": "div",
"txtContent": "=length([$Likes])"
}
]
},
{
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "row",
"align-items": "center",
"cursor": "pointer",
"padding": "3px 5px 3px 5px",
"border-radius": "5px"
},
"attributes": {
"class": "ms-fontColor-themePrimary ms-fontColor-themeDark--hover ms-bgColor-themeLighter--hover"
},
"customRowAction": {
"action": "defaultClick"
},
"children": [
{
"elmType": "div",
"style": {
"margin-right": "5px"
},
"attributes": {
"iconName": "Comment"
}
},
{
"elmType": "div",
"txtContent": "=if([$_CommentCount] == '' , 0 ,[$_CommentCount])"
}
]
}
]
}
]
}
]
}
}
Can anyone tell me what I would do to add the date (mm/dd/yyyy) to each item when it's added? Thank you in advance!!
