From version < 12.1 >
edited by nlo
on 10.05.2019, 16:29
To version < 14.3
edited by gru
on 05.05.2020, 12:42
<
Change comment: There is no comment for this version

Summary

Details

Page properties
Author
... ... @@ -1,1 +1,1 @@
1 -XWiki.nlo
1 +XWiki.gru
Content
... ... @@ -4,11 +4,11 @@
4 4  {{figure image="data_source_en.png"}}Configuration screen for creating data sources: (1) list of existing data sources, (2) area for editing the selected data source, (3) settings panel of the data source, (4) servlet URL for accessing the data source.{{/figure}}
5 5  
6 6  The sources or rather data sources are lodged as text in the format CSV, JSON or XML and can be worked up through the {{designer/}}/the form.
7 -To have an access to data sources in the script area via javascript too, all data sources are converted into a JSON structure and customized in the object {{code}}XFC_METADATA.urls.datasource_[csv|json|xml]{{/code}}. The structure of this JSON structure for the different data sources is expounded in the respective section.
7 +To have an access to data sources in the script area via javascript too, all data sources are converted into a JSON structure and customized in the object {{code language="none"}}XFC_METADATA.urls.datasource_[csv|json|xml]{{/code}}. The structure of this JSON structure for the different data sources is expounded in the respective section.
8 8  
9 9  {{info}}
10 10  **Servlet URL**
11 -The servlet URL of a data source will be displayed on the configuration screen (see point 4 in [[figure>>||anchor="fig_data_source"]]) and is provided in the JS object {{code}}XFC_METADATA.urls.datasource_[csv|json|xml]{{/code}}.
11 +The servlet URL of a data source will be displayed on the configuration screen (see point 4 in [[figure>>||anchor="fig_data_source"]]) and is provided in the JS object {{code language="none"}}XFC_METADATA.urls.datasource_[csv|json|xml]{{/code}}.
12 12  {{/info}}
13 13  
14 14  == Creating a data source ==
... ... @@ -57,7 +57,7 @@
57 57  == CSV ==
58 58  
59 59  {{figure image="data_source_csv_servlet_json_comparison.png"}}
60 -The JSON structure of a CSV data source. This JSON structure can be accessed through JavaScript via {{code}}XFC_METADATA.urls.datasource_csv{{/code}}. (1) On the left there is the JSON structure of the data source with out using the first row as a header. Instead the headers are of the form: {{code}}colX{{/code}}. (2) On the right there is the data source where the first row is being used as the header.
60 +The JSON structure of a CSV data source. This JSON structure can be accessed through JavaScript via {{code language="none"}}XFC_METADATA.urls.datasource_csv{{/code}}. (1) On the left there is the JSON structure of the data source with out using the first row as a header. Instead the headers are of the form: {{code language="none"}}colX{{/code}}. (2) On the right there is the data source where the first row is being used as the header.
61 61  {{/figure}}
62 62  
63 63  CSV data sources can be viewed in a source code view or in a table view. The view can be switched by clicking the appropriate button {{ficon name="table-large"/}}/{{icon name="code"/}} beneath the editing area.
... ... @@ -78,16 +78,16 @@
78 78  
79 79  === Header of CSV data sources ===
80 80  
81 -There is an additional option for CSV data sources in the data source settings. The option **First row is header** determines how the values of the data sources are being accessed via its servlet ({{code}}XFC_METADATA.urls.datasource_csv{{/code}}):
81 +There is an additional option for CSV data sources in the data source settings. The option **First row is header** determines how the values of the data sources are being accessed via its servlet ({{code language="none"}}XFC_METADATA.urls.datasource_csv{{/code}}):
82 82  
83 83  * **Activated**:
84 -The cells of the first row will be used as {{code}}keys{{/code}} for accessing the values of the respective columns (see [[example>>||anchor="data_source_csv_example"]]).
84 +The cells of the first row will be used as {{code language="none"}}keys{{/code}} for accessing the values of the respective columns (see [[example>>||anchor="data_source_csv_example"]]).
85 85  * **Deactivated**:
86 -The {{code}}keys{{/code}} for accessing the values of individual data fields/ rows are enumerated, starting with {{code}}0{{/code}}. These keys have the following form: {{code}}colX{{/code}} where {{code}}X{{/code}} stands for the column index.
86 +The {{code language="none"}}keys{{/code}} for accessing the values of individual data fields/ rows are enumerated, starting with {{code language="none"}}0{{/code}}. These keys have the following form: {{code language="none"}}colX{{/code}} where {{code language="none"}}X{{/code}} stands for the column index.
87 87  
88 88  {{lightbox image="data_source_csv_settings_en.png" title="The option **first row is header** determines how the values of CSV data sources are accessed with its servlet"/}}
89 89  
90 -CSV data sources can be accessed in the {{designer case="dat"/}} via its servlet: {{code}}XFC_METADATA.urls.datasource_csv{{/code}}.
90 +CSV data sources can be accessed in the {{designer case="dat"/}} via its servlet: {{code language="none"}}XFC_METADATA.urls.datasource_csv{{/code}}.
91 91  
92 92  === Servlet parameters ===
93 93  
... ... @@ -96,56 +96,54 @@
96 96  http(s):~/~/<server>/formcycle/datenquellecsv?mandantName=<Mandant-Name>&name=<Datenquellen-Name>
97 97  {{/info}}
98 98  
99 -At an access of the {{designer/}} always use the global variables object //XFC_METADATA//, see also [[global designer variables>>doc:Formcycle.FormDesigner.CodingPanel.ScriptTab.FormMetadata]]. For example it can be accessed as follows: {{code}}XFC_METADATA.urls.datasource_csv{{/code}}.
99 +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}}.
100 100  
101 +Always use the global variables object {{code language="none"}}XFC_METADATA{{/code}} when accessing data sources from the {{designer/}}, see also [[global designer variables>>doc:Formcycle.FormDesigner.CodingPanel.ScriptTab.FormMetadata]]. The servlet URK can be accessed as follows: {{code language="none"}}XFC_METADATA.urls.datasource_csv{{/code}}.
102 +
101 101  The following parameters are possible:
102 102  
103 103  |=name of the parameter|=description|=necessary
104 104  |name|Must match the name of the CSV data source.|Yes
105 105  |mandantName|Must match the name of the client under which the data source was created.|Yes, if //projektId// is not given.
106 -|projektId|Must match the ID of the form. These information can be recalled via {{code}}XFC_METADATA.currentProject.id{{/code}}.|Yes, if //mandantName// is not given.
108 +|projektId|Must match the ID of the form. These information can be recalled via {{code language="none"}}XFC_METADATA.currentProject.id{{/code}}.|Yes, if //mandantName// is not given.
107 107  |kopfzeile|Indicates a comma seperated list with column name of the CSV table. If this is not given, the first line of the CSV is used.|No
108 108  |spaltenNamen|Indicates a comma seperated list of the column, which columns are redelivered of the //servlet// with the corresponding value. At this, according to using, the names of the columns of the parameter //headline// or the name of the first line of the //CSV// databaseHierbei are expected.|No
109 -|csvTrennzeichen|Indicates the seperator between the single data cells. If this is not set, a comma {{code}},{{/code}} is used by default.|No
110 -|csvQuote|The seperator with which the values of the lines are seperated. If this is not set, a inverted comma {{code}}"{{/code}} is used by default.| No
111 +|csvTrennzeichen|Indicates the seperator between the single data cells. If this is not set, a comma {{code language="none"}},{{/code}} is used by default.|No
112 +|csvQuote|The seperator with which the values of the lines are seperated. If this is not set, a inverted comma {{code language="none"}}"{{/code}} is used by default.| No
111 111  
112 112  === Application example ===
113 113  
114 -{{figure image="087En.png" width="300"}}
115 -An example of how a CSV datasource can look. The columns are seperated through commas.
116 -{{/figure}}
116 +A CSV data source with the option activated: **First row is header**. It has the following content:
117 117  
118 118  {{code language="csv"}}
119 -title,first name,last name,plz,location
119 +title,firstName,lastName,zip,city
120 120  Herr,Max,Mustermann,1000,Musterhausen
121 121  Frau,Monika,Mustermann,2000,Musterdorf
122 122  Frau, Luise,Musterfrau,3000,Musterstadt
123 +
123 123  {{/code}}
124 124  
126 +In the {{designer/}} the following script is used in the [[script area>>doc:Formcycle.FormDesigner.CodingPanel.ScriptTab.WebHome]] for pre-filling form fields:
125 125  
126 -
127 -
128 -In the {{designer/}} the following script is used in the [[script area>>doc:Formcycle.FormDesigner.CodingPanel.ScriptTab.WebHome]].
129 -
130 130  {{code language="javascript"}}
131 131  $.getJSON( XFC_METADATA.urls.datasource_csv + "?name=Demo&mandantName=xima.de", function(json) {
132 - var obj = json.returnValue[0]
130 + var obj = json.returnValue[0];
133 133  
134 - $('[name=tfAnrede]').val(obj.anrede)
135 - $('[name=tfVorname]').val(obj.vorname)
136 - $('[name=tfName]').val(obj.nachname)
137 - $('[name=tfPLZ]').val(obj.plz)
138 - $('[name=tfOrt]').val(obj.ort)
139 - })
132 + $('[name=tfTitle]').val(obj.title);
133 + $('[name=tfFirstName]').val(obj.firstName);
134 + $('[name=tfLastName]').val(obj.lastName);
135 + $('[name=tfZIP]').val(obj.zip);
136 + $('[name=tfCity]').val(obj.city);
137 + });
140 140  {{/code}}
141 141  
142 -{{figure image="088En.png" width="300"/}}
140 +{{lightbox image="data_source_csv_designer_script_en.png"/}}
143 143  
144 -This example as a data source for the {{designer/}} [[for downloading>>attach:beispiel_datenquelle_csv.json||rel="__blank"]].
142 +This form example is provided as a [[download>>attach:CSV-Demo_en.json||rel="__blank"]].
145 145  
146 146  === Exeption selection element ===
147 147  
148 -{{figure image="data_source_csv_designer_de.png"}}
146 +{{figure image="data_source_csv_designer_en.png"}}
149 149  The connection of a data source to a selection element takes place directly in the {{designer/}}
150 150  {{/figure}}
151 151  
... ... @@ -153,24 +153,28 @@
153 153  
154 154  The content of the CSV data source is processed in a [[selection element>>doc:Formcycle.FormDesigner.FormElements.Selection]].
155 155  
156 -{{code}}
157 -visible value, assigned value, optional value, optional valuesichtbarer wert, ...
154 +{{code language="none"}}
155 +visible value, assigned value, optional value, optional value, ...
158 158  {{/code}}
159 159  
160 -If more than the visible and the assigned value are indicated, so optional values, the can be invoked in JavaScript through the following jQuery selector.
158 +Columns of the data source are use as follows for [[selection elements>>doc:Formcycle.FormDesigner.FormElements.Selection]]:
159 +{{code language="none"}}col + column index{{/code}}.
161 161  
161 +If a data source has more than two columns than it contains optional values. These optional values can be accessed with JavaScript via the following jQuery selector:
162 +
162 162  {{code language="javascript"}}
163 -$('[name=sel2]').find('option:selected').attr('col0');
164 +$('[name=sel2]').find('option:selected').attr('col2');
164 164  {{/code}}
165 165  
166 -Every optional value is stored to the selection element as attribute {{code}}col + index of the optional value{{/code}}. At e.g. three optional values, there would be //col0//, //col1// and //col2//.
167 +Optinal values start at column index 2.
168 +If the first row is marked as a header than it will be ignored for selection elements.
167 167  
168 168  == XML ==
169 169  
170 170  The XML data source acts analogously to the //CSV// data source, but cannot be bound to a [[selection element>>doc:Formcycle.FormDesigner.FormElements.Selection]].
171 171  
172 -{{figure image="datenquelle_xml.png" width="300"}}
173 -The JSON structure of the XML data source. To this JSON structure can than be accessed to {{code}}XFC_METADATA.urls.datasource_[csv|json|xml]{{/code}} via Javascript.
174 +{{figure image="data_source_xml_servlet_json.png" width="300"}}
175 +The JSON structure of the XML data source. To this JSON structure can than be accessed to {{code language="none"}}XFC_METADATA.urls.datasource_xml{{/code}} via Javascript.
174 174  {{/figure}}
175 175  
176 176  === Example for an XML data source ===
... ... @@ -222,8 +222,8 @@
222 222  
223 223  The //JSON// data source acts analogously to the //CSV// data source, but cannot be bound to a [[selection element>>doc:Formcycle.FormDesigner.FormElements.Selection]] directly.
224 224  
225 -{{figure image="datenquelle_json.png" width="300"}}
226 -The JSON structure of the JSON data source. It is identically equal to the JSON data source. This JSON structure can be accessed via Javascript through {{code}}XFC_METADATA.urls.datasource_[csv|json|xml]{{/code}}.
227 +{{figure image="data_source_json_servlet_json.png"}}
228 +The JSON structure of the JSON data source. It is identically equal to the JSON data source. This JSON structure can be accessed via Javascript through {{code language="none"}}XFC_METADATA.urls.datasource_json{{/code}}.
227 227  {{/figure}}
228 228  
229 229  === Example for a JSON data source ===
... ... @@ -230,16 +230,16 @@
230 230  
231 231  {{code language="json"}}
232 232  {"person":[
233 - {
234 - 'anrede':'Herr',
235 - 'vorname':'Max',
236 - 'nachname':'Mustermann'
237 - },
238 - {
239 - 'anrede':'Frau',
240 - 'vorname':'Monika',
241 - 'nachname':'Musterfrau'
242 - }
235 + {
236 + "anrede":"Herr",
237 + "vorname":"Max",
238 + "nachname":"Mustermann"
239 + },
240 + {
241 + "anrede":"Frau",
242 + "vorname":"Monika",
243 + "nachname":"Musterfrau"
244 + }
243 243  ]}
244 244  {{/code}}
245 245  
Copyright 2000-2024