[Guide] Modifying Frappe app navbar

Frappe Framework Customization
1

Steps

Include js to app

Create a .js file your_app/public/js/override_desk.js

Add file to hook.py

# hook.py

app_include_js = [
    "/assets/your_app/js/override_desk.js",
]

Overriding component

In my case I want to replace navbar so I add frappe.templates['navbar'] to override_desk.js (which we just create)

// your_app/public/js/override_desk.js

frappe.templates['navbar'] = `
<div>
  <div>Hello Sir</div>
  <!-- This part is for awesomplete (desk will throw error if it's missing)-->
  <div class="input-group search-bar text-muted hidden">
    <input
      id="navbar-search"
      type="text"
      class="form-control"
      placeholder="{%= __('Search or type a command ({0})', [frappe.utils.is_mac() ? '⌘ + G' : 'Ctrl + G']) %}"
      aria-haspopup="true"
    >
    <span class="search-icon">
      <svg class="icon icon-sm"><use href="#icon-search"></use></svg>
    </span>
  </div>
</div>
`

Reload

Run bench build to build asset then do hard reload on browser.

You should see change when reload desk.

Research Notes

These are finding when I tried to find the solution, which might be useful to modified the app in another case.

/app is just another www page

/app/* directory is actually just another www page.

It use /www/app.py to build context then pass those context to /www/app.html.

In /www/app.html file you would find a simple html

<div class="main-section">
	<header></header>
	<div id="body"></div>
	<footer></footer>
</div>

The building the page part are reside in JavaScript side of thing.

Modified templates

You could easily override www or templates/pages of frappe by just create a file there.

Using hook.py

You could specify base_template or base_template_map to update base template.

5 Likes