Difference between revisions of "NF10 Date Range Component"
(Initial version) Tag: visualeditor |
CarlosRuiz (talk | contribs) m |
||
| (7 intermediate revisions by 4 users not shown) | |||
| Line 8: | Line 8: | ||
'''Improvement''' | '''Improvement''' | ||
| − | This feature | + | This feature introduces a new UI component that allows the user to select date ranges more effectively. The component can be used in various parts of the system. Mainly: windows, report and process, forms, info windows.- also custom modules as Dashboard Filter. (upcoming in next releases) |
| − | Mainly: | + | |
| + | '''Implementations in system modules''' | ||
| + | |||
| + | '''Implementation - Process/Report''' | ||
| + | [[File:Screencast for date range picker.gif|none|thumb|1000x1000px|alt=|When Range is enabled, on process parameter, then new icon appear, allow select range with new range component]] | ||
| + | |||
| + | |||
| + | '''Implementation - Window Lookup Record/Advanced Tab''' | ||
| + | [[File:Window-range.gif|none|thumb|1000x1000px|alt=|When use click on Date to on Lookup, or Select Advanced Search Between operator, allow select range with new range component]] | ||
| + | |||
| + | '''Implementation for Info Window''' | ||
| + | [[File:Infowindow-daterange.gif|none|thumb|1000x1000px|When 2 date fields added automatically Date Range detected, and Date Range Component appear.]] | ||
| + | |||
| Line 22: | Line 34: | ||
'''''Current''' (default) - allow select full ranges of Day, Week, Month, Year'' | '''''Current''' (default) - allow select full ranges of Day, Week, Month, Year'' | ||
| + | |||
[[File:Date-range-current.png|none|thumb|Allow select Current: Day, Week, Month, Quarter, Year]] | [[File:Date-range-current.png|none|thumb|Allow select Current: Day, Week, Month, Quarter, Year]] | ||
| + | |||
'''Previous''' N / Day, Week, Month, Quarter, Year (range) - starts with previous period (excl. actual) | '''Previous''' N / Day, Week, Month, Quarter, Year (range) - starts with previous period (excl. actual) | ||
| + | |||
[[File:Date-range-previous.png|none|thumb|Illustrates, how the user able to select '''previous''' period]] | [[File:Date-range-previous.png|none|thumb|Illustrates, how the user able to select '''previous''' period]] | ||
'''Next''' N / Day, Week, Month, Quarter, Year (range) - starts with previous period (excl. actual) | '''Next''' N / Day, Week, Month, Quarter, Year (range) - starts with previous period (excl. actual) | ||
| + | |||
[[File:Date-range-next.png|none|thumb|Illustrates, how the user able to select future period]] | [[File:Date-range-next.png|none|thumb|Illustrates, how the user able to select future period]] | ||
| + | |||
'''Before''' a specific date | '''Before''' a specific date | ||
| + | |||
[[File:Date-range-before.png|none|thumb|Illustrates, how the user able to select a period before selected date.]] | [[File:Date-range-before.png|none|thumb|Illustrates, how the user able to select a period before selected date.]] | ||
| + | |||
'''After''' a specific date | '''After''' a specific date | ||
| + | |||
[[File:Date-range-after.png|none|thumb|Illustrates, how the user able to select a period after selected date.]] | [[File:Date-range-after.png|none|thumb|Illustrates, how the user able to select a period after selected date.]] | ||
| + | |||
'''ON''' exact date | '''ON''' exact date | ||
| + | |||
[[File:Date-range-on.png|none|thumb|Illustrates, how the user able to select a period On selected date.]] | [[File:Date-range-on.png|none|thumb|Illustrates, how the user able to select a period On selected date.]] | ||
[[File:Date-range-quickmode.png|none|thumb|Illustrates specific layout for selecting various periods quickly.]] | [[File:Date-range-quickmode.png|none|thumb|Illustrates specific layout for selecting various periods quickly.]] | ||
| + | |||
'''Between''' two dates | '''Between''' two dates | ||
| + | |||
[[File:Date-range-between.png|none|thumb|Illustrates how the user able to select a specific date ranges with 2 calendar pickers]] | [[File:Date-range-between.png|none|thumb|Illustrates how the user able to select a specific date ranges with 2 calendar pickers]] | ||
| − | |||
| − | |||
| − | |||
| + | '''Ago''' - defines a time interval in the past, in the length of the specified unit | ||
| − | + | [[File:DatePickerAgo.png|frame|left]] | |
| − | + | [[Category:New Features|U]] | |
| − | [[Category:New Features]] | + | [[Category:New Features User Experience (Usability)]] |
| − | [[Category:New Features | + | [[Category:New Features w10|U]] |
| − | [[Category:New Features w10]] | ||
Latest revision as of 14:29, 14 January 2025
Goal: UX/Functional
Developer: cloudempiere, Takacs Peter, Design: Norbert Bede Review: Hengsin Low, CarlosRuiz
Feature Ticket: IDEMPIERE-5443
Improvement
This feature introduces a new UI component that allows the user to select date ranges more effectively. The component can be used in various parts of the system. Mainly: windows, report and process, forms, info windows.- also custom modules as Dashboard Filter. (upcoming in next releases)
Implementations in system modules
Implementation - Process/Report
Implementation - Window Lookup Record/Advanced Tab
Implementation for Info Window
Date vs Date Range Reference (new)
Date Field: on each Dates fields small "time" icons appear, which allow open Date Range Component - when user select specific range, the dates are filled into date from/to fields.
Date Range: replace date from to with human readable range eg. Before 10 november 2022 or Last 3 months etc. (TODO)
Functionalities
Current (default) - allow select full ranges of Day, Week, Month, Year
Previous N / Day, Week, Month, Quarter, Year (range) - starts with previous period (excl. actual)
Next N / Day, Week, Month, Quarter, Year (range) - starts with previous period (excl. actual)
Before a specific date
After a specific date
ON exact date
Between two dates
Ago - defines a time interval in the past, in the length of the specified unit
