Apply CSS class to PDF Print/Download Button

Showcase Tips and Tricks
1

Hey Tada Community-

You can apply a CSS class to the PDF Print/Download button with some javascript.

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

Change the component XX with the component ID for the button.

Hope this helps,
Adam

4 Likes
2

Nice Adam! Thanks for sharing :+1:

3

@tim.young where should be the best way to add all js codes? inside each Layout? (what if I have like 10 or more ? Can we add all JS codes in the SETTINGS > CUSTOM HEADER/FOOTER CODE.

4

Hi @TadaMan-

It is best to place JS codes on the specific pages that they apply to. If you apply them in the application’s Custom Header/Footer locations they will then apply to all pages. This could be problematic if you have JS codes that apply to specific components and or HTML/CSS code.

Hope this helps,
Adam

1 Like
5

@SafetyUniversity is correct. It’s best to consider what pages/elements you intend to target with both JavaScript and CSS and place the code in a relevant location.

Since I’m much more familiar with CSS, I’ll use an example related to custom CSS. If you wish to modify the appearance of buttons throughout the entire application, the CSS would be placed in the Custom Header/Footer section of your app’s settings. If you wish to change the button appearance on a single form, the CSS would be placed on a single page.

For reference, this list contains everywhere you can place custom code (CSS, JavaScript, or both) in order of global effect -> highly specific

  • Custom Header/Footer - CSS & JS
  • Page Layouts - CSS & JS
  • Pages - CSS & JS
  • Rows - CSS
  • Columns - CSS
  • Components - CSS
2 Likes
6

@SafetyUniversity ,

Is this also a solution for the issue I am having?