Dialog module also provides some generic dialog functions that can be used to display information dialogs or error messages to the user. When working with renderer process, mostly you don't need to use these methods as the web view provides normal JavaScript alert and confirm method. Else, you can even use the modal dialog boxes that JavaScript libraries provide, such as the bootstrap modal box. This can be useful to display the crash report and any error messages from the main process.
Here is the example for showing a warning message. In a similar way, you can show error, information, or any other type of message box by just setting the type option:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
const { dialog } = require('electron').remote;
window.onload = function () {
document.getElementById('btn').onclick = function () {
let result = dialog.showMessageBox({
type: 'warning',
buttons: ['Ok'],
title: 'Warning',
message: 'Warning!, Battery is low',
detail: `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. `
});
}
}
</script>
</head>
<body>
<button id="btn">Show Dialog</button>
</body>
</html>
This will show you a warning message when you click on the button from your web page. You can use this API in your main process also to notify any system events. The following screen shows the output for this code:
This returns the index of the button clicked from the buttons array. You can pass a callback if you want to make this dialog API call asynchronous. The value of the type can be none, info, error, question, or warning depending upon your requirement.