Json Tool - Looking for a miracle!

Steel Contributor

I am trying really hard to get my head round JSON for column formatting.  Usually, I can look at code and work out how to adapt it (I am known as the copy and paste Queen!).  JSON has got me, as I just do not understand it.  I have used the lovely new column formatting tool, copied the JSON and now I want to extend it.  I know there are lovely people on here who will help, but I am frustrated that I cannot work it out.

 

Does anyone know of any tools (I will pay for one) for absolute beginners?  I have googled and got up to about the 10th page of results but they are all the same.

 

 

7 Replies

@Tanya Denton What is it you're looking to know?

Hi @Tanya Denton,

 

I use the Column Formatter web part. Here is the URL to a blog post on the solution: https://thechriskent.com/2017/12/21/column-formatting-client-side-web-part-column-formatter/

 

I hope this helps.

 

Norm

@timparsons Hi, I suppose I am looking for a tool that will show me how JSON is structured in a really

easy way.  For example, I have formatted this column using the out the box tool.


format.jpg

 

 

 

 

 

 

Gone to advanced and copied the JSON out as per the below.  Now I want to expand on it i.e. only format if the Action Status = Open and also expand on the date calculations.  Actually just pasting it into this message and copying it back out has made it a little easier to understand, however, I would not know how to add in an extra condition.  This is why I have said I am looking for a miracle :)

 

 

{
"elmType": "div",
"style": {
"padding": "0 4px"
},
"attributes": {
"class": {
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"@currentField",
""
]
},
"",
{
"operator": ":",
"operands": [
{
"operator": "<",
"operands": [
{
"operator": "Date()",
"operands": [
{
"operator": "toDateString()",
"operands": [
"@currentField"
]
}
]
},
{
"operator": "Date()",
"operands": [
{
"operator": "toDateString()",
"operands": [
"@now"
]
}
]
}
]
},
"sp-css-backgroundColor-blockingBackground50",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
{
"operator": "Date()",
"operands": [
{
"operator": "toDateString()",
"operands": [
"@currentField"
]
}
]
},
{
"operator": "Date()",
"operands": [
{
"operator": "toDateString()",
"operands": [
"@now"
]
}
]
}
]
},
"sp-css-backgroundColor-errorBackground50",
{
"operator": ":",
"operands": [
{
"operator": ">",
"operands": [
{
"operator": "Date()",
"operands": [
{
"operator": "toDateString()",
"operands": [
"@currentField"
]
}
]
},
{
"operator": "Date()",
"operands": [
{
"operator": "toDateString()",
"operands": [
"@now"
]
}
]
}
]
},
"sp-css-backgroundColor-successBackground50",
""
]
}
]
}
]
}
]
}
},
"txtContent": "@currentField"
}

Have a read of this page and then watch her video, she's good at explaining it. https://wonderlaura.com/2018/07/18/button-in-sharepoint-list-to-trigger-microsoft-flow/. Her youtube channel is very good.

Let me know if it doesn't help and I'll try and find more info for you.

@timparsons many thanks Tim I will have an evening of watching and learning :)

@Juan Carlos González Martín Hi Juan, hope this finds you well.  You are my miracle!  Just watched the YouTube video and I think this will help my poor frazzled brain :)  Thank you so much.  Keep well.