Join

SharePoint List Dynamic Filtering DONE RIGHT (Thanks to ChatGPT)

    Dynamic list filtering in SharePoint Online has always sounded great on paper—but in practice? Not so much. Clunky UX, users clicking the wrong links, and poor control made it more pain than power. Until now.

    In this post, I’ll show you a completely revamped way to use dynamic list filtering that actually works. It's sleek, user-friendly, and yes—powered in part by ChatGPT to simplify all the JSON view formatting.

    👎 Why Standard Dynamic Filtering Disappoints

    SharePoint lets you dynamically filter one list using another—but the out-of-the-box setup is… underwhelming:

    • Too many clickable elements

    • Confusing navigation (click the wrong thing, and users are lost)

    • Visual noise from columns and headers

    The concept is powerful, but the default execution doesn’t deliver a great intranet experience.

    🍔 Inspiration: McDonald’s Menu UX

    To reimagine how filtering should work, I looked at the McDonald's menu interface. It presents filters (e.g., burgers, fries, drinks) on the left and clean, clickable product cards on the right. Simple. Intuitive. Effective.

    So I rebuilt it in SharePoint. And it worked.

    🧱 What You’ll Need

    This solution uses only native SharePoint features:

    • Two SharePoint lists:

      • Filter list (e.g., categories like "Burgers", "Fries")

      • Primary list (e.g., products with category metadata)

    • Gallery view formatting (JSON)

    • ChatGPT for writing and refining that JSON

    No admin center access required. If you're a site member, you can build this yourself.

    🔄 Step 1: Understand How Dynamic Filtering Works

    Place both lists on the same SharePoint page. Then:

    1. Edit the primary list web part

    2. Enable Dynamic Filtering

    3. Set the filter logic:

      • Choose the filter column (e.g., “Category”)

      • Select the list to filter from

      • Match the column name (e.g., “Title”)

    📌 Both lists must use matching values (e.g., “Fries” in both lists).

    ✍️ Step 2: Format the Filter List as a Clickable Sidebar

    Create a new Gallery View on your filter list. Use the built-in designer to:

    • Hide column headers

    • Show only image and title

    Then use Advanced Mode to export the JSON code.

    Use ChatGPT to Help

    Prompt example:

    “Help me format a SharePoint Online gallery view using this JSON. I want the image on the left and the title on the right, with spacing and no borders.”

    Keep refining until the sidebar looks clean, compact, and non-clickable (other than its filter effect).

    🔧 Bonus: Turn off list item selection and interaction in JSON to prevent accidental navigation.

    🍟 Step 3: Format the Primary List as Beautiful Product Cards

    Now format the primary list (e.g., menu items) into a gallery view:

    • Title

    • Thumbnail image

    • “Learn More” button

    Again, use the default designer for a base, then switch to JSON mode.

    ChatGPT prompt example:

    “I want to format a gallery view with the image at the top, title centered, and a red bold ‘Learn More’ link beneath it.”

    🎯 Key: Remove all interaction except your call to action (like “Learn More”) using the customRowAction and hideSelection JSON settings.

    ⚙️ Final Step: Connect the Two Lists

    Once both lists are styled and embedded:

    1. Edit the page

    2. Click the primary list web part

    3. Turn on Dynamic Filtering

    4. Match the fields (e.g., "Food Type" = "Title")

    🎉 Done! Now when someone clicks "Burgers", the list shows only burgers—with no accidental link clicks or weird detours.

    💡 Why This Is So Much Better

    ✅ Cleaner UX (users can’t accidentally open list items) ✅ Looks like a custom-built app ✅ Call-to-action is 100% under your control ✅ 100% no-code (thanks to ChatGPT)

    This method transforms the SharePoint list experience from clunky to slick—ideal for intranet pages that need filtering and navigation without chaos.

    🤖 ChatGPT: Your Secret JSON Weapon

    Don’t let JSON scare you. With ChatGPT, formatting SharePoint views becomes:

    • Fast

    • Easy to iterate

    • Fun (yes, fun)

    It’s all about asking clearly, pasting your base JSON, and refining one step at a time.

    🎯 Final Thoughts

    This approach changes how dynamic filtering in SharePoint Online should be done:

    • Great for menus, product catalogs, team directories, and more

    • Works in any modern site—no developer required

    • Fully tailored user journey

    Try it out, play with the JSON, and make it your own. With a little persistence and a few ChatGPT prompts, you can create SharePoint experiences that look and feel amazing.

    🎥 Watch the Full Walkthrough

    Want to see how it all came together? I build the full example (including McDonald’s-style UX) step-by-step in the video.