Custom print format footer

[Vasana_Wijewardena]

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.

[NCP]

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.

[NCP]

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:

Introducing Print Designer : A brand new way of designing print formats 🖨️

Now you can effortlessly customize and design stunning print formats. The app combines an intuitive and user-friendly interface, making it a breeze to create professional-quality print layouts. From invoices and purchase orders to delivery notes and more, the possibilities are endless! Save the date for an exciting YouTube premiere tomorrow, 20th June 2023, at 11 am IST. Join us as we showcase the app in action, unveiling and demonstrating its remarkable features ➤ Print Des…

• Print Designer App: A new way to design print formats [YouTube]:

Print Designer App: A brand new way of designing print formats | Frappe Cloud Marketplace

• Print Designer Feature, Formats & Fun [YouTube]:

#BuildWithHussain Ep. 17: Print Designer Feature, Formats & Fun, ft. Maharshi Patel

• Frappe Cloud Marketplace:

Print Designer

• GitHub:

GitHub - frappe/print_designer: Visual print designer for Frappe / ERPNext

Take a look and explore!

Thank You!

[Vasana_Wijewardena]

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

[NCP]

Hi @Vasana_Wijewardena,

It will be compatible with v15 and onwards.

Introducing Print Designer : A brand new way of designing print formats 🖨️

Currently, It is available on develop branch for testing. It will be compatible with v15 and onwards. reason behind this is because some of the key libraries used to create this app is not available in the v14 of frappe framework.

Thank You!

[Vasana_Wijewardena]

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

[NCP]

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

feat: jinja rendering for print designer

I hope this helps.

Thank You!

[Vasana_Wijewardena]

@Vasana_Wijewardena

value, I wanted to convert customer Id to some format and add amount to the end. so

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.

[Kiranmai]

You can add js in jinja. See below image.

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

[Vasana_Wijewardena]

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.

[Vasana_Wijewardena]

@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.

[NCP]

You can only use Jinja, not JavaScript.

[maharshivpatel]

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

[Vasana_Wijewardena]

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?