Struggle to format JSON formatting
Good Morning
I’m using this beautiful Gantt formatting from GitHub but I’m struggling to modify it. – To be clear, I’m trying to create a view similar to an Excel sheet because people can’t cope with too much change at a time!
This is what it looks like.
I want to change two things and neither works. That’s a reflection of my JSON knowledge more than anything else.
I want to remove the inline edit function.And I don’t want to show this at all when another field has a value in it.
This is the code:
{
“$schema”: “https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json”,
“elmType”: “div”,
“children”: [
{
“elmType”: “div”,
“style”: {
“display”: “flex”,
“flex-direction”: “row”,
“width”: “100%”,
“align-items”: “center”
},
“children”: [
{
“elmType”: “div”,
“style”: {
“display”: “flex”,
“flex-direction”: “column”,
“width”: “100%”,
“margin-bottom”: “3px”
},
“children”: [
{
“elmType”: “div”,
“style”: {
“display”: “flex”,
“justify-content”: “space-between”,
“width”: “100%”,
“white-space”: “nowrap”
},
“attributes”: {
“class”: “ms-fontSize-xs”
},
“children”: [
{
“elmType”: “div”,
“style”: {
“display”: “flex”,
“flex-direction”: “row-reverse”
},
“children”: [
{
“elmType”: “div”,
“txtContent”: “=if(loopIndex(‘_startdate’)>1,”,’/’)+[$_startdate]”,
“forEach”: “_startdate in split(substring(@currentField,indexOf(@currentField,'(‘)+1,indexOf(@currentField,’_’)),’-‘)”
}
]
},
{
“elmType”: “div”,
“style”: {
“display”: “flex”,
“flex-direction”: “row-reverse”
},
“children”: [
{
“elmType”: “div”,
“txtContent”: “=if(loopIndex(‘_enddate’)>1,”,’/’)+[$_enddate]”,
“forEach”: “_enddate in split(substring(@currentField,indexOf(@currentField,’_’)+1,indexOf(@currentField,’)’)),’-‘)”
}
]
}
]
},
{
“elmType”: “div”,
“style”: {
“width”: “100%”,
“border”: “1px solid”,
“height”: “13px”,
“position”: “relative”,
“overflow”: “hidden”
},
“children”: [
{
“elmType”: “div”,
“style”: {
“position”: “absolute”,
“height”: “100%”,
“width”: “=((Number(Date(substring(@currentField,indexOf(@currentField,’^’)+1,indexOf(@currentField,'(‘))))-Number(Date(substring(@currentField,0,indexOf(@currentField,’^’))))+86400000)/(Number(Date(substring(@currentField,indexOf(@currentField,’_’)+1,indexOf(@currentField,’)’))))-Number(Date(substring(@currentField,indexOf(@currentField,'(‘)+1,indexOf(@currentField,’_’))))+86400000))*100+’%'”,
“left”: “=((Number(Date(substring(@currentField,0,indexOf(@currentField,’^’))))-Number(Date(substring(@currentField,indexOf(@currentField,'(‘)+1,indexOf(@currentField,’_’)))))/(Number(Date(substring(@currentField,indexOf(@currentField,’_’)+1,indexOf(@currentField,’)’))))-Number(Date(substring(@currentField,indexOf(@currentField,'(‘)+1,indexOf(@currentField,’_’))))+86400000))*100+’%'”
},
“attributes”: {
“class”: “ms-bgColor-themePrimary”,
“title”: “=[$Start.displayValue]+’ ～ ‘+[$End.displayValue]”
}
},
{
“elmType”: “div”,
“style”: {
“position”: “absolute”,
“height”: “100%”,
“width”: “=(86400000/(Number(Date(substring(@currentField,indexOf(@currentField,’_’)+1,indexOf(@currentField,’)’))))-Number(Date(substring(@currentField,indexOf(@currentField,'(‘)+1,indexOf(@currentField,’_’))))+86400000))*100+’%'”,
“left”: “=((Number(@now)-(60*60*1000*12)-Number(Date(substring(@currentField,indexOf(@currentField,'(‘)+1,indexOf(@currentField,’_’)))))/(Number(Date(substring(@currentField,indexOf(@currentField,’_’)+1,indexOf(@currentField,’)’))))-Number(Date(substring(@currentField,indexOf(@currentField,'(‘)+1,indexOf(@currentField,’_’))))+86400000))*100+’%'”,
“display”: “flex”,
“justify-content”: “center”,
“align-items”: “center”
},
“children”: [
{
“elmType”: “div”,
“style”: {
“width”: “100%”,
“min-width”: “5px”,
“height”: “100%”
},
“attributes”: {
“class”: “ms-bgColor-sharedRed10”,
“title”: “Now”
}
}
]
}
]
}
]
},
{
“elmType”: “div”,
“style”: {
“padding”: “10px”,
“margin-left”: “5px”,
“cursor”: “pointer”,
“border-radius”: “50%”
},
“attributes”: {
“iconName”: “Edit”,
“class”: “ms-bgColor-themeLighter–hover”
},
“customCardProps”: {
“openOnEvent”: “click”,
“directionalHint”: “topCenter”,
“isBeakVisible”: true,
“formatter”: {
“elmType”: “div”,
“style”: {
“display”: “flex”,
“flex-direction”: “column”,
“padding”: “10px 15px”
},
“children”: [
{
“elmType”: “div”,
“style”: {
“display”: “flex”,
“flex-direction”: “row”,
“align-items”: “center”
},
“children”: [
{
“elmType”: “div”,
“inlineEditField”: “[$Start]”,
“style”: {
“border”: “1px solid”,
“padding”: “5px 10px”,
“border-radius”: “3px”,
“display”: “flex”,
“align-items”: “center”,
“margin”: “5px”
},
“children”: [
{
“elmType”: “span”,
“txtContent”: “[$Start.displayValue]”
},
{
“elmType”: “span”,
“style”: {
“margin-left”: “8px”
},
“attributes”: {
“iconName”: “Edit”
}
}
]
},
{
“elmType”: “div”,
“txtContent”: “～”,
“style”: {
“margin”: “5px”
}
},
{
“elmType”: “div”,
“inlineEditField”: “[$End]”,
“style”: {
“border”: “1px solid”,
“padding”: “5px 10px”,
“border-radius”: “3px”,
“display”: “flex”,
“align-items”: “center”,
“margin”: “5px”
},
“children”: [
{
“elmType”: “span”,
“txtContent”: “[$End.displayValue]”
},
{
“elmType”: “span”,
“style”: {
“margin-left”: “8px”
},
“attributes”: {
“iconName”: “Edit”
}
}
]
}
]
},
{
“elmType”: “div”,
“txtContent”: “If you changed the date manually instead of using the calendar, press [Enter] after changing the date.”,
“style”: {
“max-width”: “300px”,
“text-align”: “center”
},
“attributes”: {
“class”: “ms-fontSize-s”
}
}
]
}
}
}
]
}
]
}
I would appreciate any suggestions. Whatever I have taken out so far hasn’t changed a thing.
Thanks,
Christine
Good Morning I’m using this beautiful Gantt formatting from GitHub but I’m struggling to modify it. – To be clear, I’m trying to create a view similar to an Excel sheet because people can’t cope with too much change at a time! This is what it looks like. I want to change two things and neither works. That’s a reflection of my JSON knowledge more than anything else.I want to remove the inline edit function.And I don’t want to show this at all when another field has a value in it.This is the code: {
“$schema”: “https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json”,
“elmType”: “div”,
“children”: [
{
“elmType”: “div”,
“style”: {
“display”: “flex”,
“flex-direction”: “row”,
“width”: “100%”,
“align-items”: “center”
},
“children”: [
{
“elmType”: “div”,
“style”: {
“display”: “flex”,
“flex-direction”: “column”,
“width”: “100%”,
“margin-bottom”: “3px”
},
“children”: [
{
“elmType”: “div”,
“style”: {
“display”: “flex”,
“justify-content”: “space-between”,
“width”: “100%”,
“white-space”: “nowrap”
},
“attributes”: {
“class”: “ms-fontSize-xs”
},
“children”: [
{
“elmType”: “div”,
“style”: {
“display”: “flex”,
“flex-direction”: “row-reverse”
},
“children”: [
{
“elmType”: “div”,
“txtContent”: “=if(loopIndex(‘_startdate’)>1,”,’/’)+[$_startdate]”,
“forEach”: “_startdate in split(substring(@currentField,indexOf(@currentField,'(‘)+1,indexOf(@currentField,’_’)),’-‘)”
}
]
},
{
“elmType”: “div”,
“style”: {
“display”: “flex”,
“flex-direction”: “row-reverse”
},
“children”: [
{
“elmType”: “div”,
“txtContent”: “=if(loopIndex(‘_enddate’)>1,”,’/’)+[$_enddate]”,
“forEach”: “_enddate in split(substring(@currentField,indexOf(@currentField,’_’)+1,indexOf(@currentField,’)’)),’-‘)”
}
]
}
]
},
{
“elmType”: “div”,
“style”: {
“width”: “100%”,
“border”: “1px solid”,
“height”: “13px”,
“position”: “relative”,
“overflow”: “hidden”
},
“children”: [
{
“elmType”: “div”,
“style”: {
“position”: “absolute”,
“height”: “100%”,
“width”: “=((Number(Date(substring(@currentField,indexOf(@currentField,’^’)+1,indexOf(@currentField,'(‘))))-Number(Date(substring(@currentField,0,indexOf(@currentField,’^’))))+86400000)/(Number(Date(substring(@currentField,indexOf(@currentField,’_’)+1,indexOf(@currentField,’)’))))-Number(Date(substring(@currentField,indexOf(@currentField,'(‘)+1,indexOf(@currentField,’_’))))+86400000))*100+’%'”,
“left”: “=((Number(Date(substring(@currentField,0,indexOf(@currentField,’^’))))-Number(Date(substring(@currentField,indexOf(@currentField,'(‘)+1,indexOf(@currentField,’_’)))))/(Number(Date(substring(@currentField,indexOf(@currentField,’_’)+1,indexOf(@currentField,’)’))))-Number(Date(substring(@currentField,indexOf(@currentField,'(‘)+1,indexOf(@currentField,’_’))))+86400000))*100+’%'”
},
“attributes”: {
“class”: “ms-bgColor-themePrimary”,
“title”: “=[$Start.displayValue]+’ ～ ‘+[$End.displayValue]”
}
},
{
“elmType”: “div”,
“style”: {
“position”: “absolute”,
“height”: “100%”,
“width”: “=(86400000/(Number(Date(substring(@currentField,indexOf(@currentField,’_’)+1,indexOf(@currentField,’)’))))-Number(Date(substring(@currentField,indexOf(@currentField,'(‘)+1,indexOf(@currentField,’_’))))+86400000))*100+’%'”,
“left”: “=((Number(@now)-(60*60*1000*12)-Number(Date(substring(@currentField,indexOf(@currentField,'(‘)+1,indexOf(@currentField,’_’)))))/(Number(Date(substring(@currentField,indexOf(@currentField,’_’)+1,indexOf(@currentField,’)’))))-Number(Date(substring(@currentField,indexOf(@currentField,'(‘)+1,indexOf(@currentField,’_’))))+86400000))*100+’%'”,
“display”: “flex”,
“justify-content”: “center”,
“align-items”: “center”
},
“children”: [
{
“elmType”: “div”,
“style”: {
“width”: “100%”,
“min-width”: “5px”,
“height”: “100%”
},
“attributes”: {
“class”: “ms-bgColor-sharedRed10”,
“title”: “Now”
}
}
]
}
]
}
]
},
{
“elmType”: “div”,
“style”: {
“padding”: “10px”,
“margin-left”: “5px”,
“cursor”: “pointer”,
“border-radius”: “50%”
},
“attributes”: {
“iconName”: “Edit”,
“class”: “ms-bgColor-themeLighter–hover”
},
“customCardProps”: {
“openOnEvent”: “click”,
“directionalHint”: “topCenter”,
“isBeakVisible”: true,
“formatter”: {
“elmType”: “div”,
“style”: {
“display”: “flex”,
“flex-direction”: “column”,
“padding”: “10px 15px”
},
“children”: [
{
“elmType”: “div”,
“style”: {
“display”: “flex”,
“flex-direction”: “row”,
“align-items”: “center”
},
“children”: [
{
“elmType”: “div”,
“inlineEditField”: “[$Start]”,
“style”: {
“border”: “1px solid”,
“padding”: “5px 10px”,
“border-radius”: “3px”,
“display”: “flex”,
“align-items”: “center”,
“margin”: “5px”
},
“children”: [
{
“elmType”: “span”,
“txtContent”: “[$Start.displayValue]”
},
{
“elmType”: “span”,
“style”: {
“margin-left”: “8px”
},
“attributes”: {
“iconName”: “Edit”
}
}
]
},
{
“elmType”: “div”,
“txtContent”: “～”,
“style”: {
“margin”: “5px”
}
},
{
“elmType”: “div”,
“inlineEditField”: “[$End]”,
“style”: {
“border”: “1px solid”,
“padding”: “5px 10px”,
“border-radius”: “3px”,
“display”: “flex”,
“align-items”: “center”,
“margin”: “5px”
},
“children”: [
{
“elmType”: “span”,
“txtContent”: “[$End.displayValue]”
},
{
“elmType”: “span”,
“style”: {
“margin-left”: “8px”
},
“attributes”: {
“iconName”: “Edit”
}
}
]
}
]
},
{
“elmType”: “div”,
“txtContent”: “If you changed the date manually instead of using the calendar, press [Enter] after changing the date.”,
“style”: {
“max-width”: “300px”,
“text-align”: “center”
},
“attributes”: {
“class”: “ms-fontSize-s”
}
}
]
}
}
}
]
}
]
} I would appreciate any suggestions. Whatever I have taken out so far hasn’t changed a thing. Thanks, Christine Read More
