Add date created/entered to JSON code for SharePoint list

Occasional Contributor

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!!

2 Replies

Hi @Beth_Culpepper,

 

What value does the date need to be, today's date? Or do you have a separate column in your list which you want to reference in your card view? And where in the card do you want to display it?

 

Btw, do you have a link to the Github repo? 

Hi!

The date needs to be today's date...as in the day that the item is created. I assume we could reference the Created column but I don't know how to enter that into the JSON code to make it appear. And ideally, the upper left hand corner has space for it. :)

Here's the link to the github: https://github.com/pnp/List-Formatting/tree/master/view-samples/praise-cards