Electron is a framework that lets us create cross-platform desktop apps.

The apps are created by creating web apps that are wrapped with a wrapper.

In this article, we’ll look at the add recent documents menu to an Electron app.

Recent Documents

We can use the app.addRecentDocument method to create a recent documents menu.

For example, we can write:

const { app, BrowserWindow } = require('electron')

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })
  win.loadFile('index.html')
}

app.whenReady().then(createWindow)
app.addRecentDocument('/Users/USERNAME/Desktop/work.type')

in main.js .

We call the addRecentDocument method to add a recent document.

Then app.clearRecentDocuments() method clears the recent documents list.

On Windows, we’ve to register our app by following these Application Registration instructions to register our app.

This way, the recent document items would appear on the list.

On macOS, when a file is requested from the recent documents menu, the openp-file event of app will be emitted from it.

Progress Bar in Taskbar

We can display the process bar in the taskbar by using the win.setProgressBar method.

For example, in main.js , we can write:

const { app, BrowserWindow } = require('electron')

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })
  win.loadFile('index.html')
  win.setProgressBar(0.75)
}

app.whenReady().then(createWindow)

We pass an argument between 0 and 1 to the setProgressBar method to display the process on the taskbar.

This feature works on Windows, macOS, and Unity.

macOS Dock

On macOS, we can configure the Dock by call app.dock.setMenu to create a dock menu.

For example, in main.js , we write:

const { app, BrowserWindow, Menu } = require('electron')

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })
  win.loadFile('index.html')
}

app.whenReady().then(createWindow)
const dockMenu = Menu.buildFromTemplate([
  {
    label: 'New Window',
    click() { console.log('New Window') }
  }, {
    label: 'Settings',
    submenu: [
      { label: 'on' },
      { label: 'off' }
    ]
  },
  { label: 'Something Else' }
])

app.dock.setMenu(dockMenu)

We created the menu with the buildFromTemplate method.

The array has the menu entry to create the items.

Then we pass the menu to the app.dock.setMenu method to set the menu.

Windows Taskbar

We can also customize the Windows taskbar.

We can create a JumpList, add custom thumbnails and toolbars, icon overlays, and flash frames.

For example, in main.js , we can write:

const { app, BrowserWindow, Menu } = require('electron')

function createWindow() {
  // Create the browser window.
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })// and load the index.html of the app.
  win.loadFile('index.html')
}

app.whenReady().then(createWindow)
app.setUserTasks([
  {
    program: process.execPath,
    arguments: '--new-window',
    iconPath: process.execPath,
    iconIndex: 0,
    title: 'New Electron Window',
    description: 'Create a new Electron window'
  }
])

We called app.setUserTasks with an array to add entries into the right-click menu on our app’s taskbar entry.

Thumbnail Toolbars

We can add a thumbnail toolbar by using the win.setThumbarButtons method.

For example, we can write:

const { app, BrowserWindow } = require('electron')
const path = require('path');

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  }) win.loadFile('index.html')
  win.setThumbarButtons([
    {
      tooltip: 'cat 1',
      icon: path.join(__dirname, 'cat.jpg'),
      click() { console.log('cat 1 clicked') }
    }, {
      tooltip: 'cat 2',
      icon: path.join(__dirname, 'cat.jpg'),
      flags: ['enabled', 'dismissonclick'],
      click() { console.log('cat 2 clicked.') }
    }
  ])
}

app.whenReady().then(createWindow)

in main.js to add thumbnails to our thumbnail toolbar.

We can pass in an empty array to empty the thumbnail toolbar.

Conclusion

We can display different things in the taskbar like icons and buttons.