Wiki-Quellcode von Quellen
Zeige letzte Bearbeiter
author | version | line-number | content |
---|---|---|---|
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 | == Anlegen einer Datenquelle == | ||
11 | |||
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. | ||
13 | |||
14 | {{lightbox image="data_source_new_de.png"/}} | ||
15 | |||
16 | == CSV == | ||
17 | |||
18 | Hier können Sie Datensätze im CSV-Format eingeben. | ||
19 | |||
20 | * Wählen Sie unter //Typ// die Option //CSV//. | ||
21 | * Vergeben Sie einen eindeutigen Namen. | ||
22 | * Im Feld //Wert// geben Sie die Daten separiert mit einem Komma ein. | ||
23 | |||
24 | {{figure image="datenquelle_csv_8.png"}} | ||
25 | Die JSON-Struktur der CSV-Datenquelle. Auf diese JSON-Struktur kann dann per Javaskript über {{code}}XFC_METADATA.urls.datasource_[csv|json|xml]{{/code}} zugegriffen werden. | ||
26 | {{/figure}} | ||
27 | |||
28 | === Beispiel für eine CSV-Datenquelle === | ||
29 | |||
30 | {{info}} | ||
31 | Die CSV-Daten werden intern in ein JSON-Objekt umgewandelt, sodass die erste Zeile der //CSV-Datei// immer die Objektnamen für den späteren Zugriff definiert. | ||
32 | {{/info}} | ||
33 | |||
34 | {{code}} | ||
35 | Wert 1.1, Wert 1.2, Wert 1.3, Wert 1.4, ... | ||
36 | {{/code}} | ||
37 | |||
38 | Das Auslesen der Werte im {{designer case="dat"/}} erfolgt über das //Servlet// mit Namen //datenquellecsv//. | ||
39 | |||
40 | === Servlet-Parameter === | ||
41 | |||
42 | {{info}} | ||
43 | **Servlet-URL** | ||
44 | http(s):~/~/<server>/formcycle/datenquellecsv?mandantName=<Mandant-Name>&name=<Datenquellen-Name> | ||
45 | {{/info}} | ||
46 | |||
47 | 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}}. | ||
48 | |||
49 | Folgende Parameter sind möglich: | ||
50 | |||
51 | |=Parametername|=Beschreibung|=Erforderlich | ||
52 | |name|Muss dem Namen der CSV-Datenquelle entsprechen.|Ja | ||
53 | |mandantName|Muss dem Namen des Mandanten entsprechen, unter welchen diese Datenquelle erstellt wurde.|Ja, wenn //projektId// nicht gegeben. | ||
54 | |projektId|Muss der ID des Formulars entsprechen. Diese Information kann über {{code}}XFC_METADATA.currentProject.id{{/code}} abgerufen werden.|Ja, wenn //mandantName// nicht gegeben. | ||
55 | |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 | ||
56 | |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 | ||
57 | |csvTrennzeichen|Gibt das Trennzeichen zwischen den einzelnen Datenzellen an. Wird dieses nicht gesetzt, wird hier standardmäßig ein Komma {{code}},{{/code}} benutzt.|Nein | ||
58 | |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 | ||
59 | |||
60 | === Anwendungsbeispiel === | ||
61 | |||
62 | {{figure image="datenquelle_csv_7.png" width="300"}} | ||
63 | Ein Beispiel dafür, wie eine CSV-Datenquelle aussehen kann. Die Spalten werden durch Kommas getrennt. | ||
64 | {{/figure}} | ||
65 | |||
66 | {{code language="csv"}} | ||
67 | anrede,vorname,nachname,plz,ort | ||
68 | Herr,Max,Mustermann,1000,Musterhausen | ||
69 | Frau,Monika,Mustermann,2000,Musterdorf | ||
70 | Frau, Luise,Musterfrau,3000,Musterstadt | ||
71 | |||
72 | {{/code}} | ||
73 | |||
74 | |||
75 | |||
76 | |||
77 | Im {{designer case="dat"/}} wird dann folgendes Skript im [[Skriptbereich>>doc:Main.TAB - Script]] verwendet. | ||
78 | |||
79 | {{code language="javascript"}} | ||
80 | $.getJSON( XFC_METADATA.urls.datasource_csv + "?name=Demo&mandantName=xima.de", function(json) { | ||
81 | var obj = json.returnValue[0] | ||
82 | |||
83 | $('[name=tfAnrede]').val(obj.anrede) | ||
84 | $('[name=tfVorname]').val(obj.vorname) | ||
85 | $('[name=tfName]').val(obj.nachname) | ||
86 | $('[name=tfPLZ]').val(obj.plz) | ||
87 | $('[name=tfOrt]').val(obj.ort) | ||
88 | }) | ||
89 | {{/code}} | ||
90 | |||
91 | {{lightbox image="datenquelle_csv_4.png" width="300"/}} | ||
92 | |||
93 | Dieses Beispiel als Datenquelle für den {{designer case="acc"/}} [[zum Herunterladen>>attach:beispiel_datenquelle_csv.json||rel="__blank"]]. | ||
94 | |||
95 | === Sonderfall Auswahlelement === | ||
96 | |||
97 | {{figure image="data_source_csv_designer_de.png"}} | ||
98 | Die Anbindung einer Datenquelle an eine Auswahlelement erfolgt direkt im {{designer case="dat"/}} | ||
99 | {{/figure}} | ||
100 | |||
101 | Soll die //CSV//-Datenquelle direkt in ein [[Auswahlelement>>doc:Main.Auswahl]] geladen werden, erfolgt dies über die Eigenschaften des Auswahlelements im {{designer case="dat"/}}. | ||
102 | |||
103 | Der Inhalt der CSV-Datenquelle wird folgendermaßen in einem [[Auswahlelement>>doc:Main.Auswahl]] verarbeitet. | ||
104 | |||
105 | {{code}} | ||
106 | sichtbarer wert, übertragener, wert, optionaler wert, optionaler wert, ... | ||
107 | {{/code}} | ||
108 | |||
109 | 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. | ||
110 | |||
111 | {{code language="javascript"}} | ||
112 | $('[name=sel2]').find('option:selected').attr('col0'); | ||
113 | {{/code}} | ||
114 | |||
115 | 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. | ||
116 | |||
117 | == XML == | ||
118 | |||
119 | Die XML Datenquelle verhält sich analog zur //CSV//-Datenquelle, kann jedoch nicht direkt an ein [[Auswahlelement>>doc:Main.Auswahl]] gebunden werden. | ||
120 | |||
121 | {{figure image="datenquelle_xml.png" width="300"}} | ||
122 | 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. | ||
123 | {{/figure}} | ||
124 | |||
125 | === Beispiel für eine XML-Datenquelle === | ||
126 | |||
127 | {{code language="xml"}} | ||
128 | <root> | ||
129 | <person> | ||
130 | <anrede> | ||
131 | Herr | ||
132 | </anrede> | ||
133 | <vorname> | ||
134 | Max | ||
135 | </vorname> | ||
136 | <nachname> | ||
137 | Mustermann | ||
138 | </nachname> | ||
139 | </person> | ||
140 | <person> | ||
141 | <anrede> | ||
142 | Frau | ||
143 | </anrede> | ||
144 | <vorname> | ||
145 | Monika | ||
146 | </vorname> | ||
147 | <nachname> | ||
148 | Musterfrau | ||
149 | </nachname> | ||
150 | </person> | ||
151 | </root> | ||
152 | {{/code}} | ||
153 | |||
154 | |||
155 | === Servlet-Parameter === | ||
156 | |||
157 | {{info}} | ||
158 | **Servlet-URL** | ||
159 | http(s):~/~/<server>/formcycle/datenquellexml?mandantName=<Mandant-Name>&name=<Datenquellen-Name> | ||
160 | {{/info}} | ||
161 | |||
162 | 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}}. | ||
163 | |||
164 | Folgende Parameter sind möglich: | ||
165 | |||
166 | |=Parametername|=Beschreibung|=Erforderlich | ||
167 | |mandantName|Muss dem Namen des Mandanten entsprechen, unter welchem diese Datenquelle erstellt wurde.|Ja | ||
168 | |name|Muss dem Namen der CSV-Datenquelle entsprechen.|Ja | ||
169 | |||
170 | == JSON == | ||
171 | |||
172 | Die //JSON//-Datenquelle verhält sich analog zur //CSV//-Datenquelle, kann jedoch nicht direkt an ein [[Auswahlelement>>doc:Main.Auswahl]] gebunden werden. | ||
173 | |||
174 | {{figure image="datenquelle_json.png" width="300"}} | ||
175 | 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. | ||
176 | {{/figure}} | ||
177 | |||
178 | === Beispiel für eine JSON-Datenquelle === | ||
179 | |||
180 | {{code language="json"}} | ||
181 | {"person":[ | ||
182 | { | ||
183 | 'anrede':'Herr', | ||
184 | 'vorname':'Max', | ||
185 | 'nachname':'Mustermann' | ||
186 | }, | ||
187 | { | ||
188 | 'anrede':'Frau', | ||
189 | 'vorname':'Monika', | ||
190 | 'nachname':'Musterfrau' | ||
191 | } | ||
192 | ]} | ||
193 | {{/code}} | ||
194 | |||
195 | === Servlet-Parameter === | ||
196 | |||
197 | {{info}} | ||
198 | **Servlet-URL** | ||
199 | http(s):~/~/<server>/formcycle/datenquellejson?mandantName=<Mandant-Name>&name=<Datenquellen-Name> | ||
200 | {{/info}} | ||
201 | |||
202 | 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}}. | ||
203 | |||
204 | Folgende Parameter sind möglich: | ||
205 | |||
206 | |=Parametername|=Beschreibung|=Erforderlich | ||
207 | |mandantName| Muss dem Namen des Mandanten entsprechen, unter welchen diese Datenquelle erstellt wurde.|Ja | ||
208 | |name| Muss dem Namen der CSV-Datenquelle entsprechen.|Ja |