| ... |
... |
@@ -1,14
+1,12 @@ |
| 1 |
|
-{{figure image="1_WidgetXFormula_Logo_de.png" clear="h3"}} |
| 2 |
|
-Das Symbol für Widgets vom Typ //Berechnungselement// im {{designer/}}. |
| 3 |
|
-{{/figure}} |
|
1 |
+{{figure image="1_WidgetXFormula_Logo_de.png" clear="h3"}}Das Symbol für Widgets vom Typ //Berechnungselement// im {{designer/}}.{{/figure}} |
| 4 |
4 |
|
| 5 |
|
-[[**Plugin-Download**>>url:https://customer.formcycle.eu/index.php/s/0dj4omg2bvsdkHe||rel="noopener noreferrer" target="_blank"]] |
|
3 |
+[[**Plugin-Download**>>url:https://customer.formcycle.eu/index.php/apps/files/?dir=/FORMCYCLE%20-%20Plugins%20Customer/fc-plugin-widget-bundle-xformula&fileid=24138||target="_blank"]] (erfordert Anmeldung) |
| 6 |
6 |
|
| 7 |
7 |
{{content/}} |
| 8 |
8 |
|
| 9 |
9 |
== Funktionsbeschreibung == |
| 10 |
10 |
|
| 11 |
|
-Das Plugin stellt ein neues Widget im Designer zur Verfügung, welches es erlaubt, auf einfache Art Mathematische Berechnungen auszuführen. Das Widget erzeugt ein gesperrtes Eingabefeld, welches zur Ausgabe des Ergebnisses dient. In den Eigenschaften dieses Eingabefelds, kann eine Formel mit Feldplatzhaltern wie z.B. {{code language="none"}}([%tf1%] + [%tf2%]) / 1.19{{/code}} eingegeben werden. Zusätzlich können Schriftfarbe und Ausgabeformat für das Ergebnis festgelegt werden. |
|
9 |
+Das Plugin stellt ein neues Widget im Designer zur Verfügung, welches es erlaubt, auf einfache Art Mathematische Berechnungen auszuführen. Das Widget erzeugt ein gesperrtes Eingabefeld, welches zur Ausgabe des Ergebnisses dient. In den Eigenschaften dieses Eingabefelds, kann eine Formel mit Feldplatzhaltern wie z.B. {{code language="none"}}([%tf1%] + [%tf2%]) / 1,19{{/code}} eingegeben werden. Zusätzlich können Schriftfarbe und Ausgabeformat für das Ergebnis festgelegt werden. |
| 12 |
12 |
|
| 13 |
13 |
== Installation == |
| 14 |
14 |
|
| ... |
... |
@@ -20,7
+20,10 @@ |
| 20 |
20 |
|
| 21 |
21 |
{{internBaseOptionsElement page="base" headline="h3"/}} |
| 22 |
22 |
|
| 23 |
|
-{{internBaseOptionsElement page="style"}} |
|
21 |
+=== Darstellung === |
|
22 |
+ |
|
23 |
+Die in diesem Bereich vorhandenen Eigenschaften dienen dazu, die Sichtbarkeit des Berechnungs-Widgets zu konfigurieren. Die Grundeigenschaft //Versteckt// steht dabei jedem Formularelement zur Verfügung. |
|
24 |
+ |
| 24 |
24 |
{{figure image="2_WidgetXFormula_Autonumeric_de.png"}} |
| 25 |
25 |
Mögliche Eigenenschaften und deren Standardwerte, nachdem die Option //Ausgabeformat// angewählt wurde und das Ergebnis dieser Konfiguration im Formular. |
| 26 |
26 |
{{/figure}} |
| ... |
... |
@@ -29,9
+29,13 @@ |
| 29 |
29 |
Konfigurationsmöglichkeiten für der Schriftfarbe, nachdem die Option //Farbänderung// angewählt wurde. |
| 30 |
30 |
{{/figure}} |
| 31 |
31 |
|
| 32 |
|
- |
| 33 |
33 |
{{table dataTypeAlpha="0" fullwidth="false" colWidth="-500"}} |
| 34 |
34 |
|=Name|=Beschreibung |
|
35 |
+|Versteckt|Ist hier ein Häkchen gesetzt, so wird das Element versteckt. Um es wieder anzuzeigen, kann die Eigenschaft [[sichtbar wenn>>doc:Formcycle.FormDesigner.ElementProperties.Constraints]] oder eine entsprechende JavaScript-Funktion wie {{jsdoc name="visible" page="jquery"/}} verwendet werden. |
|
36 |
+|Wiederholen{{id name="repeat"/}}|Ist diese Option aktiviert, so kann der Nutzer eine beliebige Anzahl an Wiederholungen (Kopien) von diesem Formularelement erstellen. Damit ist es etwa möglich, eine oder mehrere E-Mail-Adressen anzugeben. Es ist nicht möglich, wiederholte Elemente zu verschachteln: Ist ein Fieldset oder Container wiederholt, so kann kein Element darin mehr wiederholt werden. |
|
37 |
+|Min. wdh.|Mindestzahl an Wiederholungen, die vorhanden sein müssen. Eine wiederholtes Formularelement ist nicht löschbar, wenn dadurch diese Mindestzahl unterschritten werden würde. Die hier eingestellte Anzahl ist zudem auch anfangs sichtbare Anzahl an Wiederholungen (beim Aufrufs des Formulars). |
|
38 |
+|Max. wdh.|Höchstzahl an Wiederholungen, die erlaubt ist. Es kann keine weitere Kopie von einem Formularelement erzeugt werden, wenn dadurch diese Höchstzahl überschritten werden würde. |
|
39 |
+|Element wdh.|Falls hier ein Element ausgewählt ist, bestimmt der Wert des ausgewählten Elements (Trigger-Element) die Anzahl an Wiederholungen. |
| 35 |
35 |
|Ausgabeformat|Durch Anwählen dieser Option kann die Ausgabe (wenn es sich um eine Zahl handelt) mit Eigenschaften aus der Autonumeric-Javascript-Bibliothek formatiert werden. Wenn diese Option gewählt ist, werden die Eigenschaften //Ausrichtung der Einheit//, //Dezimalstellen//, //Tausendertrennzeichen//, //Dezimaltrennzeichen// und //Einheit// konfigurierbar. |
| 36 |
36 |
|Ausrichtung der Einheit|Legt die Position der Einheit fest. Es kann zwischen //Rechts vom Wert// und //Links vom Wert// gewählt werden. Nur sichtbar, wenn die Option //Ausgabeformat// angewählt wurde. |
| 37 |
37 |
|Dezimalstellen|Anzahl der Nachkommastellen, die immer sichtbar sind. Wenn dieses Feld sichtbar ist, muss es zwingend befüllt werden, da das Berechnungs-Widget ansonsten funktionsunfähig ist. Nur sichtbar, wenn die Option //Ausgabeformat// angewählt wurde. Standardwert: {{code language="none"}}2{{/code}} |
| ... |
... |
@@ -42,7
+42,6 @@ |
| 42 |
42 |
|Positive Farbe|Über eine vorgegebene Auswahl von Farben oder einen Colorpicker kann hier die Farbe bestimmt werden, mit der der im Feld sichtbare wert angezeigt werden soll, wenn es sich um eine positive Zahl handelt. Nur sichtbar, wenn die Option //Farbänderung// angewählt wurde. |
| 43 |
43 |
|Negative Farbe|Über eine vorgegebene Auswahl von Farben oder einen Colorpicker kann hier die Farbe bestimmt werden, mit der der im Feld sichtbare wert angezeigt werden soll, wenn es sich um eine negative Zahl handelt. Nur sichtbar, wenn die Option //Farbänderung// angewählt wurde. |
| 44 |
44 |
{{/table}} |
| 45 |
|
-{{/internBaseOptionsElement}} |
| 46 |
46 |
|
| 47 |
47 |
{{internBaseOptionsElement page="label" headline="h3"/}} |
| 48 |
48 |
|
| ... |
... |
@@ -55,15
+55,13 @@ |
| 55 |
55 |
{{/figure}} |
| 56 |
56 |
|
| 57 |
57 |
{{figure image="5_WidgetXFormula_Formel2_de.png"}} |
| 58 |
|
-Beispiel für eine Berechnung eines Feldes, welches sich weiter oben im Formular befindet als die Berechnungsfelder, auf deren Wert es zugreift. Durch das Vergeben eines Wertes bei //Reihenfolge Index// am Berechnungs-Widget der Teilsummen, werden diese zuerst berechnet und erst danach wird die Gesamtsumme ermittelt. |
|
62 |
+TODO Beispiel Brechnung weiter Oben. |
| 59 |
59 |
{{/figure}} |
| 60 |
60 |
|
| 61 |
61 |
{{table dataTypeAlpha="0" fullwidth="false" colWidth="-500"}} |
| 62 |
62 |
|=Name|=Beschreibung |
| 63 |
|
-|Berechnungsfeld|In dieses nicht mit einem Label benannte Feld kann ein Berechnungsformel eingegeben werden, welche bei jeder Wertänderung von einem der in der Berechnungsformel verwendeten Eingabelemente erneut ausgeführt wird. |
| 64 |
|
-Als Syntax wird //JavaScript// verwendet. Für das Ermitteln der zu verwendenden Werte von anderen Eingabelementen können neben //jQuery//-Selektoren auch {{formcycle/}} [[Platzhalter>>doc:Formcycle.UserInterface.Variables]] verwendet werden. |
| 65 |
|
-|Leere Felder|Hier kann ausgewählt werden, was passieren soll, wenn ein Formularelement keinen Wert hat. Entweder wird es wie die Zahl 0 behandlelt oder wie leerer Text. Bei nummerischen Berechnungen sollte der Wert in der Regel wie die Zahl 0 behandelt werden. |
| 66 |
|
-|Reihenfolge Index|Diese Option ist nur in Ausnahmefällen notwendig. Standardmäßig werden die Felder automatisch in der Reihenfolge abgearbeitet, wie es die Formeln vorgeben. Falls die automatisch erkannte Reihenfolge einmal nicht korrekt sein sollte, kann für eine Indexzahl vergeben werden. Wenn in wenigstens einem Formelfeld ein Index gesetzt ist, ist die Reihenfolge der Abarbeitung wie folgt: Zuerst werden alle Berechnungenfelder mit einem Index abgearbeitet, wobei vom niedrigsten Indexwert zum größten Indexwert vorgegangen wird. Anschließend werden alle Berechnungen ohne einen Index ausgeführt, entsprechend den normalen Regeln (von oben nach unten und von links nach rechts). |
|
67 |
+|Berechnungsfeld|In dieses nicht mit einem Label benannte Feld kann ein Berechnungsformel eingegeben werden, welche bei jeder Wertänderung von einem der in der Berechnungsformel verwendeten Eingabelemente erneut ausgeführt wird. Als Syntax wird //JavaScript// verwendet, wobei als Selektoren für die Elemente auch durch {{formcycle/}} [[Platzhalter>>doc:Formcycle.UserInterface.Variables]] verwendet werden. |
|
68 |
+|Reihenfolge Index|Die Abarbeitungsreihenfolge einer Berechnung findet in der Regel von oben nach unten und von links nach rechts statt, so wie diese auf dem Formular hinterlegt wurden. Dies ist für die meisten Anwendungsfälle ausreichend. Ist es jedoch notwendig, dass eine bestimmte Berechnung vor einer anderen stattfinden muss, kann für diese eine Indexzahl vergeben werden. Dies ist zum Beispiel nötig, wenn die Summe aus bestimmten Berechnungsfeldern weiter oben im Formular ausgegeben werden soll. |
| 67 |
67 |
{{/table}} |
| 68 |
68 |
|
| 69 |
69 |
{{internBaseOptionsElement page="cond" headline="h3"/}} |
| ... |
... |
@@ -78,29
+78,25 @@ |
| 78 |
78 |
|
| 79 |
79 |
{{internBaseOptionsElement page="misc" headline="h3"/}} |
| 80 |
80 |
|
| 81 |
|
-== Druckbild im Word-/PDF-Export == |
|
83 |
+==Druckbild im Word-/PDF-Export== |
| 82 |
82 |
|
| 83 |
83 |
Wenn ein Formular per Word-/PDF-Export exportiert wird, sieht das Widget wie ein normales, auf Readonly geschaltetes, Eingabefeld aus. |
| 84 |
84 |
|
| 85 |
|
-== Formelbeispiele == |
|
87 |
+==Formelbeispiele== |
| 86 |
86 |
|
| 87 |
87 |
{{table fullwidth="false" colWidth="-500"}} |
| 88 |
88 |
|=Formel|=Erklärung |
| 89 |
|
-|{{code language="none"}}[%tf1%] - [%tf2%] |
| 90 |
|
- |
| 91 |
|
-$('[name=tf1]').val() - $('[name=tf2]').val(){{/code}}|Subtraktion der Werte in den Eingabefeldern //tf1// und //tf2// einmal unter Verwendung von Passwörtern und einmal mittels //jQuery//-Selektoren |
| 92 |
|
-|{{code language="none"}}[%tf2%] * (1 + ([%tf1%] / 100)){{/code}}|Wird in //tf1// z.B. der Steuersatz und in //tf2// der Nettobetrag eingegeben, wird der Bruttobetrag berechnet |
| 93 |
|
-|{{code language="none"}}[%tf1%] + " " + [%tf2%]{{/code}}|Stringverkettung aus den Eingaben in den Eingabefeldern //tf1// und //tf2// |
| 94 |
|
-|{{code language="none"}}[%tf1%].length(){{/code}}|Anzahl der eigegebenen Zeichen im EIngabefeld //tf1// |
| 95 |
|
-|{{code language="none"}}([%tf1%]<2) ? "Genehmigt" : "Abgelehnt"{{/code}}|Wenn der Wert in //tf1// kleiner als 2 ist, soll "Genehmigt" ausgegeben werden. Ansonsten "Abgelehnt". |
| 96 |
|
-|{{code language="none"}}$('[org_name=tf1]').sum(){{/code}}|Beispiel für Berechnen der Summe von wiederholten Elementen mit dem Namen //tf1//. Für wiederholte Elemente und Elemente innerhalb von wiederholten Containern und Fieldsets muss ein normaler JavaScript-Selektor oder wie in diesem Beispiel ein //jQuery//-Selektor verwendet werden. |
|
91 |
+|{{code language="none"}}[%tf1%] - [%tf2%]{{/code}}|Subtraktion |
|
92 |
+|{{code language="none"}}[%tf2%] * (1 + ([%tf1%] / 100)){{/code}}|Wird in tf1 z.B. der Steuersatz und in tf2 der Nettobetrag eingegeben, wird der Bruttobetrag berechnet |
|
93 |
+|{{code language="none"}}[%tf1%] + “ “ + [%tf2%]{{/code}}|Stringverkettung aus den Eingaben |
|
94 |
+|{{code language="none"}}[%tf1%].length(){{/code}}|Anzahl der eigegebenen Zeichen in tf1 |
|
95 |
+|{{code language="none"}}([%tf1%]<2) ? "Genehmigt" : "Abgelehnt"{{/code}}|Wenn der Wert in tf1 kleiner als 2 ist, soll "Genehmigt" ausgegeben werden. Ansonsten "Abgelehnt". |
| 97 |
97 |
{{/table}} |
| 98 |
98 |
|
| 99 |
|
-Ein Demo-Beispiel zu den erwähnten Möglichkeiten finden Sie [[hier>>https://demo2.formcycle.eu/formcycle/form/provide/653/||target="_blank"]]. |
| 100 |
100 |
|
| 101 |
|
-== Mögliche CSS-Anpassungen == |
|
99 |
+==Mögliche CSS-Anpassungen== |
| 102 |
102 |
|
| 103 |
|
-Um die Ausgabe zu formatieren, können per //CSS// Anpassungen vorgenommen werden. Wenn zum Beispiel die Ausgabe anstatt einem gesperrten Eingabefeld wie ein Text aussehen soll, kann folgender //CSS//-Code verwendet werden: |
|
101 |
+Um die Ausgabe zu formatieren, können per CSS Anpassungen vorgenommen werden. Wenn zum Beispiel die Ausgabe anstatt einem gesperrten Eingabefeld wie ein Text aussehen soll, kann folgendes CSS verwendet werden: |
| 104 |
104 |
|
| 105 |
105 |
{{code language="css"}} |
| 106 |
106 |
.CXFormula .label-top{ |
| ... |
... |
@@ -112,11
+112,3 @@ |
| 112 |
112 |
padding: 0; |
| 113 |
113 |
} |
| 114 |
114 |
{{/code}} |
| 115 |
|
- |
| 116 |
|
-== Versionshistorie == |
| 117 |
|
- |
| 118 |
|
-**Version 1.0.6** |
| 119 |
|
- |
| 120 |
|
-* XSS verhindern |
| 121 |
|
-* Abarbeitungsreihenfolge der Berechnungsfelder angepasst, sodass nun problemlos in der Formel eines Berechnungsfeldes, Platzhalter für andere Berechnungselemente genutzt werden können |
| 122 |
|
-* Berechnungsfelder können nun initial Gesperrt und als Mussfeld geschalten werden |