Truncate “Multiple lines of text” column in Sharepoint Online list

3
votes

I'm stuck on a particular scenario right now because of a recent change by Microsoft in Office 365 regarding the "Multiple lines of text" column in a Sharepoint list.

My main goal is to truncate this column. If this column will have a lot of characters in it, it'll eat up the display page because it can have up to 60k characters.

I'm looking to limit the rows of this column on the list page into like 5rows only and then add a see more button if possible?

I've found this article about formatting a column in sharepoint list using JSON. https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting

I've seen that you can put the column into a div using this script but I'm just wondering if I'll be able to limit the rows of this column using JSON?

{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "div", "txtContent": "@currentField" }

3
javascripthtmljsonsharepointsharepoint-online
Please upvote to 100 so Microsoft can fix that new feature sharepoint.uservoice.com/forums/329214-sites-and-collaboration/… – Marko Tica
I'm the one who submitted that suggestion though – Richard Yu

3 Answers

2
votes

"Yes" to the limiting to a certain number of lines of text, but "No" to the "see more" button, at least within the capabilities of JSON Formatting.

You can limit the number of lines display with an ellipses ("...") by adding line-clamp CSS styles to your div. Note the value of -webkit-line-clamp is the number of lines you want to display.

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
   "elmType": "div",
   "style": {
          "display": "-webkit-box",
          "-webkit-line-clamp": 3,
          "-webkit-box-orient": "vertical",
          "overflow": "hidden"
   },
   "txtContent": "@currentField"
}

However, you cannot embed JavaScript in a JSON column formatter, so if you want a "see more" button that can toggle display the rest of the text, you will need to build a custom-coded SharePoint Framework (SPFx) Field Extension.

2
votes

SharePoint list View formatting only allows a subset of css. Notice that there are no styles with "-webkit-" prefix. Refer to the documentation here - https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting#style

View formatting expressions should be enough. You'll have to ensure that the Multi-line field is configured as a plain text or rich but not enhanced (View formatting doesn't support this yet). I have used the below expression against Multi-line plain text field.

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
   "elmType": "div",
   "txtContent": "=substring(@currentField, 0, 140) + '...'"
}
0
votes

I'm also stuck with huge custom controls, inject JS, etc figure out that for me this fulfill my needs with small effort

"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
   "elmType": "div",
   "style": {
          "display": "-webkit-box",
          "overflow": "auto",
          "max-height":"2em"
   },
   "txtContent": "@currentField"
}

row is small enough, value isn't lost, and I can scroll or select all and paste somewhere to read all