The Relative Period control empowers users to refine a dataset or content based on selected time frame. Users can select a relative period from a predefined list, and add customized time. This feature enhances user experience by allowing them to focus on specific time intervals and obtain data tailored to their temporal preferences.
Add Relative Period to the form
Firstly, find the Relative Period control in the controls add panel. Then, drag and drop it into a section or container on your form.
Basic of the Relative Period field
Open the Content > Basic block and set the Title's text of this Relative Period control. For more information about Title for field control, please refer:
Set the Associated variable for this Relative Period control. When you add a new Relative Period control, a default variable will be generated automatically. You can click the Edit Button to change the name or click the Reset button to bind this Relative Period control to other existing variables. For more information, please refer:
Then, in the Apply type section. Choose on typing or click on apply button. For more details on Apply types, refer to:
Choice options of Relative Period
Below the Choice options there are 5 option which is Year, Quarter, Month,Week, Day and Hour. Each of these options is accompanied by a set of predefined choices, also, user can add new range based on their needs.
Note:
This: "Year", "Quarter", "Month","Week", "Day" or "Hour" refer to the complete time frame selected by the user, encompassing the present moment.
For example, if the current year is 2023, "this year" would include all of 2023.
Last: "Year", "Quarter", "Month","Week", "Day" or "Hour"refer to time periods preceding the current frame.
For instance, if the present year is 2023, 'Last 2 Years' would refer to 2021 and 2022, excluding the ongoing year (2023)."
Appearance of the Relative Period field
Open the Content > Appearance block to set the appearance and layout of this Relative Period control.
Layout: Set the layout of the choices to be displayed horizontal or vertical.
More/Less enabled: This feature is useful when dealing with content that can be expanded or collapsed. It allows users to reveal additional information or reduce content visibility as needed.
Dropdown enabled: This style is suitable when the list of options is long. It saves space on the form and only reveals the options when the user clicks on the dropdown.
Multiple: Support setting multiple selections.
Display Title: Choose display or hide the label of this control. For more information, please refer: Understand the title of field controls
Vertical Align: When Title Layout is set to horizontal, you can set the vertical alignment to Top, Center or Bottom.
Title Width: Set the Width for the title in PX , %, em, rem, vw, calc.
Dynamic Display Rules: When you set a dynamic display rules, it behaves differently based on specific conditions and rules.
Validation of the Relative Period field
Open the Content > Validation block to set the properties of this Relative Period control.
Readonly: Turn this ON will make this field control as view only status.
Custom Validation: Set the custom validation rules. An error message that will display under your field when specified conditions become true. It will allow you to add any number of rules for validating your field.
Action call of the Relative Period field
Open the Content > Action block to call a pre-defined action from the drop-down list. This action will be triggered once the value of this Relative Period field is changed.
Style the Relative Period control
Set the styles when the display style is set to Radio filter control.
Option items
Open the Style > Option items block to set the styles of the field control.
Space Between: Set the space between choices.
Horizontal Offset: Changes the horizontal reference point by the amount of the offset.
Gap between control and option label: Set the spacing between the Checkbox, and the text of option label.
Item width: Set the width of the choice and control size of the checkbox.
Items Alignment: Set the alignment of this Relative Period control as left, center or right.
Normal / Active / Disabled: Set different styles for normal, active and disabled state of the Relative Period control. Styles below are supported to be set separately for normal, active and disabled state.
Background Color: Set background color of the checkbox.
Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved.
Width – Set the Width of the border.
Color: Set the color of the border.
Radius: Set the border radius to control corner roundness.
Option Label: Set the style of the option label after the Radio filter control:
Typography: Set the typography options for the text of the option.
Color: Choose the text color of the option.
Background Color: Set background color of the option.
Style of title
Style the Title of field controls that are applicable to this control.
Advanced Settings
Set the Advanced options that are applicable to this control.