Allow to bring up a dialog with multiple inputs

[rmunn]

Feature request

It would be nice if an extension could present a single dialog with multiple input fields. For example, the New Project command in Ionide asks for project directory and project name, and it would be nice to be able to input both at once in a single dialog. Another use case: I would like to implement the Project Scaffold init script as another option in Ionide's New Project setup. It asks at least seven questions (more if you choose to let it run git init for you), and asking each question one at a time in separate dialogs makes for a less-than-ideal user experience. I'd like to be able to present all seven questions in a single dialog.

Suggested API

showInputDialog(options: Map<string, InputBoxOptions|QuickPickOptions>, quickPickItems?: Map<string, string[] | Thenable<string[]>>): Thenable<Map<string,string>>

options is an ES6 Map whose keys are the names of the fields we're asking the user to fill in. The user won't see these names, but they will be used as the keys of the resulting Map object. Their ordering matters, since the order of the keys in the Map will be used as the order in which to present the fields in the interaction dialog. (If using an ES6 Map is not yet possible in VS Code, then options would be a plain old Javascript object. In that case, an additional fieldOrder parameter, an array of strings, would be required -- see below for suggested API if ES6 Map is not yet possible).

The values of the options Map will be the InputBoxOptions or QuickPickOptions for that particular field in the interaction dialog. These will be treated exactly as they are in the showInputBox and showQuickPick functions. If any values of the options Map are QuickPickOptions, then the quickPickItems parameter is required. Its keys must match the keys of options that have a QuickPickOptions value, and its value is the list of items to pick from (exactly equivalent to the items parameter of the showQuickPick function). And, just like showQuickPick, there would need to be another overload that would match the showQuickPick<T extends QuickPickItem>(items: T[] | Thenable<T[]>, ...) overload. I.e.,

showInputDialog<T extends QuickPickItem>(options: Map<string, InputBoxOptions|QuickPickOptions>, quickPickItems?: Map<string, T[] | Thenable<T[]>>): Thenable<Map<string,string|T>>

The difference between this and the non-generic showInputDialog would be exactly the same as the difference between showQuickPick<T> and non-generic showQuickPick, so I won't go into further detail on this overload.

The return value of showInputDialog would be a promise that resolves to an ES6 Map whose keys are the same as the keys of the options parameter, and whose values are the result of what the user typed. If the user canceled the dialog by pressing Escape, the values of the Map will be undefined; otherwise, they will be strings in the case of InputBoxOptions fields, and either strings or T instances in the case of QuickPickOptions fields (where T, of course, extends QuickPickItem, and is only returned in the generic version of showInputDialog).

As mentioned above, if it is not yet possible in VS Code's codebase to use an ES6 Map, then my suggested API would look like:

showInputDialog(fieldOrder: string[], options: object, quickPickItems?: object): Thenable<object>

or:

showInputDialog<T extends QuickPickItem>(fieldOrder: string[], options: object, quickPickItems?: object): Thenable<object>

for the generic version (returning T instances, rather than strings, for any QuickPick fields). The keys and values of the input and output objects would be identical to the Map version; only the fieldOrder parameter is added to specify the order in which the fields should be listed in the dialog.

Usage example

Since that specification is a bit hard to read, here is an example.

var opts = new Map<string,InputBoxOptions|QuickPickOptions>();
var items = new Map<string,string[]>;
opts.add("ProjectName", {prompt: "Project name?"});
opts.add("InitializeGit", {prompt: "Initialize Git? Y/N"});
opts.add("Template", {placeholder: "Project template"});
items.add("Template", ["F#", "C#", "VB"]);
showInputDialog(opts, items).then(function(result) {
    if (result["Template"] == "VB") {
        showWarningMessage("Visual Basic support is deprecated.");
    }
    showInformationMessage("Initializing project...");
    initializeProject(result["ProjectName"]);
    // etc.
});

[rmunn]

Note that my particular use case would be satisfied by an API call that only presents a series of input boxes, with no quick picks allowed, e.g.

showInputBoxes(options: InputBoxOptions[]): Thenable<string[]>

or

showInputBoxes(options: Map<string,InputBoxOptions>): Thenable<Map<string,string>>

However, as I was writing the suggested API, I thought, "Well, why not allow both input boxes and quick picks together in a single dialog, like how HTML forms aren't limited to just text inputs?"

But it might turn out to be better/simpler to keep the two concepts separate, and just write a showInputBoxes API that doesn't include quickpicks. It certainly seems like it would be easier to implement.

[rmunn]

I don't think the linux label is appropriate for this issue, as I'm asking for an API that will work on all platforms, not just on Linux.

[rmunn]

As I mentioned earlier (exactly a year ago, as it happens), I think the linux label is wrong for this issue, as it's a cross-platform feature request.

[adietish]

is this going anywhere? we'd love to see this being implemented, would even help in this.

[ZenMagus]

would love to use vscode native for wizards -- seems i am not alone. also this would be useful cross platform - the linux label is probably restrictive as pointed out twice by the post author

[jeffmaury]

@ZenMagus feel free to test https://github.com/redhat-developer/vscode-wizard

[ZenMagus]

@ZenMagus feel free to test https://github.com/redhat-developer/vscode-wizard

Hi @jeffmaury thank you for taking the time to show me @jasongin 's repository. I actually did look at this before posting and it looks nice. Coming from an Eclipse background I am trying to use vscode native for most things, including wizards. - i may have to go down the 'use a webview for everything' route though as the vscode scaffolding is taking a long time to mature but am trying to resist.

Thanks again,
z

[CarlosAmaral]

This would be great to have.