SharePoint List Formatting
Back to view formats
View formattingSharePoint Online

Grouped FAQs

This sample uses standard group rendering to provide a list of expandable questions.

Get this format View on GitHub

Shared by Chris Kent, Steve Corey
Updated Aug 11, 2025

Grouped FAQs formatting preview
Sample preview · View original image

Copy. Apply. Make it yours.

Get this format

2 definitions

Review the requirements below, then paste this JSON into the matching formatting panel. Show me where.

Use your list's internal column names and replace any tenant-specific URLs or flow IDs. Formatting is presentation, not a way to secure data.

View formatting
Download JSON
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideColumnHeader": true,
  "hideSelection": true,
  "groupProps": {
    "headerFormatter": {
      "elmType": "div",
      "txtContent": "@group.fieldData",
      "attributes": {
        "class": "sp-row-title ms-fontSize-xl"
      }
    }
  },
  "additionalRowClass": "ms-font-l ms-fontColor-neutralPrimary ms-bgColor-white--hover",
  "rowFormatter": {
    "elmType": "div",
    "children": [
      {
        "elmType": "div",
        "style": {
          "margin": "10px 30px"
        },
        "txtContent": "[$Answer]"
      }
    ]
  }
}
View sourceLink to this definitionfaq-grouped-full-width-answer.json
Schema compatibility review notes

This historical definition differs from the pinned Microsoft schema. This may indicate an unsupported pattern or a schema limitation. Check the original requirements and test in your tenant before use.

  • /additionalRowClass must be object

From the contributor

How to use this sample

Summary

This sample uses standard group rendering to provide a list of expandable questions. By default, when grouping by a column the column name and the count of grouped items will be included in the group name. This format provides some small tweaks to the group header to only show the value (question in this case). By also hiding the column header and item selection, this format acts like a mini application and could easily be added to a page using the list web part.

screenshot of the sample

This sample includes two variations: the original faq-grouped.json and faq-grouped-full-width-answer.json.

  • faq-grouped.json – Applies formatting only to the group header. The width of the answer depends on the column width.
  • faq-grouped-full-width-answer.json – Also includes a rowFormatter to style the entire row, allowing the answer to span the full width of the page. However, only the Answer column is shown; other columns are not displayed.

View requirements

Type Internal Name Required
Single line of text Title Yes
Multiple line of text Answer Yes

In this case, the Title column has been renamed to Question (though it doesn't make any difference to the format). The view is grouped by the Question (Title) column and then the Question column has been removed from display (so that the value doesn't repeat alongside the answer).

FAQs - Stands for Frequently Asked Questions

Sample

Solution Author(s)
faq-grouped.json Chris Kent
faq-grouped-full-width-answer.json Steve Corey

Version history

Version Date Comments
1.0 April 15, 2022 Initial release
1.1 August 11, 2025 Added faq-grouped-full-width-answer.json

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

Keep exploring

More formats like this

Picture Link Tiles - Collapsible

Creates a card-style tile view in a SharePoint list with expand and collapse functionality.

Explore format

Picture Link Tiles Doc Lib

Creates a card-style tile view in a SharePoint Document Library with file previews, badges, titles, and a footer with actions.

Explore format

Bookmarks

Creating custom bookmarks for SharePoint page.

Explore format