Wappler Electron - Removing Default Menu - Coding New Features

Hi there,

I’ve been trying to get the electron integration to remove the default menu (file, edit etc…) from showing.

I have tried editing the main cordova.js which looks like it creates the mainWindow - however, changing anything in those files just resets it after launching the app removing everything.

I am probably missing something - do I write custom functions in another designed file which isn’t changed on launching and where I can expand and write new functions for the electron app?

Cheers.

There should be a main.js and possibly a call to includes file such as menu.js that contain the menu structure for Electron. Will look something like this:

In main.js you may see something like (which is including this file):

let myModule = require("./menu.js");

Just comment it out.

Alternatively look for something similar to (in a file named something like menu.js):

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

const isMac = process.platform === 'darwin'

const template = [

  // { role: 'appMenu' }

  ...(isMac ? [{

    label: app.name,

    submenu: [

      { role: 'about' },

      { type: 'separator' },

      { role: 'services' },

      { type: 'separator' },

      { role: 'hide' },

      { role: 'hideothers' },

      { role: 'unhide' },

      { type: 'separator' },

      { role: 'quit' }

    ]

  }] : []),

  // { role: 'fileMenu' }

  {

    label: 'File',

    submenu: [

      isMac ? { role: 'close' } : { role: 'quit' }

    ]

  },

  // { role: 'editMenu' }

  {

    label: 'Edit',

    submenu: [

      { role: 'undo' },

      { role: 'redo' },

      { type: 'separator' },

      { role: 'cut' },

      { role: 'copy' },

      { role: 'paste' },

      ...(isMac ? [

        { role: 'pasteAndMatchStyle' },

        { role: 'delete' },

        { role: 'selectAll' },

        { type: 'separator' },

        {

          label: 'Speech',

          submenu: [

            { role: 'startspeaking' },

            { role: 'stopspeaking' }

          ]

        }

      ] : [

        { role: 'delete' },

        { type: 'separator' },

        { role: 'selectAll' }

      ])

    ]

  },

  // { role: 'viewMenu' }

  {

    label: 'View',

    submenu: [

      { role: 'reload' },

      { role: 'forcereload' },

      { type: 'separator' },

      { role: 'toggledevtools' },

      { type: 'separator' },

      { role: 'togglefullscreen' }

    ]

  },

  // { role: 'help' }

  {

    role: 'help',

    submenu: [

      {

        label: 'Help',

        click: async () => {

          const { shell } = require('electron')

          await shell.openExternal('https://github.com/blahblah')

        }

      }

    ]

  }

]

const menu = Menu.buildFromTemplate(template)

Menu.setApplicationMenu(menu)

And remove it.

In general renderer.js is where you keep your alternative functions, or you could specify any file, or a selection of files. Then you have package.json with dependencies etc.

Hope that helps!

3 Likes

You may also use (generally in main.js):

frame: false,

And this should disable the menu with no fiddling about.

1 Like

@Teodor

Thank you for correctly formatting that for me! :slight_smile:

2 Likes

It’s just wrapping the code in 3 backticks: ``` :slight_smile:

2 Likes

@Kieren_Hovasapian

Once you get the basics covered Electron is great to work with! Easy to deploy/port onward to mobile and web, and runs great in Windows, Macintosh, and hundreds of flavors of Linux! We have really got in to it recently and used Electron to consolidate a lot of legacy back office systems in to one coherent platform.

2 Likes

Thanks @Dave for the great info, helps a lot!
It worked straight away. :+1:

1 Like

Happy to hear that. If you want to be able to allow to resize the window (minimise, maximise, etc), below where you added frame: false, add:

resizable: true,

:slight_smile:

No menu but can now resize!

And if you want shot alltoegther and have a full screen use:

kiosk: true,

Great for POS systems and offices etc.

:wink:

1 Like

These options can be visually switched on/off in the settings:

2 Likes

Would it be possible to adjust the default files to the standards in a future update please @Teodor?

main.js
package.json
renderer.js

and maybe a build.js?

The reason being, and having been through it, is the majority of documentation relating to Electron points to these files. Would make the learning process so much easier if Wappler matched the standard file naming and structure used by so many. I know it’s not difficult to rename things and organise them but would certainly help a lot of people I’m sure.

1 Like

@George can answer this question better than me :slight_smile:

1 Like

hey @Dave I am just looking into this and wanted to remove the toolbar but not the maximise buttons etc (the frame option removes everything unfortunately). I can’t seem to find those files I was just wondering what files did you edit and where did you find them within wappler please and thanks?

Think I covered that bit a little further down the thread:

1 Like

Thanks Dave, would you be able to point me to the relevant settings files as well please just as I may want to add a little more customisation than the standard options provide. Thanks

No problem. From memory if I remember it is located in your Platforms directory - Electron - index.js

For all Cordova related builds be it Desktop or Mobile most configuration files reside in the Platforms directory. Also in the root of the project you will find your package.json file for other variables and configuration. Those two files pretty much cover everything build and variable wise. Hope that helps.

:slight_smile:

1 Like

We enjoyed creating Electron applications. Our clients love them. The integration you can have with the native operating system is immense when you play around a bit and start investigating. We really need to go back and explore a lot more. Amazing potential.

1 Like

Thanks Dave I’ll look into this as soon as I am back at the computer

1 Like