Show Side-by-side Column field on card of Board view (SharePoint List)

Zalavadiya, Harsh 1 Reputation point


I am trying to customize the card of my board view with two column shown. I am not sure how to format this with JSON.

For example in reference to the screenshot below. I want,

[NCMR] with [Issue] on side

[Opened On] with [Owner] on side

[Dispositioned due on] with [Disposition Due in] on side


Please if anyone could guide me how I can achieve what I am wishing for, it would be great.

Thank you very much in advance!


SharePoint Server
SharePoint Server
A family of Microsoft on-premises document management and storage systems.
2,276 questions
Microsoft Graph
Microsoft Graph
A Microsoft programmability model that exposes REST APIs and client libraries to access data on Microsoft 365 services.
11,140 questions
A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.
10,078 questions
{count} votes

3 answers

Sort by: Most helpful
  1. Echo Du_MSFT 17,126 Reputation points

    Hi @Zalavadiya, Harsh ,

    Welcome to Q&A Forum!

    From my research and testing, we cannot Side-by-side Column field on card of Board view in SharePoint list. In other words, Board view cards can only display one field per row by default.

    This is because there is no syntax command to set this feature in the Board view. For more information, please see "Board view customizations" article.

    Echo Du


    If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

  2. Hudson, Adriana D 1 Reputation point


    I am currently trying to do the same thing in the gallery view of Microsoft lists! Are there any updates on this? Thanks!


    0 comments No comments

  3. john ala 1 Reputation point

    @Zalavadiya, Harsh
    You can do this using JSON to edit the view layout.
    In this card I put the start and stop dates next to each other with a hyphen between.
    To do this I used the Advanced design mode of the Gallery view. In the JSON I found the div elements for the stat date and modified it to look like this.

                "elmType": "div",  
                "attributes": {  
                  "class": "sp-card-displayColumnContainer"  
                "children": [  
                    "elmType": "p",  
                    "attributes": {  
                      "title": "=if ([$StartDate.displayValue] == [$DueDate.displayValue], [$StartDate.displayValue], [$StartDate.displayValue] + ' - ' + [$DueDate.displayValue])",  
                      "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent",  
                      "role": "heading",  
                      "aria-level": "3"  
                    "txtContent": "=if ([$StartDate.displayValue] == [$DueDate.displayValue], [$StartDate.displayValue], [$StartDate.displayValue] + ' - ' + [$DueDate.displayValue])"  

    Because I'm just learning I changed the title property and the txtContent property, even though I'm not sure the title had to be changed.
    I then removed the JSON for the div containing the stop date column formatting. If you haven't edited JSON before you should get the Visual Studio Code editor and watch this video
    April Dunnam -Intro to JSON

    0 comments No comments