HTML Dialog and Model Window for Electron

Use a simple HTML tag to replace a Quick () or other dialog box.

The <dialog> HTML tag has so far (April 2017) been implemented only in Chrome. So not for use in a web application, but for Electron it's different...

In the previous article, we saw how to replace the prompt () dialog box, which is not in the Electron section, with BrowserWindows. It works in ipcMain, but it would be easier if we had a solution in ipcRenderer, so right in the application interface code. Using the new <dialog> tag, you can create a modal dialog in HTML.

It will always be asynchronous because processing does not stop at the point of dialog creation. But it blocks user interaction until it is closed, which is modal, which is required if treatment depends on the user's response.

The source code of the dialog box is simple...

<dialog id="pDialog">
  <label for="pAnswer" id="pLabel">Default label:</label>
  <input id="pAnswer" type="text" value="">
  <menu>
    <button onclick="pDialog.close('')">Cancel</button>
    <button onclick="pDialog.close(document.getElementById('pAnswer').value)">OK</button>
  </menu>
</dialog>

The private dialog method returns the value specified by the program. In this case, when the user presses the OK button, what he entered in the input text field is returned.

When the user clicks Cancel, an empty line is returned.

Then you define the function that will replace the prompt () command:

function promptDialog(question, cb) {
  var pDialog = document.getElementById('pDialog')

  var fe = function(e) {
    cb(pDialog.returnValue)
    pDialog.removeEventListener("close", fe)
  }  

  document.getElementById("pLabel").innerHTML = question  
  var x = pDialog.showModal()
  pDialog.addEventListener('close', fe)
}

The first parameter is the wording out of the box, which corresponds to the question to which the user must answer.
The second parameter is the callback required because the dialog is asynchronous and is used to return a response.

A field with the showModal () method opens. The value of the close () method parameter is then retrieved using the listener and the dialog returnValue attribute.

This replacement request is used with a function call:

promptDialog("Mon propre libellé:", function(x) {
    if(x != '')
        alert(x)
})

Replace warning (x) with code specific to your application...

The full demo code is available in the archive:

To start the demo, type: electron dialog.js

This code can be generalized to all kinds of dialog boxes and actually makes a dialogue. showMessageBox () is deprecated.

The dialog box has been used by Advanced Explorer since version 4.3 for the Copy/Rename and Create folder functions.