Display native desktop dialog windows with Electron

[00:00] We've already set up our main process JavaScript that's creating a browser window here, and it's loading in index.html. We're also setting a main application menu, and we're doing that in this main menu.js file.

[00:14] We just have a single topical menu item, which is the application name. Then under it, we have three menu items. We have say hello, save memory info, and open file. What we're going to do is we're going to fill in the click handlers for each of these menu items. Each of them are going to open a different kind of dialogue.

[00:31] Let's start by creating a file named dialogues.js. First of all, let's require Dialogue App and Native Image from Electron. We'll also need FS from Node.js core as well as Path. First, let's implement a function that shows a message box, and responds to the user clicking that say hello menu item.

[00:57] Let's call this show message. The first thing we'll do, we'll do dialogue.showMessageBox. This is just a basic informational dialogue, kind of like an alert box in the browser, but you get a little bit more flexibility.

[01:13] The first we're going to do is we can pass the browser window here as a parameter. We'll pass that here as the first parameter to showMessageBox. On Mac OS, this makes the dialogue modal. It makes it a sheet, is the term that Mac OS uses. We'll see what that looks like later. It doesn't do anything on Windows, but we can still pass anyways.

[01:36] Then we can pass some options here. First, we'll pass the type of our dialogue, which will be info. Note on Mac OS, this doesn't change anything. On Windows, it changes the display of the dialogue. It'll have a different icon, and a little bit different appearance.

[01:51] We'll pass a custom icon as well. To do this, we're going to use the Native Image module. Native Image is an Electron API that allows you to pass images easily between web and native UIs. We'll call createFromPath on it.

[02:03] You'll notice we have this kitten.jpeg here in our folder. We're just going to pass that. Also, this is ignored on Windows. This is a Mac OS only thing. We'll pass our message. We'll just call this hello. For our detail, this is the actual message body.

[02:19] Because we have a kitten, the icon, we'll say "Just a friendly meow." For our buttons, buttons is an array of strings. Our first button, we'll make a meow button, and we'll have a close button. Then the next parameter we'll pass is called default ID.

[02:32] Default ID is the index of the button that you want to have selected by default. We have zero. That's going to refer to this button. It'll be highlighted, and it'll look like the default action that we want the user to take.

[02:44] Then we'll pass a callback here. The first parameter it'll receive is a number, which represents the clicked index of the button that they clicked. If they clicked meow, we get zero. If they click close, we get one here.

[03:00] The callback is optional, actually, for this function. If we don't pass a callback, we'll get this clicked index just from the return of this function. If we do that, then showMessageBox becomes a synchronous API, and we want it to be asynchronous, but either/or works.

[03:15] We're just going to log out the clicked index. Let's export this, and then let's jump back here to our main menu. We'll require in this showMessage function we just create from our dialogues.js. Then we'll call it here.

[03:34] Notice here, we're passing our main window into our function that's setting up our template. We can see here that's where it's getting passed in. We're just going to pass that along to our showMessage function. Let's test it out and see how it looks. We'll run our NPM start script.

[03:52] Here's our menu that we set up. Here's our say hello menu item. Let's test that out. There it is, hello. We can see, this our kittens.jpeg icon that's coming in correctly. This is the message property right here, and then this is the detail property, which is our message body.

[04:11] We can see we have our two buttons here that we defined, close and meow. The default ID, we set at zero to be meow. We can see that's selected by default. If we click that, we can see that zero, that's the index that the user clicked. It gets logged out.

[04:27] Let's try again with close. We can see one is logged out there. Just to demonstrate what these dialogues look like in Windows, but there's a lot of minor cross-platform differences, this is our same application running in Windows 10. Let's see what say hello looks like. We can see, basically the same as Mac OS. Because it's an info dialogue, it has a little I icon there.