If I add a component to my page, let’s say a Block with Id “myBlock”, is it accessible in custom code via document.getElementById(“myBlock”) or some other id string is needed to access it?
Block components have an “Anchor” property in UI Builder, which gets translated to the Id of a div-element in HTML.
I would wish that more UI components have this Anchor-property …
Regards,
2 Likes
@Klaas_Klever and @Marc_Chriqui , since a UI Builder app is a React app, any direct DOM manipulations are not desirable (React doesn’t like them). Could you please clarify what you’d like to do by having direct access to a dom element?
Regards,
Mark
Hi Mark. I’m trying to integrate an external JS library. In this particular case, I’m trying to generate a PDF (from the content of my Block) so I’m looking to use html2pdf or something similar. If you could recommend a way for me to generate a PDF from UI Builder, that would be great. My goal is to generate a certificate (see background image below) with a person’s name and other information on it that my app user could download and print. While there might be a solution for my certificate, in general, is there a way to safely integrate external JS libraries using custom code? There are so many useful ones out there. Thanks again.
This is my use case as well. Integration of external libs which need a reference to a DOM element. And it has been working fine so far, even if React doesn’t “like” it.
Hi guys
- for generating PDF based on HTML I would recommend you to get it by creating a CustomComponent, you will have more control and flexibility
- it seems like your case requires accessing a Block element and the component already has the property (anchor id), so for now I do not see a reason to add this for other components
- in addition, there are other ways to get DOM elements by CSS selectors, but you should be sure you know what you are doing because it can lead to unexpected errors Document.querySelector() - Web APIs | MDN
1 Like