Custom javascript in custom invoices


Is there any way to run custom javascript in custom invoice templates that are created in V5 ?
I saw there is none in v4, so hoping for one in v5


I believe it should work, have you tried it?


Yes I managed to get it to work by include my custom JS in the footer section (normal header section) but it worked in the footer section perfectly.

Would the changes revert if InvoiceNinja updates ?

As long as you don’t change the app’s code updates won’t affect it.

Okay great, one thing I am having an issue with is displaying the value entered in the “Discount” field on the quote / invoice setup.

const subtotalLabel = document.querySelector('[data-ref="totals_table-discount-label"]');
        subtotalLabel.textContent = 'Handling Fee - ';

        const discountElement = document.querySelector('[data-ref="totals_table-discount"]');
        let textContent = discountElement.textContent;

        if (textContent.startsWith('-')) {
            textContent = textContent.substring(1);
            discountElement.textContent = textContent;

So if I enter 5 in the discount field, I want it to show as “Handling Fee - 5%”
I found the documentation and it has these fields but everything I tried did not work.

Any ideas?

Managed to sort it out…
I had to use the query selectors instead of the variables.

1 Like