Christian Engvall

Use the Electron dialog showErrorBox to display an error message to the user. Not much to it:

1. Call it on the main process.
2. Require dialog.
3. Call showErrorBox() with a title and a message.

const { dialog } = require('electron')

dialog.showErrorBox('Oops! Something went wrong!', 'Help us improve your experience by sending an error report')

This is what the message will look like on macOS in Electorn tutorial app:

Electron error message

The file is called dialog.js in the github repo if you want to look at the code.

At the time of writing this tutorial there is no support for dark mode in electron. But it’s on its way. Before it’s released we can use Electron-packager for any electron app we want dark mode support for.

The Electron tutorial app already uses Electron packager. If your app doesn’t you can check out the electorn-packager tutorial.

However we first need to update the packager version to 12.2.0.

1. Updating to version 12.2.0 of Electron packager

open up package.json and change:

"electron-packager": "^8.1.0",

to

"electron-packager": "^12.2.0",

and run

npm install

and to upgrade the global package use(when writing this it will give you v12.2.0):

npm update electron-packager -g

2. Update packager script to enable dark mode

Now all we need to do is add a new option to our build script in package.json. That option is called darwinDarkModeSupport.

currently the packager script for mac looks like this:

"package-mac": "electron-packager . --overwrite --asar=true --platform=darwin --arch=x64 --icon=assets/icons/mac/icon.icns --prune=true --out=release-builds",

And when adding darwinDarkModeSupport it looks like this:

"package-mac": "electron-packager . --overwrite --asar=true --platform=darwin --arch=x64 --icon=assets/icons/mac/icon.icns --prune=true --out=release-builds --darwinDarkModeSupport=true",

3. Package app

To see the darkmode in action we need to package the app. use

npm run package-mac

to create the package and then start the app.

4. Switch to dark mode

Darkmode

The electron tutorial app has not been updated to the latest version of electron. Lets take a look at how to do that.

At the time of writing the latest stable version is electron v3.0.5.

1. Updating the version used in package.json

Start a terminal and run this command:

npm install electron@latest

This will give me the currently latest stable version of electron. And I can see that by opening package.json and looking at the electron version which is now:

"devDependencies": {
  "electron": "^3.0.5",
  "electron-installer-dmg": "^0.1.2",
  "electron-packager": "^8.7.2",
  "electron-winstaller": "^2.4.1"
},

2. Updating the global electron version

I use the CLI a lot. So I also want to update the globally installed electron package. This can be done by adding the -g parameter to the install command.

npm install electron@latest -g

When this is finished you can check the version by running this in a terminal:

electron --version
v3.0.5

3. Test your app

Now it’s time to test that your app still does what it is supposed to be doing on all three platforms. But that is up to you. Maybe you need to update more packages to their latest version. The electron tutorial app only has three more packages, electron-installer-dmg, electron-packager and electron-winstaller. So I’ll update those.

With the showOpenDialog you can open files or folders. To show an open dialog all you need to do is:

const { dialog } = require('electron')

const selectedPaths = dialog.showOpenDialog();
console.log(selectedPaths);

the showOpenDialog returns an array of strings with the paths chosen by the user. If you instead decide to use the callback method it will return undefined.

There are more options to showOpenDialog to use. Take a look at the docs to se what the options are.

In the electron-tutorial-app this code is used to display a showOpenDialog. It also uses ipc to communicate between the main and renderer process:

const { ipcMain, dialog } = require('electron')

ipcMain.on('show-open-dialog', (event, arg)=> {

  const options = {
      //title: 'Open a file or folder',
      //defaultPath: '/path/to/something/',
      //buttonLabel: 'Do it',
      /*filters: [
        { name: 'xml', extensions: ['xml'] }
      ],*/
      //properties: ['showHiddenFiles'],
      //message: 'This message will only be shown on macOS'
    };

    dialog.showOpenDialog(null, options, (filePaths) => {
      event.sender.send('open-dialog-paths-selected', filePaths)
    });
})

As you can see above some ipc-stuff is used. Take a look at the dialog.js to see how the message is sent and how the response is handled.

In this Electron dialog tutorial we’ll take a look at using the different dialogs electron provides. With the dialog we can display native system dialogs for opening and saving files, alerting, etc.

Each dialog has its own post to make them easier to read.

Using showOpenDialog

With the showOpenDialog you can let the user select one or more files or folders. The selected paths are returned as an array of strings.

Electron showOpenDialog tutorial

Using showSaveDialog

The save dialog displays a dialog to the user and returns a path containing the path selected.

Electron showSaveDialog tutorial

using showMessageBox

showMessageBox could be used to display a question to the user, and depending of the answer do something.

Electron showMessageBox tutorial

using showErrorBox

showErrorBox is used to display an error to the user.

Electron showErrorBox tutorial