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

Question

Hi,

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!

Harsh.

Answer 1

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.

Thanks,
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.

Answer 2

Hello!

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

Adriana

Answer 3

@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