My PDF Page (it’s an financial estimate) has two footer components and I only ever want to display one of the two (depending on the currency value of that invoice, EUR or GBP)
With a standard Page I can use page roles, CSS classes and JavaScript but how could I achieve this for a PDF Page?
@GREDDIE at this time there’s no way to achieve this natively with JS or CSS. The only way I can think of is to have 2 child pages with different PDFs.
okay thanks for letting me know - I’ll change my approach.
Hey @moe I’m just revisiting this PDF report and redesigning it in PDF Pages (v2) and wanted to check that nothing has changed here has it (ie this original post). You can’t have any logic in the PDF creation that hides a CSS section based on a field value can you?
I’m re-designing our quotes and invoicing and wanted to ideally have one master document (PDF Page) that could look different depending on what decisions had been chosen on that document.
I know you have the full CSS but I don’t think there is a way to apply any logic to that is there?
If not, would support be able to copy a PDF page I have so I can modify it or do I need to recreate from scratch (since there is no copy option yet on PDF pages).
Kind regards,
Graham,
We do in fact have a JavaScript section in beta that allows you to add custom logic with code. Ill see if we can get this launched sooner than later. @GREDDIE ill be in touch via email so you can test it if you wish.
Would love to be a tester that would be excellent
@GREDDIE this is enabled in your account. Main thing to note is only ‘vanilla javascript’ is supported. Meaning, no jQuery.
I’m familiar with how to hide components on a page form but could you provide a snippet for how to hide a component on a PDF page.
In my example I have two table components, that I want to show/hide toggle between depending on the value of a decision field.
The decision will be “Show simple invoice?” and if enabled the first component is hidden and the second is set to show. Visa-versa if the decision isn’t enabled the other table is shown and the second is hidden.
any pointers relating to how this might differ to a similar implementation on HTML pages would be useful…
Here are the steps I would do:
Find where the element details of the decision field. Easiest way is to find the element in dev-tools, right click and do “Copy JS Path”
The add this code in the Javascript of your PDF, make sure you replace it with the value you copied from the browser:
var element = document.querySelector("#component_3 > div > div > div:nth-child(5) > div > span");
Then you’ll need to find the id of the table you want to hide, you can see it in the HTML
Then add the next JavaScript so it matches your desired logic:
if (element.innerHTML.trim() === "Contact") {
document.getElementById("component_7").style.display = "none";
}
If you drop this into chatGPT it might recommend using ‘const’ instead of ‘var’ I don’t believe that works in this case.
In my example, my code consists of simply this which checks, if the details component value is Contact then hide the second table:
I hope this helps
Perfecto ! 
That works a treat !
For reference for anyone else doing this my decision field is component_20 and the tables I’m turning on and off are component_10 and component_14. The reason for the second line is just to hide the decision field since I don’t want it displayed but it’s required for the JS.
var element = document.querySelector(“#component_20 > p”);
document.getElementById(“component_20”).style.display = “none”;
if (element.innerHTML.trim() === “On”) {
document.getElementById(“component_10”).style.display = “none”;
} else {
document.getElementById(“component_14”).style.display = “none”;
}
Many thanks @moe “another” great addition to PDF’s ! This functionality saved me hours of work as I would have needed to maintain several PDFs that individually provided the results I need so it’s a life saver and it’s ideal for maintenance, everything in one place - Superb feature.
