Question
Sytel Reply
IT
Last activity: 29 Nov 2025 3:00 EST
How use Javascript library in Pega
Hello,
I know it's possible to use javascript library in section, using the <script src="URLtoJSLibrary></script> I can point to the external JS library.
I'd like to know if there's another way to use a JS library without using link?
Accepted Solution
Updated: 29 Nov 2025 2:59 EST
HCA Healthcare
US
@DanieleD9965 You are right that in Constellation you’d use DXCB / node imports, but in traditional UI the Harness is what owns the page, so any Section you drop inside it will “see” the JS that the Harness loads. Create a Text File rule in webwb with your library or wrapper JS, then open your Harness (or the Perform/Review harness used by your flow) and add that file under the Scripts & Styles tab so it’s included on every render. Make sure your JS exposes global functions on window (for example window.myLibFunc = function(){…}) and then call myLibFunc() from your Section (in an action, custom control, or non-auto HTML). To “connect” the Section to that Harness, just include the Section in a layout inside that Harness, or use that Harness as the Perform/Review harness for the flow action that shows your Section. If you tested this and your function was “not defined,” usually it’s a cache issue (save the Harness, clear cache, log out/in) or the script not marked correctly in Scripts & Styles. You can make a non-auto-generated Section and put a <script> tag there, but it’s not recommended because of security, upgrade, and readability problems. A better pattern is: no inline <script> in Sections, keep JS in webwb, include it via Harness Scripts & Styles, and only call functions from the Section or control.
HCA Healthcare
US
Yes, you can use a JS library without hard-coding a <script> tag in the section. A common way is to create a Text File rule in webwb that contains your JS (either the whole library or a small wrapper that loads it). Then, in your Harness or Portal rule, use the Scripts & Styles tab to include that JS file so it loads for the whole screen. After that, your section or control can just call the functions from that library because it’s already loaded on the page. You can also bundle custom JS into a reusable control or custom DX component and reference that control from sections instead of adding script tags each time. In Constellation, the recommended way is to use approved extension points (custom components / web embeds) rather than inline script. In short: put the library in webwb, include it via Harness/Application Scripts & Styles, and then call its functions from your UI rules, instead of linking it directly in the section.
Sytel Reply
IT
@Sairohith Thanks for your response. With Constellaton I remember I could also import with nodejs in DXCB. But I'm in traditional UI. Now the part with loading in Harness it's the one I'd like to get deeper, since I don't get. Because I tried the Harness method. So I created an Harness, adding my js in Scripts & Styles, and then I created a section trying to reference the script function. But I'd like to understand how to connect the section I create with the Harness that has the script. And if I can customize my section with not Autogenerated HTML using script and making it still working and how. Can I use the <script> tag? Thanks again for your help. Have a nice day.
Accepted Solution
Updated: 29 Nov 2025 2:59 EST
HCA Healthcare
US
@DanieleD9965 You are right that in Constellation you’d use DXCB / node imports, but in traditional UI the Harness is what owns the page, so any Section you drop inside it will “see” the JS that the Harness loads. Create a Text File rule in webwb with your library or wrapper JS, then open your Harness (or the Perform/Review harness used by your flow) and add that file under the Scripts & Styles tab so it’s included on every render. Make sure your JS exposes global functions on window (for example window.myLibFunc = function(){…}) and then call myLibFunc() from your Section (in an action, custom control, or non-auto HTML). To “connect” the Section to that Harness, just include the Section in a layout inside that Harness, or use that Harness as the Perform/Review harness for the flow action that shows your Section. If you tested this and your function was “not defined,” usually it’s a cache issue (save the Harness, clear cache, log out/in) or the script not marked correctly in Scripts & Styles. You can make a non-auto-generated Section and put a <script> tag there, but it’s not recommended because of security, upgrade, and readability problems. A better pattern is: no inline <script> in Sections, keep JS in webwb, include it via Harness Scripts & Styles, and only call functions from the Section or control.
Sytel Reply
IT
@SairohithThanks. That is very helpful. Have a nice day.