Wiki-Quellcode von Quellen

Zeige letzte Bearbeiter
1 {{content/}}
2
3 {{id name="fig_data_source"/}}
4 {{figure image="data_source_de.png"}}Konfigurationsoberfläche zum Anlegen von Datenquellen: (1) Liste existierender Datenquellen, (2) Bereich zum Editieren der selektierten Datenquelle, (3) Einstellungspanel der Datenquelle, (4) Servlet-URL der Datenquelle, um auf diese zugreifen zu können.{{/figure}}
5
6 Die Quellen bzw. Datenquellen werden als Text im Format CSV, JSON oder XML hinterlegt und können über den {{designer case="acc"/}} bzw. das Formular verarbeitet werden.
7
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
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
15 == Anlegen einer Datenquelle ==
16
17 Ö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//.
18
19 {{lightbox image="data_source_new_de.png" title="Datenquellen können aus Dateien importiert oder neu angelegt werden"/}}
20
21 Jede Datenquelle benötigt:
22
23 * einen eindeutigen Namen (im Einstellungspanel: siehe Punkt 3 in der [[Abbildung>>||anchor="fig_data_source"]])
24 * die eigentlichen Daten im Editierbereich (siehe Punkt 2 in der [[Abbildung>>||anchor="fig_data_source"]])
25
26 === Importieren von Datenquellen aus Dateien ===
27
28 Folgende Dateitypen können verwendet werden, um Datenquellen zu importieren:
29
30 * **XML**: //.xml//
31 * **CSV**: //.csv//, //.xls//, //.xlsx// (Excel)
32 * **JSON**: //.json//
33
34 {{id name="data_source_import_csv"/}}
35 __CSV-Datenquellen__
36
37 CSV-Datenquellen können aus unterschiedlichen Dateitypen importiert werden:
38
39 * //.csv//
40 Es öffnet sich ein Dialog zur Konfiguration des Imports:
41 ** **Trennzeichen**: Gibt an welches Trennzeichen in der Datei verwendet wird, um Datenfelder/Spalten voneinander zu trennen (typischerweise: Komma).
42 ** **Textqualifizierer**: Gibt an welches Feldbegrenzerzeichen in der Datei verwendet wird. Dieses Zeichen wird verwendet, um Sonderzeichen innerhalb der Datenfelder nutzen zu können (z. B. Komma in Dezimalzahlwerten).
43 ** **Beginnen ab Zeile**: Gibt an, ab welcher Zeile die CSV-Datei importiert werden soll.
44 ** **Leere Zeilen ignorieren**: Wenn aktiviert werden leere Zeilen beim Import ignoriert.
45
46 {{lightbox image="data_source_import_csv_de.png" title="Importdialog für CSV-Dateien"/}}
47
48 * //.xls//, //.xlsx//
49 Es öffnet sich ein Dialog zur Konfiguration des Imports:
50 ** **Zu importierende Tabellen**: Gibt an welche Arbeitsblätter/Tabellen aus der Datei importiert werden sollen.
51
52 {{lightbox image="data_source_import_excel_de.png" title="Importdialog für Excel-Dateien"/}}
53
54 __Drag&Drop__
55
56 Datenquellen können auch per Drag&Drop importiert werden. Wird eine Datei über die Liste (grüner Bereich gezogen), so wird eine neue Datenquelle vom entsprechenden Typ angelegt (bei Excel-Dateien wird eine Datenquelle pro Arbeitsblatt angelegt). Wird die Datenquelle allerdings über den Editierbereich einer bereits existierenden Datenquelle gezogen, so wird diese aktualisiert. Die Änderungen werden allerdings erst mit einem Klick auf "Speichern" {{icon name="save"/}} übernommen.
57
58 == CSV ==
59
60 {{figure image="data_source_csv_servlet_json_comparison.png"}}
61 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.
62 {{/figure}}
63
64 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.
65
66 //Quellcode-Ansicht einer CSV-Datenquelle//:
67 {{lightbox image="data_source_csv_source.png" title="Quellcode-Ansicht einer CSV-Datenquelle"/}}
68 //Tabellenansicht einer CSV-Datenquelle//:
69 {{lightbox image="data_source_csv_table.png" title="Tabellenansicht einer CSV-Datenquelle"/}}
70
71 === Bearbeitung von CSV-Tabellen ===
72
73 Zum Bearbeitung einer CSV-Tabelle befinden sich unterhalb des Editierbereichs eine Reihe von Schaltflächen:
74
75 * {{ficon name="plus-circle"/}} **Einfügen**: Fügt neue Zeilen oder Spalten relativ zur derzeit selektierten Zelle ein.
76 * {{ficon name="trash-alt2"/}} **Entfernen**: Entfernt die selektierte Zeile oder Spalte oder leert die selektierte Zelle.
77 * {{icon name="upload"/}} **Importieren**: Öffnet den [[Dialog zum Importieren von CSV-Datenquellen>>||anchor="data_source_import_csv"]].
78 * {{icon name="code"/}} **Quellcode-Ansicht**: Wechselt in die Quellcode-Ansicht.
79
80 === Header von CSV-Datenquellen ===
81
82 Für CSV-Datenquellen gibt es eine zusätzliche Option in den Datenquelleinstellungen. Die Option **Erste Zeile ist Header** regelt den Zugriff auf die Werte der Datenquelle über das entsprechende Servlet ({{code}}XFC_METADATA.urls.datasource_csv{{/code}}):
83
84 * **Aktiviert**:
85 Die Zellen der erste Zeile werden als Schlüssel bzw. {{code}}keys{{/code}} für den Zugriff auf die Werte der jeweiligen Spalte verwendet (siehe [[Anwendungsbeispiel>>||anchor="data_source_csv_example"]]).
86 * **Deaktiviert**:
87 Die Schlüssel bzw. {{code}}keys{{/code}} für den Zugriff auf die Werte der einzelnen Datensätze/Zeilen sind durchnummeriert, beginnend mit {{code}}0{{/code}}. Diese Schlüssel haben folgende Form: {{code}}colX{{/code}}, wobei {{code}}X{{/code}} für den Index der Spalte steht.
88
89 {{lightbox image="data_source_csv_settings_de.png" title="Die Option **Erste Zeile ist Header** regelt den Zugriff auf die Werte der Datenquelle über das entsprechende Servlet"/}}
90
91 CSV-Datenquellen können im {{designer case="dat"/}} über das //Servlet// mit Namen {{code}}XFC_METADATA.urls.datasource_csv{{/code}} ausgelsen werden.
92
93 === Servlet-Parameter ===
94
95 {{info}}
96 **Servlet-URL**
97 http(s):~/~/<server>/formcycle/datenquellecsv?mandantName=<Mandant-Name>&name=<Datenquellen-Name>
98 {{/info}}
99
100 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}}.
101
102 Folgende Parameter sind möglich:
103
104 |=Parametername|=Beschreibung|=Erforderlich
105 |name|Muss dem Namen der CSV-Datenquelle entsprechen.|Ja
106 |mandantName|Muss dem Namen des Mandanten entsprechen, unter welchen diese Datenquelle erstellt wurde.|Ja, wenn //projektId// nicht gegeben.
107 |projektId|Muss der ID des Formulars entsprechen. Diese Information kann über {{code}}XFC_METADATA.currentProject.id{{/code}} abgerufen werden.|Ja, wenn //mandantName// nicht gegeben.
108 |kopfzeile|Gibt eine Komma-separierte Liste der Spaltennamen der CSV-Tabelle an. Ist dieser nicht angegeben, so wird hierfür die erste Zeile der CSV-Tabelle verwendet.|Nein
109 |spaltenNamen|Gibt eine kommaseparierte Liste der Spalten an, welche Spalten vom //Servlet// mit den entsprechenden Werten zurückgeliefert werden. Hierbei werden je nach Verwendung die Namen der Spalten aus dem Parameter //kopfzeile// oder die Namen der ersten Zeile der //CSV//-Datenquelle erwartet.|Nein
110 |csvTrennzeichen|Gibt das Trennzeichen zwischen den einzelnen Datenzellen an. Wird dieses nicht gesetzt, wird hier standardmäßig ein Komma {{code}},{{/code}} benutzt.|Nein
111 |csvQuote|Das Trennzeichen, mit dem die Werte der Zeilen getrennt sind. Wird dieses nicht gesetzt, wird hier standardmäßig ein Anführungszeichen verwendet {{code}}"{{/code}}.| Nein
112
113 {{id name="data_source_csv_example"/}}
114
115 === Anwendungsbeispiel ===
116
117 {{figure image="datenquelle_csv_7.png" width="300"}}
118 Ein Beispiel dafür, wie eine CSV-Datenquelle aussehen kann. Die Spalten werden durch Kommas getrennt.
119 {{/figure}}
120
121 {{code language="csv"}}
122 anrede,vorname,nachname,plz,ort
123 Herr,Max,Mustermann,1000,Musterhausen
124 Frau,Monika,Mustermann,2000,Musterdorf
125 Frau, Luise,Musterfrau,3000,Musterstadt
126
127 {{/code}}
128
129
130
131
132 Im {{designer case="dat"/}} wird dann folgendes Skript im [[Skriptbereich>>doc:Main.TAB - Script]] verwendet.
133
134 {{code language="javascript"}}
135 $.getJSON( XFC_METADATA.urls.datasource_csv + "?name=Demo&mandantName=xima.de", function(json) {
136 var obj = json.returnValue[0];
137
138 $('[name=tfAnrede]').val(obj.anrede);
139 $('[name=tfVorname]').val(obj.vorname);
140 $('[name=tfName]').val(obj.nachname);
141 $('[name=tfPLZ]').val(obj.plz);
142 $('[name=tfOrt]').val(obj.ort);
143 });
144 {{/code}}
145
146 {{lightbox image="data_source_csv_designer_script_de.png"/}}
147
148 Dieses Beispiel als Datenquelle für den {{designer case="acc"/}} [[zum Herunterladen>>attach:beispiel_datenquelle_csv.json||rel="__blank"]].
149
150 === Sonderfall Auswahlelement ===
151
152 {{figure image="data_source_csv_designer_de.png"}}
153 Die Anbindung einer Datenquelle an eine Auswahlelement erfolgt direkt im {{designer case="dat"/}}
154 {{/figure}}
155
156 Soll die //CSV//-Datenquelle direkt in ein [[Auswahlelement>>doc:Main.Auswahl]] geladen werden, erfolgt dies über die Eigenschaften des Auswahlelements im {{designer case="dat"/}}.
157
158 Der Inhalt der CSV-Datenquelle wird folgendermaßen in einem [[Auswahlelement>>doc:Main.Auswahl]] verarbeitet.
159
160 {{code}}
161 sichtbarer wert, übertragener, wert, optionaler wert, optionaler wert, ...
162 {{/code}}
163
164 Werden mehr als der sichtbare und übertragene Wert angegeben, also optionale Werte, so können diese im Javaskript über den folgenden jQuery-Selektor abgerufen werden.
165
166 {{code language="javascript"}}
167 $('[name=sel2]').find('option:selected').attr('col0');
168 {{/code}}
169
170 Jeder optionale Wert wird am Auswahlelement als Attribut {{code}}col + Index des optionalen Wert{{/code}} gespeichert. Bei z.B. drei optionalen Werten würde es also //col0//, //col1// und //col2// geben.
171
172 == XML ==
173
174 Die XML Datenquelle verhält sich analog zur //CSV//-Datenquelle, kann jedoch nicht direkt an ein [[Auswahlelement>>doc:Main.Auswahl]] gebunden werden.
175
176 {{figure image="datenquelle_xml.png" width="300"}}
177 Die JSON-Struktur der XML-Datenquelle. Auf diese JSON-Struktur kann dann per Javaskript über {{code}}XFC_METADATA.urls.datasource_[csv|json|xml]{{/code}} zugegriffen werden.
178 {{/figure}}
179
180 === Beispiel für eine XML-Datenquelle ===
181
182 {{code language="xml"}}
183 <root>
184 <person>
185 <anrede>
186 Herr
187 </anrede>
188 <vorname>
189 Max
190 </vorname>
191 <nachname>
192 Mustermann
193 </nachname>
194 </person>
195 <person>
196 <anrede>
197 Frau
198 </anrede>
199 <vorname>
200 Monika
201 </vorname>
202 <nachname>
203 Musterfrau
204 </nachname>
205 </person>
206 </root>
207 {{/code}}
208
209
210 === Servlet-Parameter ===
211
212 {{info}}
213 **Servlet-URL**
214 http(s):~/~/<server>/formcycle/datenquellexml?mandantName=<Mandant-Name>&name=<Datenquellen-Name>
215 {{/info}}
216
217 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 language="javascript"}}XFC_METADATA.urls.datasource_xml{{/code}}.
218
219 Folgende Parameter sind möglich:
220
221 |=Parametername|=Beschreibung|=Erforderlich
222 |mandantName|Muss dem Namen des Mandanten entsprechen, unter welchem diese Datenquelle erstellt wurde.|Ja
223 |name|Muss dem Namen der CSV-Datenquelle entsprechen.|Ja
224
225 == JSON ==
226
227 Die //JSON//-Datenquelle verhält sich analog zur //CSV//-Datenquelle, kann jedoch nicht direkt an ein [[Auswahlelement>>doc:Main.Auswahl]] gebunden werden.
228
229 {{figure image="datenquelle_json.png" width="300"}}
230 Die JSON-Struktur der JSON-Datenquelle. Sie ist identisch mit der JSON-Datenquelle. Auf diese JSON-Struktur kann dann per Javaskript über {{code}}XFC_METADATA.urls.datasource_[csv|json|xml]{{/code}} zugegriffen werden.
231 {{/figure}}
232
233 === Beispiel für eine JSON-Datenquelle ===
234
235 {{code language="json"}}
236 {"person":[
237 {
238 'anrede':'Herr',
239 'vorname':'Max',
240 'nachname':'Mustermann'
241 },
242 {
243 'anrede':'Frau',
244 'vorname':'Monika',
245 'nachname':'Musterfrau'
246 }
247 ]}
248 {{/code}}
249
250 === Servlet-Parameter ===
251
252 {{info}}
253 **Servlet-URL**
254 http(s):~/~/<server>/formcycle/datenquellejson?mandantName=<Mandant-Name>&name=<Datenquellen-Name>
255 {{/info}}
256
257 Bei Zugriff aus dem {{designer case="dat"/}} verwenden Sie immer das globale Variablenobjekt //XFC_METADATA//, siehe hierzu auch [[Globale Designer Variablen>>doc:Main.Formular-Metadaten]]. Beispielweise kann wie folgt darauf zugegriffen werden: {{code language="javascript"}}XFC_METADATA.urls.datasource_json{{/code}}.
258
259 Folgende Parameter sind möglich:
260
261 |=Parametername|=Beschreibung|=Erforderlich
262 |mandantName| Muss dem Namen des Mandanten entsprechen, unter welchen diese Datenquelle erstellt wurde.|Ja
263 |name| Muss dem Namen der CSV-Datenquelle entsprechen.|Ja

Navigation

Copyright 2000-2024