Date field in JSON text column formatting child component shows empty.

[JPMHuls_Atos]

Hi all,

In a list I'm trying to show 3 additional column values in a text column: it's own (text) value, the item ID and a date. For this I'm using the following JSON:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "block"
  },
  "children": [
    {
      "elmType": "div",
      "txtContent": "=if([$MigrationTemplate] == 'Main','Site ID:: ', 'Main site:: ') + @currentField",
      "style": {
        "display": "block"
      }
    },
    {
      "elmType": "div",
      "txtContent": "='ID: ' + [$ID]"
    },
    {
      "elmType": "div",
      "txtContent": "Migration on :"
    },
    {
      "elmType": "div",
      "txtContent": "=if([$MigrationDate] == '', '', toDateString([$MigrationDate]))"
    }
  ]
}

@currentField and [$ID] show just fine, but the date field always shows up empty (even if I put it straight without the if). When I add the date at the top most component, it does show the date:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "txtContent": "= @currentField + toDateString([$MigrationDate])"
}

Again, the current column is a Single line of text column with a short site name in it.

How can I show a date field in a child component as per first code sample???

UPDATE: Using the 2nd code snippet, I was able to accomplish the same using '\n' to add new lines:

{

  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",

  "elmType": "div",

  "txtContent": "= if([$SiteTemplate] == 'Main','Main ID: ', 'Main site:: ') + @currentField + '\nID: ' + [$ID] + '\n' + if([$MigrationDate], 'Migration scheduled for: ' +  toDateString([$MigrationDate]), '')"

}

In a test private view it worked like a charm, but in the public view I get a "Invalid date" error. So next to my original question for which I'm still curious whether or not there's a solution, I now need to resolve the Invalid date issue... Any ideas?

[#2]

@JPMHuls_Atos What is the data type of [$MigrationDate] column, is it Date & Time?

What is the format of date time in list, mm/dd/yyyy or dd/mm/yyyy (might be based on site language/regional settings)?

Can you try using [$MigrationDate] only instead of toDateString([$MigrationDate])? Let us know if it works for you.

---

Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

[#3]

Hi Ganesh,
It's a date only DateTime column, the locale is NL/Netherlands. The odd thing is that it seemed to work with toDateString, then I made a small change which should not break the JSON, and I got an Invalid date error. Removing toDateString and only using [$MigrationDate] suddenly showed the proper (locale) date... However after reopening the view in a new browser, I either get Invalid date or the row with the date is completely missing... It's driving me nuts...

[#4]

@JPMHuls_Atos Try using this JSON: 

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "elmType": "div",
    "txtContent": "=if([$SiteTemplate] == 'Main', 'Main ID: ', 'Main site: ') + @currentField + '\nID: ' + [$ID] + '\n' + if(Number([$MigrationDate]) != 0, 'Migration scheduled for: ' + [$MigrationDate], '')"
}

Make sure you are properly saving the JSON and not just using "Preview" option. 

---

Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

[#5 · Accepted solution]

In the end it turned out that adding the referenced date column to the view and converting it to the locale date string resolved the issue. If now I only could hide that entire (not only its value) date column without JSON having an issue.... But for now I can live with the solution (I've page where I show to related views of the same list next to each other, using dynamic filtering on the right one. By adjusting the column widths I can get the used date column out of site in both views. Only at the bottom the horizontal scroll bar shows up).

[#6]

@JPMHuls_Atos I suspected this issue (date column not being added to list view) earlier. But, in your original question you said date value was shown once while using original JSON, so I thought you already have date column added to list view.

Also, you cannot remove date column from list view now. This is a known limitation of JSON formatting >> If you want to reference any column in JSON, it should be added to list view to read it's value.

---

Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

[#7]

Thank you Ganesh, the odd thing is that the ID column is not added to the view and it still shows up in de view through JSON... but then again it is a system column and for that it may be that other rules apply.