Saving custom columns widths with SharePoint Online

*** September 2019 : It appears that the configurations mentioned here no longer work unfortunately.

image

One of the great things about SharePoint Online is that you can create custom columns for just about every element in a site. The information that SharePoint Online displays to you can be customised using “Views”. You can configure multiple “Views” inside a List or Library to show exactly the information you want, as you can see above.

image

You can also adjust the width of any column by simply dragging it out like you do in something such as Excel. Just go to the boundary of the column heading and drag the column width out as shown above.

The issue was that when you return to this layout after the current session (i.e. closed the browser and logged in again later), the column width would revert back to the default width. Frustrating.

image

Also, if another user looked at the same location they would again, only see the default widths, even though you changed it in your session.

So, any column changes made were not persistent between sessions or globally available. Frustrating.

image

However, if you take a close look at the “View” pull down in the top right of the page you will notice something.

image

You should see that once you change a column width on the page a * appears after the “View” name.

image

Again, make a change to the column width and a little * will appear. This is telling you that the “View” has changed is different from the default. This is kinda the same when you edit documents. It indicates that the contents have changed and you SHOULD save these changes for them to be retained!

image

If you therefore select the “View” pull down there will be an option to Save view as.

image

If you then Save the “View”, using the same name as before, you are overviewing the old display with the new layout i.e. with different column widths.

image

If another user now navigates to the page they will see the columns widths that you set! i.e. saving the “View” after adjusting the columns sets these columns width for all users! Yes Martha, we have achieved the global configuration for column widths in SharePoint Online! Yeah!

In summary then, adjust the column widths to the size you want and then save the “View” to make those widths available to all users globally.

12 thoughts on “Saving custom columns widths with SharePoint Online

      1. Tried saving the view two ways. Saved as the same name and saved as a new view name. Neither worked. No other user sees the modified column width and the column width reverts for me at the next browser session.

        Like

      2. Use of JSON formatting is what started this. The goal is to have a formatted View, or formatted column(s), where column headers align with corresponding column values. Tried both formatting the view, and formatting each column. In all cases, the column headers do not align if the width property is used in the JSON.

        This brings us back to trying to modify column widths through the browser and saving the view which does not persist despite claims it does.

        It would appear this ability to save column widths is not supported in the version of SharePoint Online for our tenant (16.0.0.19131).

        Thanks,

        Ron

        Like

  1. Thanks for creating this article and reference to JSON Column formatting, I have managed to get the Name column to display wide by default using the following JSON code.

    {
    “$schema”: “https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json”,
    “elmType”: “div”,
    “txtContent”: “@currentField”,
    “style”: {
    “width”: “100%”
    }
    }

    Like

    1. A more advanced JSON column formatting that also hyperlinks correctly:

      {
      “$schema”: “https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json”,
      “elmType”: “a”,
      “txtContent”: “@currentField”,
      “style”: {
      “width”: “100%”,
      “min-width”:”300px”
      “color”: “black”,
      “text-decoration”:”none”,
      “font-size”:”1.2em”
      },
      “attributes”: {
      “href”:{
      “operator”: “+”,
      “operands”: [
      “[$FileRef]”,
      “?web=1”
      ] }
      }
      }

      Like

      1. There were some errors I found in this. So I fixed them up

        {
        “$schema”: “https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json”,
        “elmType”: “a”,
        “txtContent”: “@currentField”,
        “style”: {
        “width”: “100%”,
        “min-width”: “300px”,
        “color”: “black”,
        “text-decoration”: “none”,
        “font-size”: “1.2em”
        },
        “attributes”: {
        “href”: {
        “operator”: “+”,
        “operands”: [
        “[$FileRef]”,
        “?web=1”
        ]
        }
        }
        }

        Like

Leave a comment