Question
How to include External JS Library or CDN into module pages
15:18 Feb 04, 2026
Hi,
I am working on developing custom handler that will be using Chart.JS (External JS CDN) to perform some action as requirement.
Error:
Handler Method:
{ request: "usr.GenerateContactChartRequest", // On Button Click handler: async (request, next) => { try { // 1. Fetch Context Data console.log("Generate Charts Button Clicked"); const contactId = await request.$context.Id; console.log("Contact: ",contactId); if (!contactId) { console.error("No Contact ID found. Cannot generate charts."); return next.handle(request); } // --- 2. Define Data Variables (Fetch from Page Context) --- // Replace 'PDS_UsrInPerson_...' with your actual attribute codes const isPersonValue = await request.$context.PDS_UsrInPerson_64gzj70 ? 100 : 20; const consentValue = await request.$context.PDS_UsrDataProtectionConsent_urep1g6 ? 80 : 30; // A. Chart Generation Helper const createChartImage = async (type, data, options = {}) => { return new Promise((resolve) => { const canvas = document.createElement('canvas'); canvas.width = 600; canvas.height = 400; const ctx = canvas.getContext('2d'); // 3. Initialize using the extracted class new Chart(ctx, { type: type, data: data, options: { animation: false, responsive: false, ...options } }); // Resolve the promise with the Base64 string const base64String = canvas.toDataURL("image/png"); resolve(base64String); }); }; // B. Database Save Helper const saveChartSnapshot = async (ContactId, ChartType, ImgStr) => { return new Promise((resolve) => { // Check if modern Model API is available (Freedom UI Best Practice) if (request.$context && request.$context.getModel) { const runSave = async () => { const model = await request.$context.getModel("UsrChartSnapshot"); await model.insert({ UsrContact: { value: ContactId }, UsrChartType: ChartType, UsrImageData: ImgStr }); resolve(); }; runSave(); } else { // Fallback to Classic ExtJS API var insert = Ext.create("Terrasoft.InsertQuery", { rootSchemaName: "UsrChartSnapshot" }); insert.setParameterValue("UsrContact", ContactId, Terrasoft.DataValueType.GUID); insert.setParameterValue("UsrChartType", ChartType, Terrasoft.DataValueType.TEXT); insert.setParameterValue("UsrImageData", ImgStr, Terrasoft.DataValueType.TEXT); insert.execute(() => resolve()); } }); }; // --- 4. Execute Chart Generation --- // A. Generate and Save Pie Chart const pieBase64 = await createChartImage('pie', { labels: ['In Person', 'Remote'], datasets: [{ data: [isPersonValue, 100 - isPersonValue], backgroundColor: ['#36a2eb', '#ff6384'] }] }); await saveChartSnapshot(contactId, "Pie", pieBase64); console.log("'Pie Chart' saved."); } catch (error) { console.error("Error generating or saving charts:", error); } return next.handle(request); } }
Like
2 comments
16:46 Feb 05, 2026
In recent versions, external sources are blocked by default. You need to add an exception for the URL in the content security policy area.
If you look in dev tools, you will often see more information, so you can tell if the URL is attempting to load and being blocked, etc.
15:06 Feb 12, 2026
In addition to Ryan answer, you could check the documentation of CSP on how add exceptions
https://academy.creatio.com/docs/8.x/setup-and-administration/administr…
Show all comments