Override pretty_date.js

Frappe Framework Customization
1

Hi everyone! I would like to override public/js/frappe/utils/pretty_date.js in order to modify some things and avoid hardcoding, so I can get it on my custom app.
So far I’ve created “public/js/utils” folder inside my custom app and creating pretty_date.js (copying the original one and making the required changes), then I tried to reach it via hooks:

app_include_js = "public/js/utils/pretty_date.js"

I understand (although I’m probably wrong) that function prettyDate is called when rendering desk, so that’s what came to my mind. However, I also tried for testing purpose to load it via doctype views (list) as the elements I want to change are the abbreviations of week, day, minutes, etc. displayed in list view for each doctype.

Any idea on how to do this?

Regards.

1 Like
2

Are you updating the global in your version of pretty_date.js?

3

Yes, I am. The code remains the same as the original, there are only light customisations regarding the language of the strings returned by the function.

4

The first thing to test would be whether the file is getting loaded or not. Often, the problem is a caching issues, and some browsers are particularly aggressive. If I were in your shoes, I’d try sticking a console.log call right below the frappe.datetime.prettyDate=prettyDate; assignment to check.

5

Done, and it reaches the Frappe file but not the custom app’s one. I’m using app_include_js hook and when I check the browser’s sources it is there every theme I refresh although the code is not loaded and therefore, the Frappe’s original pretty_date and datetime files are loaded instead.

6

Okay, that’s good to know. It’s probably an issue with caching. Is this a production server or development? Can you try from a different browser? Are you seeing any 404 errors in the console?

7

It’s a development server. I tried with a different browser and cleaning the cache and navigation data and the result remains the same (no 404 errors either). However, I finally managed to translate what I needed via Translation doctype (I included Jinja tags and it’s working smoothly).
The point is now I’m curious about how to reach and load utils via hooks. This approach, overwriting them in your custom app folder and chasing them via app_include_js is supposed to be the correct one, isn’t it?

8

Yep, that’s the correct approach. I could be missing something, but I strongly suspect that your issue is something related to caching. You could try renaming the file to see if you can get it to load, but these issues are a bit frustrating.

1 Like
9

I’ll let you know if there’s any change in the results while testing different possibilities. Thanks for your help and feedback @peterg :slightly_smiling_face:

3 Likes
10

@Bradley do you have your app somewhere on GIT?

i am working on a similar issue/usecase. would be happy to test/feedback/contribute.

11

I’m posting the steps I followed in case they might be useful for translating purposes:

(Developer mode and custom app)

  • Adding one document per translation to the doctype Translation including Jinja tags (e.g. for Spanish translation: {0} days ago ==> hace {0} días). Please, be careful with spacing as adding an extra space after the string will prevent this from working
  • Reaching the documents one by one using fixtures on hooks.py (custom app):
fixtures = [{
"doctype": "Translation",
"filters":{
      "name":["in", "documentname1,documentname2,documentname3"]
       }
}]
  • bench export-fixtures

Then pushing changes to the repository and restart/refresh.

2 Likes
12

Take care with that.
In version-12 when I was doing that, and at each “bench update” (that apply custom apps fixtures) the translation data was inserted again in Translation Table, it make a lot’s of multiple entry for the same translation label until I look at it (because Translation table was growing and I didn’t understand why at first…).
Until then, even in version-13, I didn’t try to manage translation with fixtures, may be not the case anymore

1 Like
13

sorry for my very delayed reply… got sidetracked with something else, and then the item got lost on my todo list…

i managed to overwrite the prettydate.js via a custom app.
added a cusomized version into the apps build.json file.
“public/js/prettydate.js”,

and in there i can overwrite the functions with something custom.
e.g.
frappe.datetime.prettyDate = prettyDateCustom;

1 Like
14

Will this fix this kind of use case?

https://discuss.frappe.io/t/override-print-doc-in-form-js/104767