Make Long SharePoint List Text Scannable with JSON

A SharePoint list can become almost unusable when one Notes, Description or Biography column makes every row several screens high.

The quick fix is not to delete the text. Keep the full value in the item, show a compact preview in the view, and let the reader open the complete text deliberately.

SharePoint column formatting is built for this. It changes how a field is displayed; it does not change the stored list data.

The formatter below works on the column it is applied to. You do not need to replace a hard-coded internal column name.

First try the no-code fixes

JSON is useful, but it should not compensate for a view that is trying to show everything to everybody.

Before formatting, check whether you can:

• reduce the column width;
• remove the long-text column from the default scanning view;
• create a separate detail or review view;
• filter the view to active items;
• group by Status, Owner or Category; or
• use a Gallery view when cards fit the work better than rows.

Keep the long-text column in the item form even when it is hidden from the compact view. The list view is for finding the right record; the form is for reading and editing the whole record.

Microsoft documents view formatting separately from column formatting. Use column formatting for one field. Use view formatting when the complete row or gallery card needs a different layout.

Option 1: truncate the display to one line

Use this when people normally need only the first part of the value and can open the item form for the rest.

1. Open the list.
2. Open the long-text column menu.
3. Select Column settings > Format this column.
4. Select Advanced mode.
5. Back up any existing formatter.
6. Paste the JSON below.
7. Select Preview, test it, then Save.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "max-width": "360px",
    "overflow": "hidden",
    "text-overflow": "ellipsis",
    "white-space": "nowrap"
  },
  "txtContent": "=if(@currentField == '', '—', @currentField)"
}

This is the lowest-risk formatter in the article. The full value remains in SharePoint and appears when the item is opened.

Option 2: compact preview plus a click-to-open card

Use this when readers need to inspect the full text without leaving the list.

Paste this into Advanced mode for the long-text column:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "flex",
    "align-items": "center",
    "gap": "8px",
    "min-height": "32px",
    "max-width": "520px"
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "display": "block",
        "flex-grow": "1",
        "min-width": "0",
        "overflow": "hidden",
        "text-overflow": "ellipsis",
        "white-space": "nowrap"
      },
      "txtContent": "=if(@currentField == '', '—', @currentField)"
    },
    {
      "elmType": "button",
      "attributes": {
        "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover",
        "title": "Show full text"
      },
      "style": {
        "display": "=if(@currentField == '', 'none', 'inline-flex')",
        "align-items": "center",
        "border": "none",
        "background-color": "transparent",
        "cursor": "pointer",
        "padding": "4px 6px",
        "white-space": "nowrap"
      },
      "txtContent": "Show details",
      "customCardProps": {
        "formatter": {
          "elmType": "div",
          "style": {
            "width": "420px",
            "max-height": "320px",
            "overflow-y": "auto",
            "padding": "12px",
            "white-space": "pre-wrap",
            "word-break": "break-word"
          },
          "children": [
            {
              "elmType": "div",
              "attributes": {
                "class": "ms-fontWeight-semibold"
              },
              "style": {
                "margin-bottom": "8px"
              },
              "txtContent": "Full text"
            },
            {
              "elmType": "div",
              "txtContent": "@currentField"
            }
          ]
        },
        "openOnEvent": "click",
        "directionalHint": "bottomCenter",
        "isBeakVisible": true
      }
    }
  ]
}

Microsoft's current formatting syntax reference documents customCardProps and supports opening the card on click or hover.

Click is the better default here. A large hover card can keep opening while somebody moves the pointer across a dense list. A visible Show details button also tells the user that an action is available.

Why this JSON is portable

The formatter uses @currentField, which means “the value in the column being formatted”.

You can apply it to Description, Notes, Biography or another text column without changing [$Abstract] to the column's internal name.

That does not make it universal. Test the actual column type:

• Single line of text: suitable.
• Multiple lines of plain text: suitable; the card's white-space: pre-wrap keeps line breaks.
• Rich text/enhanced rich text: test carefully. Markup, embedded content and editing behaviour may not translate cleanly through txtContent; opening the item form is often safer.
• Append changes to existing text: the current displayed value and version history are different concerns. Do not assume a formatter exposes the complete append history.

Column formatting does not change permissions, retention, versions or the stored text.

Make it accessible

Formatting should improve the list for keyboard and assistive-technology users, not only mouse users.

The example uses a real button element with visible text, so the control can receive focus and communicates its purpose. During acceptance testing:

1. Tab through the row and confirm Show details receives focus.
2. Activate it with the keyboard.
3. Confirm the card content is readable at 200% zoom.
4. Test with the screen reader used by your organisation.
5. Confirm the row still makes sense if custom formatting is removed.

Avoid using colour alone to communicate status. Avoid replacing readable text with an icon that has no visible or accessible name.

Give different jobs different views

One list can have several views:

• Triage: title, status, owner and a compact description.
• Editorial review: longer preview, reviewer and decision fields.
• Operations: due dates, exceptions and next action.
• Archive: completed records with fewer operational columns.

This is usually better than one enormous view with 25 columns. Views do not create copies of the data; they present the same items for a particular job.

If a list is also shown in Teams, Microsoft Lists or a mobile client, test the formatter in that surface. A desktop browser preview is not proof that the card is comfortable on a narrow screen.

Safe deployment and rollback

Treat JSON as configuration:

1. Copy the existing formatter into version-controlled documentation before replacing it.
2. Apply the new formatter to a test column or test list first.
3. Test blank, short, long, multi-paragraph and special-character values.
4. Test an ordinary user with the real view permissions.
5. Check desktop, mobile and any Teams-embedded route.
6. Remove the formatter or restore the previous JSON if the experience fails.

The rollback is simple because formatting does not alter the stored data. Removing the formatter returns the field to its default rendering.

Common problems

SharePoint rejects the JSON

Make sure the code contains straight quotation marks ("), not typographic quotes copied from a document. Paste the complete object into Advanced mode. The built-in editor provides validation and autocomplete for the schema.

The card is empty

Confirm the formatter is applied directly to the long-text column and that the current item contains a value. This version uses @currentField; it does not read a different column.

The list is still too tall

Another visible column may allow multiple lines or images. Apply a compact formatter there, reduce the width, remove it from the scanning view or create a role-specific view.

Users can read the card but cannot edit

That is expected. Column formatting changes display, not edit permissions or the item form. Use the normal item form or an approved Power Apps form for editing.

The formatter disappeared from another view

Check that the column is included in that view and whether the view has its own formatting/layout. Export or document the JSON so an owner can restore it after view changes.

A better definition of done

The list is not fixed merely because the JSON saved.

It is fixed when:

• a user can scan enough rows to find the right item;
• blank and long values remain understandable;
• the full text is available without exposing extra data;
• keyboard and zoom tests pass;
• the item remains editable through a supported form;
• the behaviour works in the clients the team uses; and
• an owner knows how to restore the previous formatting.

For more practical SharePoint designs that remain usable after launch, join the Teams, SharePoint & Intranet Mastery Space.

Frequently asked questions

Does SharePoint column-formatting JSON change the stored text?

No. Column formatting changes how a field is displayed in the list view. It does not change the value stored in the item.

Do I need to replace a column name in this JSON?

No. These examples use @currentField, so apply the formatter directly to the long-text column. Test the column type and content before production.

Can the full text open when a user clicks?

Yes. customCardProps supports openOnEvent: "click". The example uses a visible Show details button and a scrollable custom card.

Will this work with rich-text columns?

Test first. Plain text works cleanly. Rich HTML, embedded content or appended history may not render as expected through txtContent; opening the item form can be safer.

How do I undo the formatter?

Restore the JSON you backed up or remove the custom formatting to return to SharePoint's default field rendering. The underlying list data is unchanged.