Hi Guys,
A custom chart component (not provided by Pega) needs to be embedded using HTML and JavaScript in a section.
How would I add and manage the JavaScript code in the section, and how can I ensure it works without conflicting with Pega’s DOM?
Regards,
Vannemsetti.
To embed a custom chart component using HTML and JavaScript in a Pega section without conflicting with Pega’s DOM, use a non-auto-generated section or HTML fragment to add a unique <div> container for the chart, and create a separate JavaScript file as a Static Content Bundle or Text File to manage your logic. Include the script using <pega:include script="yourScript.js" /> and ensure the chart is rendered only after the DOM is ready by using pega.u.d.attachOnload() or a similar approach. Wrap your code in an IIFE or custom namespace to avoid polluting the global scope, use unique IDs or classes for your elements, and retrieve data through Pega Data Pages, hidden fields, or APIs as needed. Finally, test your implementation across dynamic contexts like modals or tabs to ensure stability.
Thanks,
Hema