SharePoint View Formatting

[Dhiran Gajjar]

Hi All,

I am trying to create a view that is basically showing a medals table for a SharePoint list. What I would like to do is have a consistent format for this. My list contains the following columns

Title - Country Name

Gold - Numeric Value

Silver

Bronze 

Total

The view i am struggling to create should have a fixed width and the elements inside should be as follows 

<Country Name> <Gold> <Silver> <Bronze> <Total>

I would like the country name to be of a fixed value so that the medal numbers line up. My JSON is shown below

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "display": "flex",
      "flex-direction": "column",
      "align-items": "flex-start"
    },
    "attributes": {
      "class": "sp-row-card"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "text-align": "left"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-row-title"
            },
            "txtContent": "[$Title]"
          },
          {
            "elmType": "div",
            "txtContent": "[$Gold]"
          },
          {
            "elmType": "div",
            "txtContent": "[$Silver]"
          },
          {
            "elmType": "div",
            "txtContent": "[$Bronze]"
          },
          {
            "elmType": "div",
            "txtContent": "[$Total]"
          }
        ]
      }

    ]
  }
}

[#2 · Accepted solution]

@Dhiran Gajjar 

Not sure why you had the card view selected. The card view will only display one row of data in the card. If you are looking for a table of data, you can use a list view, but make it look like a card. To answer your actual question about fixed with, below is your sample with a fixed overall width of 600px and a fixed Country($title) width of 200px. The remaining columns are flexed to fill the remaining width evenly. Hope this helps.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "display": "flex",
      "flex-direction": "column",
      "align-items": "flex-start"
    },
    "attributes": {
      "class": ""
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "display": "flex",
          "align-items": "center",
          "text-align": "left",
          "width": "600px"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-row-title"
            },
            "style": {
              "flex": "0 0 200px"
            },
            "txtContent": "[$Title]"
          },
          {
            "elmType": "div",
            "style": {
              "flex": "1"
            },
            "txtContent": "[$Gold]"
          },
          {
            "elmType": "div",
            "style": {
              "flex": "1"
            },
            "txtContent": "[$Silver]"
          },
          {
            "elmType": "div",
            "style": {
              "flex": "1"
            },
            "txtContent": "[$Bronze]"
          },
          {
            "elmType": "div",
            "style": {
              "flex": "1"
            },
            "txtContent": "[$Total]"
          }
        ]
      }
    ]
  }
}

Take care,

Don

Please click Mark as Best Response & Like if my post helped you to answer or resolve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it a Like.

[#3]

Thank you. That is exactly what I am looking for.