how to add two textfiled and one button in electron Dialog box

Question

I have called dialog with sample message and button field to popup but additionally i need to include two textfield in same dialog box but i couldn't make it.

Can anyone solve my problem by suitable answer.

here my sample code in Electron Application:

dialog.showMessageBox({ message: "Hello There :-)",
        buttons: ["OK"] }); 

Answer 1

Electron doesn't support prompt dialogs. Don't window.prompt neither.

One solution could be to use sweetalert or some other npm package in the renderer process. If you need to call it from the main process, you can use ipcMain to send it to the renderer.

(Untested) Example

Main process:

const { ipcMain } = require('electron')

let promptHandler

ipcMain.on('prompt-handler-registered', event => promptHandler = event.sender)

// Create Promise to make it easier to get the promptHandler
const getPromptHandler = new Promise((resolve) => {
  const watcher = setInterval(() => {
    // You'll probably want to set a timeout here
    if (!promptHandler) return

    resolve(promptHandler)
    clearInterval(watcher)
  }, 200)
})

...

// When you want to prompt the user
getPromptHandler
  .then(ph => ph.send('display-prompt', {
      title: 'Whats your name?',
      ...
    })
  )

Renderer process:

const { ipcRenderer } = require('electron')
const swal = require('sweetalert2')

function displayPrompt(data) {
  swal({
    title: data.title,
    input: 'text',
  })
}

ipcRenderer.send('prompt-handler-registered')

ipcRenderer.on('display-prompt', displayPrompt)

Answer 2

You need to implement your own dialog system to show a dialog with two text fields. The dialog API in Electron does not support customization dialogs to that degree.

Answer 3

As of now you can use electron-prompt from npm to bring up a prompt dialog that the user can type text into, so maybe this might be of some help to you.

https://www.npmjs.com/package/electron-prompt

https://github.com/p-sam/electron-prompt

Code Example

const prompt = require('electron-prompt');

prompt({
    title: 'Prompt example',
    label: 'URL:',
    value: 'http://example.org',
    inputAttrs: {
        type: 'url'
    },
    type: 'input'
})
.then((r) => {
    if(r === null) {
        console.log('user cancelled');
    } else {
        console.log('result', r);
    }
})
.catch(console.error);

Example for you

const prompt = require('electron-prompt');

prompt({
    title: 'my electron-prompt',
    label: 'my prompt label',
    message: 'Hello There :-)'
    inputAttrs: {
        type: 'text'
    },
    type: 'input'
})
.then((r) => {
    if(r === null) {
        console.log('user cancelled');
    } else {
        console.log('result', r);
    }
})
.catch(console.error);

Example from my electron app

// Function to open the dialog to input the APK package name
const prompt = require('electron-prompt');

prompt({
    title: 'APK Grab',
    label: 'Grab APKs from APKmirror',
    message: 'To grab an APK from APKmirror, please input the APK Package name',
    placeholder: 'com.example.app'
    inputAttrs: {
        type: 'text'
    },
    type: 'input'
})
.then((r) => {
    if(r === null) {
        $appCtrl.Log('No Package Name Was Entered');
    } else {
        $appCtrl.Log('result', r);
    }
})
.catch($appCtrl.Log(error));