Änderungen von Dokument Beispiele JavaScript und CSS

Von Version 18.1
bearbeitet von sas
am 27.09.2021, 10:28
Änderungskommentar: Es gibt keinen Kommentar für diese Version
Auf Version 55.1
bearbeitet von sas
am 17.11.2023, 13:55
Ä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
... ... @@ -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,32 +23,38 @@
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 +; [[Datenbankabfrage>>https://formexchange.formcycle.eu/formcycle/form/alias/104/database_query/||rel="noopener noreferrer" target="_blank"]] (im Formular-Store verfügbar)
38 +: Abfrage von Daten aus einer Datenbank mit festen Werten.
34 34  
40 +; [[LDAP-Abfrage über Auswahl-Feld und Autocomplete>>https://demo7.formcycle.eu/formcycle/form/alias/52/ldap_query_selection||rel="noopener noreferrer" target="_blank"]]
41 +: Auswahlfeld mit Werten aus einer LDAP-Abfrage befüllen und mittels Autocomplete LDAP-Daten abfragen.
42 +
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
45 +; [[Kalender Funktionen>>https://formexchange.formcycle.eu:443/formcycle/form/alias/104/calendar_functions||rel="noopener noreferrer" target="_blank"]] (im Formular-Store verfügbar)
46 +: Demo für verfügbare Funktionen zur Konfiguration des Kalender Widgets.
39 39  
40 -; [[Datum und Zeit initialisieren>>https://demo7.formcycle.eu/formcycle/form/alias/52/datepicker_initialization/||rel="noopener noreferrer" target="_blank"]]
41 -: Sobald das Formular geöffnet ist, erfolgt die initiale Belegung des Datum und Zeit Wertes
48 +; [[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)
49 +: Sobald das Formular geöffnet ist, erfolgt die initiale Belegung des Datum und Zeit Wertes.
42 42  
43 -; [[Datumsdifferenz in Tagen>>https://demo7.formcycle.eu/formcycle/form/alias/52/date_difference_in_days/||rel="noopener noreferrer" target="_blank"]]
51 +; [[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)
44 44  : Differenz in Tagen von Datepicker
45 45  
46 -; [[Datumsauswahlbereich einschränken und Validierung>>https://demo7.formcycle.eu/formcycle/form/alias/52/datepicker_validation/||rel="noopener noreferrer" target="_blank"]]
47 -: Erleichtert die Eingabe von Datumsbereichen und ermöglicht entsprechende Validierung
54 +; [[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)
55 +: Erleichtert die Eingabe von Datumsbereichen und ermöglicht entsprechende Validierung.
48 48  
49 -; [[Formatierung Geburtstagsfeld>>https://demo7.formcycle.eu/formcycle/form/alias/52/formatting_birthday_field/||rel="noopener noreferrer" target="_blank"]]
57 +; [[Formatierung Geburtstagsfeld>>https://formexchange.formcycle.eu/formcycle/form/alias/104/formatting_birthday_field/||rel="noopener noreferrer" target="_blank"]] (im Formular-Store verfügbar)
50 50  : Konfiguration des Kalenders
51 51  
60 +; [[Alter berechnen>>https://formexchange.formcycle.eu:443/formcycle/form/alias/104/calculating_age/||rel="noopener noreferrer" target="_blank"]] (im Formular-Store verfügbar)
61 +: Demo zur Berechnung des Alters anhand des Geburtstagsdatums.
62 +
52 52  ; [[Zeitunterschied berechnen>>https://demo7.formcycle.eu/formcycle/form/alias/52/time_difference/||rel="noopener noreferrer" target="_blank"]]
53 53  : Differenz und Summe von Uhrzeiten
54 54  
... ... @@ -55,57 +55,63 @@
55 55  ; [[Zeitvalidierung>>https://demo7.formcycle.eu/formcycle/form/alias/52/time_validation/||rel="noopener noreferrer" target="_blank"]]
56 56  : Vergleich einer Zeitauswahl
57 57  
69 +== Terminverwaltung ==
70 +
71 +; [[Vorbelegung Terminauswahl>>https://demo7.formcycle.eu/formcycle/form/alias/52/pre-assign-appointment/||rel="noopener noreferrer" target="_blank"]]
72 +: Demo wie es möglich ist ein Datum in Terminverwaltung vorzubelegen innerhalb des Formulars.
73 +
58 58  == Aussehen ==
59 59  
60 60  ; [[Änderung der Textposition>>https://demo7.formcycle.eu/formcycle/form/alias/52/change_text_position/||rel="noopener noreferrer" target="_blank"]]
61 -: Demonstration Text anders zu positionieren
77 +: Demonstration Text anders zu positionieren.
62 62  
63 63  ; [[Ändern des Ladesymbols>>https://demo7.formcycle.eu/formcycle/form/alias/52/change_loading_symbol/||rel="noopener noreferrer" target="_blank"]]
64 -: Individualisieren des Ladesymbols beim Formularaufruf
80 +: Individualisieren des Ladesymbols beim Formularaufruf.
65 65  
66 66  ; [[Anpassen von wiederholenden Elementen>>https://demo7.formcycle.eu/formcycle/form/alias/52/customize_repeating_elements/||rel="noopener noreferrer" target="_blank"]]
67 -: Nutzen Sie Ihre eigenen Knöpfe für wiederholende Elemente
83 +: Nutzen Sie Ihre eigenen Knöpfe für wiederholende Elemente.
68 68  
69 -; [[Nummerierung wiederholbarer Elemente mit CSS>>https://demo7.formcycle.eu/formcycle/form/alias/52/numbering_repeatable_elements_css/||rel="noopener noreferrer" target="_blank"]]
70 -: Wiederholende Formularelemente werden fortlaufend nummeriert mittels CSS
85 +; [[Nummerierung wiederholbarer Elemente mit CSS>>https://formexchange.formcycle.eu:443/formcycle/form/alias/104/numbering_repeatable_elements_css||rel="noopener noreferrer" target="_blank"]]
86 +: Wiederholende Formularelemente werden fortlaufend nummeriert mittels CSS.
87 +:
88 +; [[Nummerierung wiederholbarer Elemente mit JavaScript>>https://formexchange.formcycle.eu:443/formcycle/form/alias/104/numbering_repeatable_elements_js||rel="noopener noreferrer" target="_blank"]]
89 +: Wiederholende Formularelemente werden fortlaufend nummeriert mittels JavaScript.
71 71  
91 +; [[Eigene Schriftart im Formular verwenden>>https://demo7.formcycle.eu/formcycle/form/alias/52/using_own_font/||rel="noopener noreferrer" target="_blank"]]
92 +: Eigene Schriftart über CSS einbinden und anwenden.
93 +
72 72  == Allgemein ==
73 73  
74 -; [[Formatierung von Zahlen (Autonumeric Konfiguration)>>https://demo7.formcycle.eu/formcycle/form/alias/52/formatting_numbers/||rel="noopener noreferrer" target="_blank"]]
75 -: Automatische Formatierung eines Textfeldes in ein konfiguriertes Format und Einheit (autonumeric)
96 +; [[Übertragung von Eingaben in andere Elemente>>https://demo7.formcycle.eu/formcycle/form/alias/52/copy_input_values/||rel="noopener noreferrer" target="_blank"]]
97 +: Felder mit Werten vorbelegen, die in einem anderen Feld eingegeben wurden.
76 76  
77 -; [[Formatierung unterschiedlicher Eingabetypen>>https://demo7.formcycle.eu/formcycle/form/alias/52/different_input_formatting/||rel="noopener noreferrer" target="_blank"]]
78 -: Demo für Zeit- und benutzerdefinierte Formatierung anhand der Bibliothek cleave.js
79 -
80 -; [[Übertragung von Eingaben auf die nächste Seite>>https://demo7.formcycle.eu/formcycle/form/alias/52/copy_input_values/||rel="noopener noreferrer" target="_blank"]]
81 -: Felder mit Werten vorbelegen, die in einem anderen Feld eingegeben wurden
82 -
83 83  ; [[Löschen von Formulardaten>>https://demo7.formcycle.eu/formcycle/form/alias/52/delete_form_data/||rel="noopener noreferrer" target="_blank"]]
84 -: Zeigt, wie einzelne oder alle Eingabefelder in einem Formular gelöscht werden können, wenn ein Button gedrückt wird
100 +: Zeigt, wie einzelne oder alle Eingabefelder in einem Formular gelöscht werden können, wenn ein Button gedrückt wird.
85 85  
86 -; [[Sprachauswahl>>https://demo7.formcycle.eu/formcycle/form/alias/52/language_selection/||rel="noopener noreferrer" target="_blank"]]
87 -: Demo um die Sprache des Formulars per Klick zu wechseln
102 +; Sprachauswahl
103 +: Um eine Auswahlmöglichkeit für die Sprache zu ermöglichen, sollte das [[Widget Sprachauswahlelement>>doc:Formcycle.PluginDocumentation.WidgetXLanguageSwitchPlugin||target="_blank"]] verwendet werden.
88 88  
89 89  ; [[Lokaler Import und Export von Formdaten>>https://demo7.formcycle.eu/formcycle/form/alias/52/local_import_export/||rel="noopener noreferrer" target="_blank"]]
90 -: Formularinhalte lokal als XML zwischenspeichern und wieder laden
106 +: Formularinhalte lokal als XML zwischenspeichern und wieder laden.
91 91  
92 92  ; [[Werte vor dem Senden setzen>>https://demo7.formcycle.eu/formcycle/form/alias/52/set_value_before_sending/||rel="noopener noreferrer" target="_blank"]]
93 93  : Vor dem Versenden eines Formulars das Formular prüfen und Werte setzen.
94 -{{velocity}}##; [[Textarea automatisch vergrößern>>https://demo7.formcycle.eu/formcycle/form/alias/52/set_value_before_sending/||rel=" noopener noreferrer" target="_blank"]]
95 -##: (OFFEN){{/velocity}}
96 96  
97 -; [[Zwischenspeichern von Formularen>>https://demo7.formcycle.eu/formcycle/form/alias/52/save_form_temporarily/||rel="noopener noreferrer" target="_blank"]]
98 -: Speichern des aktuellen Formularzustands, damit dieses später zu Ende ausgefüllt werden kann
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.
99 99  
100 -; [[Dynamische Vorbelegung>>https://demo7.formcycle.eu/formcycle/form/alias/52/dynamic_prefill/||rel="noopener noreferrer" target="_blank"]]
101 -: Vorbelegung von Formularelementen durch Werte vorhergehender Formularelemente {{velocity}}##(OFFEN){{/velocity}}
102 -{{velocity}}##; [[Vorbelegung sich wiederholender Formularelemente>>https://demo7.formcycle.eu/formcycle/form/provide/614/||rel=" noopener noreferrer" target="_blank"]]
103 -##: (OFFEN){{/velocity}}
114 +== Formatierung ==
104 104  
116 +; [[Formatierung von Zahlen (Autonumeric Konfiguration)>>https://formexchange.formcycle.eu/formcycle/form/provide/223/||rel="noopener noreferrer" target="_blank"]] (im Formular-Store verfügbar)
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 +
105 105  == Validierung ==
106 106  
107 107  ; [[Bedingungen für Mehrfachauswahlwerte>>https://demo7.formcycle.eu/formcycle/form/alias/52/contraints_multiselect_values/||rel="noopener noreferrer" target="_blank"]]
108 -: Demo, wie es möglich ist, die Sichtbarkeit eines Elements in Abhängigkeit von mehreren Werten einer Auswahl zu ändern
125 +: Demo, wie es möglich ist, die Sichtbarkeit eines Elements in Abhängigkeit von mehreren Werten einer Auswahl zu ändern.
109 109  
110 110  ; [[Beispiele für Validationsregeln>>https://demo7.formcycle.eu/formcycle/form/alias/52/validation_rules/||rel="noopener noreferrer" target="_blank"]]
111 111  : Verschiedene Beispiele für reguläre Ausdrücke bei benutzerdefinierten Datentypen.
... ... @@ -114,7 +114,10 @@
114 114  : Beispiel für clientseitigen IBAN-Validator
115 115  
116 116  ; [[Mussfeld in Abhängigkeit eines Status>>https://demo7.formcycle.eu/formcycle/form/alias/52/required_field_on_status/||rel="noopener noreferrer" target="_blank"]]
117 -: Demo wie es möglich ist, ein erforderliches Feld in Abhängigkeit von einem Status zu setzen
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.
118 118  
119 119  == Word (Fill) Beispiel ==
120 120  
... ... @@ -127,7 +127,7 @@
127 127  ; [[Word (Fill) - Bilder und URL>>https://demo7.formcycle.eu/formcycle/form/alias/52/word-fill-img-url/||rel="noopener noreferrer" target="_blank"]]
128 128  : Demonstriert Beispiele für die Funktion image(), b64img() und url()
129 129  
130 -; [[Word (Fill) - Checkboxen und Radiobuttons>>https://demo7.formcycle.eu/formcycle/form/alias/52/word-fill-mergefield/||rel="noopener noreferrer" target="_blank"]]
150 +; [[Word (Fill) - Merge Field>>https://demo7.formcycle.eu/formcycle/form/alias/52/word-fill-mergefield/||rel="noopener noreferrer" target="_blank"]]
131 131  : Demonstriert Beispiele für ein Merge Field, welches in der Fusszeile verwendet werden kann
132 132  
133 133  ; [[Word (Fill) - Funktionen zum Entfernen>>https://demo7.formcycle.eu/formcycle/form/alias/52/word-fill-rm/||rel="noopener noreferrer" target="_blank"]]
... ... @@ -142,6 +142,11 @@
142 142  ; [[Word (Fill) - Bild aus Uploadfeld übertragen>>https://demo7.formcycle.eu/formcycle/form/alias/52/word-fill-upload-to-img/||rel="noopener noreferrer" target="_blank"]]
143 143  : Wandelt einen Upload in Bild um
144 144  
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 +
145 145  == Weitere Demos ==
146 146  
147 147  {{subpages depth="2" title="Demo-Beispiele"/}}