Period Field V1

  • 1 minute(s) read

This field allows selecting a period for data filtering.

Deprecated Widget

This page control is deprecated and no longer maintained. Use the Period Field V2 component instead.

Template Syntax

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


<period-field id="my-period" opensOption="right"></period-field>

Component Reference

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

Period Field <period-field>

Default Loading Period

The default date and time filtering period applied when entering the page.

Type: ENUM | Optional

Values: TODAY, YESTERDAY, LAST_1_HOUR, LAST_6_HOURS, LAST_12_HOURS, LAST_24_HOURS, LAST_7_DAYS, LAST_30_DAYS, THIS_MONTH, LAST_MONTH, LAST_6_MONTHS, LAST_12_MONTHS, THIS_WEEK, LAST_WEEK, LAST_FULL_7_DAYS, LAST_FULL_30_DAYS, LAST_FULL_12_MONTHS

defaultPeriodValue="TODAY"

Enabled Periods

The list of periods which can be selected from the embedded period filter.

Type: ENUM (multiple) | Optional

Values: TODAY, YESTERDAY, LAST_1_HOUR, LAST_6_HOURS, LAST_12_HOURS, LAST_24_HOURS, LAST_7_DAYS, LAST_30_DAYS, THIS_MONTH, LAST_MONTH, LAST_6_MONTHS, LAST_12_MONTHS, THIS_WEEK, LAST_WEEK, LAST_FULL_7_DAYS, LAST_FULL_30_DAYS, LAST_FULL_12_MONTHS, CUSTOM

[periods]="['TODAY', 'YESTERDAY']"

End Variable

The name of the context variable holding the selected period end date.

Type: STRING | Optional

endVariable="endTime"

Id

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

Type: STRING | Required

Default Value: period

id="abc"

Label

The field label.

Type: STRING | Optional

label="Period"

Name/

The name used by other page widgets to retrieve the selected period, and update the data in case the period is changed.

Type: STRING | Optional

DEPRECATED

Use the Id property.

name="abc"

Popup Opening Option

The position where the selection menu is opened (left, center, right [default]).

Type: ENUM | Optional

Values: left, center, right

Default Value: right

opensOption="left"

Start Variable

The name of the context variable holding the selected period start date.

Type: STRING | Optional

startVariable="startTime"

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"