Search Field

  • 1 minute(s) read

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.

Type: STRING | Required

id="abc"

Label

The field label.

Type: STRING | Optional

label="abc"

Period Filter Enabled

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

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.

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.

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.

Type: STRING | Optional

class="my-custom-class"

Visibility Condition

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

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.

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.

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.

Type: STRING | Optional

description="abc"

Filter

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

Type: FILTER | Optional

filter="fooBarFilter"

Label

The property alternative label.

Type: STRING | Optional

label="Temperature"

Name

The property whose value must be loaded by the widget.

Type: PROPERTY | Required

name="serialNumber"

Advanced

Column CSS Class

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

Type: COLUMN_CSS | Optional

columnClass="my-column-custom-class"

Show Header

The flag indicated whether the header is visible.

Type: BOOLEAN | Optional

Default Value: true

[showHeader]="false"

Visibility Condition

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

Type: STRING | Optional

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