Changes for page Quellen

From version < 7.1 >

edited by nlo
on 09.05.2019, 16:37

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,32
          +1,94 @@
  {{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}}
++
  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.
--== CSV ==
++{{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}}
--Here you can insert data sets in the CSV format.
++== Creating a data source ==
--* Choose the option //CSV// under //type//.
--* Assign an explicit name.
--* Insert the data sperated with a comma in the arrey //value//.
++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//.
--{{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}}.
++{{lightbox image="data_source_new_en.png" title="Data sources can be imported or created from scratch."/}}
++
++Every data source needs:
++
++* a unique name (in the settings panel: see point 3 in [[figure>>||anchor="fig_data_source"]])
++* the actual data in the editing area (see point 2 in [[figure>>||anchor="fig_data_source"]])
++
++=== Import of data sources from files ===
++
++The following Data types can be used to import data sources:
++
++* **XML**: //.xml//
++* **CSV**: //.csv//, //.xls//, //.xlsx// (Excel)
++* **JSON**: //.json//
++
++{{id name="data_source_import_csv"/}}
++__CSV data sources__
++
++CSV data sources can be imported from different file types:
++
++* //.csv//
++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_en.png" title="Import dialog for CSV files"/}}
++
++* //.xls//, //.xlsx//
++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_en.png" title="Importdialog für Excel-Dateien"/}}
++
++__Drag&Drop__
++
++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 ==
++
++{{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}}
--=== Example for a CSV data source ===
++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.
--{{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}}
++//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"/}}
--{{code}}
--Value 1.1, value 1.2, value 1.3, value 1.4, ...
--{{/code}}
++=== Editing CSV tables ===
--The readout of the values in the {{designer/}} ensues through the //servlet// with the namen //datenquellecsv//.
++There is a row of buttons beneath the editing area for editing the CSV data table:
++* {{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.
++
++=== 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}}
@@ -34,56
          +34,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}}
@@ -91,24
          +91,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 ===
@@ -160,8
          +160,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 ===
@@ -168,16
          +168,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