Thing Grid

Prev Next

Displays a grid where each block is filled by a thing-definition specific template.

Thing Grid

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 <thing-grid-widget>

Click On Block

The flag enabling the click on single block to open its details page.

Name: clickOnBlockEnabled

Type: BOOLEAN | Optional

[clickOnBlockEnabled]="true"

Hide When Empty

The flag indicating whether the widget is hidden when empty.

Name: hideWhenEmpty

Type: BOOLEAN | Optional

[hideWhenEmpty]="true"

Id

The id used by other page widgets to listening on the things selection through the 'queryFieldRef' input.

Name: id

Type: STRING | Optional

id="abc"

Initial Sorting

The array of property names and criteria to use for sorting (e.g. ['name','asc','serialNumber','desc']).

Name: sort

Type: SORT_PROPERTIES | 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).

Name: multipleSelection

Type: BOOLEAN | Optional

[multipleSelection]="true"

Template

The name of the thing-definition template to display for each thing.

Name: template

Type: STRING | Required

template="abc"

Title

The title displayed on the top part of the widget box.

Name: title

Type: STRING | Optional

[title]="'Details'"

Advanced

Container CSS Class

The CSS class applied to grid container element (default is 'd-flex align-items-stretch flex-wrap').

Name: containerClass

Type: STRING | Optional

containerClass="abc"

Element CSS Class

The CSS class applied to each grid element (default is 'm-2 flex-grow-1').

Name: elementClass

Type: STRING | Optional

elementClass="abc"

Rendering

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"