CSV load in embed mode #4014
nicola-attico
started this conversation in
General
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Hi,
I'm using Drawio in embed mode on my page, but I cannot load data from CSV format.
The code is at the end of the post.
Everything seems to work ok. The editor is loaded, but when I try to pass the CSV, I get the popup:
Error
Not a diagram file (error on line 1 at column 1: Start tag expected, '<' not found)
It looks like it is interpreting it like XML, but I've tried any possible way to pass the data.
The doc says:
Alternatively, you can add a descriptor object to the load message that imports specific data formats, e.g. {action: 'load', descriptor: {format: 'csv', data: ...}} where data is the string from the CSV import dialog.
That doesn't work, either.
I've tried to see how the Drawio UI does that, and I found the code for Arrange > Insert > Advanced > CSV...
But then the following function is called:
editorUi.showImportCsvDialog()
which I'm not able to find in EditorUi.js...
Thanks for any help,
Nicola
I'm using the CSV in the load window:
Example CSV import. Use ## for comments and # for configuration. Paste CSV below.
The following names are reserved and should not be used (or ignored):
id, tooltip, placeholder(s), link and label (see below)
Node label with placeholders and HTML.
Default is '%name_of_first_column%'.
label: %name%
%position%
Email
Node style (placeholders are replaced once).
Default is the current style for nodes.
style: label;image=%image%;whiteSpace=wrap;html=1;rounded=1;fillColor=%fill%;strokeColor=%stroke%;
Parent style for nodes with child nodes (placeholders are replaced once).
parentstyle: swimlane;whiteSpace=wrap;html=1;childLayout=stackLayout;horizontal=1;horizontalStack=0;resizeParent=1;resizeLast=0;collapsible=1;
Style to be used for objects not in the CSV. If this is - then such objects are ignored,
else they are created using this as their style, eg. whiteSpace=wrap;html=1;
unknownStyle: -
Optional column name that contains a reference to a named style in styles.
Default is the current style for nodes.
stylename: -
JSON for named styles of the form {"name": "style", "name": "style"} where style is a cell style with
placeholders that are replaced once.
styles: -
JSON for variables in styles of the form {"name": "value", "name": "value"} where name is a string
that will replace a placeholder in a style.
vars: -
Optional column name that contains a reference to a named label in labels.
Default is the current label.
labelname: -
JSON for named labels of the form {"name": "label", "name": "label"} where label is a cell label with
placeholders.
labels: -
Uses the given column name as the identity for cells (updates existing cells).
Default is no identity (empty value or -).
identity: -
Uses the given column name as the parent reference for cells. Default is no parent (empty or -).
The identity above is used for resolving the reference so it must be specified.
parent: -
Adds a prefix to the identity of cells to make sure they do not collide with existing cells (whose
IDs are numbers from 0..n, sometimes with a GUID prefix in the context of realtime collaboration).
Default is csvimport-.
namespace: csvimport-
Connections between rows ("from": source colum, "to": target column).
Label, style and invert are optional. Defaults are '', current style and false.
If placeholders are used in the style, they are replaced with data from the source.
An optional placeholders can be set to target to use data from the target instead.
In addition to label, an optional fromlabel and tolabel can be used to name the column
that contains the text for the label in the edges source or target (invert ignored).
In addition to those, an optional source and targetlabel can be used to specify a label
that contains placeholders referencing the respective columns in the source or target row.
The label is created in the form fromlabel + sourcelabel + label + tolabel + targetlabel.
Additional labels can be added by using an optional labels array with entries of the
form {"label": string, "x": number, "y": number, "dx": number, "dy": number} where
x is from -1 to 1 along the edge, y is orthogonal, and dx/dy are offsets in pixels.
An optional placeholders with the string value "source" or "target" can be specified
to replace placeholders in the additional label with data from the source or target.
An optional data object can be specified to define the metadata for the connector.
The target column may contain a comma-separated list of values.
Multiple connect entries are allowed.
connect: {"from": "manager", "to": "name", "invert": true, "label": "manages", \
"style": "curved=1;endArrow=blockThin;endFill=1;fontSize=11;"}
connect: {"from": "refs", "to": "id", "style": "curved=1;fontSize=11;"}
Node x-coordinate. Possible value is a column name. Default is empty. Layouts will
override this value.
left:
Node y-coordinate. Possible value is a column name. Default is empty. Layouts will
override this value.
top:
Node width. Possible value is a number (in px), auto or an @ sign followed by a column
name that contains the value for the width. Default is auto.
width: auto
Node height. Possible value is a number (in px), auto, width or an @ sign followed by a column
name that contains the value for the height. Default is auto.
height: auto
Collapsed state for vertices. Possible values are true or false. Default is false.
collapsed: false
Padding for autosize. Default is 0.
padding: -12
Comma-separated list of ignored columns for metadata. (These can be
used for connections and styles but will not be added as metadata.)
ignore: id,image,fill,stroke,refs,manager
Column to be renamed to link attribute (used as link).
link: url
Spacing between nodes. Default is 40.
nodespacing: 40
Spacing between levels of hierarchical layouts. Default is 100.
levelspacing: 100
Spacing between parallel edges. Default is 40. Use 0 to disable.
edgespacing: 40
Name or JSON of layout. Possible values are auto, none, verticaltree, horizontaltree,
verticalflow, horizontalflow, organic, circle, orgchart or a JSON string as used in
Layout, Apply. Default is auto.
layout: auto
---- CSV below this line. First line are column names. ----
name,position,id,location,manager,email,fill,stroke,refs,url,image
Tessa Miller,CFO,emi,Office 1,,me@example.com,default,#6c8ebf,,https://www.draw.io,https://cdn3.iconfinder.com/data/icons/user-avatars-1/512/users-3-128.png
Edward Morrison,Brand Manager,emo,Office 2,Tessa Miller,me@example.com,default,#82b366,,https://www.draw.io,https://cdn3.iconfinder.com/data/icons/user-avatars-1/512/users-10-3-128.png
Alison Donovan,System Admin,rdo,Office 3,Tessa Miller,me@example.com,default,#82b366,"emo,tva",https://www.draw.io,https://cdn3.iconfinder.com/data/icons/user-avatars-1/512/users-2-128.png
Evan Valet,HR Director,tva,Office 4,Tessa Miller,me@example.com,default,#82b366,,https://www.draw.io,https://cdn3.iconfinder.com/data/icons/user-avatars-1/512/users-9-2-128.png
Beta Was this translation helpful? Give feedback.
All reactions