question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Allow to bring up a dialog with multiple inputs

See original GitHub issue

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.
});

Issue Analytics

  • State:open
  • Created 7 years ago
  • Reactions:30
  • Comments:8 (3 by maintainers)

github_iconTop GitHub Comments

26reactions
adietishcommented, May 29, 2019

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

1reaction
CarlosAmaralcommented, Sep 16, 2022

This would be great to have.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Multiple input in JOptionPane.showInputDialog - Stack Overflow
Yes. You know that you can put any Object into the Object parameter of most JOptionPane.showXXX methods , and often that Object happens...
Read more >
InputDialog with multiple input fields - KLayout
Hi, I do defaultVal = 5 value = RBA::InputDialog.get_int("Input", "Input an integer", defaultVal). Now I would like to input more than one parameter...
Read more >
How/Is it possible to have multiple input fields in one input ...
I want to have one input dialogue where the user will input two (or more) input values which will then be assigned to...
Read more >
IV-06 Interact with User.pdf
The simple input dialog allows for up to 10 numeric or string variables. ... This next example creates two pop-up menus in the...
Read more >
Window.prompt() - Web APIs - MDN Web Docs
window.prompt() instructs the browser to display a dialog with an optional message prompting the user to input some text, and to wait until ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found