Ana içeriğe geç
Version: 1.3.0

Criteria

Criteria elements are window components which can get input from the user and send it to the application server (business logic).

Criteria

How does it work

Internally, a criterion has 2 basic attributes to manage the information to send to the server and the information to show to the user:

  • selected: The selected values of the criterion. These values will be sent to the server.
  • values: The available values of the criterion. These values will not be sent to the server. It's a list of values and labels that will be shown to the user to choose from.

Priorities

The selected values can be fulfilled in several ways. Here is a priority list with those ways:

  1. variable - These are the values sent from another screen
  2. screen target - The values returned by the screen target are the most priority of the list
  3. initial-load="value" - The query-retrieved values follow the screen target values
  4. session - Session-stored values
  5. property - Property-stored values
  6. value - Static values defined on value attribute

XML skeleton

<criteria id="[identifier]" component="[component]" label="[label]" placeholder="[placeholder]" style="[classes]"
initial-load="[initial-load]" server-action="[server-action]" target-action="[target-action]"
variable="[variable]" value="[value]" session="[session]" property="[property]"
validation="[validation]" readonly="[read-only]" size="[size]" unit="[unit]" icon="[icon]"
printable="[printable]" help="[help]" help-image="[help-image]"
optional="[optional]" area-rows="[area-rows]" number-format="[number-format]" capitalize="[capitalize]"
strict="[strict]" checked="[checked]" group="[group]" show-slider="[slider]" destination="[destination]">
<dependency... />
</criteria>

Criteria structure

ElementUseMultiples instancesDescription
criteriaRequiredNoGlobal node of criteria. Defines the criterion attributes
dependencyOptionalYesList of dependencies attached to the criterion

General attributes

AttributeUseTypeDescriptionValues
idRequiredStringCriterion identifier. For reference purposes
componentRequiredStringCriterion typeSee components
labelOptionalStringCriterion text (outside the criterion)Note: You can use i18n files (locales)
placeholderOptionalStringCriterion text (inside the criterion)Note: You can use i18n files (locales)
styleOptionalStringCriterion CSS classesSee Bootstrap positioning for criteria sizing
initial-loadOptionalStringServer action call to load the criterion data (launched at window generation)enum (for enumerated), query (for query call loading the values part of the criterion) or value (for query call loading the selected part of the criterion)
server-actionOptionalStringServer action callSee server action list
target-actionOptionalStringTarget to call on the server
maxOptionalIntegerMax number of valuesNote: Default value is set in property var.def.rpp in file base.properties
autoloadOptionalBooleanLaunch target-action when the screen has been initializedNote: Default value is false
autorefreshOptionalIntegerLaunch the target-action every X secondsNote: The value is in seconds
variableOptionalStringParameter to fill the criterion valueIdentifier of a criterion in the previous screen
valueOptionalStringCriterion default value
sessionOptionalStringSession variable to load the criterionSession variable identifier
propertyOptionalStringProperty variable to load the criterionProperty variable identifier
validationOptionalStringValidation rulesSee validation
readonlyOptionalBooleanSet criterion as readonlyDefault value is false
sizeOptionalStringCriterion sizesm (default), md or lg.
unitOptionalStringCriterion unit textNote: You can use i18n files (locales)
iconOptionalStringIcon identifierNote: You can check all iconset at FontAwesome
printableOptionalStringCheck if criterion is printabletrue, false, excel, all, tab
helpOptionalStringHelp text for the criterionNote: You can use i18n files (locales)
help-imageOptionalStringHelp image for the criterionThis must be a image path
left-labelOptionalIntegerPut the label on the left and give it a size in charsDefault value is empty (label is on top instead of left). If defined, the value must be a number of chars for the label

Specific attributes

AttributeCriterionTypeDescriptionValues
optionalSelectBooleanAllow selecting a empty valueDefault value is false
area-rowsTextareaIntegerNumber of rows of the textareaDefault value is 3
number-formatNumericStringFormat of the numberSee autonumeric plugin
capitalizeSelect, SuggestBooleanPut the first letter of the options in uppercase and the others in lowercaseDefault value is false
strictSuggestBooleanAllow the user only to select the list valuesDefault value is true
check-targetSuggestStringTarget action to be launched if label is not defined at suggest initializationDefault value is the defined at target-action
checkedCheckbox, RadioBooleanMark the criterion as checked initiallyDefault value is false
groupCheckbox, RadioStringGroup of the criterion (for validation and management purposes)
show-sliderNumericBooleanUsed to show the graphic component sliderNote: Only apply in numeric criteria
destinationUploaderStringDestination relative folder to upload the file
show-weekendsDateBooleanFor enable or disable the weekend daysDefault value is true
show-future-datesDateBooleanFor enable or disable the future days after date value selectedDefault value is true
date-formatDateStringTo set the format of the date you want to showDefault value is dd/MM/yyyy. Note: See the format in the following link
date-show-today-buttonDateBooleanTo show or not the button to select today dateDefault value is true
date-view-modeDateStringSelect 'days', 'months' or 'years' to set the minimum magnitude to be shownDefault value is days

Components

Text criterion

Basic text input.

textCriterion

Password criterion

Basic text input, but the written characters are not shown to the user.

Password

Textarea criterion

Criterion which allows the user to insert a large text and newlines.

Textarea

Hidden criterion

Hidden criterion. It is useful to send static values to a query or as a formula element.

Numeric criterion

Criterion which allows to insert formatted numbers.

numericCriterion

Numeric criterion with slider enabled

Numeric_slider

Number format attribute

This attribute is used to format the numeric criterion and the slider. It is specified in json object format.

AttributeUseTypeDescriptionValues
minOptionalNumberThe minimum possible valueEx: {min: 5}
maxOptionalNumberThe maximum possible valueEx: {max: 5}
aSignOptionalStringDesired currency symbolEx: {aSign: ' €'}
pSignOptionalStringControls the placement of the currency symbolpSign: 'p' to prefix or pSign: 's' to suffix (default)
aPadOptionalBooleanControls padding of the decimal placestrue always pads the decimal with zeros or false (default) to no padding
precisionOptionalNumberNumber of decimalsNote: The thousand & decimal separators can not be the same
stepOptionalNumberSlider increment stepEx: {step: 5}
ticksOptionalArrayUsed to define the values of ticks in slider. Tick marks are indicators to denote special values in the range. This option overwrites min and max optionsEx: {ticks: [-1000, -500, 0, 500, 1000]}
ticks_labelsOptionalArrayDefines the labels below the tick marks. Accepts HTML inputEx: {ticks_labels: ['-$1000', '-$500', '$0', '$500', '$1000']}

Note: You can view all autonumeric attributes here and the slider attributes here

Number format examples

number-format="{min: 0, max: 100, step: 0.01, precision: 2, aSign:' £', pSign:'s', aPad:true}"
---
number-format="{min: -1000, max: 1000, step: 10, precision: 2, aSign:' $', pSign:'s', aPad:true,
ticks: [-1000, -500, 0, 500, 1000], ticks_labels: ['-$1000', '-$500', '$0', '$500', '$1000']}"

Date criterion

Allows to select a date with a calendar.

dateCriteron

Time criterion

Allows to select a time with a time picker.

TimeCriterion

Filtered date criterion

Allows to select a date with a calendar from a list of filtered dates.

FilteredDate.ong

Select criterion

Shows a list and allows the user to select one element.

Select

Suggest criterion

Allows the user to search a value by typing some characters of the seek value.

Suggest

Note: The typed text is sent to the server as suggest parameter, but only when the query is used to fill in the options. Otherwise, suggest's id should be used as usual.

Select VS Suggest

SelectSuggest
The list of values is "fixed"The list can change every time you interact with the component
The list is loaded when you enter into the windowThe list is loaded when you interact with the component
Filtered in the clientCan be filtered in client and server
You have to use it when the list of values is small and with fixed number of values.It can be used with both small and large lists
Use attribute "max"=0Use attribute "max" to limit the data returned by the server.
You must use the variable "suggest" to filter.
Not used when there are interrelationships between criteriaMandatory use when there are interrelationships with other criteria.

Multiple select criterion

Shows a list and allows the user to select some elements.

Multiselect

Multiple suggest criterion

Allows the user to search some values by typing some characters of the seek values.

Multisuggest

Note: The typed text is sent to the server as suggest parameter.

Checkbox criterion

Shows a checkbox. It sends a 1 (or the value defined in the value attribute) if it's checked or 0 if it is unchecked.

Checkboxes

Radio button criterion

Shows a radio button. It is mono-selection. It sends the value attribute of the selected element between all the radio buttons with the same group attribute.

Radios

Note: If we want a radio button group to be required, all the radio buttons that are inside the group must have validation="required"

Button checkbox criterion (line)

Similar to a checkbox but it has a button appearance. It sends a 1 (or the value defined in the value attribute) if it's checked or 0 if it is unchecked.

ButtonCheckbox

Radio button criterion (line)

Similar to a radio button but it has a button appearance. It is mono-selection. It sends the value attribute of the selected element between all the radio buttons with the same group attribute.

ButtonRadio

Color criterion

Color criterion. It is useful to get color hexadecimal value with a color picker widget.

ColorPicker

Uploader criterion

Criterion useful to send files to the server. Once uploaded, the files can be managed by the server processes

UploaderCriterion

Text view criterion

This criterion simply shows a text, which can be retrieved from a variable, a parameter, a query or even loaded with dependencies.

TextView

Examples

Multiple suggest with icon

<criteria label="PARAMETER_USER" component="suggest-multiple" id="..." icon="user" initial-load="query" target-action="..."    
style="col-xs-12 col-sm-6 col-lg-3"/>
SuggestWithIcon

Radio button group

<criteria component="radio" label="PARAMETER_RADIO_1" id="RadBox1" group="RadBox" variable="RadBox" 
value="Radio1" style="col-xs-6 col-sm-2 col-lg-1 no-label" validation="required" checked="true"/>
<criteria component="radio" label="PARAMETER_RADIO_2" id="RadBox2" group="RadBox" variable="RadBox"
value="Radio2" style="col-xs-6 col-sm-2 col-lg-1 no-label" readonly="true"/>
<criteria component="radio" label="PARAMETER_RADIO_3" id="RadBox3" group="RadBox" variable="RadBox"
value="Radio3" style="col-xs-6 col-sm-2 col-lg-1 no-label"/>
Radios

Required text without label, with placeholder and with icon

<criteria placeholder="SCREEN_TEXT_USER" component="text" icon="user" id="user" validation="required" 
style="col-xs-6 col-sm-4 col-md-2"/>
UserName

Select multiple with two preselected values

<criteria component="select-multiple" id="user" label="PARAMETER_USER" icon="user" initial-load="query" 
target-action="..." style="col-xs-12 col-sm-6 col-lg-3" value="1, 2" validation="required"/>
SelectMultiplePreselected

Color criterion sample

<criteria label="PARAMETER_COLOR" id="Col" variable="Col" component="color" 
style="col-xs-6 col-sm-3 col-lg-2" value="#d5db89" />

ColorPicker2

Uploader criterion sample

<criteria label="PARAMETER_UPLOADER" id="Upl" component="uploader" validation="required" 
style="col-xs-12 col-sm-6 col-lg-4" destination="testModule">
UploaderCriterion2