---
title: "Grouped Thing List"
slug: "grouped-thing-list-widget"
updated: 2026-04-17T07:25:17Z
published: 2026-04-17T07:25:17Z
canonical: "learn.servitly.com/grouped-thing-list-widget"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://learn.servitly.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Grouped Thing List

Displays a list of things grouped by a thing property.

![Grouped Thing List](https://components-manager.servitly.com/components/GroupedThingList_1/IMAGES/_screenshot?owner=AG_Servitly)

This widget to work requires other than selecting the property used for grouping things, also defining the template used to render each group when expanded within the list by clicking on it.

## Template Syntax

Below you can find some examples of how to use the component within a template.

Thing list grouped by thing-definition name.

```xml

            <grouped-thing-list-widget groupingProperty="thingDefinition.name"
            template="things_group"
            groupLabel="Model"
            class="flex-fill">

            </grouped-thing-list-widget>
        
```

Templates referenced by the grouped-thing-list.

```xml

            <thing-list-widget-v2 [query]="${GROUP_QUERY}" class="flex-fill" [controlsEnabled]="true">

            <property name="name"></property>
            <property name="serialNumber"></property>
            <property name="connectionStatus" filter="connectionStatus"></property>

            </thing-list-widget-v2>
        
```

## Component Reference

Here is a comprehensive list of all the elements and properties that can be used to configure the component.

#### Grouped Thing List `&lt;grouped-thing-list-widget&gt;`

| *Group Label* | The optional label associated to the group name. **Name**: groupLabel **Type**: STRING \| Optional `groupLabel="Set"` |
| --- | --- |
| *Grouping Property* | The property used to group things. **Name**: groupingProperty **Type**: PROPERTY \| Required `groupingProperty="thingDefinition.name"` |
| *Template* | The name of the template used to render the content of the group. **Name**: template **Type**: STRING \| Required `template="group_thing_list"` |
| *Title* | The title displayed on the top part of the widget box. **Name**: title **Type**: STRING \| Optional `[title]="'Grouped Things'"` |
| **Rendering** |
| *Availability* | Configure availability based on active features on Digital Plan on Add-ons **Name**: hasFeature **Type**: FEATURE (multiple) \| Optional `[hasFeature]="['feature_a', 'feature_b']"` |
| *CSS Class* | The name(s) of the CSS class used to customize the widget layout. **Name**: class **Type**: STRING \| Optional `class="my-custom-class"` |
| *Visibility Condition* | The expression that allows you to reduce the visibility of the element. **Name**: *ngIf **Type**: STRING \| Optional `*ngIf="getUser().organizationId != null"` |

## Full Syntax Example

```xml

<grouped-thing-list-widget    
    [title]="'Grouped Things'"
    groupingProperty="thingDefinition.name"
    groupLabel="Set"
    template="group_thing_list"
    class="my-custom-class"
    *ngIf="getUser().organizationId != null"
    hasFeature="['feature_a', 'feature_b']">
</grouped-thing-list-widget>
```