Wiki source code of Bedingungen

Show last authors
1 The constraints panel contains options to check the value of form fields, when form fields should be visible and when they can be edited. Some constraints are available only for some element, see the [[list of element.>>doc:Formcycle.Designer.Form.FormElements.WebHome]].
2
3 == Properties ==
4
5 {{figure image="designer_properties_constraints_en.png"}}
6 A form field can be made a required field, requiring the user to enter something or select an option.
7 {{/figure}}
8
9 {{table dataTypeAlpha="0" colWidth="-500"}}
10 |=Name|=Description
11 |hidden if|Hides the form fieldm when a certain conditions is satisfied.
12 |visible if|Makes a form field that has been hidden visible again, when a certain condition is satisfied.
13 |read-only if|Locks a form field and disallows any input, when a certain condition is satisfied.
14 |editable if|Make a form field that has been set to read-only editable again, when a certain condition is satisfied.
15 |required|When this option is activated, a value must be entered for the form field. Conditions set under //required if// are ignored when this option is activated.
16 |required if|Marks a form field as a required field, when a certain condition is satisfied.
17 |required group|Available only when the form field is a required field. Specifies the required group the form field should belong to. When two or more form fields belong to the same group, at least one of these form fields needs to be filled out, all other fields may remain empty.
18
19 {{version major="7" minor="2"/}} When using a user-defined //formula// as a condition, this option has no function. No server-side validation can be performed in this case.
20 {{/table}}
21
22 == Condition ==
23
24 {{figure image="designer_element_select_properties_options_en.png"}}
25 Any condition referring to the value of a [[select element>>doc:Formcycle.Designer.Form.FormElements.Selection]] uses the value of the option for testing the condition, as entered in the colum //value//.
26 {{/figure}}
27
28 You can change a form field's visibility and read-only state depending on the value of another form element.
29
30 {{version major="7" minor="2"/}}You can also choose //formula//, which lets you enter a custom formular with your own logic. That formula may reference more than one form element. Please note the following:
31
32 * The formular must be a valid JavaScript expression, e.g. {{code language="javascript"}}$("[name='tfFirstName']").val() === "John"{{/code}}.
33 ** JavaScript statements cannot be used, e.g. {{code language="javascript"}}var x = $("[name='tfFirstName']").val() ; x === "John"{{/code}} will not work.
34 ** If still necessary, you can wrap statements in an IIFE (immediately invoked function expression): {{code language="javascript"}}(function(){var x = $("[name='tfFirstName']").val() ; return x === "John"})(){{/code}}
35 * You can use form variables to access form values more easily. The variable is replaced with a JavaScript value container the value of the form element. For example: {{code language="javascript"}}[%tfFirstName%]==="John"{{/code}}
36 ** If the value represents a valid floating point number, the placeholder is replaced with a JavaScript number value, e.g.: {{code language="javascript"}}[%tf1%]+[%tf2%] < 10{{/code}} (Sum of both fields < 10). Otherwise, the value is replaced with a JavaScript string, e.g.: {{code language="javascript"}}[%tf1%].toUpperCase() === "JOHN"{{/code}} (Field equals "John", case insensitive).
37 ** The value depends on the type of form element:
38 *** For checkboxes, the //value when checked// is used, as entered in the form designer (default: //on//).
39 *** For input fields and text areas, the value as entered by the user is used.
40 *** For select elements displayed as combo boxes or list boxes, the technical value of the selected option is used.
41 *** For select elements displayed as checkboxes or radio buttons, the sum of all technical values of all selected options is used. This applies to select elements displayed as questions as well.
42 *** For upload elements, the file name of the selected fle is used.
43 *** For appointment pickers, the date and time as shown by the appoinment picker is used.
44 * You can also use other variables such as system variables: e.g. {{code language="javascript"}}[%$PROJECT_TITLE%] === "My form"{{/code}}.
45 * NO server validation is performed for custom formulas, even if that option is enabled for a form element.
46
47 Once you have selected a form element, the following conditions are available for the options //hidden if//, //visible if//, //read-only if//, //editable if//, and //required if//:
48
49 * has a value
50 * has no value
51 * equals
52 * not equals
53 * lower than
54 * lower equal than
55 * greater than
56 * greater equal than
57 * between
58 * regular expression
59
60 {{info}}
61 You can also select elements with the element picker to the right. Click on the hand-shaped icon and then on the element you would like to use. This comes in handy when editing forms with many form fields.
62 {{/info}}
63
64 {{table}}
65 |=Condition|=Description
66 |has a value / has no value|(((The conditions evaluates to //true// when the value of the form field is (not) empty.
67
68 In particular, //having a value// mean the following for different form elements:
69
70 * for a [[checkbox>>doc:Formcycle.Designer.Form.FormElements.Checkbox]], that the checkbox is not checked.
71 * for a [[selection>>doc:Formcycle.Designer.Form.FormElements.Selection]], that some option other than //Please select an option// has been selected. When the selection field is displayed as a combo box, the first option will be selected by default, unless the selection is a required field, in which case the option //Please select an option// will be selected by default.
72 * for an [[input field>>doc:Formcycle.Designer.Form.FormElements.Input]], that at least one character has been entered.)))
73 |equals|The condition evaluates to //true// when the value of the form field equals the given value. Comparisons are case-sensitive.
74 |not equals|The condition evaluates to //true// when the value of the form field does not equal the given value. Comparisons are case-sensitive.
75 |lower than / lower or equal than|The condition evaluates to //true// when the value is lower (or equal) than the specified value.
76 |greater than / greater or equal than|The condition evaluates to //true// when the value is greater (or equal) than the specified value.
77 |between|The condition evaluates to //true// when the value is between the specified range, inclusively. The interval must be entered with a dash ({{{-}}}), for example //2-10//. Negative numbers must be enclosed in parentheses, eg. //(-10) - (- 5)//.
78 |regexp|The condition evaluates to //true// when the value matches the specified regexp.
79 {{/table}}
80
81 == Clear or reset automatically ==
82
83 For the properties //hidden if// and //read-only if//, you may choose whether the form field should be cleared or reset automatically when the form field ist hidden or disabled. Clearing a form field means that its value is removed, eg. deleting the entered text for an input field or unchecking all checkboxes for a select field. Resetting a form field, on the other hand, refers to changing its value back to the original or initial value it had when the form was openend. In case the form was opened for the first time and not submitted yet, the original value is the value as set in the {{designer/}}. Otherwise, when the form was already submitted and is opened in the inbox, the original value is the most recently submitted (saved) value.
84
85 For example, consider the case of entering an address. The user can choose between a physical address and a post-office box, and only one input field is visible depending on the user's choice. When the form is submitted, a value should be send only for one of both fields. By selecting the //empty automatically// options, the input field //post-office box// will be cleared automatically when the user selects a physical address.
86
87 When an element is cleared or reset, all the elements it contains are cleared or reset as well. This applies to form elements of type [[page>>doc:Formcycle.Designer.Form.FormElements.Page]], [[container>>doc:Formcycle.Designer.Form.FormElements.Container]], and [[fieldset>>doc:Formcycle.Designer.Form.FormElements.Fieldset]].