How to modify frappe layout

Frappe Framework Customization
1

How to modify overall frappe layout

2

Do you want to modify the Workspace, the Frappe UI, or something else? Please share more information.

3

I want to modify the frappe desk layout like my own custom navbar

4

try to look into this code

5

i know that i can change code directly but how can i keep my changes after updating frappe or i want to move my code to production etc

6

Hi,

You need to create a custom app for overriding standard code.

Please check the following resource for more info:

Create an App (frappeframework.com)

Exporting Customizations to your App (frappeframework.com)

Frappe - Creating a Custom Application & Integrating it with ERPNext (youtube.com)

Thanks,

Divyesh Mangroliya

7

Because this is a JS feature you are trying to override, below approach might work but haven’t tried myself:

1. Extend the existing sidebar view in your custom app :


`// my_custom_app/public/js/frappe/ui/custom_sidebar.js

// First ensure the namespace exists
frappe.provide("frappe.ui");

// Store the original Sidebar class if you need it later
const OriginalSidebar = frappe.ui.Sidebar;

// Create your custom Sidebar class
frappe.ui.Sidebar = class CustomSidebar extends OriginalSidebar {
    constructor() {
        super(); // Call parent constructor
        this.setup_custom_items();
    }`
  1. Update hooks to get your JS loaded:
app_include_js = {
    "Desk": [
        "/assets/my_custom_app/js/frappe/ui/custom_sidebar.js"
    ]
}

I haven’t tried myself. But worth trying and keep us posted.

JS file you are creation should be in under public/js folder.

my_custom_app/
    ├── public/
    │   ├── js/
    │   │   ├── frappe/
    │   │   │   ├── ui/
    │   │   │   │   └── custom_sidebar.js