Is there any way to prevent Frappe's JS from running at all without modifying source code?

I want to run my custom to JS to generate the UI (my project requirements were to simplify it a bit). I was going to modify the source code but I’m reluctant because it might make updates a pain. Can anyone please help me?

Hi @zeeeeeeeero ,

Instead of modifying the source code, you can create your own JavaScript file and include it in your HTML file. This way, your custom code will not interfere with any updates to the source code.

Here are the steps you can follow:

  1. Create a new JavaScript file and give it a relevant name, such as “custom.js”.

  2. In your HTML file, include the new JavaScript file using a script tag. For example:<script src="custom.js"></script>

  3. In your custom JavaScript file, write your code to generate the UI. You can use any framework or library you prefer, or write plain JavaScript.

  4. To ensure that your custom code runs after the source code has loaded, wrap your code in a window.onload function. For example:
    javascriptCopy code

      window.onload = function() {
        // Your custom code goes here
       }
    
  5. Save the custom JavaScript file and reload your HTML page. Your custom code should now generate the UI.

Hope this will help you out.

Yeah, I’ve already done this and it works. But Frappe’s JS still runs. So when my JS runs you see the transition from the default UI to mine. I want to keep this from happening

Hi @zeeeeeeeero ,

One way to prevent the default UI from showing before your custom JS is loaded is to add a CSS class to the body element and then hide the body using CSS. You can then remove the class and show the body after your custom JS is loaded.

  1. Add a CSS class to the body element:
document.body.classList.add('hide-body');
  1. Add the following CSS to hide the body:
.hide-body {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 300ms, opacity 300ms;
}
  1. Load your custom JS code.

  2. Remove the CSS class from the body element:

document.body.classList.remove('hide-body');
  1. Show the body using CSS:
.hide-body {
  visibility: visible;
  opacity: 1;
}

This will hide the default UI until your custom JS is loaded, preventing the transition from the default UI to your custom UI.

Hope this will help you out.

Yeah I tried this too but it takes one full second to load sometimes so I have to run my JS after waiting one second and showing the overlay for one second. This makes for a very annoying UI/UX. I tried running it earlier but it conflicts with some Frappe stuff and causes errors.