Changes for page Quellen
Change comment:
There is no comment for this version
Summary
-
Page properties (2 modified, 0 added, 0 removed)
Details
- Page properties
-
- Author
-
... ... @@ -1,1 +1,1 @@ 1 -XWiki. nlo1 +XWiki.gru - Content
-
... ... @@ -1,13 +1,16 @@ 1 1 {{content/}} 2 2 3 3 {{id name="fig_data_source"/}} 4 -{{figure image="data_source_en.png" }} 5 -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. 6 -{{/figure}} 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}} 7 7 8 8 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. 9 -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. 10 10 9 +{{info}} 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 language="none"}}XFC_METADATA.urls.datasource_[csv|json|xml]{{/code}}. 12 +{{/info}} 13 + 11 11 == Creating a data source == 12 12 13 13 Open the module "Data > Sources" and click the button "New" {{ficon name="plus-circle-outline"/}} in the header of the list (see point 1 in [[figure>>||anchor="fig_data_source"]]). After that you will be prompted to either create an empty data source or import one from a file. Three types of data sources can be created: //XML//, //CSV// und //JSON//. ... ... @@ -45,37 +45,47 @@ 45 45 Opens up a dialog for configuring the import: 46 46 ** **Sheets to import**: Determines which worksheets/tables should be imported from the file. 47 47 48 -{{lightbox image="data_source_import_excel_ de.png" title="Importdialog für Excel-Dateien"/}}51 +{{lightbox image="data_source_import_excel_en.png" title="Importdialog für Excel-Dateien"/}} 49 49 50 50 __Drag&Drop__ 51 51 52 -Data sources can be imported by Drag&Drop as well. 53 -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. 55 +Data sources can be imported by Drag&Drop as well. If a file is being dropped over the list (green area) than a new data source of the corresponding type will be created (for Excel files: one data source per worksheet will be created). If a file is being dropped over an existing data source than it will be updated. Changes will only take effect after the "Save" {{icon name="save"/}} button is clicked. 54 54 55 55 == CSV == 56 56 57 -Here you can insert data sets in the CSV format. 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 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 +{{/figure}} 58 58 59 -* Choose the option //CSV// under //type//. 60 -* Assign an explicit name. 61 -* Insert the data sperated with a comma in the arrey //value//. 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. 62 62 63 -{{figure image="datenquelle_csv_8.png" width="300"}} 64 -The JSON structure of the CSV data source. To this JSON structure can only be accessed via {{code}}XFC_METADATA.urls.datasource_[csv|json|xml]{{/code}}. 65 -{{/figure}} 65 +//Source code view of a CSV data source//: ([[CSV file format>>https://en.wikipedia.org/wiki/Comma-separated_values||target="_blank"]]) 66 +{{lightbox image="data_source_csv_source.png" title="Source code view of a CSV data source"/}} 67 +//Table view of a CSV data source//: 68 +{{lightbox image="data_source_csv_table.png" title="Table view of a CSV data source"/}} 66 66 67 -=== E xamplefor aCSVdatasource ===70 +=== Editing CSV tables === 68 68 69 -{{info}} 70 -The CSV data are converted to a JSON object internally, so that the first line of the //CSV data// always defines the object names for the later access. 71 -{{/info}} 72 +There is a row of buttons beneath the editing area for editing the CSV data table: 72 72 73 -{{code}} 74 -Value 1.1, value 1.2, value 1.3, value 1.4, ... 75 -{{/code}} 74 +* {{ficon name="plus-circle"/}} **Insert**: Inserts new rows or columns relative to the selected cell. 75 +* {{ficon name="trash-alt2"/}} **Remove**: Removes the selected row(s) or column(s) or empties the selected cell. 76 +* {{icon name="upload"/}} **Import**: Opens up the [[dialog for importing CSV data sources>>||anchor="data_source_import_csv"]]. 77 +* {{icon name="code"/}} **Source code view**: Switches to source code view. 76 76 77 - Thereadoutofthevalues inthe{{designer/}} ensues through the //servlet// with the namen //datenquellecsv//.79 +=== Header of CSV data sources === 78 78 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 + 83 +* **Activated**: 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 +* **Deactivated**: 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 + 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 + 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 + 79 79 === Servlet parameters === 80 80 81 81 {{info}} ... ... @@ -83,56 +83,54 @@ 83 83 http(s):~/~/<server>/formcycle/datenquellecsv?mandantName=<Mandant-Name>&name=<Datenquellen-Name> 84 84 {{/info}} 85 85 86 - Atanaccessof the {{designer/}}alwaysusethe globalvariables object //XFC_METADATA//, see also[[globaldesignervariables>>doc:Formcycle.FormDesigner.CodingPanel.ScriptTab.FormMetadata]].Forexampletcanbeaccessedasfollows: {{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}}. 87 87 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 + 88 88 The following parameters are possible: 89 89 90 90 |=name of the parameter|=description|=necessary 91 91 |name|Must match the name of the CSV data source.|Yes 92 92 |mandantName|Must match the name of the client under which the data source was created.|Yes, if //projektId// is not given. 93 -|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. 94 94 |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 95 95 |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 96 -|csvTrennzeichen|Indicates the seperator between the single data cells. If this is not set, a comma {{code}},{{/code}} is used by default.|No 97 -|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 98 98 99 99 === Application example === 100 100 101 -{{figure image="087En.png" width="300"}} 102 -An example of how a CSV datasource can look. The columns are seperated through commas. 103 -{{/figure}} 116 +A CSV data source with the option activated: **First row is header**. It has the following content: 104 104 105 105 {{code language="csv"}} 106 -title,first name,lastname,plz,location119 +title,firstName,lastName,zip,city 107 107 Herr,Max,Mustermann,1000,Musterhausen 108 108 Frau,Monika,Mustermann,2000,Musterdorf 109 109 Frau, Luise,Musterfrau,3000,Musterstadt 123 + 110 110 {{/code}} 111 111 126 +In the {{designer/}} the following script is used in the [[script area>>doc:Formcycle.FormDesigner.CodingPanel.ScriptTab.WebHome]] for pre-filling form fields: 112 112 113 - 114 - 115 -In the {{designer/}} the following script is used in the [[script area>>doc:Formcycle.FormDesigner.CodingPanel.ScriptTab.WebHome]]. 116 - 117 117 {{code language="javascript"}} 118 118 $.getJSON( XFC_METADATA.urls.datasource_csv + "?name=Demo&mandantName=xima.de", function(json) { 119 - var obj = json.returnValue[0] 130 + var obj = json.returnValue[0]; 120 120 121 - $('[name=tf Anrede]').val(obj.anrede)122 - $('[name=tf Vorname]').val(obj.vorname)123 - $('[name=tfName]').val(obj. nachname)124 - $('[name=tf PLZ]').val(obj.plz)125 - $('[name=tf Ort]').val(obj.ort)126 - }) 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 + }); 127 127 {{/code}} 128 128 129 -{{ figureimage="088En.png"width="300"/}}140 +{{lightbox image="data_source_csv_designer_script_en.png"/}} 130 130 131 -This example asa data source for the {{designer/}}[[fordownloading>>attach:beispiel_datenquelle_csv.json||rel="__blank"]].142 +This form example is provided as a [[download>>attach:CSV-Demo_en.json||rel="__blank"]]. 132 132 133 133 === Exeption selection element === 134 134 135 -{{figure image="data_source_csv_designer_ de.png"}}146 +{{figure image="data_source_csv_designer_en.png"}} 136 136 The connection of a data source to a selection element takes place directly in the {{designer/}} 137 137 {{/figure}} 138 138 ... ... @@ -140,24 +140,28 @@ 140 140 141 141 The content of the CSV data source is processed in a [[selection element>>doc:Formcycle.FormDesigner.FormElements.Selection]]. 142 142 143 -{{code}} 144 -visible value, assigned value, optional value, optional value sichtbarer wert, ...154 +{{code language="none"}} 155 +visible value, assigned value, optional value, optional value, ... 145 145 {{/code}} 146 146 147 -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}}. 148 148 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 + 149 149 {{code language="javascript"}} 150 -$('[name=sel2]').find('option:selected').attr('col 0');164 +$('[name=sel2]').find('option:selected').attr('col2'); 151 151 {{/code}} 152 152 153 -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. 154 154 155 155 == XML == 156 156 157 157 The XML data source acts analogously to the //CSV// data source, but cannot be bound to a [[selection element>>doc:Formcycle.FormDesigner.FormElements.Selection]]. 158 158 159 -{{figure image="dat enquelle_xml.png" width="300"}}160 -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. 161 161 {{/figure}} 162 162 163 163 === Example for an XML data source === ... ... @@ -209,8 +209,8 @@ 209 209 210 210 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. 211 211 212 -{{figure image="daten quelle_json.png"width="300"}}213 -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}}. 214 214 {{/figure}} 215 215 216 216 === Example for a JSON data source === ... ... @@ -217,16 +217,16 @@ 217 217 218 218 {{code language="json"}} 219 219 {"person":[ 220 - 221 - 'anrede':'Herr',222 - 'vorname':'Max',223 - 'nachname':'Mustermann'224 - }, 225 - 226 - 'anrede':'Frau',227 - 'vorname':'Monika',228 - 'nachname':'Musterfrau'229 - 235 + { 236 + "anrede":"Herr", 237 + "vorname":"Max", 238 + "nachname":"Mustermann" 239 + }, 240 + { 241 + "anrede":"Frau", 242 + "vorname":"Monika", 243 + "nachname":"Musterfrau" 244 + } 230 230 ]} 231 231 {{/code}} 232 232