List Items Grouping

Items rendered in a list layout template can be grouped based on any property that can be found on the items. If the property you want to group items by is not available by default, you can configure it via additionalPropertyMappings. The groupBy property available on the ListLayoutTemplateConfig takes 2 parameters:

• groupByValue where you specify an expression that retrieves the value by which items will be grouped by
• groupByLabel which is optional. You can use this property to alter the displayed group name. Omitting this property will result in the group names to be the same as what is evaluated in groupByValue

Below you can see a sample configuration where the list items grouping is used within a Content Items Web Part:

{
  "configTypeKey": "widget_contentItems",
  "title": {
    "expression": "_mp.util.translate('myWork')"
  },
  "connectableKey": "MyWork",
  "tabs": [
    {
      "title": {
        "expression": "_mp.util.translate('documents')"
      },
      "connectableKey": "Documents",
      "searchPlaceholder": {
        "expression": "_mp.util.translate('searchInDocuments')"
      },
      "data": {
        "contentType": "Document",
        "dataSource": {
          "configTypeKey": "userDataSource_sharePointSearch",
          "rowLimit": 50,
          "propertyMappingsKey": "propertyMapper_sharePoint_search_document_simple",
          "isMyView": true,
          "additionalPropertyMappings": [
            {
              "extension": {
                "type": "'Text'",
                "value": "item.FileExtension"
              }
            }
          ]
        }
      },
      "layoutTemplate": {
        "configTypeKey": "layoutTemplate_list",
        "alternatingBackground": true,
        "groupBy": {
          "groupByValue": {
            "expression": "item.extension"
          },
          "groupByLabel": {
            "expression": "'.' + item.extension.value + ' files'"
          },
          "sortAlphabetically": true
        }
      },
      "itemTemplate": {
        "configTypeKey": "itemTemplate_simple",
        "imageWidth": "2.5rem",
        "imageDisplayMode": "Round"
      },
      "showSearch": true,
      "showPreview": false,
      "actions": [
        {
          "configTypeKey": "widget_components_viewAllActionButton",
          "accentAction": false,
          "title": {
            "expression": "_mp.util.translate('viewAll')"
          },
          "showSourceButton": false,
          "actionKey": "action_viewAll"
        }
      ]
    }
  ]
}