Support Grouped View in List Builder

The GroupedView element is now available for list builders to display rows as groups under shared headers that are based on column values. Within the ListBuilder element on page specs, the GroupedView element is available as a child element of the RenderStyle element.

A list builder sample in the Kitchen Sink was updated to demonstrate this new feature. From Kitchen Sink, just click the List builder under List builder.

On the List builder page, you can now organize the list into groups based on the Gender, Favorite color, and Favorite band columns. When you sort the list based on one of these columns, the list displays its rows in groups under headers that are based on column values. For example, when you select the Favorite band column, the list organizes its rows into groups under headers for the bands listed in that column.

On the page spec, the ListBuilder element includes the child RenderStyle element, which in turns includes its child GroupedView element, and within its child Groups element, the Group elements identify the columns that are eligible for grouping.

<Tab ID="8522b58e-8cf9-435d-9417-c1eb7b646422" Caption="Standard ListBuilder" LayoutUrl="browser/htmlforms/webshellkitchensink/listbuilder/KitchenSinkListBuilderLayout.html">
 <Sections>
  <Section ID="bed12dd7-31f7-4e64-83e9-d5584af780a1" Caption="List builder" >
    <ListBuilder QueryViewID="b902bd80-2cef-4362-acce-8f7e776439ee">
     <RequiredColumns>
      <Column Name="ID" />
      <Column Name="NAME" />
      <Column Name="FAVORITECOLOR"/>
      <Column Name="SUMMARY_NAME"/>
     </RequiredColumns>
     <RenderStyle>
      <GroupedView>
       <Groups>
        <Group ColumnName="FAVORITECOLOR" />
        <Group ColumnName="GENDER" />
        <Group ColumnName="FAVORITEBAND" />
       </Groups>

Tip: For more information about the GroupedView element for list builders, see Organize Lists into Groups. And for information about how to configure grouping in Design Mode, see Grouped View.