Is it possible to customize the view of a document in Erpnext with our own design? For example, I have a doctype called “Test.” When I click on items in this doctype in the list view, it normally opens with the default design as shown in screenshot 1. I want to use a different custom design for this document type. I want the documents to open as designed in screenshot 2. This is just a doctype and design I’ve created to explain what I want, so please don’t criticize my design :D.
@CA_B.C_Chechani, I dont have permissions to show all the screens, but here is some cuts!
The project where I used mostly those features are for a Telecom company
And they whould like to manage the customer in a 360 degree view
So, we did a lot of customization on top of the “Customer 360º View”, to add all the features needed in a single screen.
I’d like to share step-by-step what I did after your message because my knowledge of JS and Frappe is weak, and I spent a long time until I found a solution. This way, maybe I can also contribute to the community.
Firstly, I did some research because I didn’t know where to create the “account_balance.html,” “card_view.html,” and “card_view.js” files. Here’s what I found:
The “.html” files should be placed in the “apps/myapps/myapps/public/js” folder.
In the “apps/myapps/myapps/public/” folder, there should be a “build.json” file. This file should have the following addition. If “build.json” doesn’t exist, it should be created.
Then, the following line should be added to “hooks.py”: app_include_js = "/assets/js/myapp.min.js
The content of “card_view.js” should be used as a reference, and the file of the relevant doctype should be edited.
After these steps, the following commands should be executed:
bench migrate (may not be necessary.)
After these steps, when trying to view one of the doctypes we’ve made changes to in the web browser, we should see “myapp.min.js” through the console, and when we check its content, we should see the content of the “.html” files we created in step 2
I encountered an issue at this point. The issue was that I couldn’t see the “.html” code when I checked the content of “myapp.min.js.” I spent a long time trying to find where I went wrong. Finally, I came across this post:
“How to use build.json? - #2 by revant_one”
In this post, it was mentioned that the usage of “build.json” was deprecated with version 14, and the new instructions were quite similar to each other, so I won’t repeat the steps. I hope what I’ve written is helpful to those with weak knowledge like me.