Period Field V2

  • 1 minute(s) read

This control widget allows selecting a period to be used by other page widgets for filtering data.

The left and right arrows allow the selected period to be moved forward and backward in time.

By clicking on the period (left button), a popup allows the user to change the period, which can be selected from predefined ones or specified manually through the calendar.

Optionally, by expanding the Specify Time accordion, the start and end time of the day can also be selected.

Template Syntax

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


<period-field-v2 selectionMode="FLATTEN" maxDaysBack="30"></period-field-v2>

Component Reference

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

Period Field V2 <period-field-v2>

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']"

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"

Advanced

Future Dates Selectable

Indicates whether the user can select dates in the future.

Type: BOOLEAN | Optional

Default Value: true

[futureDatesSelectable]="false"

Max Days Back

The maximum number of past days limiting the period start date.

Type: INTEGER | Optional

maxDaysBack="10"

Period Selection Enabled

Indicates whether the period selection is enabled.

Type: BOOLEAN | Optional

Default Value: true

[periodSelectionEnabled]="false"

Period Selection Style

The style used by the user to select the period.

Type: ENUM | Optional

Values: TOGGLE, SELECTION, FLATTEN

Default Value: FLATTEN

periodSelectionStyle="TOGGLE"

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"