Creating a TD/TM from other Formats

[egekorkan]

In a discussion today, we had the idea to put more functionality to the + button where other formats can be given in a small pop-up window. For now, the easiest would be to add AID to TD converter in there and allow AID as an input. In the future, we can have OPC UA Nodeset file, Open or Async API converters. The editor field below will still just see TDs.

So the workflow would be:

1. Click the + button. This can be right click or long click. If it is not a simple click, the current behavior for a simple click stays the same.
2. A pop-up window appears. Anything that happens in this window should result in a TD or TM being "pasted" to the monaco editor below.
3. Multiple input formats appear.
4. First one is the TD template we currently have. We can add another button for TM
5. There are other buttons for AID, OPC UA nodeset, Open API etc.
6. Clicking on one of them, shows an editor window to just paste some text.
7. Clicking another button below transforms that format to TD or TM

[danielpeintner]

I think the idea of having more functionality is fine. About to "use" the + button I am not so sure. Do people understand that there is a right click? This expectation does not exist for web applications ... I think.

Maybe we can have a pull-down menu next to + that allows more.. just an idea.

[egekorkan]

Yeah I am also not sure about the UX about hidden clicks etc. v button for a pulldown makes also sense or simply another button with a convert meaning. Alternatively, the + button can enlarge when the mouse hovers over it.

[SergioCasCeb]

Considering the feedback and the conversation with @egekorkan , we came up with the following ideas.

1. Firstly the option to import another format, could be displayed in the control menu from the left, which shows this functionality as a feature rather than an afterthought. Additionally, the import feature will also appear next to the plus + button as a quick access option.

2. The pop-up window for importing and converting other formats, will have two editors, one for the Thing and the other for any extra (JSON) parameters that might be needed for the conversion.

3. Finally, if an error were to occur (conversion failed) this will be displayed under the editors and will stay there unless the user closes it manually. This is to provide more information to the user, that should not get lost in the console.

[egekorkan]

Just one thing about the error: it should be a text field since we can dump long error messages there.

[sebastiankb]

Many thanks for this UI preview. Here are some comments.

1. Picture 1: The Tab "+ | Import" should be only "+"
2. Proposal: clicking on "+", a small sub-menu opens with 2 entries: 1. Add plain TD 2. Import Alternative Device Descriptions
3. The "Import" Button on the left hand side should have symbol of an TD, AID, etc.. The idea is to give the impression to the user, that also other device description can be imported
4. in the Import window (picture 2 above): The tab "AAS AID" should say "AAS AID (JSON)"
5. an Upload File option would be also great
6. picture 3 above: there should be the option to see more details of an error (@Kaz040 can provide a JSON Schema for validation)

[SergioCasCeb]

Hey @sebastiankb and @egekorkan, thank you for the feedback.

• About the + button, I forgot to explain that the import button will only appear once the user has hovered over it. This way we can avoid one extra click, while still providing an option to open a default TD or to open the import window. What do you think about this approach?
• For the AAS AID, I will make sure to write it as AAS AID (JSON).
• I have also proposed the idea of allowing the user to upload a file, rather than just copying and pasting into an editor. This will be implemented after the main functionality is already in place.
• About the error message (also as an answer to @egekorkan ), I forgot to add it to the mock-up design. Still, yes I was planning to just allow the box to have as much text as possible, or to implement it as a details element, allowing the user to open the text to see more information. If any of these options is preferred, please let me know :D