Change Icon and CSS for PDF 2.0 Link Button

Showcase Tips and Tricks
1

Greetings TB Community -
Feel free to use the following JS code to alter the Link Button for New PDFs (PDF 2.0):

TB.render('component_XX', function(data) {
    var element = data.ele[0].children[0];
    element.classList.add("btn-sm", "btn-outline");

    var iconElement = element.querySelector('i');
    
    if (iconElement) {
        iconElement.classList.remove("fa-print");
        iconElement.classList.add("fa-download");
    }
});
  • Change the Component number to the one for your Link Button.
  • Change the class to whatever you want either using the native bootstrap styles or create a custom one.
  • Change the icon element to whatever is supported in the current Font Awesome icons.

Adam

3 Likes
2

Hello Adam. I appreciate this JS code. Im setting up the Print PDF 2.0 button for the first time. I have it set up on one of my pages. When I preview the page and click on the print button the pdf file is immediately downloaded. How do I change settings so the print pdf button prints the page instead of downloading the page.

3

Greetings @Eespinosa (Edward), welcome to the TB Community!

If you are using PDF 2.0 pages they will only download by default. There is not a way to change it where they automatically open in a browser whereby you can then print.

The way the PDFs are complied is actually a complicated process behind the scenes. That’s why in almost all low code/no-code database platforms, PDFs are pretty restricted. When compiling PDFs in volume (across the platform there could be several dozen or hundreds being complied each minute), the added functionality of automatically opening in a browser is not functionally possible; the system would crash or slow waaaayyy down.

Hope this helps,
Adam