Customising Frappe ERPNext UI: Part II — Adding a menu page

This is the second article in the Customising Frappe ERPNext UI series. In this article I will guide you through the steps involved in creating a menu page. As discussed in the first part, FrappeJS exposes a significant portion of its functionality through the frappe object, allowing for extensive customisation and the implementation of custom behaviors and modifications. By leveraging this capability, we can enhance the user experience and tailor the ERPNext system to better meet our needs.

If you are new to Frappe customisation, please check out the first part of this series

Customising Frappe ERPNext UI: Part I — Adding a new theme

Create the menu page

The first step is to create the page itself, to do that in the Frappe UI, search for Page List and click on Add Page button

Create a new page

The important part here is to Set the Module Name to our Custom App’s module name. This would ensure that the files required for the page are created in our App’s folder.

You can see that 2 files are created modern_menu.json and modern_menu.js. Here the json file will have the settings related to the page and the js file can be used to render content on the page.

Content of modern_menu.js

Currently no content will be rendered on screen. The idea is to add an object with a make function to the frappe object that will create the page and when the on_page_load hook is called we will call this make function.

Note that you can directly write everything within the on_page_load hook itself and it would work the same way

The content we wish to render in this case is the items in the sidebar. The things to keep in mind is that the items in the sidebar can be found in frappe.workspaces so once we get those we only need to loop through them and create HTML elements from them. Another point to note is that to navigate to those menu items we can use the router slug that we can get using the frappe.router.slug function.

A simple example for a menu page

After adding some styles (make sure to add your style to hooks.py) this is how the page would look

Our menu page

Modify the default navigation

Now we have created the page however when we login we will be taken to the home page. To change that we would have to override the router object that can be accessed via frappe.router

Now when we login we would be taken directly to the menu page

Modify the Toggle Button

Next we would edit the behaviour of the toggle button to navigate to the menu page

To do that we first need to edit the page template which is exposed through frappe.templates[“page”]. Copy the original page template and just add a new button

The functionality for this button can be added by extending the Page class found in frappe.ui.Page

Now that we have the button added. The final step is to hide and show the sidebar as well as the button we just added. And for that we need to override the show method in frappe.views.Workspace

If you look into the code, although it seems to be long, it is straight forward you just hide and show elements based on the path.

Make sure to add all the js file’s we created to hooks.py

And that is it we have added our menu page. This is how the page will finally look like

In this second instalment of our series on customising the Frappe ERPNext UI, we walked through the steps of creating a menu page and overriding classes and functions that are exposed by the frappe object.

Customising Frappe allows you to tailor the system to better meet your needs. Stay tuned for the next part of this series, where we will dive deeper into further UI customisation to make your Frappe ERPNext deployment even more user-friendly.

Thank you for following along, and feel free to reach out with any questions or share your customisation experiences!

You can find the code in this repo

GitHub - pratheeshrussell/frappe-modern-desk at 2_menu_page