Node-RED

Editor based on xsd

Creating Nodes
#1

Hi folks,

I'm stuck with one of my nodes in another discussion, where I need a user-friendly editor to manipulate a quite large data structure. And I don't want to spend the remaining of my life maintaining a complex user interface.

So I was wondering if anybody knows whether a (javascript/html based) editor exists, that allows to me to manipulate a data structure, based on an xsd file.

I don't want to show an xml editor. But would like to have a user friendly user interface, that even less technical users can use. For example an editable tree view, or some other kind of user interface based on an xsd. And that the validations and so on are automatically executed.

Have been looking on google, but I have the impression that I'm using the wrong keywords. Because I would find it very strange if I would have to build something like that myself from scratch...

Thanks!!!!

Bart

#2

The best known XML/XSD editor I know of is actually Microsoft's OneNote. Not that I think this will do you any good, sorry.

1 Like
#3

Something like this? https://www.npmjs.com/package/jquery.xmleditor

It has two demos to test. An empty document and a prefilled one.

#4

Something like that might indeed do the job. But it seems to contain some bugs in my Chrome, and the project is not maintained anymore.

Does anybody knows whether I perhaps could use the JSON editor of Node-RED for this?
Because it looks very nice:

image

But not sure whether I can add some kind of (json?) schema to this, so the user can only input stuff that is allowed? I assume that is not the purpose of this editor ... But it would look cool...

#5

As a short term solution, you could permit JSON input and validate it again a schema?

1 Like
#6

Another possible option came to mind when browsing npm. There were several XSD to JSON schema converters. Perhaps it'd be easier to find a working editor against a JSON schema?

1 Like
#7

Good idea! So I use an xsd to json schema converter. Then I'm already a step closer to Node-RED standards ...

That would be perfect! And e.g. the Node-RED json editor would allow to simplify editing a json.

Does anybody know whether it is somehow possible to use the json schema inside the JSON editor. I mean when I want to add an item, that I get a dropdown of the available items (e.g. resolution, brightness, ...)?

#8

Not really but while doing an adhoc search on my phone I ran across this https://codepen.io/orif-jr/pen/zozdJQ

Based on the title it's ACE editor together with a JSON validator (whatever that means in this case). I can't make anything out of it with a phone screen so I suppose this is an extreme long shot. :laughing:

#9

Have been looking over-and-over at various json schema based editors ...

  • The @json-editor/json-editor package has a nice looking demo. But it has a lot of dependencies which are optional, however it looks awfull when I don't add those dependencies:

    json_schema_editor

    So not sure whether this kind of generated html forms is useful in a small config screen. Especially when the json schema contains a series of levels in the hierarchy. I think it will become too wide in that case, to fit on the screen ...

  • The json-editor only depends on JQuery, and generates a property grid:

    image

    Such a property grid will fit my small config screen much better, but the project seems unmaintained.

  • The sditor looks very Node-RED alike:

    image

    When I first saw it, I really thought Nick had added a new editor UI widget to Node-RED :wink:

    This would fit optimal on my config screen, however this widget is based on React and TypeScript. Not sure whether I could simulate something like that with the Node-RED TreeList widget, because then I need to implement the json schema to tree convertion myself (and backwards).

Not sure which of those 3 options I have to choose.

From a usability point of view, I would prefer the last one. But that will be a lot of work. And suppose I could get it working, it would be a pity if it wouldn't be reusable. Because I think that some other contrib nodes might want to use a widget like that one ...

Any thoughts about this??

1 Like
#10

Although the json schema reference seems to be quite well explained...

#11

Given there is a visual JSON editor built into Node-RED already, it would be a shame to create another one, rather than take a starting point of wanting to enhance/improve what is already there.

2 Likes
How to use npm package in flow editor frontend
PR for JSON schema based editor - discussion
#12

Hey Nick,
Absolutely. Hmmm I should have added this to my comments: of course my first thought was indeed to use the visual json editor. But after having a look at the code, I got a first impression that there are at the moment not really much hooks which I can use to tell it which input is expected. But I can be mistaken. Had only a quick look, because my braun is melted lately due to my daily job :pleading_face:
But then I will try to look it that direction when I get time. I had hoped last night that you would join this duscussion :wink:

Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.

The OpenJS Foundation | Terms of Use | Privacy Policy | OpenJS Foundation Bylaws | Trademark Policy | Trademark List | Cookie Policy