Create "wizards" with an extension

[vincent]

Hi,

I’d like to be able to create a simple wizard, maybe as a popover modal window, which displays when clicking a widget button.

It would consist of a simple form to gather user input and pass these values to a task after submit.

What would be a starter way to design this? I found the following thread:

Creating an extension embedding an existing React component

Please bare with me, since this is my first time using Typescript, and a long time since I wrote JS. My goal was to have an extension based on the hello world example that can show a grid (using the ag-grid React component). While I was able to successfully get a Hello World message displayed. I found myself struggling with importing a react component and rendering it. I wrote some pseudo-code (see link) to show how I attempted to solve it (this does not work right now). https://github.com/eis…

I’m not familiar with React (I usually work with Angular) but am willing to learn if “this is the way”

Thanks!

(OK I just realized *-extension-widget.tsx actually is a React Widget! So I guess I’ll have to learn React now :-))

[cradke]

You could have a look at the About dialog for a simple example of how to set up a modal dialog. That’s what got me started at least.

eclipse-theia/theia

[vincent]

I’m stuck with forms. The basic React example does not work in a Theia Widget:

Forms – React

Is anyone aware of an existing extension making use of forms?

(I found this guide, I’m currently looking into it: http://www.lib4dev.in/info/TypeFox/theia-workshop/136369021)

[cradke]

Did you get the TypeFox Theia Workshop project to work? The JSON-Form Widget is exactly what I’d need for my own project, but unfortunately the sources are outdated and no longer work with the latest version of Theia.

[vincent]

I’m not at work currently, but I’ll get back to you by the beginning of February.

[vince-fugnitto]

@cradke I have an updated branch to fix the deprecations (language-specific extensions are deprecated):

I have not spent more time updating the example besides getting it to build and run, but hopefully it’ll help you with your own use-case (you’ll likely have to fix styling and so on):

• https://github.com/vince-fugnitto/theia-workshop/tree/vf/update

[cradke]

Awesome, thank you very much, @vince-fugnitto! I’ll try it out as soon as I find the time.