Custom print format footer

ERPNext
,
1

Hello,

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>  
</div>


<script>
 document.getElementById("biller_code").innerHTML = "biller code value"
</script>

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.

2

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.

3

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
4

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

5

Hi @Vasana_Wijewardena,

It will be compatible with v15 and onwards.

Thank You!

6

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?

TIA

7

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!

8

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.

9

You can add js in jinja. See below image.

Screenshot from 2024-03-06 11-37-44
Screenshot from 2024-03-06 11-37-44824×187 20.2 KB

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

Screenshot from 2024-03-06 11-38-44
Screenshot from 2024-03-06 11-38-44793×84 12 KB

10

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.

image
image1647×942 27.5 KB

can I do that?

Thank you.

12

@NCP ,

<script>
// 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);
            charCodeArr.push(code);
        }
        
        return charCodeArr;
    },
};

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

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

</script>

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.

13

You can only use Jinja, not JavaScript.

14

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

1 Like
15

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?