Author: OBKoro1

Electron’s native dialog box, dialog, provides a system dialog box, providing message prompt, message prompt operation, select a file, save a file and other operations. Today, follow this article to learn about electron.

1. The message dialog. ShowMessageBoxSync

1.1 Message Prompt

const { dialog } = require('electron')
dialog.showMessageBoxSync({
  type: 'info'.title: 'Here's the title.'.message: 'Prompt content'.detail: 'Additional Information'
})
Copy the code

Run example:

1.2 Message Prompt and Confirmation

const { dialog } = require('electron')
const res = dialog.showMessageBoxSync({
  type: 'info'.title: 'Here's the title.'.message: 'Prompt content'.detail: 'Additional Information'.cancelId: 1.// Press ESC to click the index button by default
  defaultId: 0.// The button subscript is highlighted by default
  buttons: ['Confirm button'.'Cancel button'].// The buttons sort by index from right to left
})
console.log('Operation result', res, res === 0 ? 'Click ok' : 'Click the Cancel button') // Determine by the index in the button array
console.log('There's also a checkboxLabel box that you need to use the showMessageBox API to get the return value.')
Copy the code

Run example:

1.3 API specification

dialog.showMessageBoxSync(browserWindow, options)

Displays a message box that will block the process until the message box is closed. The return value is the index of the button clicked. Parameters:

  • BrowserWindow can specify a parent window to which it is attached as a modal window.
  • options
    • Type: String (Optional) – “none” | “info” | “error” | “question” Different types prompt different ICONS;
    • Title: String (Optional) – The title of the message box. On some platforms, message and detail are not displayed.
    • Message: String – The contents of the message box.
    • Detail: String (Optional) – Additional information
    • Buttons String[] – Array of strings of buttons sorted by index from right to left, with an “OK” button by default if not specified.
    • DefaultId: Integer (Optional) – Indicates the highlighted index of the button by default. This parameter is automatically selected when you press Enter
    • CancelId: Integer (Optional) Press ESC to click the index button by default

Return value type:

  • Number: index of the button that is clicked

dialog.showMessageBox(browserWindow, options)

With dialog. ShowMessageBoxSync similar, the difference is:

  1. This is an asynchronous method that returns a Promise;
  2. ShowMessageBoxSyc (showMessageBoxSyc, showMessageBoxSyc, showMessageBoxSyc);

Here is an example with a check box:

const { dialog } = require('electron')
const res = dialog.showMessageBox({
  type: 'info'.title: 'Here's the title.'.message: 'Prompt content'.detail: 'Additional Information'.cancelId: 1.// Press ESC to click the index button by default
  defaultId: 0.// The button subscript is highlighted by default
  checkboxLabel: 'Checkbox contents'.checkboxChecked: false.// Whether to check the checkbox
  buttons: ['Confirm button'.'Cancel button'].// The buttons sort by index from right to left
})
console.log('Operation result promise', res) // Return a promise from which to judge the result
Copy the code

Run example:

2. Select a file and folder

2.1 Selecting file instances

const { dialog, app } = require('electron')
const res = dialog.showOpenDialogSync({
  title: 'Title of dialog window'.// Default open path, such as the default open download folder
  defaultPath: app.getPath('downloads'), 
  buttonLabel: 'Confirm button copy'.// Restrict the file types that can be selected
  filters: [
    // { name: 'Images', extensions: ['jpg', 'png', 'gif'] },
    // { name: 'Movies', extensions: ['mkv', 'avi', 'mp4'] },
    // { name: 'Custom File Type', extensions: ['as'] },
    // { name: 'All Files', extensions: ['*'] }, ].properties: [ 'openFile'.'openDirectory'.'multiSelections'.'showHiddenFiles'].message: 'MAC File selector title'
})
console.log('res', res)
Copy the code

Run example:

API specification

dialog.showOpenDialogSync(browserWindow,options)

Parameters:

options

  • defaultPathString (Optional) – Sets the default path for the dialog box to open. You need to set a valid path otherwise it will not take effect.
  • buttonLabelString (Optional) – Confirms the text of the button. When empty, the default label is used
  • filtersBy default, all file types can be selected. After setting this parameter, only the allowed file types can be selected
  • propertiesString[] (Optional)
    • openFile– Allows file selection
    • openDirectory– Allows folder selection
    • multiSelections– Allow multiple choices.
    • showHiddenFiles– Displays hidden files in the dialog box
  • messageString (Optional) – MAC File selector title

Tips: Try modifying the parameters in Options to see the effect;

Return value type:

String [] | undefined – the user to select the file or folder path; If the dialog box is cancelled, undefined is returned

Complete API explanation reference documentation

3. Save the file

3.1 instance

const { dialog } = require('electron')
const res = dialog.showSaveDialogSync({
  title: 'Title of dialog window'.defaultPath: ' '.// Which path to open the file selector requires a valid path
  buttonLabel: 'Confirm button copy'.// Restrict the types of files that can be selected
  filters: [
    // { name: 'Images', extensions: ['jpg', 'png', 'gif'] },
    // { name: 'Movies', extensions: ['mkv', 'avi', 'mp4'] },
    // { name: 'Custom File Type', extensions: ['as'] },
    // { name: 'All Files', extensions: ['*'] }, ].nameFieldLabel: 'Replace file'.// The text custom label displayed before the File name text field
  showsTagField: true.// Displays the label input box. The default value is true
  properties: [ 'showHiddenFiles'].message: 'MAC File selector title'
})
console.log('res', res)
Copy the code

Run example:

3.2 API specification

dialog.showSaveDialogSync(browserWindow,options)

Parameters:

options

  • defaultPathString (Optional) – Sets the default path for the dialog box to open. You need to set a valid path otherwise it will not take effect.
  • buttonLabelString (Optional) – Confirms the text of the button. When empty, the default label is used
  • filtersBy default, all file types can be selected. After setting this parameter, only the allowed file types can be selected
  • propertiesString[] (Optional)
    • openFile– Allows file selection
    • openDirectory– Allows folder selection
    • multiSelections– Allow multiple choices.
    • showHiddenFiles– Displays hidden files in the dialog box
  • messageString (Optional) – MAC File selector title

Return value type:

String [] | undefined – the user to select the file or folder path; If the dialog box is cancelled, undefined is returned;

Complete API explanation reference documentation

3.3 Performance in different scenarios

  1. Select an existing file and prompt “there is already a file or folder with the same name in the folder. Replacing it overwrites its current contents. , click OK and return to the file address;
  2. Select a nonexistent file, return the nonexistent file address;

4. Error messages pop up

dialog.showErrorBox

This API can be safely called before the APP module fires the ready event and is usually used to report errors at startup. On Linux, the API is called before the Ready event, and the message is sent to Stderr without a GUI dialog.

In order to learn electron better, we have created a series at present, if you are interested, you can have a look

  • [Electron playground series] Menu
  • 【Electron Playground series 】Dialog with file selection
  • [Electron playground series] Agreement
  • 【Electron Playground series 】 The tray

For more complete documentation, please refer to the documentation below

Electron-Playground official document

Github address portal: github.com/tal-tech/el…