Sharepoint List in Board View is broken

[marek_siatkowski]

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"
              }
            ]
          }
        ]
      }
    ]
  }
}

[#2]

@marek_siatkowski 

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.

[#3]

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. 

[#4]

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?

[#5]

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

[#6]

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.

[#7]

Thank you for this. I've disabled sorting on my list. At least that way it is still somewhat usable. Really hoping they fix this bug soon.

[#8]

Even though I removed sorting, I still have to refresh the page to get it to show properly every time I add/edit an item. I'm considering removing custom JSON and just using standard cards in hope this will happen less often.

[#9]

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.

[#10]

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

[#11]

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.

[#12]

You might need to reset your browser cache after you have removed all sorting on the view to get the fix to take effect.

[#13]

Sorting is massively important though, I can confirm that removing it solves the issue. It used to work fine but has broken more recently, this really needs fixing.

[#14]

@JoshHudsy Hi, I am a general user of lists rather than a tech specialist (I see this is a tech community but it's the only place I've found mention of this issue). I've introduced MS lists board view to my team and we have about 20 different views, mostly with sorting - this issue keeps happening and it's making it impossible for us to use it.  Is there a way to disable sorting across the whole list or would I need to do it view by view?  Also, how can I raise a support case to add another voice to this issue?  thanks for any help.