Changes for page Quellen

From version < 8.2 >

edited by nlo
on 10.05.2019, 15:08

To version < 14.3

edited by gru
on 05.05.2020, 12:42

Change comment: There is no comment for this version

Raw
Rendered

Summary

Page properties (2 modified, 0 added, 0 removed)

Details

Page properties

Author

@@ -1,1
          +1,1 @@
--XWiki.nlo
++XWiki.gru

Content

@@ -1,13
          +1,16 @@
  {{content/}}
  {{id name="fig_data_source"/}}
--{{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}}
++{{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}}
  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.
--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.
++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.
++{{info}}
++**Servlet URL**
++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}}.
++{{/info}}
++
  == Creating a data source ==
  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//.
@@ -28,53
          +28,64 @@
  * **JSON**: //.json//
  {{id name="data_source_import_csv"/}}
--__CSV-Datenquellen__
++__CSV data sources__
--CSV-Datenquellen können aus unterschiedlichen Dateitypen importiert werden:
++CSV data sources can be imported from different file types:
  * //.csv//
--Es öffnet sich ein Dialog zur Konfiguration des Imports:
--** **Trennzeichen**: Gibt an welches Trennzeichen in der Datei verwendet wird, um Datenfelder/Spalten voneinander zu trennen (typischerweise: Komma).
--** **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).
--** **Beginnen ab Zeile**: Gibt an, ab welcher Zeile die CSV-Datei importiert werden soll.
--** **Leere Zeilen ignorieren**: Wenn aktiviert werden leere Zeilen beim Import ignoriert.
++Opens up a dialog for configuring the import:
++** **Delimiter**: Determines which symbol is used in the file for separating data fields/ colunms (typically: comma).
++** **Text qualifier**: Determines the text qualifier. This symbol is used to support special characters inside data fields (e.g. comma in numbers with decimal places).
++** **Start at line**: Determines where to start importing the data source from.
++** **Ignore empty lines**: When activated ignores empty lines during import.
--{{lightbox image="data_source_import_csv_de.png" title="Importdialog für CSV-Dateien"/}}
++{{lightbox image="data_source_import_csv_en.png" title="Import dialog for CSV files"/}}
  * //.xls//, //.xlsx//
--Es öffnet sich ein Dialog zur Konfiguration des Imports:
--** **Zu importierende Tabellen**: Gibt an welche Arbeitsblätter/Tabellen aus der Datei importiert werden sollen.
++Opens up a dialog for configuring the import:
++** **Sheets to import**: Determines which worksheets/tables should be imported from the file.
--{{lightbox image="data_source_import_excel_de.png" title="Importdialog für Excel-Dateien"/}}
++{{lightbox image="data_source_import_excel_en.png" title="Importdialog für Excel-Dateien"/}}
  __Drag&Drop__
--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.
++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.
  == CSV ==
--Here you can insert data sets in the CSV format.
++{{figure image="data_source_csv_servlet_json_comparison.png"}}
++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.
++{{/figure}}
--* Choose the option //CSV// under //type//.
--* Assign an explicit name.
--* Insert the data sperated with a comma in the arrey //value//.
++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.
--{{figure image="datenquelle_csv_8.png" width="300"}}
--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}}.
--{{/figure}}
++//Source code view of a CSV data source//: ([[CSV file format>>https://en.wikipedia.org/wiki/Comma-separated_values||target="_blank"]])
++{{lightbox image="data_source_csv_source.png" title="Source code view of a CSV data source"/}}
++//Table view of a CSV data source//:
++{{lightbox image="data_source_csv_table.png" title="Table view of a CSV data source"/}}
--=== Example for a CSV data source ===
++=== Editing CSV tables ===
--{{info}}
--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.
--{{/info}}
++There is a row of buttons beneath the editing area for editing the CSV data table:
--{{code}}
--Value 1.1, value 1.2, value 1.3, value 1.4, ...
--{{/code}}
++* {{ficon name="plus-circle"/}} **Insert**: Inserts new rows or columns relative to the selected cell.
++* {{ficon name="trash-alt2"/}} **Remove**: Removes the selected row(s) or column(s) or empties the selected cell.
++* {{icon name="upload"/}} **Import**: Opens up the [[dialog for importing CSV data sources>>||anchor="data_source_import_csv"]].
++* {{icon name="code"/}} **Source code view**: Switches to source code view.
--The readout of the values in the {{designer/}} ensues through the //servlet// with the namen //datenquellecsv//.
++=== Header of CSV data sources ===
++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}}):
++
++* **Activated**:
++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"]]).
++* **Deactivated**:
++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.
++
++{{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"/}}
++
++CSV data sources can be accessed in the {{designer case="dat"/}} via its servlet: {{code language="none"}}XFC_METADATA.urls.datasource_csv{{/code}}.
++
  === Servlet parameters ===
  {{info}}
@@ -82,56
          +82,54 @@
  http(s):~/~/<server>/formcycle/datenquellecsv?mandantName=<Mandant-Name>&name=<Datenquellen-Name>
  {{/info}}
--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}}.
++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}}.
++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}}.
++
  The following parameters are possible:
  |=name of the parameter|=description|=necessary
  |name|Must match the name of the CSV data source.|Yes
  |mandantName|Must match the name of the client under which the data source was created.|Yes, if //projektId// is not given.
--|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.
++|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.
  |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
  |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
--|csvTrennzeichen|Indicates the seperator between the single data cells. If this is not set, a comma {{code}},{{/code}} is used by default.|No
--|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
++|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
++|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
  === Application example ===
--{{figure image="087En.png" width="300"}}
--An example of how a CSV datasource can look. The columns are seperated through commas.
--{{/figure}}
++A CSV data source with the option activated: **First row is header**. It has the following content:
  {{code language="csv"}}
--title,first name,last name,plz,location
++title,firstName,lastName,zip,city
  Herr,Max,Mustermann,1000,Musterhausen
  Frau,Monika,Mustermann,2000,Musterdorf
  Frau, Luise,Musterfrau,3000,Musterstadt
++
  {{/code}}
++In the {{designer/}} the following script is used in the [[script area>>doc:Formcycle.FormDesigner.CodingPanel.ScriptTab.WebHome]] for pre-filling form fields:
--
--
--In the {{designer/}} the following script is used in the [[script area>>doc:Formcycle.FormDesigner.CodingPanel.ScriptTab.WebHome]].
--
  {{code language="javascript"}}
  $.getJSON( XFC_METADATA.urls.datasource_csv + "?name=Demo&mandantName=xima.de", function(json) {
--    var obj = json.returnValue[0]
++    var obj = json.returnValue[0];
--    $('[name=tfAnrede]').val(obj.anrede)
--    $('[name=tfVorname]').val(obj.vorname)
--    $('[name=tfName]').val(obj.nachname)
--    $('[name=tfPLZ]').val(obj.plz)
--    $('[name=tfOrt]').val(obj.ort)
-- })
++    $('[name=tfTitle]').val(obj.title);
++    $('[name=tfFirstName]').val(obj.firstName);
++    $('[name=tfLastName]').val(obj.lastName);
++    $('[name=tfZIP]').val(obj.zip);
++    $('[name=tfCity]').val(obj.city);
++ });
  {{/code}}
--{{figure image="088En.png" width="300"/}}
++{{lightbox image="data_source_csv_designer_script_en.png"/}}
--This example as a data source for the {{designer/}} [[for downloading>>attach:beispiel_datenquelle_csv.json||rel="__blank"]].
++This form example is provided as a [[download>>attach:CSV-Demo_en.json||rel="__blank"]].
  === Exeption selection element ===
--{{figure image="data_source_csv_designer_de.png"}}
++{{figure image="data_source_csv_designer_en.png"}}
  The connection of a data source to a selection element takes place directly in the {{designer/}}
  {{/figure}}
@@ -139,24
          +139,28 @@
  The content of the CSV data source is processed in a [[selection element>>doc:Formcycle.FormDesigner.FormElements.Selection]].
--{{code}}
--visible value, assigned value, optional value, optional valuesichtbarer wert, ...
++{{code language="none"}}
++visible value, assigned value, optional value, optional value, ...
  {{/code}}
--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.
++Columns of the data source are use as follows for [[selection elements>>doc:Formcycle.FormDesigner.FormElements.Selection]]:
++{{code language="none"}}col + column index{{/code}}.
++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:
++
  {{code language="javascript"}}
--$('[name=sel2]').find('option:selected').attr('col0');
++$('[name=sel2]').find('option:selected').attr('col2');
  {{/code}}
--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//.
++Optinal values start at column index 2.
++If the first row is marked as a header than it will be ignored for selection elements.
  == XML ==
  The XML data source acts analogously to the //CSV// data source, but cannot be bound to a [[selection element>>doc:Formcycle.FormDesigner.FormElements.Selection]].
--{{figure image="datenquelle_xml.png" width="300"}}
--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.
++{{figure image="data_source_xml_servlet_json.png" width="300"}}
++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.
  {{/figure}}
  === Example for an XML data source ===
@@ -208,8
          +208,8 @@
  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.
--{{figure image="datenquelle_json.png" width="300"}}
--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}}.
++{{figure image="data_source_json_servlet_json.png"}}
++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}}.
  {{/figure}}
  === Example for a JSON data source ===
@@ -216,16
          +216,16 @@
  {{code language="json"}}
  {"person":[
--   {
--    'anrede':'Herr',
--  'vorname':'Max',
--    'nachname':'Mustermann'
-- },
--   {
--     'anrede':'Frau',
--     'vorname':'Monika',
--    'nachname':'Musterfrau'
--    }
++  {
++      "anrede":"Herr",
++      "vorname":"Max",
++      "nachname":"Mustermann"
++  },
++  {
++      "anrede":"Frau",
++      "vorname":"Monika",
++      "nachname":"Musterfrau"
++  }
  ]}
  {{/code}}

Changes for page Quellen

Summary

Details

Navigation