May 25, 2021 Electron
dialog
module provides api to display native system dialog boxes, such as open file boxes, alert boxes, so web applications can give users the same experience as system applications.
An example of a dialog box showing a selection of files and directories:
var win = ...; // BrowserWindow in which to show the dialog
const dialog = require('electron').dialog;
console.log(dialog.showOpenDialog({ properties: [ 'openFile', 'openDirectory', 'multiSelections' ]}));
Notes on OS X
: If you want to display the dialog box like
a sheets, you only need
browserWindow
provide a reference object for
BrowserWindow
parameter.
dialog
module has the following methods:
dialog.showOpenDialog([browserWindow, ]options[, callback])
browserWindow
BrowserWindow (optional)
options
Object
title
String
defaultPath
String
filters
Array
properties
Array - contains the
characteristic values of the
dialog box,
which can include
openFile
openDirectory
multiSelections
and
createDirectory
callback
Function (optional)
If this method is successfully used, an array of
file paths available for the user to select is returned, and
undefined
.
filters
an array of files to show or select when it is necessary to limit the user's behavior.
For example:
{
filters: [
{ name: 'Images', extensions: ['jpg', 'png', 'gif'] },
{ name: 'Movies', extensions: ['mkv', 'avi', 'mp4'] },
{ name: 'Custom File Type', extensions: ['as'] },
{ name: 'All Files', extensions: ['*'] }
]
}
extensions
should contain only extensions and should not contain wildcards or '.' N
umbers
'png'
are
'.png'
'*.png'
incorrect).
If all the
files are displayed,
'*'
wildcard (no other wildcards are supported).
If
callback
is called, the API will
be called asynchronously and
callback(filenames)
Note: In
Windows and Linux, an open dialog cannot be both a file
selection box
and a directory selection box, so if you set the value of the
properties
on these platforms
['openFile', 'openDirectory']
a directory selection box will be displayed.
dialog.showSaveDialog([browserWindow, ]options[, callback])
browserWindow
BrowserWindow (optional)
options
Object
title
String
defaultPath
String
filters
Array
callback
Function (optional)
If this method is successfully used, an array of
file paths available for the user to select is returned, and
undefined
.
filters
specifies an array of
file types, example
dialog.showOpenDialog
.
If
callback
is called, the API will
be called asynchronously and
callback(filenames)
dialog.showMessageBox([browserWindow, ]options[, callback])
browserWindow
BrowserWindow (optional)
options
Object
type
String -
can be
"none"
"info"
"error"
"question"
or
"warning"
In Windows, "question" is the same as the "info" display icon, unless you use the "icon" parameter.
buttons
Array - Buttons Content, Array.
defaultId
Integer - When the mesage box dialog box opens, set the default button check with the value of button index in the buttons array.
title
String - Message box title that some platforms do not display.
message
String - message box content.
detail
String - Extra information.
icon
NativeImage
cancelId
Integer - Returns the value when the user closes the dialog box, not by clicking on the button of the dialog box. T
he default is the index value corresponding to the "cancel" or "no" label button, or if there is no such button, 0.
On OS X and Windows, the index value
of "Cancel" button will always be
cancelId
or not previously specifically noted.
noLink
Boolean - In Windows, Electron will try to identify which button is normal (such as "Cancel" or "Yes"), and then display the other buttons in the dialog box as a link command . T
his makes the dialog box look cool.
If you don't
like
this effect, you can set
noLink
to
true
.
callback
Function
Show message box, which blocks the process until message box is closed. Returns the index value of the click button.
If
callback
is called, the API is
called asynchronously and the result
callback(response)
dialog.showErrorBox(title, content)
Show a traditional dialog box with error messages.
This
api
app
be
ready
safely before the app module triggers the ready event, which is usually used to report errors in the early stages of startup.
On Linux,
if the
app
before
the app module triggers the
ready
event, message will be triggered to display stderr and no actual GUI box will be displayed.