Wiki source code of Beispiele JavaScript und CSS

Hide last authors
sas 55.1 1 In this section you will find various examples of different topics.
sas 1.1 2
sas 55.1 3 All examples can also be viewed directly on the FORMCYCLE demo platform.
sas 1.1 4
sas 55.1 5 - **Demo platform url**: [[https:~~/~~/demo7.formcycle.eu/formcycle>>url:https://demo7.formcycle.eu/formcycle]]
6 - **Loginname**: demo@demo
7 - **Password**: {{html}}pa55w0rd@demo{{/html}}
sas 1.1 8
sas 55.1 9 The following is a list of the existing demo forms on the demo server:
sas 1.1 10
gru 9.2 11 {{content/}}
12
sas 55.1 13 == Calculation ==
sas 1.1 14
sas 55.1 15 ; [[Form examples for calculation element>>https://formexchange.formcycle.eu:443/formcycle/form/alias/104/widget_formula?lang=en||rel="noopener noreferrer" target="_blank"]] (in Form store available)
16 : Examples of subtraction, summation and string concatenation
sas 8.1 17
sas 55.1 18 == Counter ==
sas 52.1 19
sas 55.1 20 ; [[Example for using a counter>>https://demo7.formcycle.eu/formcycle/form/alias/52/counter/?lang=en||rel="noopener noreferrer" target="_blank"]]
21 : It will be demonstrated how to display the actual count, lock appointments that are fully booked and use the counter in the workflow
sas 52.1 22
sas 55.1 23 == Data sources and database queries ==
sas 8.1 24
sas 55.1 25 ; [[Automcomplete functions - application possibilities>>https://demo7.formcycle.eu/formcycle/form/alias/52/autocomplete_functions_2?lang=en||rel="noopener noreferrer" target="_blank"]]
26 : Examples for using autocomplete with source CSV or a database.
sas 8.1 27
sas 55.1 28 ; [[Filter a selection by value>>https://demo7.formcycle.eu/formcycle/form/alias/52/filter_selection?lang=en||rel="noopener noreferrer" target="_blank"]]
29 : Enables parameterized database queries to filter selection
sas 8.1 30
sas 55.1 31 ; [[Prefilling data from a source>>https://demo7.formcycle.eu/formcycle/form/alias/52/prefilling_data?lang=en||rel="noopener noreferrer" target="_blank"]]
32 : Assign data from a data source to fields in the form
sas 8.1 33
sas 55.1 34 ; [[Transfer select column data>>https://formexchange.formcycle.eu/formcycle/form/alias/104/transfer_select_column?lang=en||rel="noopener noreferrer" target="_blank"]] (in Form store available)
35 : Demo to transfer the value of any column of a data source to another field
sas 8.1 36
sas 55.1 37 ; [[Database query>>https://formexchange.formcycle.eu/formcycle/form/alias/104/database_query?lang=en||rel="noopener noreferrer" target="_blank"]] (in Form store available)
38 : Demo for reading data from a database with a fixed parameter.
sas 54.1 39
sas 55.1 40 ; [[LDAP query via selection field and autocomplete>>https://demo7.formcycle.eu/formcycle/form/alias/52/ldap_query_selection?lang=en||rel="noopener noreferrer" target="_blank"]]
41 : Fill the selection field with values from an LDAP query and request LDAP data using Autocomplete.
sas 8.1 42
sas 55.1 43 == Date and time ==
sas 14.1 44
sas 55.1 45 ; [[Calendar functions>>https://formexchange.formcycle.eu:443/formcycle/form/alias/104/calendar_functions?lang=en||rel="noopener noreferrer" target="_blank"]] (in Form store available)
46 : Demo for possible functions for configuration of the calendar widget
sas 14.1 47
sas 55.1 48 ; [[Date and time initialization>>https://formexchange.formcycle.eu:443/formcycle/form/alias/104/date_time_initialization?lang=en||rel="noopener noreferrer" target="_blank"]] (in Form store available)
49 : As soon as the form is opened, will be initial assigned the date and time value
tki 14.2 50
sas 55.1 51 ; [[Date difference in days>>https://formexchange.formcycle.eu/formcycle/form/alias/104/date_difference_in_days?lang=en||rel="noopener noreferrer" target="_blank"]] (in Form store available)
52 : Get difference in days from datepicker
tki 15.1 53
sas 55.1 54 ; [[Date ranges and validation>>https://formexchange.formcycle.eu:443/formcycle/form/alias/104/datepicker_validation?lang=en||rel="noopener noreferrer" target="_blank"]] (in Form store available)
55 : Comparing Dates and manipulate the datepicker
tki 15.1 56
sas 55.1 57 ; [[Formatting birthday field>>https://formexchange.formcycle.eu/formcycle/form/alias/104/formatting_birthday_field?lang=en||rel="noopener noreferrer" target="_blank"]] (in Form store available)
58 : Configuration of the datepicker widget
tki 15.1 59
sas 55.1 60 ; [[Calculation age>>https://formexchange.formcycle.eu/formcycle/form/alias/104/calculating_age/?lang=en||rel="noopener noreferrer" target="_blank"]] (in Form store available)
61 : Example to calculate the current age by entering a date.
sas 44.1 62
sas 55.1 63 ; [[Time difference>>https://demo7.formcycle.eu/formcycle/form/alias/52/time_difference?lang=en||rel="noopener noreferrer" target="_blank"]]
64 : Calculate the difference between two times
tki 15.1 65
sas 55.1 66 ; [[Time validation>>https://demo7.formcycle.eu/formcycle/form/alias/52/time_validation?lang=en||rel="noopener noreferrer" target="_blank"]]
67 : Comparing time values
tki 15.1 68
sas 55.1 69 == Appointment ==
sas 27.1 70
sas 55.1 71 ; [[Preassignment appointments>>https://demo7.formcycle.eu/formcycle/form/alias/52/pre-assign-appointment/?lang=en||rel="noopener noreferrer" target="_blank"]]
72 : Demo how you can pre-assign a date to a appointment in a form.
sas 27.1 73
sas 55.1 74 == Style ==
tki 15.1 75
sas 55.1 76 ; [[Change position of text>>https://demo7.formcycle.eu/formcycle/form/alias/52/change_text_position?lang=en||rel="noopener noreferrer" target="_blank"]]
77 : Demonstration of manipulation text postion
tki 15.1 78
sas 55.1 79 ; [[Change the loading symbol>>https://demo7.formcycle.eu/formcycle/form/alias/52/change_loading_symbol?lang=en||rel="noopener noreferrer" target="_blank"]]
80 : Change the icon that is to be displayed when the form is called up
tki 15.1 81
sas 55.1 82 ; [[Customize repeating elements>>https://demo7.formcycle.eu/formcycle/form/alias/52/customize_repeating_elements?lang=en||rel="noopener noreferrer" target="_blank"]]
83 : Use your own custom buttons for repeating elements
tki 15.1 84
sas 55.1 85 ; [[Numbering repeatable elements using CSS>>https://formexchange.formcycle.eu:443/formcycle/form/alias/104/numbering_repeatable_elements_css?lang=en||rel="noopener noreferrer" target="_blank"]]
86 : Display a consecutive number for dynamic elements using CSS
sas 31.1 87 :
sas 55.1 88 ; [[Numbering repeatable elements using JavaScript>>https://formexchange.formcycle.eu:443/formcycle/form/alias/104/numbering_repeatable_elements_js?lang=en||rel="noopener noreferrer" target="_blank"]]
89 : Display a consecutive number for dynamic elements using JavaScript
tki 15.1 90
sas 55.1 91 ; [[Using own fonts in the form>>https://demo7.formcycle.eu/formcycle/form/alias/52/using_own_font/?lang=en||rel="noopener noreferrer" target="_blank"]]
92 : Integrate and use your own font via CSS
sas 19.1 93
sas 55.1 94 == Utility ==
tki 15.1 95
sas 55.1 96 ; [[Copy input values>>https://demo7.formcycle.eu/formcycle/form/alias/52/copy_input_values?lang=en||rel="noopener noreferrer" target="_blank"]]
97 : Copy an entered value of a field into a corresponding field (also into fields on the next page)
tki 15.1 98
sas 55.1 99 ; [[Delete form data>>https://demo7.formcycle.eu/formcycle/form/alias/52/delete_form_data?lang=en||rel="noopener noreferrer" target="_blank"]]
100 : Demonstrates how to clear one or all form fields in a form by clicking on a button
tki 15.1 101
sas 55.1 102 ; Language selection
103 : To enable a language selection option, the [[Language selection element widget>>doc:Formcycle.PluginDocumentation.WidgetXLanguageSwitchPlugin||target="_blank"]] should be used.
tki 15.1 104
sas 55.1 105 ; [[Local import and export>>https://demo7.formcycle.eu/formcycle/form/alias/52/local_import_export?lang=en||rel="noopener noreferrer" target="_blank"]]
106 : Save form data into a XML file and load the file into the form.
tki 15.1 107
sas 55.1 108 ; [[Set value before sending>>https://demo7.formcycle.eu/formcycle/form/alias/52/set_value_before_sending?lang=en||rel="noopener noreferrer" target="_blank"]]
109 : Before sending a form, check the form and set values.
tki 15.1 110
sas 55.1 111 ; [[Generate serial numbers>>https://demo7.formcycle.eu/formcycle/form/alias/52/serial_number?lang=en||rel="noopener noreferrer" target="_blank"]]
112 : Generate serial numbers using the database counter
sas 20.1 113
sas 55.1 114 {{velocity}}
115 ##; [[Preassignment of repeating form elements>>#614?lang=en||rel="noopener noreferrer" target="_blank"]]
116 ##: STILL OPEN
117 {{/velocity}}
sas 21.1 118
sas 55.1 119 == Formating ==
sas 21.1 120
sas 55.1 121 ; [[Formatting of numbers (autonumeric configuration)>>https://formexchange.formcycle.eu/formcycle/form/provide/223/?lang=en||rel="noopener noreferrer" target="_blank"]] (in Form store available)
122 : Automatic formatting of a text field in a configured format and unit (autonumeric)
sas 21.1 123
sas 55.1 124 ; [[Formatting different input types>>https://demo7.formcycle.eu/formcycle/form/alias/52/different_input_formatting?lang=en||rel="noopener noreferrer" target="_blank"]]
125 : Demo for a time and custom formatting using the cleave.js library
sas 8.1 126
sas 55.1 127 == Validation ==
tki 15.1 128
sas 55.1 129 ; [[Contraints for multi-select values>>https://demo7.formcycle.eu/formcycle/form/alias/52/contraints_multiselect_values?lang=en||rel="noopener noreferrer" target="_blank"]]
130 : Demo how is it possible to change the visiblity of a element depending on several values of a selection
sas 1.1 131
sas 55.1 132 ; [[Examples for validation rules>>https://demo7.formcycle.eu/formcycle/form/alias/52/validation_rules?lang=en||rel="noopener noreferrer" target="_blank"]]
133 : Several examples of regular expressions for custom data types.
tki 16.1 134
sas 55.1 135 ; [[IBAN validation>>https://demo7.formcycle.eu/formcycle/form/alias/52/iban_validation?lang=en||rel="noopener noreferrer" target="_blank"]]
136 : Example for client side IBAN validator
tki 16.1 137
sas 55.1 138 ; [[Required Field dependent on a status>>https://demo7.formcycle.eu/formcycle/form/alias/52/required_field_on_status?lang=en||rel="noopener noreferrer" target="_blank"]]
139 : Demo how it is possible to set a field required dependet on a status
tki 16.1 140
sas 55.1 141 ; [[Custom conditions>>https://demo7.formcycle.eu/formcycle/form/alias/52/custom_condition/?lang=en||rel="noopener noreferrer" target="_blank"]]
142 : Demo to create a own condition for inputs.
tki 16.1 143
sas 55.1 144 == Word (Fill) examples ==
tki 16.1 145
sas 55.1 146 ; [[Word (Fill) - checkbox and radio buttons>>https://demo7.formcycle.eu/formcycle/form/alias/52/word-fill-cb?lang=en||rel="noopener noreferrer" target="_blank"]]
147 : Demonstrates examples for the function cb()
tki 16.1 148
sas 55.1 149 ; [[Word (Fill) - count, contains, replace>>https://demo7.formcycle.eu/formcycle/form/alias/52/word-fill-cnt-con-rep?lang=en||rel="noopener noreferrer" target="_blank"]]
150 : Demonstrates examples for the functions cnt(), con(), rep()
tki 16.1 151
sas 55.1 152 ; [[Word (Fill) - images and url>>https://demo7.formcycle.eu/formcycle/form/alias/52/word-fill-img-url?lang=en||rel="noopener noreferrer" target="_blank"]]
153 : Demonstrates examples for the functions image(), b64img() und url()
tki 16.1 154
sas 55.1 155 ; [[Word (Fill) - merge field>>https://demo7.formcycle.eu/formcycle/form/alias/52/word-fill-mergefield?lang=en||rel="noopener noreferrer" target="_blank"]]
156 : Demonstrates example for a merge field, which can be used in the footer
tki 16.1 157
sas 55.1 158 ; [[Word (Fill) - remove functions>>https://demo7.formcycle.eu/formcycle/form/alias/52/word-fill-rm?lang=en||rel="noopener noreferrer" target="_blank"]]
159 : Demonstrates examples for the functions rmp(), rmr(), rmt(), rmtp()
tki 16.1 160
sas 55.1 161 ; [[Word (Fill) - repeating elements>>https://demo7.formcycle.eu/formcycle/form/alias/52/word-fill-repeat?lang=en||rel="noopener noreferrer" target="_blank"]]
162 : Examples for the use of repeating elements in a Word document.
tki 16.1 163
sas 55.1 164 ; [[Word (Fill) - selections>>https://demo7.formcycle.eu/formcycle/form/alias/52/word-fill-lst?lang=en||rel="noopener noreferrer" target="_blank"]]
165 : Demonstrates examples for the functions lsttxt(), lsttitle(), lst()
166
167 ; [[Word (Fill) - image from a upload field>>https://demo7.formcycle.eu/formcycle/form/alias/52/word-fill-upload-to-img?lang=en||rel="noopener noreferrer" target="_blank"]]
168 : Convert a upload to an image
169
sas 24.1 170 == Workflow ==
171
sas 55.1 172 ; [[Temporary storage of form data>>https://demo7.formcycle.eu/formcycle/form/alias/52/save_form_temporarily/?lang=en||rel="noopener noreferrer" target="_blank"]]
173 : Save the state of a form so that it can be finished later.
sas 24.1 174
sas 55.1 175 == Other demos ==
sas 1.1 176
sas 55.1 177 {{subpages depth="2" title="Example pages"/}}