Forum Discussion
Sharepoint List in Board View is broken
I have a sharepoint list with a board view. Every time I trigger a flow on this list and sometimes also without a flow the view changes after it is open a few minutes. It shows all buckets one under the other on the left side and after scrolling very far down, the board is visible a second time but in the normal view as it should be.I have attached a screenshot with the minimum possible zoom factor.
Can this be caused by the json formatting? JSON is also attached below.
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/board-formatting.schema.json",
"hideSelection": false,
"formatter": {
"elmType": "div",
"attributes": {
"class": "sp-card-container sp-card-container-noPadding"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer sp-card-subContainer-borderRadius"
},
"children": [
{
"elmType": "div",
"style": {
"display": "=if(length([$Initiator]) == 0, 'none', '')"
},
"children": [
{
"elmType": "div",
"style": {
"display": "flex"
},
"children": [
{
"elmType": "p",
"attributes": {
"class": "sp-card-userEmptyText"
},
"txtContent": "=if(length([$Initiator]) == 0, '–', '')"
},
{
"forEach": "personIterator in [$Initiator]",
"elmType": "a",
"attributes": {
"class": "=if(loopIndex('personIterator') >= 5, 'sp-card-userContainer', 'sp-card-userContainer sp-card-keyboard-focusable')"
},
"style": {
"display": "=if(loopIndex('personIterator') >= 5 , 'none', '')"
},
"children": [
{
"elmType": "img",
"defaultHoverField": "[$personIterator]",
"attributes": {
"src": "=getUserImage([$personIterator.email], 'S')",
"title": "[$personIterator.title]",
"class": "sp-card-userThumbnail"
},
"style": {
"display": "=if((length([$Initiator]) > 5 && loopIndex('personIterator') >= 4) || [$personIterator.title] == 'Service, User' 'none', '')"
}
},
{
"elmType": "div",
"attributes": {
"class": "ms-bgColor-neutralLight ms-fontColor-neutralSecondary sp-card-userOthers"
},
"style": {
"display": "=if(length([$Initiator]) > 5 && loopIndex('personIterator') == 4, '', 'none')"
},
"customCardProps": {
"formatter": {
"elmType": "div",
"attributes": {
"class": "sp-card-personCallout"
},
"children": [
{
"forEach": "personIterator in [$Initiator]",
"elmType": "div",
"attributes": {
"class": "sp-card-userContainer sp-card-userCustomCard"
},
"style": {
"display": "=if(loopIndex('personIterator') < 4, 'none', '')"
},
"children": [
{
"elmType": "img",
"defaultHoverField": "[$personIterator]",
"attributes": {
"src": "=getUserImage([$personIterator.email], 'S')",
"title": "[$personIterator.title]",
"class": "sp-card-userThumbnail"
}
}
]
}
]
},
"openOnEvent": "hover"
},
"children": [
{
"elmType": "span",
"txtContent": "='+' + toString(length([$Initiator]) - (4))"
}
]
}
]
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-userTitle"
},
"style": {
"display": "=if(length([$Initiator]) == 1, '', 'none')"
},
"defaultHoverField": "[$personIterator]",
"txtContent": "[$Initiator.title]"
}
]
}
],
"attributes": {
"class": "sp-card-previewColumnContainer"
}
},
{
"elmType": "div",
"children": [
{
"elmType": "p",
"attributes": {
"title": "[$Title]",
"class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent",
"role": "heading",
"aria-level": "3"
},
"txtContent": "=if ([$Title] == '', '–', [$Title])"
}
],
"attributes": {
"class": "sp-card-displayColumnContainer"
}
},
{
"elmType": "div",
"style": {
"display": "=if ([$Statusgrund] == '' || [$Status] == 'Erfolglos abgeschlossen' || [$Status] == 'Erfolgreich abgeschlossen', 'none', '')"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "sp-card-content sp-card-formatterRef"
},
"children": [
{
"columnFormatterReference": "[$Statusgrund]"
}
]
}
],
"attributes": {
"class": "sp-card-displayColumnContainer"
}
},
{
"elmType": "div",
"style": {
"display": "=if ([$DatumderAnfrage] == '', 'none', '')"
},
"children": [
{
"elmType": "p",
"attributes": {
"title": "[$DatumderAnfrage]",
"class": "ms-fontColor-neutralPrimary sp-card-content "
},
"txtContent": "=[$DatumderAnfrage] + if([$Wiedervorlage.displayValue] == '',if([$Abgeschlossenam] == '', '', ' - ' + [$Abgeschlossenam]),' - [' + [$Wiedervorlage.displayValue] + ']')"
}
],
"attributes": {
"class": "sp-card-displayColumnContainer"
}
},
{
"elmType": "div",
"style": {
"display": "=if ([$Beschreibung_txt] == '', 'none', '')",
"white-space": "wrap",
"word-break": "break-word",
"max-height": "78px",
"overflow-y": "hidden"
},
"txtContent": "[$Beschreibung_txt]",
"customCardProps": {
"formatter": {
"elmType": "p",
"txtContent": "[$Beschreibung_txt]",
"style": {
"white-space": "wrap",
"word-break": "break-word",
"max-width": "700px",
"margin": "16px"
}
},
"openOnEvent": "hover",
"directionalHint": "bottomCenter",
"isBeakVisible": true,
"beakStyle": {
"backgroundColor": "white"
}
},
"attributes": {
"class": "sp-card-displayColumnContainer"
}
},
{
"elmType": "div",
"inlineEditField": "[$Besitzer]",
"style": {
"display": "=if(length([$Besitzer]) == 0, 'none', '')"
},
"children": [
{
"elmType": "div",
"style": {
"display": "=if([$Status] == 'Erfolglos abgeschlossen' || [$Status] == 'Erfolgreich abgeschlossen','none','flex')"
},
"children": [
{
"elmType": "p",
"attributes": {
"class": "sp-card-userEmptyText"
},
"txtContent": "=if(length([$Besitzer]) == 0, '–', '')"
},
{
"forEach": "personIterator in [$Besitzer]",
"elmType": "a",
"attributes": {
"class": "=if(loopIndex('personIterator') >= 5, 'sp-card-userContainer', 'sp-card-userContainer sp-card-keyboard-focusable')"
},
"style": {
"display": "=if(loopIndex('personIterator') >= 5, 'none', '')"
},
"children": [
{
"elmType": "img",
"defaultHoverField": "[$personIterator]",
"attributes": {
"src": "=getUserImage([$personIterator.email], 'S')",
"title": "[$personIterator.title]",
"class": "sp-card-userThumbnail"
},
"style": {
"display": "=if(length([$Besitzer]) > 5 && loopIndex('personIterator') >= 4, 'none', '')"
}
},
{
"elmType": "div",
"attributes": {
"class": "ms-bgColor-neutralLight ms-fontColor-neutralSecondary sp-card-userOthers"
},
"style": {
"display": "=if(length([$Besitzer]) > 5 && loopIndex('personIterator') == 4, '', 'none')"
},
"customCardProps": {
"formatter": {
"elmType": "div",
"attributes": {
"class": "sp-card-personCallout"
},
"children": [
{
"forEach": "personIterator in [$Besitzer]",
"elmType": "div",
"attributes": {
"class": "sp-card-userContainer sp-card-userCustomCard"
},
"style": {
"display": "=if(loopIndex('personIterator') < 4, 'none', '')"
},
"children": [
{
"elmType": "img",
"defaultHoverField": "[$personIterator]",
"attributes": {
"src": "=getUserImage([$personIterator.email], 'S')",
"title": "[$personIterator.title]",
"class": "sp-card-userThumbnail"
}
}
]
}
]
},
"openOnEvent": "hover"
},
"children": [
{
"elmType": "span",
"txtContent": "='+' + toString(length([$Besitzer]) - (4))"
}
]
}
]
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-userTitle"
},
"style": {
"display": "=if(length([$Besitzer]) == 1, '', 'none')"
},
"defaultHoverField": "[$personIterator]",
"txtContent": "[$Besitzer.title]"
}
]
}
],
"attributes": {
"class": "sp-card-previewColumnContainer"
}
},
{
"elmType": "button",
"customRowAction": {
"action": "executeFlow",
"actionParams": "{\"id\": \"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx\"}"
},
"attributes": {
"class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover"
},
"style": {
"border": "none",
"background-color": "transparent",
"cursor": "pointer",
"display": "=if([$Status] == 'Erfolgreich abgeschlossen' || [$Status] == 'Erfolglos abgeschlossen', 'none', '')"
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName": "Flow"
},
"style": {
"padding-right": "6px"
}
},
{
"elmType": "span",
"txtContent": "Ticket schließen"
}
]
}
]
}
]
}
}- I am having this issue too - no custom JSON jsut a filter and sort applied to the view, it really is unusable, I end up refrshing the page every time i edit an item as it jsut crashes into this view.
- My list no longer has the issue after removing all sorting on the card view. Make sure all sorting is gone and reset your browser cache afterward.
- I'm having this issue for a list as well, with the same exact display glitch (1 column with everything, then the normal board at the bottom of the page). I've tried indexing columns, making new views, using the Lists app rather than the SharePoint interface, but all with no luck. Hoping that MS makes this a priority to fix, as refreshing the page is tedious
- Hi everyone,
The cause of this glitch is sorting of your list, if you turn off sorting then it won't crash into this view.
Of course sorting is important part, I have ticket open with MS about this issue, but it already over a month without any luck. I have stopped trying to troubleshoot myself as anything i tried does not give any result. If i have anything new i'll let you guys know.- Thanks for drilling down to the "cause" - I agree with all that this is essential for board view to be anything but an alpha feature
- I'm having this issue as well with a custom format board view. Keeps happening every few minutes for anyone viewing the board. Does anyone know what may be causing this issue?
I got similar issue almost the same, that the view crashes and all columns get into one, i'm investigating this for quite sometime, but as far as i noticed this happens for me only when i set items to sort by due date. And i have configured JSON too, but only to show multiple pills in colors so it has additional line which columnformatref - [$Progress] and that's it.
Have you found a way to resolve it?? as that is killing me completely, we want to move from Trello to SPO lists with board view instead but such issues makes it a rather bold move.I still have no solution for this but i will try to sort my columns by something else ... if this helps, a workaround could be some sort of calculated column where the date is convertet to a number and then sort by this number?
EDIT: It still all gets messed up no matter which is my sorting column.
