Custom print format footer


I’m working on custom print format and I wanted to get the custom footer to bottom of the page. I tried couple of ways but only “footer-html” was the solution.

<div id="footer-html" style="position: relative; padding-bottom: 5px; height: 100px; ">

But inside this div there’s another 2 div’s which will get setup the values in the script section.

<div id="footer-html" style="position: relative; padding-bottom: 5px; height: 100px; ">
<div id ="biller_code"  style="text-indent: 0pt;line-height: 9pt;text-align: left;"></div>  

 document.getElementById("biller_code").innerHTML = "biller code value"

if I use this footer-html the script doesn’t set the value for the biller_code but I remove this footer-html id it’s working fine. then the div is not the footer.

Could you please help me to resolve this issue?

Thank you.

The footer HTML has preset styles using CSS, and there are specific methods applied to it. This causes issues when you try to add a custom ID for something else, as it affects the display.

Hi @Vasana_Wijewardena,

If you’re using version 15 of ERPNext, there’s an awesome new feature called Print Designer. It lets you easily customize and create impressive print layouts. The app has a simple interface, so designing professional-quality prints is easy. You can use it for invoices, purchase orders, delivery notes, and more.

To learn more and try it out, check these links:

  • Print Designer App: A new way to design print formats [YouTube]:
  • Print Designer Feature, Formats & Fun [YouTube]:
  • Frappe Cloud Marketplace:
  • GitHub:

Take a look and explore!

Thank You!

1 Like

Thank you, But atm I’m using 14 is there any workaround for this on 14?

Hi @Vasana_Wijewardena,

It will be compatible with v15 and onwards.

Thank You!

I’m trying to move on with ERPNext 15 and print designer.

for the barcode value, I wanted to convert customer Id to some format and add amount to the end. so that format I wanted to run a script. is it possible to do with print designer?


Please watch the video at approximately 2 minutes and 20 seconds into the pull request for the print designer.

I hope this helps.

Thank You!

Thank you, But can I use JavaScript here? I have a JS method to convert Customer ID to a specific format ( let’s say convert to ASCII code).

How can I add my javaScript here?

Thank you.

You can add js in jinja. See below image.

you can call the id of that method in your code. See below image.

Hi @Kiranmai ,

I’m ok with this custom print format but I’m using Print Designer due to footer issue and I wanted to insert JS to Print designer.

can I do that?

Thank you.

@NCP ,

// generates ASCII codes for given string
var charCode = {
    getCharCodes: function(s){
        console.log("get charcode "+ s)
        var charCodeArr = [];
        for(var i = 0; i < s.length; i++){
            var code = s.charCodeAt(i);
        return charCodeArr;

 var custChar= charCode.getCharCodes(custID).toString().replace(/,/g,"");

document.getElementById("custChar").innerHTML =custChar;


This is my code which I used in script tag in the print format.

Could you please help me to add this to Print designer.

Thank you.

You can only use Jinja, not JavaScript.

@Vasana_Wijewardena {{ (doc.customer_name + "100" + "something").encode('ascii') | list | join("") }} this should do the trick.

1 Like

Thank you!

@maharshivpatel , @NCP

I tried to use bellow but it’s giving me error with this Join.
{% set customer= (doc.customer).encode(‘ascii’)|list|join %}
{% set customer= (doc.customer).encode(‘ascii’)|list|join(‘’) %}

but if I use another separator link space, ‘|’ it’s working fine. also as you mentioned above if it’s in Jinja text it’s working fine. but I wanted to use it in Manage custom data section and pass it to another method. return value of the method if using couple of places, so I think it’s better to keep it common place.

Do you have any idea with this?