Would like to see the PromptDialog allow for multiple field entries

[aherrera]

Currently the PromptDialog only accepts one value. There should be an array that can be submitted in the "value" field, and then the done() callback function can do a loop through the results.

ex:

    core.make('osjs/dialog', 'prompt', {
      message: `Type in your name:`,
      value: ['First Name', 'Last Name'] 
    }, done(value => {...}

[aherrera]

Would you need to know the type of value expected? i.e. string, or numeric so a spinner can be thrown in. Or a drop-down list of choices? Just thinking out loud here.

Another thought.. what about a dialog that asks the user to select from a series of images? Yeah, I'm getting ahead of myself here, just thinking of the possibilities.

[Anders Evenrud]

Another thing that could be added is generic inputs, not just text fields:

{
  values: ['default text', true],
  inputs: [{
    type: "TextField",
    attributes: {
       placeholder: "First Name"
     }
  }, {
    type: "OptionField",
    attributes: {
      choices: [{a: 'Choice A', b: 'Choice B'}]
    }
  }]
}

Maybe something like this ?

[Anders Evenrud]

Another thought.. what about a dialog that asks the user to select from a series of images? Yeah, I'm getting ahead of myself here, just thinking of the possibilities.

You can implement custom dialogs both globally and programatically.

If it's just application spesific, a custom Window is probably good enough.

[aherrera]

Maybe something like this ?

Yeah, I think so.

You can implement custom dialogs both globally and programatically.
If it's just application spesific, a custom Window is probably good enough.

understood

[aherrera]

In your example above, the "true" is related to the option field? Just making sure I'm following, if the user selects an option, the result would be "true" that an option was selected? Or would the result be the choice title/index/value selected?

{
  values: ['default text', true],
  inputs: [{
    type: "TextField",
    attributes: {
       placeholder: "First Name"
     }
  }, {
    type: "OptionField",
    attributes: {
      choices: [{a: 'Choice A', b: 'Choice B'}]
    }
  }]
}

Tried to bold the word true.

[Anders Evenrud]

Here's an exaple of how to create a custom dialog on runtime (programatically) w/standard dialog interface/base class:

  const callback = (btn, value, dialog) => {
     console.log(btn, value)
  };

  core.make('osjs/dialogs')
    .create({
      buttons: ['ok'],
      window: {
        title: 'My Dialog',
        dimension: {width: 400, height: 400}
      }
    }, (dialog) => {
      // The callback for getting dialog value
      return dialog.app.getValue();
    }, callback)
    .render(($content, dialogWindow, dialog) => {
      dialog.app = app({
        // Your local dialog state
        value: 0
      }, {
       // Your local dialog actions
       setValue: value => ({value}),
       getValue: () => state => state.value
      }, (state, actions) => dialog.createView([
          // Your local dialog view
          h(RangeField, {
            min: 0,
            max: 100,
            onchange: (ev, value) => actions.setValue(value)
          })
      ]), $content);
    });

I haven't used JSX -- but you probably get the idea

[Anders Evenrud]

In your example above, the "true" is related to the option field? Just making sure I'm following, if the user selects an option, the result would be "true" that an option was selected? Or would the result be the choice title/index/value selected?

The array of values was defined in the same order as inputs so they could be mapped over when the UI was created. Maybe that's confusing ?

[aherrera]

I understand the order. I guess I got confused. So, value is the text that would show up as the label for the input field, correct?

default text: [ ]

Or how would I set the label, in your example?

[Anders Evenrud]

An entry in values is what would show up in the corresponding inputs field, yes.

Labels could probably added like this:

  inputs: [{
    type: "TextField",
    label: "My Input",
    attributes: {
       placeholder: "First Name"
     }
  }]

[aherrera]

Your custom example is good as well, and thought about using that for more complex stuff. But, for simple and quick prompts, I like the code you posted with inputs: [].

[aherrera]

Don't forget t update documentation accordingly, to show single input prompt and multiple inputs prompt. Assuming single input would remain the same as it is now.

[aherrera]

Just thought of it, I know you have authentication prompt, but for this. What if a user is required to enter a code that they don't want to be visible, i.e. using the password prompt for some private user code. Please include type: "PasswordField" if you haven't done so already. I'm guessing you're going to have TextField, TextArea, PasswordField, OptionField, etc... ?

[Anders Evenrud]

TextField is just a wrapper around <input />, so the type attribute is valid here.

[aherrera]

ooh. understood.