Is it possible to design a custom document view?

[gelveri]

Hello Friends;
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.

Screenshot1:

ScreenShot2:

[max_morais_dmm]

@gelveri yes, it’s possible!

A simple way is creating “Pages” like those belows!

Another way (that’s not documented, is legacy and I can’t guarantee for how long it will survive, atleast for me still working since v6), is adding a custom view on the doctype view itself!

https://gist.github.com/MaxMorais/b21aa7429fd7499a734184423dd23c7c

I have this little gist that explains how to do that!

[CA_B.C_Chechani]

Great to know this alternative. Can you show some examples of generated screens, too

[max_morais_dmm]

@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.

[CA_B.C_Chechani]

Superb, its eye opening for me as we were planning to use frappe page extensivley but it may change our strategy, will try and update my experience

[max_morais_dmm]

@CA_B.C_Chechani both schemas are good, and bring they own challenges!

[gelveri]

Hello @max_morais_dmm
Thank you. You’re a good man.

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.

1. 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:
2. The “.html” files should be placed in the “apps/myapps/myapps/public/js” folder.
3. 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.

{
"js/myapp.min.js": [
"public/js/account_balance.html"
]
}

4. Then, the following line should be added to “hooks.py”:
   app_include_js = "/assets/js/myapp.min.js

5. The content of “card_view.js” should be used as a reference, and the file of the relevant doctype should be edited.

6. After these steps, the following commands should be executed:

bench build
bench migrate (may not be necessary.)

7. 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

8. 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”

9. 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.