Create custom theme and layout

ERPNext Customize ERPNext
1

Hi,

I am initiating a new project to build a business networking and collaboration solution for a client. They have their own branding, UI and UX guidelines.

I have to build something in the lines of attached snapshots. I know Frappe can be used to build such an application, However

My questions are:

  1. The UI and UX is supposed to be very sophisticated and have to be like attached snapshots. Is it possible to build such a UI for the application using Frappe Framework
  2. What would be best approach to build it.
    a. Customize the automatically generated UI by Frappe at designated hooks. If yes, then at which application layer and to be precise, which file generally shall carry the custom code for the custom UI

b. Develop all the required UI first as html prototype and then, convert the html files to dynamic executable code file like Jinja template or something similar. And to execute the business logic, call the API from controller classes.

  1. Is there any in-depth tutorial with sample project that can help in understanding the best practices to build an altogether new UI for the application based in Frappe framework.

If I am able to easily achieve the UI customization part for my projects, I would be more than willing to use Frappe in a lot of my projects going forward

  1. The Frappe Cloud billing methodology is really complex and over my head. Is there a simpler way which tells price on the basis of VM core, RAM and Disk space like done in majority of hosting service provider.

prototype-inbox
prototype-inbox1305Ă—937 82.8 KB

prototype-dashboard-project
prototype-dashboard-project645Ă—1021 87.5 KB

Regards,
Devanshu

2

The Frappe/ERPNext UI – the “Desk”, as it’s called – is made entirely of unprivileged objects defined by generic APIs in the Frappe Framework. To my knowledge at least, there are no special “hacks” that allow the default UI to do things that other, user-defined pages couldn’t do.

“Pages” have full access to the Frappe API and can contain any arbitrary HTML, typically defined as Jinja templates. The upcoming v14 furthermore introduces user-defined page renders, which gives you even lower level control.

It’d be a lot of work to build it all from scratch, but I assume you understand the scope of the project. I’m not aware of any full tutorials, but you might look to an app like POS Awesome for inspiration on how to take full control of a page.

1 Like
3

hello, am also intending to do the same as new desk theme , can you please give me guidelines