Displays a list of things grouped by a thing property.
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.
code_blocksDesign View
In the template editor, you can find the Grouped Thing List icon 
code_blocksCode View
Template Syntax
Below you can find some examples of how to use the component within a template.
Thing list grouped by thing-definition name.
<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.
<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 <grouped-thing-list-widget> | |
|---|---|
| PROPERTIES | |
| CSS Class | The name(s) of the CSS class used to customize the widget layout. Type: STRING | Optional class="my-custom-class" |
| Group Label | The optional label associated to the group name. Type: STRING | Optional groupLabel="Set" |
| Grouping Property | The property used to group things. Type: PROPERTY | Required groupingProperty="thingDefinition.name" |
| Template | The name of the template used to render the content of the group. Type: STRING | Required template="group_thing_list" |
| Title | The title displayed on the top part of the widget box. Type: STRING | Optional [title]="'Details'" |
| Visibility Condition | The expression that allows you to reduce the visibility of the element. Type: STRING | Optional *ngIf="getUser().organizationId != null" |
Comments
0 comments
Please sign in to leave a comment.