Displays a grid where each block is filled by a thing-definition specific template.
Design View
In the visual editor, you can find the Thing Grid icon 
Code View
Template Syntax
Below you can find some examples of how to use the component within a template.
<thing-grid-widget template="small-details" elementClass="grid-element-container m-2"></thing-grid-widget>
Component Reference
Here is a comprehensive list of all the elements and properties that can be used to configure the component.
| <thing-grid-widget> | |
|---|---|
| PROPERTIES | |
| Click On Block | The flag enabling the click on single block to open its details page.
Type: BOOLEAN | Optional | Values: true false [clickOnBlockEnabled]="true" |
| Container CSS Class | The CSS class applied to grid container element (default is 'd-flex align-items-stretch flex-wrap').
Type: STRING | Optional containerClass="fooBar" |
| CSS Class | The name(s) of the CSS class used to customize the widget layout.
Type: STRING | Optional class="my-custom-class" |
| Element CSS Class | The CSS class applied to each grid element (default is 'm-2 flex-grow-1').
Type: STRING | Optional elementClass="fooBar" |
| Hide When Empty | The flag indicating whether the widget is hidden when empty.
Type: BOOLEAN | Optional | Values: true false [hideWhenEmpty]="true" |
| Id | The id used by other page widgets to listening on the things selection through the 'queryFieldRef' input.
Type: STRING | Optional id="fooBar" |
| Initial Sorting | The array of property names and criteria to use for sorting (default ['thingDefinitionId','asc','name','asc']).
Type: JSON | Optional [sort]="['name','asc','serialNumber','desc']" |
| Multiple Section Enabled | The flag indicating whether more than one thing can be selected; if so, an id must also be specified (e.g., selected-things-1).
Type: BOOLEAN | Optional | Values: true false [multipleSelection]="true" |
| Template | The name of the thing-definition template to display for each thing.
Type: STRING | Mandatory template="fooBar" |
| 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.