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.
Configuration
code_blocksDesign View
In the template editor, you can find the Period Field V2 icon 
code_blocksCode View
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> | |
|---|---|
| PROPERTIES | |
| CSS Class | The name(s) of the CSS class used to customize the widget layout. Type: STRING | Optional class="my-custom-class" |
| 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_4_HOURS 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="LAST_7_DAYS" |
| Enabled Periods | The list of periods which can be selected from the embedded period filter. Type: ENUM_ARRAY | Optional | Values: TODAY YESTERDAY LAST_1_HOUR LAST_4_HOURS 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 [periods]="['V1', 'V2', 'VN']" |
| Future Dates Selectable | Indicates whether the user can select dates in the future. Type: BOOLEAN | Optional | Values: true false [futureDatesSelectable]="false" |
| 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: period id="fooBar" |
| Label | The field label. Type: STRING | Optional label="Period" |
| 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 | Values: true false [periodSelectionEnabled]="false" |
| Period Selection Style | The style used by the user to select the period. Type: ENUM | Optional | Values: TOGGLE SELECTION FLATTEN periodSelectionStyle="SELECTION" |
| Visibility Condition | The expression that allows you to reduce the visibility of the element. Type: STRING | Optional *ngIf="getUser().organizationId != null" |
Comments
0 comments
Please sign in to leave a comment.