SharePoint Document User Experience Cheat Codes

Tired of users endlessly clicking around to find the right file in your SharePoint document library? In this post, I’ll show you how to completely transform your document library UX using JSON view formatting to display files as beautifully styled cards—complete with previews, metadata, and quick action buttons.

No hidden menus. No guesswork. Just clean, intuitive design that makes SharePoint feel like a modern document experience.

🧱 Step 1: Create the Document Library

Start by creating a new document library (or use an existing one). Add the following columns:

• Document Description (Multiple lines of text)

• Document Type (Choice: e.g. Resource, Recipe)

• Download (Text – used as placeholder for JSON)

• View (Text – another placeholder for JSON)

📌 The "Download" and "View" columns won’t be shown to users—they’re there to mark where buttons will go in the code.

📄 Step 2: Add Sample Content

Upload some files and add metadata using Edit in grid view to quickly fill in:

• Descriptions

• Document types (e.g. Resource, Recipe)

You can hide the Download and View columns once you've finished setup.

🎨 Step 3: Create a Gallery View

1. Click All Documents > Create new view

2. Name it “Gallery” and select Gallery layout

3. Go to Format current view > Document card designer

4. Drag your fields (Document Type, Title, Description) into position

5. Leave the Download and View fields where they are—these are your placeholders for buttons

Click Save, then switch to Advanced Mode to start editing the JSON.

💻 Step 4: Add Custom Download and Open Buttons

In the JSON code:

1. Find the Download placeholder

2. Navigate up to the wrapping div element

3. Replace that section with JSON code for a styled Download button

Repeat the same for View, replacing it with an Open button.

🎯 The buttons:

• Match your site theme automatically

• Use Microsoft’s Fluent UI icons (like Download, View)

• Have one-click actions: download or open in new tab

🧠 Bonus: Use customRowAction to remove default click behavior—ensuring users only interact via buttons.

Download Button JSON:

 {
            "elmType": "button",
            "style": {
              "border-radius": "5px",
              "margin": "5px 15px",
              "padding": "10px 0px",
              "border": "none",
              "cursor": "pointer"
            },
            "attributes": {
              "class": "ms-bgColor-themePrimary"
            },
            "children": [
              {
                "elmType": "a",
                "style": {
                  "text-decoration": "none"
                },
                "attributes": {
                  "target": "_blank",
                  "href": "=@currentWeb+'/_layouts/15/download.aspx?sourceurl='+[$FileRef]",
                  "class": "ms-fontColor-white ms-fontSize-m"
                },
                "children": [
                  {
                    "elmType": "span",
                    "style": {
                      "display": "inline-block",
                      "padding": "0 4px"
                    },
                    "attributes": {
                      "iconName": "Download"
                    }
                  },
                  {
                    "elmType": "span",
                    "txtContent": "Download"
                  }
                ]
              }
            ]
          },

View Button JSON:

 {
            "elmType": "button",
            "customRowAction": {
              "action": "defaultClick"
            },
            "style": {
              "border-radius": "5px",
              "margin": "5px 15px",
              "padding": "10px 0px",
              "border": "none",
              "cursor": "pointer"
            },
            "attributes": {
              "class": "ms-bgColor-themePrimary ms-fontColor-white ms-fontSize-m"
            },
            "children": [
              {
                "elmType": "span",
                "style": {
                  "display": "inline-block",
                  "padding": "0 4px",
                  "cursor": "pointer"
                },
                "attributes": {
                  "iconName": "View"
                }
              },
              {
                "elmType": "span",
                "txtContent": "Open"
              }
            ]
          }

✨ Step 5: Improve Readability with JSON Styling Tweaks

To avoid text getting cut off:

• Add JSON to enable word wrapping and break long words

• Increase height of cards to fit longer titles and descriptions

• Remove default click behavior on the card to avoid confusing UX

• Hide the selection highlight using hideSelection: true

🔧 Adjust values like height: 520px and lineClamp: 5 to fine-tune layout.

📃 Step 6: Embed Your Library on a SharePoint Page

1. Create a new page and add a header (optional: add visuals like animated GIFs or backgrounds)

2. Add your formatted library web part

3. Set it to the new Gallery view

4. Hide command bar, titles, and “See all” buttons for a cleaner layout

🎨 Want extra flair? Add themed backgrounds, headers, and spacers for visual impact.

🔄 Optional: Add Dynamic Filtering

Want to filter your documents by category (e.g. Resource vs Recipe)?

1. Create a separate list with filter options

2. Use Gallery View and format buttons with JSON

3. Add it to your page next to your document library

4. Use Dynamic Filtering to connect the two lists

💡 Ensure filter values match your document metadata exactly.

🚀 Final Result

You’ll end up with:

• Clean, browsable document cards

• Quick download/open buttons

• Metadata and preview info upfront

• Optional filtering for better navigation

Perfect for:

• Intranet Resource Hubs

• Department Libraries

• Training & Policy Repositories

Once built, you can reuse the view JSON across libraries, saving time and keeping a consistent, modern design.

🎥 Watch the Full Walkthrough

Want to see it step by step? In the video, I build it all—cards, buttons, filtering, design touches—and share all the code you’ll need.