About Panel in ElectronJS

ElectronJS is an Open Source Framework used for building Cross-Platform native desktop applications using web technologies such as HTML, CSS, and JavaScript which are capable of running on Windows, macOS, and Linux operating systems. It combines the Chromium engine and NodeJS into a Single Runtime.

In traditional web applications, The About page is one of the most frequently visited and important pages on the website. It is an opportunity for visitors to get to know the website. The About Page provides a bit of background, introduction about the website and the people behind it. It is just a single click away from the homepage and it should make a quick impression. Electron also provides us with a way by which we can include the About Panel in desktop applications using the instance methods of the app module. This tutorial will demonstrate how to include the About Panel in Electron.

We assume that you are familiar with the prerequisites as covered in the above-mentioned link. For Electron to work, node and npm need to be pre-installed in the system.

Project Structure:

Example: Follow the Steps given in Custom Notifications in ElectronJS to setup the basic Electron Application. Copy the Boilerplate code for the main.js file and the index.html file as provided in the article. Also perform the necessary changes mentioned for the package.json file to launch the Electron Application. We will continue building our application using the same code base. The basic steps required to setup the Electron application remain the same.

package.json:

{
  "name": "electron-panel",
  "version": "1.0.0",
  "description": "About Panel in Electron",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [
    "electron"
  ],
  "author": "Radhesh Khanna",
  "license": "ISC",
  "dependencies": {
    "electron": "^8.3.0"
  }
}

Create the assets folder according to the project structure. Copy any image file of your choosing into the assets folder and name it as image.png. In this tutorial, we will be using the Electron logo as the image.png file.
Output: At this point, our basic Electron Application is set up. Upon launching the application, we should see the following result.

About Panel in Electron: The app module is used to control the applications event life-cycle. This module is part of the Main Process. To import and use app module in the Renderer Process, we will be using Electron remote module.

index.html: Add the following snippet in that file.

html

<h3>About Panel in Electron</h3> 

  <button id="about"> 

    About Panel in Electron 

  </button>

index.js: Add the following snippet in that file.

javascript

const electron = require('electron') 

const path = require('path') 

// Importing the app module using Electron remote 
const app = electron.remote.app 

var about = document.getElementById('about'); 

about.addEventListener('click', (event) => { 

    app.setAboutPanelOptions({ 

        applicationName: 'About Panel in Electron', 

        applicationVersion: '1.0.0', 

        copyright: 'GeeksForGeeks', 

        credits: 'GeeksForGeeks', 

        authors: ['Radhesh Khanna'], 

        website: 'https://www.geeksforgeeks.org/', 

        iconPath: path.join(__dirname, '../assets/image.png'), 

    }); 

    app.showAboutPanel(); 
});

A detailed Explanation of all the Instance Methods of the app module used in the code are given below:

app.setAboutPanelOptions(options) This Instance method is used to set the options for the About Panel. On Linux, the options must be passed in order to be shown in the About panel. It does not support any defaults. This method does not have any Return type. It takes in the following parameters. For more detailed Information, Refer this link.
- options: Object It takes in the following parameters:
  - applicationName: String (Optional) Sets the application Name to be displayed in the About Panel.
  - applicationVersion; String (Optional) Sets the application Version to be displayed in the About Panel.
  - copyright: String (Optional) Sets the applications Copyright Information to be displayed in the About Panel.
  - version: String (Optional) This parameter is supported in macOS only. It sets the applications Build Version number to be displayed in the About Panel.
  - credits: String (Optional) This parameter is supported in Windows and Linux only. It sets the applications Credit Information to be displayed in the About Panel.
  - authors: String[] (Optional) This parameter is supported in Linux only. This parameter takes in a String array. It sets the List of authors for the application.
  - website: String (Optional) This parameter is supported in Linux only. It sets the applications website information.
  - iconPath: String (Optional) This parameter is supported in Windows and Linux only. It takes in the path to the applications Icon. On Linux, the Icon will be shown as 64×64 pixels image while retaining the aspect ratio. In our code, we have used the image.png file as our applications icon.
app.showAboutPanel() This Instance method simply shows the applications About Panel with the options set using the app.setAboutPanelOptions() method. If no options are provided, it resorts to default values on Windows and macOS. Linux does not support any default values for the About Panel. On Windows, it simply shows the Electron version currently running in the application as its default options.