Is it possible to design a custom document view?

7

Hello @Maxwell_Morais
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"
]
}

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

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

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

bench build
bench migrate (may not be necessary.)

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

  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”

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

3 Likes