Änderungen von Dokument Beispiele JavaScript und CSS


Von Version 14.1
bearbeitet von sas
am 20.08.2021, 16:04
Änderungskommentar: Es gibt keinen Kommentar für diese Version
Auf Version 52.1
bearbeitet von sas
am 09.11.2022, 19:04
Änderungskommentar: Es gibt keinen Kommentar für diese Version

Zusammenfassung

Details

Seiteneigenschaften
Titel
... ... @@ -1,1 +1,1 @@
1 -Beispiele (Demoformulare)
1 +Beispiele JavaScript und CSS
Inhalt
... ... @@ -1,4 +1,4 @@
1 -Auf dieser Seite und den Unterseiten werden diverse Beispiele und Formular zu vielen verschiednenen Themen angeboten.
1 +Auf dieser Seite und den Unterseiten werden diverse Beispiele und Formular zu vielen verschiedenen Themen angeboten.
2 2  
3 3  Alle Beispiele können auch direkt auf der Demo-Plattform eingesehen werden.
4 4  
... ... @@ -12,11 +12,16 @@
12 12  
13 13  == Berechnung ==
14 14  
15 -; [[Formularbespiele für Berechnungselement>>https://demo7.formcycle.eu/formcycle/form/alias/52/widget_formula/||rel="noopener noreferrer" target="_blank"]]
15 +; [[Formularbespiele für Berechnungselement>>https://formexchange.formcycle.eu:443/formcycle/form/alias/104/widget_formula||rel="noopener noreferrer" target="_blank"]] (im Formular-Store verfügbar)
16 16  : Beispiele für Subtraktion, Summenbildung und String-Verkettung
17 17  
18 -== Datenquellen und Datenbankabfragen ==
18 +== Zähler ==
19 19  
20 +; [[Beispiel für die Verwendung eines Zählers>>https://demo7.formcycle.eu/formcycle/form/alias/52/counter/]]
21 +: Es wird demonstriert wie der aktuelle Zählerstand im Formular ausgegeben werden kann, Termine welche ausgebucht sind zu sperren und im Workflow den Zähler zu verwenden
22 +
23 +== Datenquellen und Abfragen ==
24 +
20 20  ; [[Autocomplete Funktionen>>https://demo7.formcycle.eu/formcycle/form/alias/52/autocomplete_functions_2||rel="noopener noreferrer" target="_blank"]]
21 21  : Beispiel für die Verwendung von Autocomplete mit CSV oder Datenbank als Quelle.
22 22  
... ... @@ -23,59 +23,145 @@
23 23  ; [[Filterung einer Auswahl anhand eines Wertes>>https://demo7.formcycle.eu/formcycle/form/alias/52/filter_selection||rel="noopener noreferrer" target="_blank"]]
24 24  : Wenn die Auswahl erfolgt ist, soll in einer weiteren Auswahlliste die Werte anhand der Eingabe gefiltert werden. Dabei kann nur eine Datenbank als Quelle verwendet werden.
25 25  
26 -; [[Vorbelegung von Daten aus einer Datenquelle>>https://demo7.formcycle.eu/formcycle/form/alias/52/prefilling_data]]
27 -: Daten aus einer Datenquelle Feldern im Formular zuweisen
31 +; [[Vorbelegung von Daten aus einer Datenquelle>>https://demo7.formcycle.eu/formcycle/form/alias/52/prefilling_data||rel="noopener noreferrer" target="_blank"]]
32 +: Daten aus einer Datenquelle Feldern im Formular zuweisen.
28 28  
29 -; [[Übertragung von Werten einer Auswahlliste>>https://demo7.formcycle.eu/formcycle/form/alias/52/transfer_select_column||rel="noopener noreferrer" target="_blank"]]
30 -: Demo um den Wert einer beliebigen Spalte einer Datenquelle in ein anderes Feld zu übertragen
34 +; [[Übertragung von Werten einer Auswahlliste>>https://formexchange.formcycle.eu/formcycle/form/alias/104/transfer_select_column/||rel="noopener noreferrer" target="_blank"]] (im Formular-Store verfügbar)
35 +: Demo um den Wert einer beliebigen Spalte einer Datenquelle in ein anderes Feld zu übertragen.
31 31  
32 -; [[LDAP-Abfrage über Auswahl-Feld>>https://demo7.formcycle.eu/formcycle/form/alias/52/ldap_query_selection||rel="noopener noreferrer" target="_blank"]]
33 -: Auswahlfeld mit Werten aus einer LDAP-Abfrage befüllen
37 +; [[LDAP-Abfrage über Auswahl-Feld und Autocomplete>>https://demo7.formcycle.eu/formcycle/form/alias/52/ldap_query_selection||rel="noopener noreferrer" target="_blank"]]
38 +: Auswahlfeld mit Werten aus einer LDAP-Abfrage befüllen und mittels Autocomplete LDAP-Daten abfragen.
34 34  
35 35  == Datum und Zeit ==
36 36  
37 -; [[Kalender Funktionen>>https://demo7.formcycle.eu/formcycle/form/alias/52/calendar_functions/||rel=" noopener noreferrer" target="_blank"]]
38 -: Demo für verfügbare Funktionen zur Konfiguration des Kalender Widgets
42 +; [[Kalender Funktionen>>https://formexchange.formcycle.eu:443/formcycle/form/alias/104/calendar_functions||rel="noopener noreferrer" target="_blank"]] (im Formular-Store verfügbar)
43 +: Demo für verfügbare Funktionen zur Konfiguration des Kalender Widgets.
39 39  
40 -== Verfügbaren Formulare ==
45 +; [[Datum und Zeit initialisieren>>https://formexchange.formcycle.eu:443/formcycle/form/alias/104/date_time_initialization||rel="noopener noreferrer" target="_blank"]] (im Formular-Store verfügbar)
46 +: Sobald das Formular geöffnet ist, erfolgt die initiale Belegung des Datum und Zeit Wertes.
41 41  
42 -{{table dataTypeAlpha="0-1"}}
43 -|=Kategorie|=Beispielinhalt|=Link zum Formular
44 -|Datum und Zeit|Datum und Zeit initialisieren|[[https://demo7.formcycle.eu/formcycle/form/provide/157/||target="_blank"]]
45 -|Datum und Zeit|Datumsdifferenz in Tagen|[[https://demo7.formcycle.eu/formcycle/form/provide/156/||target="_blank"]]
46 -|Datum und Zeit|Datumsauswahlbereich einschränken und Validierung|[[https://demo7.formcycle.eu/formcycle/form/provide/61/||target="_blank"]]
47 -|Datum und Zeit|Formatierung Geburtstagsfeld|[[https://demo7.formcycle.eu/formcycle/form/provide/655/||target="_blank"]]
48 -|Datum und Zeit|Zeitunterschied berechnen|[[https://demo7.formcycle.eu/formcycle/form/provide/609/||target="_blank"]]
49 -|Datum und Zeit|Zeitvalidierung|[[https://demo7.formcycle.eu/formcycle/form/provide/171/||target="_blank"]]
50 -|Aussehen|Änderung der Textposition|[[https://demo7.formcycle.eu/formcycle/form/provide/424/||target="_blank"]]
51 -|Aussehen|Ändern des Ladesymbols|[[https://demo7.formcycle.eu/formcycle/form/provide/418/||target="_blank"]]
52 -|Aussehen|Anpassen von wiederholenden Elementen|[[https://demo7.formcycle.eu/formcycle/form/provide/404/||target="_blank"]]
53 -|Aussehen|Nummerierung wiederholbarer Elemente mit CSS|[[https://demo7.formcycle.eu/formcycle/form/provide/419/||target="_blank"]]
54 -|Allgemein|Formatierung von Zahlen (Autonumeric Konfiguration)|[[https://demo7.formcycle.eu/formcycle/form/provide/335/||target="_blank"]]
55 -|Allgemein|Übertragung von Eingaben auf die nächste Seite|[[https://demo7.formcycle.eu/formcycle/form/provide/417/||target="_blank"]]
56 -|Allgemein|Löschen von Formulardaten|[[https://demo7.formcycle.eu/formcycle/form/provide/454/1/||target="_blank"]]
57 -|Allgemein|Sprachauswahl|[[https://demo7.formcycle.eu/formcycle/form/provide/552/||target="_blank"]]
58 -|Allgemein|Lokaler Import und Export von Formdaten|[[https://demo7.formcycle.eu/formcycle/form/provide/430/||target="_blank"]]
59 -|Allgemein|Werte vor dem Senden setzen|[[https://demo7.formcycle.eu/formcycle/form/provide/452/||target="_blank"]]
60 -|Allgemein|Textarea automatisch vergrößern|[[https://demo7.formcycle.eu/formcycle/form/provide/407/||target="_blank"]]
61 -|Allgemein|Zwischenspeichern von Formularen|[[https://demo7.formcycle.eu/formcycle/form/provide/612/||target="_blank"]]
62 -|Allgemein|Dynamische Vorbelegung|[[https://demo7.formcycle.eu/formcycle/form/provide/613/||target="_blank"]]
63 -|Allgemein|Vorbelegung sich wiederholender Formularelemente|[[https://demo7.formcycle.eu/formcycle/form/provide/614/||target="_blank"]]
64 -|Validierung|Bedingungen für Mehrfachauswahlwerte|[[https://demo7.formcycle.eu/formcycle/form/provide/554/||target="_blank"]]
65 -|Validierung|Beispiel für unterschiedliche Eingabe Formatierung|[[https://demo7.formcycle.eu/formcycle/form/provide/337/||target="_blank"]]
66 -|Validierung|Beispiele für Validationsregeln|[[https://demo7.formcycle.eu/formcycle/form/provide/169/||target="_blank"]]
67 -|Validierung|IBAN Validierung|[[https://demo7.formcycle.eu/formcycle/form/provide/341/||target="_blank"]]
68 -|Validierung|Mussfeld in Abhängigkeit eines Status|[[https://demo7.formcycle.eu/formcycle/form/provide/555/||target="_blank"]]
69 -|Word (Fill) Beispiel|Word (Fill) - Checkboxen und Radiobuttons|[[https://demo7.formcycle.eu/formcycle/form/provide/556/||target="_blank"]]
70 -|Word (Fill) Beispiel|Word (Fill) - Zählen, Enthält, Ersetzen|[[https://demo7.formcycle.eu/formcycle/form/provide/559/||target="_blank"]]
71 -|Word (Fill) Beispiel|Word (Fill) - Bilder und URL|[[https://demo7.formcycle.eu/formcycle/form/provide/560/||target="_blank"]]
72 -|Word (Fill) Beispiel|Word (Fill) - Checkboxen und Radiobuttons|[[https://demo7.formcycle.eu/formcycle/form/provide/562/||target="_blank"]]
73 -|Word (Fill) Beispiel|Word (Fill) - Funktionen zum Entfernen|[[https://demo7.formcycle.eu/formcycle/form/provide/561/||target="_blank"]]
74 -|Word (Fill) Beispiel|Word (Fill) - Wiederholende Elemente|[[https://demo7.formcycle.eu/formcycle/form/provide/557/||target="_blank"]]
75 -|Word (Fill) Beispiel|Word (Fill) - Auswahl-Funktionen|[[https://demo7.formcycle.eu/formcycle/form/provide/558/||target="_blank"]]
76 -|Word (Fill) Beispiel|Word (Fill) - Bild aus Uploadfeld übertragen|[[https://demo7.formcycle.eu/formcycle/form/provide/654/||target="_blank"]]
77 -{{/table}}
48 +; [[Datumsdifferenz in Tagen>>https://formexchange.formcycle.eu/formcycle/form/alias/104/date_difference_in_days/||rel="noopener noreferrer" target="_blank"]] (im Formular-Store verfügbar)
49 +: Differenz in Tagen von Datepicker
78 78  
51 +; [[Datumsauswahlbereich einschränken und Validierung>>https://formexchange.formcycle.eu/formcycle/form/alias/104/datepicker_validation/||rel="noopener noreferrer" target="_blank"]] (im Formular-Store verfügbar)
52 +: Erleichtert die Eingabe von Datumsbereichen und ermöglicht entsprechende Validierung.
53 +
54 +; [[Formatierung Geburtstagsfeld>>https://formexchange.formcycle.eu/formcycle/form/alias/104/formatting_birthday_field/||rel="noopener noreferrer" target="_blank"]] (im Formular-Store verfügbar)
55 +: Konfiguration des Kalenders
56 +
57 +; [[Alter berechnen>>https://formexchange.formcycle.eu:443/formcycle/form/alias/104/calculating_age/||rel="noopener noreferrer" target="_blank"]] (im Formular-Store verfügbar)
58 +: Demo zur Berechnung des Alters anhand des Geburtstagsdatums.
59 +
60 +; [[Zeitunterschied berechnen>>https://demo7.formcycle.eu/formcycle/form/alias/52/time_difference/||rel="noopener noreferrer" target="_blank"]]
61 +: Differenz und Summe von Uhrzeiten
62 +
63 +; [[Zeitvalidierung>>https://demo7.formcycle.eu/formcycle/form/alias/52/time_validation/||rel="noopener noreferrer" target="_blank"]]
64 +: Vergleich einer Zeitauswahl
65 +
66 +== Terminverwaltung ==
67 +
68 +; [[Vorbelegung Terminauswahl>>https://demo7.formcycle.eu/formcycle/form/alias/52/pre-assign-appointment/||rel="noopener noreferrer" target="_blank"]]
69 +: Demo wie es möglich ist ein Datum in Terminverwaltung vorzubelegen innerhalb des Formulars.
70 +
71 +== Aussehen ==
72 +
73 +; [[Änderung der Textposition>>https://demo7.formcycle.eu/formcycle/form/alias/52/change_text_position/||rel="noopener noreferrer" target="_blank"]]
74 +: Demonstration Text anders zu positionieren.
75 +
76 +; [[Ändern des Ladesymbols>>https://demo7.formcycle.eu/formcycle/form/alias/52/change_loading_symbol/||rel="noopener noreferrer" target="_blank"]]
77 +: Individualisieren des Ladesymbols beim Formularaufruf.
78 +
79 +; [[Anpassen von wiederholenden Elementen>>https://demo7.formcycle.eu/formcycle/form/alias/52/customize_repeating_elements/||rel="noopener noreferrer" target="_blank"]]
80 +: Nutzen Sie Ihre eigenen Knöpfe für wiederholende Elemente.
81 +
82 +; [[Nummerierung wiederholbarer Elemente mit CSS>>https://formexchange.formcycle.eu:443/formcycle/form/alias/104/numbering_repeatable_elements_css||rel="noopener noreferrer" target="_blank"]]
83 +: Wiederholende Formularelemente werden fortlaufend nummeriert mittels CSS.
84 +:
85 +; [[Nummerierung wiederholbarer Elemente mit JavaScript>>https://formexchange.formcycle.eu:443/formcycle/form/alias/104/numbering_repeatable_elements_js||rel="noopener noreferrer" target="_blank"]]
86 +: Wiederholende Formularelemente werden fortlaufend nummeriert mittels JavaScript.
87 +
88 +; [[Eigene Schriftart im Formular verwenden>>https://demo7.formcycle.eu/formcycle/form/alias/52/using_own_font/||rel="noopener noreferrer" target="_blank"]]
89 +: Eigene Schriftart über CSS einbinden und anwenden.
90 +
91 +== Allgemein ==
92 +
93 +; [[Übertragung von Eingaben in andere Elemente>>https://demo7.formcycle.eu/formcycle/form/alias/52/copy_input_values/||rel="noopener noreferrer" target="_blank"]]
94 +: Felder mit Werten vorbelegen, die in einem anderen Feld eingegeben wurden.
95 +
96 +; [[Löschen von Formulardaten>>https://demo7.formcycle.eu/formcycle/form/alias/52/delete_form_data/||rel="noopener noreferrer" target="_blank"]]
97 +: Zeigt, wie einzelne oder alle Eingabefelder in einem Formular gelöscht werden können, wenn ein Button gedrückt wird.
98 +
99 +; Sprachauswahl
100 +: Um eine Auswahlmöglichkeit für die Sprache zu ermöglichen, sollte das [[Widget Sprachauswahlelement>>doc:Formcycle.PluginDocumentation.WidgetXLanguageSwitchPlugin||target="_blank"]] verwendet werden.
101 +
102 +; [[Lokaler Import und Export von Formdaten>>https://demo7.formcycle.eu/formcycle/form/alias/52/local_import_export/||rel="noopener noreferrer" target="_blank"]]
103 +: Formularinhalte lokal als XML zwischenspeichern und wieder laden.
104 +
105 +; [[Werte vor dem Senden setzen>>https://demo7.formcycle.eu/formcycle/form/alias/52/set_value_before_sending/||rel="noopener noreferrer" target="_blank"]]
106 +: Vor dem Versenden eines Formulars das Formular prüfen und Werte setzen.
107 +
108 +; [[Zwischenspeichern von Formularen>>https://demo7.formcycle.eu/formcycle/form/alias/52/save_form_temporarily/||rel="noopener noreferrer" target="_blank"]]
109 +: Speichern des aktuellen Formularzustands, damit dieses später zu Ende ausgefüllt werden kann.
110 +
111 +; [[Seriennummer erzeugen>>https://demo7.formcycle.eu/formcycle/form/alias/52/serial_number/||rel="noopener noreferrer" target="_blank"]]
112 +: Seriennummern mithilfe des Datenbank-Zählers erzeugen.
113 +
114 +== Formatierung ==
115 +
116 +; [[Formatierung von Zahlen (Autonumeric Konfiguration)>>https://demo7.formcycle.eu/formcycle/form/alias/52/formatting_numbers/||rel="noopener noreferrer" target="_blank"]]
117 +: Automatische Formatierung eines Textfeldes in ein konfiguriertes Format und Einheit (autonumeric)
118 +
119 +; [[Formatierung unterschiedlicher Eingabetypen>>https://demo7.formcycle.eu/formcycle/form/alias/52/different_input_formatting/||rel="noopener noreferrer" target="_blank"]]
120 +: Demo für Zeit- und benutzerdefinierte Formatierung anhand der Bibliothek cleave.js
121 +
122 +== Validierung ==
123 +
124 +; [[Bedingungen für Mehrfachauswahlwerte>>https://demo7.formcycle.eu/formcycle/form/alias/52/contraints_multiselect_values/||rel="noopener noreferrer" target="_blank"]]
125 +: Demo, wie es möglich ist, die Sichtbarkeit eines Elements in Abhängigkeit von mehreren Werten einer Auswahl zu ändern.
126 +
127 +; [[Beispiele für Validationsregeln>>https://demo7.formcycle.eu/formcycle/form/alias/52/validation_rules/||rel="noopener noreferrer" target="_blank"]]
128 +: Verschiedene Beispiele für reguläre Ausdrücke bei benutzerdefinierten Datentypen.
129 +
130 +; [[IBAN Validierung>>https://demo7.formcycle.eu/formcycle/form/alias/52/iban_validation/||rel="noopener noreferrer" target="_blank"]]
131 +: Beispiel für clientseitigen IBAN-Validator
132 +
133 +; [[Mussfeld in Abhängigkeit eines Status>>https://demo7.formcycle.eu/formcycle/form/alias/52/required_field_on_status/||rel="noopener noreferrer" target="_blank"]]
134 +: Demo wie es möglich ist, ein erforderliches Feld in Abhängigkeit von einem Status zu setzen.
135 +
136 +; [[Benutzerdefinierte Bedingung>>https://demo7.formcycle.eu/formcycle/form/alias/52/custom_condition/||rel="noopener noreferrer" target="_blank"]]
137 +: Demo-Formular um eigene Bedingungen an Eingabefeldern zu definieren.
138 +
139 +== Word (Fill) Beispiel ==
140 +
141 +; [[Word (Fill) - Checkboxen und Radiobuttons>>https://demo7.formcycle.eu/formcycle/form/alias/52/word-fill-cb/||rel="noopener noreferrer" target="_blank"]]
142 +: Demonstriert Beispiele für die Funktion cb()
143 +
144 +; [[Word (Fill) - Word (Fill) - Zählen, Enthält, Ersetzen>>https://demo7.formcycle.eu/formcycle/form/alias/52/word-fill-cnt-con-rep/||rel="noopener noreferrer" target="_blank"]]
145 +: Demonstriert Beispiele für die Funktion cnt(), con(), rep()
146 +
147 +; [[Word (Fill) - Bilder und URL>>https://demo7.formcycle.eu/formcycle/form/alias/52/word-fill-img-url/||rel="noopener noreferrer" target="_blank"]]
148 +: Demonstriert Beispiele für die Funktion image(), b64img() und url()
149 +
150 +; [[Word (Fill) - Merge Field>>https://demo7.formcycle.eu/formcycle/form/alias/52/word-fill-mergefield/||rel="noopener noreferrer" target="_blank"]]
151 +: Demonstriert Beispiele für ein Merge Field, welches in der Fusszeile verwendet werden kann
152 +
153 +; [[Word (Fill) - Funktionen zum Entfernen>>https://demo7.formcycle.eu/formcycle/form/alias/52/word-fill-rm/||rel="noopener noreferrer" target="_blank"]]
154 +: Demonstriert Beispiele für die Funktion rmp(), rmr(), rmt(), rmtp()
155 +
156 +; [[Word (Fill) - Wiederholende Elemente>>https://demo7.formcycle.eu/formcycle/form/alias/52/word-fill-repeat/||rel="noopener noreferrer" target="_blank"]]
157 +: Beispiele für die Verwendung wiederholender Elemente in einem Word-Dokument.
158 +
159 +; [[Word (Fill) - Auswahl-Funktionen>>https://demo7.formcycle.eu/formcycle/form/alias/52/word-fill-lst/||rel="noopener noreferrer" target="_blank"]]
160 +: Demonstriert Beispiele für die Funktion lsttxt(), lsttitle(), lst()
161 +
162 +; [[Word (Fill) - Bild aus Uploadfeld übertragen>>https://demo7.formcycle.eu/formcycle/form/alias/52/word-fill-upload-to-img/||rel="noopener noreferrer" target="_blank"]]
163 +: Wandelt einen Upload in Bild um
164 +
165 +== Workflow ==
166 +
167 +; [[Temporäre Zwischenspeichern von Formulardaten>>https://demo7.formcycle.eu/formcycle/form/alias/52/save_form_temporarily/||rel="noopener noreferrer" target="_blank"]]
168 +: Speichern des aktuellen Formularzustands, damit dieses später zu Ende ausgefüllt werden kann.
169 +
79 79  == Weitere Demos ==
80 80  
81 81  {{subpages depth="2" title="Demo-Beispiele"/}}