Search Field

  • 2 minute(s) read
Prev Next

This field provides the generic search input, which can be customized by defining the search inputs.

Search Field

Template Syntax

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


<search-field searchTarget="THINGS" id="query-1">
   <search-input type="ADVANCED"></search-input>
   <search-input type="KEY"></search-input>
   <search-input type="PROPERTY" property="property.size"></search-input>
   <search-input type="CLEAR"></search-input>
</search-field>

Component Reference

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

Search Field <search-field>

Id

The id used by other page widgets to retrieve the query, and update the data in case the query is changed.

Name: id

Type: STRING | Required

id="abc"

Label

The field label.

Name: label

Type: STRING | Optional

label="abc"

Period Filter Enabled

The boolean flag indicating whether the embedded period filter is available.

Name: periodFilterEnabled

Type: BOOLEAN | Optional

Default Value: true

[periodFilterEnabled]="false"

Query

The array of conditions filtering out items. For instance: [query]='[{'property': 'connectionStatus', 'predicate': 'eq', 'value': '1'}]'  Predicates: eq, beginsWith, like, notLike, isEmpty, isNotEmpty, gt, gte, lt, lte.

Name: query

Type: QUERY | Optional

Predicates: beginsWith, eq, neq, gt, gte, isEmpty, isNotEmpty, lt, lte, like, notLike

[query]="[{property:'prop1', predicate: 'eq', value: 'foo'}, {property:'prop2', predicate: 'in', value: ['bar', 'baz']}]"

Search Target

The objects to be researched. The advanced search UI depends on the selected target.

Name: searchTarget

Type: ENUM | Required

Values: THINGS, LOCATIONS, CUSTOMERS, PARTNERS, ACTIONS, ACTIVE_ALERTS, HISTORICAL_ALERTS, ACTIVE_EVENTS, HISTORICAL_EVENTS, ACTIVE_WORK_SESSIONS, HISTORICAL_WORK_SESSIONS

Default Value: THINGS

searchTarget="THINGS"

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"

Sub Elements

Search Input

The sub-element used to customize the search UI.

Selection Input

The sub-element allowing to select specific things one-to-one.

Search Input <search-input>

Input Type

The type of input to be displayed as part of the search field.

Name: type

Type: ENUM | Required

Values: ADVANCED, KEY, PROPERTY, CLEAR

type="ADVANCED"

Name

The property for which to show the search field inline. It can only be used for input of type PROPERTY.

Name: property

Type: PROPERTY | Required

property="serialNumber"

Selection Input <selection-input>

Sub Elements

Property

The property to be displayed as table column in the selection dialog.

Property <property>

Description

The property description.

Name: description

Type: STRING | Optional

description="abc"

Filter

The name of the filter used to transform and display values.

Name: filter

Type: FILTER | Optional

filter="fooBarFilter"

Label

The property alternative label.

Name: label

Type: STRING | Optional

label="Temperature"

Name

The property whose value must be loaded by the widget.

Name: name

Type: PROPERTY | Required

name="serialNumber"

Advanced

Column CSS Class

The name(s) of the column CSS class used to customize the table column.

Name: columnClass

Type: COLUMN_CSS | Optional

columnClass="my-column-custom-class"

Show Header

The flag indicated whether the header is visible.

Name: showHeader

Type: BOOLEAN | Optional

Default Value: true

[showHeader]="false"

Visibility Condition

The expression that allows you to reduce the visibility of the element.

Name: *ngIf

Type: STRING | Optional

*ngIf="getUser().organizationId != null"