Create "wizards" with an extension

#1

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:

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 :-))

#2

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. :slight_smile:

1 Like
#3

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

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)

#4

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.

#5

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

1 Like
#6

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

image
image1535×941 63.7 KB

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):

2 Likes
#7

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

1 Like
#8

Hi @cradke,

Did you manage to make it work? I’m currently trying to. When the extension is active, Theia’s menus are not displayed and I get that on startup:

root ERROR DefaultJsonSchemaContribution.registerSchemas is taking more than 500.0 ms, new schemas are ignored.

In the web console:

image
image1917×532 142 KB

I’ll start investigating :slight_smile:

#9

The schema registration and the indexedDB errors are most likely unrelated. If you want to fix the indexedDB error, try to avoid running the app in an incognito mode/tab, or make sure you’re Firefox (if you are using that) can remember history.

1 Like
#10

Hey @vincent,

I built the Electron app and it ran fine, I only had to make one change to specify the protocol for the Bootstrap CSS to be loaded in Electron, here: https://github.com/vince-fugnitto/theia-workshop/blob/1fe7f97a8d22eecc2605f281c092f4b147ebcaf4/jsonschema-form-extension/src/browser/jsonschema-form-frontend-module.ts#L23

I didn’t try to run the browser app. Possibly the problems you’re having are exclusive to it. :thinking:

1 Like
#11

I got it working. I’m not sure why it failed the first time. I think I was using @theia/core latest instead of next.

#12

In the workshop example, when I open the custom editor and make a change so that the model state gets dirty, the respective JSON file gets opened in Monaco editor as well. Only the Monaco editor tab shows the little dot indicating a dirty state and allows saving of the changes.

I would like my users to work in the custom editor only, though, so I am wondering what I have to do so the custom editor can be self-contained. Presumably, I need to implement SaveableSource? What about Navigatable or StatefulWidget, as EditorWidget does? Or should I rather just extend EditorWidget instead of BaseWidget?

1 Like
#13

Interesting, I did notice that too. The opened file is modified in place.