Wiki-Quellcode von Quellen

Verstecke letzte Bearbeiter

version	line-number	content
1.1	1	{{content/}}
	2
7.1	3	{{id name="fig_data_source"/}}
11.1	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}}
7.1	5
1.1	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
80.5	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 language="none"}}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.
1.1	9
53.1	10	{{info}}
54.1	11	Servlet-URL
80.5	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 language="none"}}XFC_METADATA.urls.datasource_[csv\|json\|xml]{{/code}} verfügbar.
53.1	13	{{/info}}
	14
10.1	15	== Anlegen einer Datenquelle ==
9.1	16
14.1	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//.
9.1	18
16.1	19	{{lightbox image="data_source_new_de.png" title="Datenquellen können aus Dateien importiert oder neu angelegt werden"/}}
11.1	20
27.1	21	Jede Datenquelle benötigt:
29.1	22
27.1	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
14.2	26	=== Importieren von Datenquellen aus Dateien ===
	27
15.1	28	Folgende Dateitypen können verwendet werden, um Datenquellen zu importieren:
14.2	29
15.1	30	* XML: //.xml//
26.1	31	* CSV: //.csv//, //.xls//, //.xlsx// (Excel)
15.1	32	* JSON: //.json//
14.2	33
41.1	34	{{id name="data_source_import_csv"/}}
19.1	35	__CSV-Datenquellen__
17.1	36
20.1	37	CSV-Datenquellen können aus unterschiedlichen Dateitypen importiert werden:
	38
	39	* //.csv//
	40	Es öffnet sich ein Dialog zur Konfiguration des Imports:
26.1	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).
20.1	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.
26.1	45
21.1	46	{{lightbox image="data_source_import_csv_de.png" title="Importdialog für CSV-Dateien"/}}
20.1	47
26.1	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
19.1	54	__Drag&Drop__
	55
80.2	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.
19.1	57
1.1	58	== CSV ==
	59
44.1	60	{{figure image="data_source_csv_servlet_json_comparison.png"}}
80.5	61	Die JSON-Struktur einer CSV-Datenquelle. Auf diese JSON-Struktur kann per Javascript über {{code language="none"}}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 language="none"}}colX{{/code}} verwendet. (2) Rechts ist die Datenquelle zu sehen, wenn die erste Zeile als Header verwendet wird.
1.1	62	{{/figure}}
	63
36.1	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.
31.1	65
61.1	66	//Quellcode-Ansicht einer CSV-Datenquelle//: ([[CSV Dateiformat>>https://de.wikipedia.org/wiki/CSV_(Dateiformat)\|\|target="_blank"]])
38.1	67	{{lightbox image="data_source_csv_source.png" title="Quellcode-Ansicht einer CSV-Datenquelle"/}}
37.1	68	//Tabellenansicht einer CSV-Datenquelle//:
38.1	69	{{lightbox image="data_source_csv_table.png" title="Tabellenansicht einer CSV-Datenquelle"/}}
37.1	70
46.1	71	=== Bearbeitung von CSV-Tabellen ===
	72
39.1	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.
80.7	76	* {{ficon name="trash-alt2"/}} Entfernen: {{html}}Entfernt die selektierte(n) Zeile(n) oder Spalte(n) oder leert die selektierte Zelle.{{/html}}
42.1	77	* {{icon name="upload"/}} Importieren: Öffnet den [[Dialog zum Importieren von CSV-Datenquellen>>\|\|anchor="data_source_import_csv"]].
40.1	78	* {{icon name="code"/}} Quellcode-Ansicht: Wechselt in die Quellcode-Ansicht.
39.1	79
46.1	80	=== Header von CSV-Datenquellen ===
	81
80.5	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 language="none"}}XFC_METADATA.urls.datasource_csv{{/code}}):
49.1	83
	84	* Aktiviert:
80.5	85	Die Zellen der erste Zeile werden als Schlüssel bzw. {{code language="none"}}keys{{/code}} für den Zugriff auf die Werte der jeweiligen Spalte verwendet (siehe [[Anwendungsbeispiel>>\|\|anchor="data_source_csv_example"]]).
49.1	86	* Deaktiviert:
80.5	87	Die Schlüssel bzw. {{code language="none"}}keys{{/code}} für den Zugriff auf die Werte der einzelnen Datensätze/Zeilen sind durchnummeriert, beginnend mit {{code language="none"}}0{{/code}}. Diese Schlüssel haben folgende Form: {{code language="none"}}colX{{/code}}, wobei {{code language="none"}}X{{/code}} für den Index der Spalte steht.
49.1	88
50.1	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"/}}
49.1	90
80.5	91	CSV-Datenquellen können im {{designer case="dat"/}} über das //Servlet// mit Namen {{code language="none"}}XFC_METADATA.urls.datasource_csv{{/code}} ausgelsen werden.
1.1	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
80.5	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 language="none"}}XFC_METADATA.urls.datasource_csv{{/code}}.
1.1	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.
80.5	107	\|projektId\|Muss der ID des Formulars entsprechen. Diese Information kann über {{code language="none"}}XFC_METADATA.currentProject.id{{/code}} abgerufen werden.\|Ja, wenn //mandantName// nicht gegeben.
1.1	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
80.5	110	\|csvTrennzeichen\|Gibt das Trennzeichen zwischen den einzelnen Datenzellen an. Wird dieses nicht gesetzt, wird hier standardmäßig ein Komma {{code language="none"}},{{/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 language="none"}}"{{/code}}.\| Nein
1.1	112
49.1	113	{{id name="data_source_csv_example"/}}
	114
1.1	115	=== Anwendungsbeispiel ===
	116
68.1	117	Es wurde eine CSV-Datenquelle mit folgendem Inhalt angelegt, bei welcher die erste Zeile als Header verwendet wird.
	118
1.1	119	{{code language="csv"}}
	120	anrede,vorname,nachname,plz,ort
	121	Herr,Max,Mustermann,1000,Musterhausen
	122	Frau,Monika,Mustermann,2000,Musterdorf
	123	Frau, Luise,Musterfrau,3000,Musterstadt
	124
	125	{{/code}}
	126
69.1	127	Im {{designer case="dat"/}} wird dann folgendes Skript im [[Skriptbereich>>doc:Formcycle.FormDesigner.CodingPanel.WebHome]] verwendet, um die Felder im Formular vorzubefüllen.
1.1	128
	129	{{code language="javascript"}}
	130	$.getJSON( XFC_METADATA.urls.datasource_csv + "?name=Demo&mandantName=xima.de", function(json) {
55.1	131	var obj = json.returnValue[0];
1.1	132
55.1	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	});
1.1	139	{{/code}}
	140
59.1	141	{{lightbox image="data_source_csv_designer_script_de.png"/}}
1.1	142
70.1	143	Dieses Beispielformular für den {{designer case="acc"/}} [[zum Herunterladen>>attach:CSV-Demo_de.json\|\|rel="__blank"]].
1.1	144
	145	=== Sonderfall Auswahlelement ===
	146
4.1	147	{{figure image="data_source_csv_designer_de.png"}}
1.1	148	Die Anbindung einer Datenquelle an eine Auswahlelement erfolgt direkt im {{designer case="dat"/}}
	149	{{/figure}}
	150
71.1	151	Soll die //CSV//-Datenquelle direkt in ein [[Auswahlelement>>doc:Formcycle.FormDesigner.FormElements.Selection.WebHome]] geladen werden, erfolgt dies über die Eigenschaften des Auswahlelements im {{designer case="dat"/}}.
1.1	152
72.1	153	Der Inhalt der CSV-Datenquelle wird folgendermaßen in einem [[Auswahlelement>>doc:Formcycle.FormDesigner.FormElements.Selection.WebHome]] verarbeitet:
1.1	154
80.5	155	{{code language="none"}}
71.1	156	sichtbarer wert, übertragener wert, optionaler wert, optionaler wert, ...
1.1	157	{{/code}}
	158
80.4	159	Die Spalten der Datenquelle werden für [[Auswahlelemente>>doc:Formcycle.FormDesigner.FormElements.Selection.WebHome]] wie folgt bezeichnet:
80.5	160	{{code language="none"}}col + Index der Spalte{{/code}}.
1.1	161
72.1	162	Beitzt die Datenquelle mehr als 2 Spalten, besitzt sie optionale Werte. Auf die optionalen Werte kann im Javascript über den folgenden jQuery-Selektor zugegriffen werden:
	163
1.1	164	{{code language="javascript"}}
72.1	165	$('[name=sel2]').find('option:selected').attr('col2');
1.1	166	{{/code}}
	167
72.1	168	Die optionalen Werte beginnen also mit Spaltenindex 2.
74.1	169	Ist die erste Zeile als Header markiert, so wird diese für das Auswahlelement ignoriert.
1.1	170
	171	== XML ==
	172
73.1	173	Die XML Datenquelle verhält sich analog zur //CSV//-Datenquelle, kann jedoch nicht direkt an ein [[Auswahlelement>>doc:Formcycle.FormDesigner.FormElements.Selection.WebHome]] gebunden werden.
1.1	174
75.1	175	{{figure image="data_source_xml_servlet_json.png" width="300"}}
80.5	176	Die JSON-Struktur der XML-Datenquelle. Auf diese JSON-Struktur kann dann per Javascript über {{code language="none"}}XFC_METADATA.urls.datasource_xml{{/code}} zugegriffen werden.
1.1	177	{{/figure}}
	178
	179	=== Beispiel für eine XML-Datenquelle ===
	180
	181	{{code language="xml"}}
	182	<root>
	183	<person>
	184	<anrede>
	185	Herr
	186	</anrede>
	187	<vorname>
	188	Max
	189	</vorname>
	190	<nachname>
	191	Mustermann
	192	</nachname>
	193	</person>
	194	<person>
	195	<anrede>
	196	Frau
	197	</anrede>
	198	<vorname>
	199	Monika
	200	</vorname>
	201	<nachname>
	202	Musterfrau
	203	</nachname>
	204	</person>
	205	</root>
	206	{{/code}}
	207
	208
	209	=== Servlet-Parameter ===
	210
	211	{{info}}
	212	Servlet-URL
	213	http(s):~/~/<server>/formcycle/datenquellexml?mandantName=<Mandant-Name>&name=<Datenquellen-Name>
	214	{{/info}}
	215
73.1	216	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/interfaces/_formcycle_v6_de_d_.formcyclede.xfcmetadata.html]]. Beispielsweise kann wie folgt darauf zugegriffen werden: {{code language="javascript"}}XFC_METADATA.urls.datasource_xml{{/code}}.
1.1	217
	218	Folgende Parameter sind möglich:
	219
	220	\|=Parametername\|=Beschreibung\|=Erforderlich
	221	\|mandantName\|Muss dem Namen des Mandanten entsprechen, unter welchem diese Datenquelle erstellt wurde.\|Ja
	222	\|name\|Muss dem Namen der CSV-Datenquelle entsprechen.\|Ja
	223
	224	== JSON ==
	225
77.1	226	Die //JSON//-Datenquelle verhält sich analog zur //CSV//-Datenquelle, kann jedoch nicht direkt an ein [[Auswahlelement>>doc:Formcycle.FormDesigner.FormElements.Selection.WebHome]] gebunden werden.
1.1	227
79.1	228	{{figure image="data_source_json_servlet_json.png"}}
80.5	229	Die JSON-Struktur der JSON-Datenquelle. Sie ist identisch mit der JSON-Datenquelle. Auf diese JSON-Struktur kann dann per Javascript über {{code language="none"}}XFC_METADATA.urls.datasource_json{{/code}} zugegriffen werden.
1.1	230	{{/figure}}
	231
	232	=== Beispiel für eine JSON-Datenquelle ===
	233
	234	{{code language="json"}}
	235	{"person":[
77.1	236	{
80.6	237	"anrede":"Herr",
	238	"vorname":"Max",
	239	"nachname":"Mustermann"
77.1	240	},
	241	{
80.6	242	"anrede":"Frau",
	243	"vorname":"Monika",
	244	"nachname":"Musterfrau"
77.1	245	}
1.1	246	]}
	247	{{/code}}
	248
	249	=== Servlet-Parameter ===
	250
	251	{{info}}
	252	Servlet-URL
	253	http(s):~/~/<server>/formcycle/datenquellejson?mandantName=<Mandant-Name>&name=<Datenquellen-Name>
	254	{{/info}}
	255
81.1	256	Bei Zugriff aus dem {{designer case="dat"/}} verwenden Sie immer das globale Variablenobjekt //XFC_METADATA//, siehe hierzu auch [[Globale Designer Variablen>>doc:Formcycle.FormDesigner.CodingPanel.ScriptTab.FormMetadata]]. Beispielweise kann wie folgt darauf zugegriffen werden: {{code language="javascript"}}XFC_METADATA.urls.datasource_json{{/code}}.
1.1	257
	258	Folgende Parameter sind möglich:
	259
	260	\|=Parametername\|=Beschreibung\|=Erforderlich
	261	\|mandantName\| Muss dem Namen des Mandanten entsprechen, unter welchen diese Datenquelle erstellt wurde.\|Ja
	262	\|name\| Muss dem Namen der CSV-Datenquelle entsprechen.\|Ja

Wiki-Quellcode von Quellen

Navigation