Numbers and dates
The number and date criteria collect a quantity (numeric), a day (date), a period (date-range), a time of day (time) or a day
from the list the server allows (filtered-calendar). Below are the real criteria of the AWE React client: pick a type, change its
attributes and the XML below follows. Try them, too: they are real fields.
<criteria id="demo" component="numeric" label="Field" unit="EUR" />
- Attributes
- Events and actions
- Full reference
The controls above write these attributes. The reference lists every attribute, its type and default. Attributes in the XSD reference
| Attribute | Control | Values |
|---|---|---|
component | Component | numericdatedate-rangetimefiltered-calendar |
label | Label | text |
placeholder | Placeholder | text |
icon | Icon | lucide:userlucide:maillucide:searchlucide:calendar |
size | Size | smlg |
unit | Unit | text |
show-slider | Slider | true / false |
presets | Presets | text |
time-format | Time format | HH:mmHH:mm:sshh:mm ahh:mm:ss a |
validation | Required | true / false |
readonly | Read only | true / false |
| Action (type) | What it does |
|---|---|
reset | Empties the value of the criterion. |
restore | Puts back the initial value of the criterion. |
validate | Runs the validation of the criterion (required, formats) and shows its error. |
set-invalid | Marks the criterion as invalid with the message of the action. |
set-valid | Clears the validation error of the criterion. |
copy-criterion-value-clipboard | Copies the value of the criterion to the clipboard. |
The attributes shared by every criterion (label, placeholder, icon, size, validation) are in the criteria overview.
A date-range sends two parameters, id.from and id.to, and its presets add one button per code that fills the range from today.
The days a filtered-calendar allows come from a query of the server (here a static list of Mondays and Thursdays), and the others are disabled.
Recipes​
Common fields, rendered by the same components.
Number with a slider​
show-slider adds a slider under the input and number-format sets its range and step.
<criteria id="discount" component="numeric" label="Discount" show-slider="true"
number-format="{min: 0, max: 100, step: 5, aSign: ' %', pSign: 's'}" value="20" />
Period with quick presets​
Each code of presets is a button: 1M is one month back from today, YTD is the year to date and ALL clears both dates.
<criteria id="period" component="date-range" label="Period" presets="1M,3M,YTD,ALL" />
Time with a 12-hour clock​
time-format chooses how the time is shown. The value sent to the server is always a 24-hour time.
<criteria id="start" component="time" label="Start time" time-format="hh:mm a" />
Events and actions​
A criterion has no event of its own to listen to: every change of its value checks the dependencies whose
dependency-element names it, and pressing Enter in a text field runs the submit button of its window. The actions
that work on criteria:
| Action | Description |
|---|---|
reset | Empties the value of the criterion |
restore | Puts back the initial value of the criterion |
validate | Runs the validation of the criterion and shows its error |
set-invalid | Marks the criterion as invalid with the message of the action |
set-valid | Clears the validation error of the criterion |
copy-criterion-value-clipboard | Copies the value of the criterion to the clipboard |
More​
- Criteria overview: the attributes every criterion shares and the other families of inputs.
- Full documentation of the criteria: every type, attribute, validation and example.
- XSD reference of the
criteriaelement.