| ... |
... |
@@ -7,6
+7,11 @@ |
| 7 |
7 |
|
| 8 |
8 |
Um auch im Skriptbereich per Javaskript auf die Datenquellen Zugriff zu haben, werden alle Datenquellen in eine JSON-Struktur umgewandelt und im Objekt {{code}}XFC_METADATA.urls.datasource_[csv|json|xml]{{/code}} zugänglich gemacht. Die Struktur dieser JSON-Struktur für die verschiedenen Datenquellen ist im jeweiligen Abschnitt erläutert. |
| 9 |
9 |
|
|
10 |
+{{info}} |
|
11 |
+**Servlet-URL** |
|
12 |
+Die Servlet-URL einer Datenquelle wird nach dem Anlegen in der Konfigurationsoberfläche dargestellt (siehe Punkt 4 in der [[Abbildung>>||anchor="fig_data_source"]]) und ist im JS-Objekt {{code}}XFC_METADATA.urls.datasource_[csv|json|xml]{{/code}} verfügbar. |
|
13 |
+{{/info}} |
|
14 |
+ |
| 10 |
10 |
== Anlegen einer Datenquelle == |
| 11 |
11 |
|
| 12 |
12 |
Öffnen Sie das Modul "Daten > Quellen" und klicken Sie auf die Schaltfläche "Neu" {{ficon name="plus-circle-outline"/}} in der Kopfzeile der Liste (siehe Punkt 1 in der [[Abbildung>>||anchor="fig_data_source"]]). Daraufhin werden Sie aufgefordert eine leere Datenquelle anzulegen oder diese aus einer Datei zu importieren. Es können drei Typen von Datenquellen angelegt werden: //XML//, //CSV// und //JSON//. |
| ... |
... |
@@ -53,12
+53,12 @@ |
| 53 |
53 |
== CSV == |
| 54 |
54 |
|
| 55 |
55 |
{{figure image="data_source_csv_servlet_json_comparison.png"}} |
| 56 |
|
-Die JSON-Struktur einer CSV-Datenquelle. Auf diese JSON-Struktur kann per Javaskcipt über {{code}}XFC_METADATA.urls.datasource_csv{{/code}} zugegriffen werden. (1) Links ist die JSON-Struktur der Datenquelle dargestellt, bei welcher die erste Zeile nicht als Header verwendet wird. Stattdessen werden Header in Form von {{code}}colX{{/code}} verwendet. (2) Rechts ist die Datenquelle zu sehen, wenn die erste Zeile als Header verwendet wird. |
|
61 |
+Die JSON-Struktur einer CSV-Datenquelle. Auf diese JSON-Struktur kann per Javascript über {{code}}XFC_METADATA.urls.datasource_csv{{/code}} zugegriffen werden. (1) Links ist die JSON-Struktur der Datenquelle dargestellt, bei welcher die erste Zeile nicht als Header verwendet wird. Stattdessen werden Header in Form von {{code}}colX{{/code}} verwendet. (2) Rechts ist die Datenquelle zu sehen, wenn die erste Zeile als Header verwendet wird. |
| 57 |
57 |
{{/figure}} |
| 58 |
58 |
|
| 59 |
59 |
CSV-Datenquellen können in einer Quellcode-Ansicht oder in einer Tabellenansicht dargestellt werden. Die Ansicht kann mit einem Klick auf die entsprechende Schaltfläche {{ficon name="table-large"/}}/{{icon name="code"/}} in der Fußzeile unterhalb des Editierbereichs geändert werden. |
| 60 |
60 |
|
| 61 |
|
-//Quellcode-Ansicht einer CSV-Datenquelle//: |
|
66 |
+//Quellcode-Ansicht einer CSV-Datenquelle//: ([[CSV Dateiformat>>https://de.wikipedia.org/wiki/CSV_(Dateiformat)||target="_blank"]]) |
| 62 |
62 |
{{lightbox image="data_source_csv_source.png" title="Quellcode-Ansicht einer CSV-Datenquelle"/}} |
| 63 |
63 |
//Tabellenansicht einer CSV-Datenquelle//: |
| 64 |
64 |
{{lightbox image="data_source_csv_table.png" title="Tabellenansicht einer CSV-Datenquelle"/}} |
| ... |
... |
@@ -92,7
+92,7 @@ |
| 92 |
92 |
http(s):~/~/<server>/formcycle/datenquellecsv?mandantName=<Mandant-Name>&name=<Datenquellen-Name> |
| 93 |
93 |
{{/info}} |
| 94 |
94 |
|
| 95 |
|
-Bei Zugriff aus dem {{designer case="dat"/}} verwenden Sie immer das globale Variablen-Objekt //XFC_METADATA//, siehe hierzu auch [[Globale Designer Variablen>>doc:Main.Formular-Metadaten]]. Beispielsweise kann wie folgt darauf zugegriffen werden: {{code}}XFC_METADATA.urls.datasource_csv{{/code}}. |
|
100 |
+Bei Zugriff aus dem {{designer case="dat"/}} verwenden Sie immer das globale Variablen-Objekt //XFC_METADATA//, siehe hierzu auch [[Globale Designer Variablen>>https://jsdocs.formcycle.eu/jsdocs/de/modules/_formcycle_v6_de_d_.html#xfc_metadata||target="_blank"]]. Beispielsweise kann wie folgt darauf zugegriffen werden: {{code}}XFC_METADATA.urls.datasource_csv{{/code}}. |
| 96 |
96 |
|
| 97 |
97 |
Folgende Parameter sind möglich: |
| 98 |
98 |
|
| ... |
... |
@@ -109,10
+109,6 @@ |
| 109 |
109 |
|
| 110 |
110 |
=== Anwendungsbeispiel === |
| 111 |
111 |
|
| 112 |
|
-{{figure image="datenquelle_csv_7.png" width="300"}} |
| 113 |
|
-Ein Beispiel dafür, wie eine CSV-Datenquelle aussehen kann. Die Spalten werden durch Kommas getrennt. |
| 114 |
|
-{{/figure}} |
| 115 |
|
- |
| 116 |
116 |
{{code language="csv"}} |
| 117 |
117 |
anrede,vorname,nachname,plz,ort |
| 118 |
118 |
Herr,Max,Mustermann,1000,Musterhausen |
| ... |
... |
@@ -121,24
+121,21 @@ |
| 121 |
121 |
|
| 122 |
122 |
{{/code}} |
| 123 |
123 |
|
|
125 |
+Im {{designer case="dat"/}} wird dann folgendes Skript im [[Skriptbereich>>doc:Formcycle.FormDesigner.CodingPanel.WebHome]] verwendet. |
| 124 |
124 |
|
| 125 |
|
- |
| 126 |
|
- |
| 127 |
|
-Im {{designer case="dat"/}} wird dann folgendes Skript im [[Skriptbereich>>doc:Main.TAB - Script]] verwendet. |
| 128 |
|
- |
| 129 |
129 |
{{code language="javascript"}} |
| 130 |
130 |
$.getJSON( XFC_METADATA.urls.datasource_csv + "?name=Demo&mandantName=xima.de", function(json) { |
| 131 |
|
- var obj = json.returnValue[0] |
|
129 |
+ var obj = json.returnValue[0]; |
| 132 |
132 |
|
| 133 |
|
- $('[name=tfAnrede]').val(obj.anrede) |
| 134 |
|
- $('[name=tfVorname]').val(obj.vorname) |
| 135 |
|
- $('[name=tfName]').val(obj.nachname) |
| 136 |
|
- $('[name=tfPLZ]').val(obj.plz) |
| 137 |
|
- $('[name=tfOrt]').val(obj.ort) |
| 138 |
|
- }) |
|
131 |
+ $('[name=tfAnrede]').val(obj.anrede); |
|
132 |
+ $('[name=tfVorname]').val(obj.vorname); |
|
133 |
+ $('[name=tfName]').val(obj.nachname); |
|
134 |
+ $('[name=tfPLZ]').val(obj.plz); |
|
135 |
+ $('[name=tfOrt]').val(obj.ort); |
|
136 |
+ }); |
| 139 |
139 |
{{/code}} |
| 140 |
140 |
|
| 141 |
|
-{{lightbox image="datenquelle_csv_4.png" width="300"/}} |
|
139 |
+{{lightbox image="data_source_csv_designer_script_de.png"/}} |
| 142 |
142 |
|
| 143 |
143 |
Dieses Beispiel als Datenquelle für den {{designer case="acc"/}} [[zum Herunterladen>>attach:beispiel_datenquelle_csv.json||rel="__blank"]]. |
| 144 |
144 |
|