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

Zalavadiya, Harsh 1 Reputation point
2022-04-17T15:41:11.487+00:00

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

193600-8675b135-7804-465a-98ad-63be5a255d07.png

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.

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
SharePoint
SharePoint
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
    2022-04-18T04:56:58.997+00:00

    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.


  2. Hudson, Adriana D 1 Reputation point
    2022-06-02T20:22:44.153+00:00

    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

    0 comments No comments

  3. john ala 1 Reputation point
    2022-09-16T18:55:45.78+00:00

    @Zalavadiya, Harsh
    You can do this using JSON to edit the view layout.
    241991-sidebysidecol.jpg
    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