Forum Discussion

Dhiran Gajjar's avatar
Dhiran Gajjar
Iron Contributor
Jul 18, 2022

SharePoint View Formatting

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

    ]
  }
}

 

Lists
SharePoint Online
Views
  • Don Kirkham's avatar
    Don Kirkham
    Jul 18, 2022

     

    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.

  • Don Kirkham's avatar
    Don Kirkham
    MVP
    Jul 18, 2022

     

    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.

Resources