including external js libs / Charts.js

オフライン
Hi, Issue with version 11SP12:   Add a HTML field to the form with: <script src="../scripts/Test/Chart.min.js"></script> <canvas id="myChart" width="400" height="400"></canvas> <script> var ctx = document.getElementById("myChart").getContext('2d'); var myChart = new Chart(ctx, {.... . . .   I get blank page and following is error in console. VM4376 virtualGetForm:472 Uncaught ReferenceError: Chart is not defined !   Note: Above issue is reproducible with default behavior of Item being open in Aras Innovator item tab (not in another browser tab, as it used to be with earlier Aras Innovator versions). When I click on a 404 link against error in Chrome Browser debugger, Chart is shown in a new browser window, and not in a original/main Innovator window. ( localhost/.../virtualGetForm Any quick help is appreciated. Thank you.
  • Hi ke, It sounds like your JavaScript is running before Chart.min.js gets loaded. You can try wrapping your logic in a require block. I find that typically resolves these timing issues.
    require([
        "../scripts/Test/Chart.min.js" 
    ], function(
        Chart
    ) {
        // this function contains all logic requiring Chart.min.js
        function loadChart() {
            var ctx = document.getElementById("myChart").getContext('2d');
            var myChart = new Chart(ctx, {...});
            
            // remaining chart logic here
        }
    
        // call the load chart function once Chart.min.js is loaded
        loadChart();
    });
    You can see this approach used in several Aras Community Projects, like this method in the Workflow Timeline project. Another thing that may help is putting your Test folder in the Innovator/Client/javascript folder instead of the scripts folder. I'm not sure whether this makes a difference, but I think it may have resolved an issue for me once. Hope this helps! Eli
    Eli Donahue Aras Labs Software Engineer
  • 0 オフライン
    Perfect answer. Thank you so much, Eli Yes, the issue was my JavaScript code is running before Chart.min.js gets loaded. As suggested best practice, I have also moved my js code to Innovator/Client/javascript folder. Also thanks for reference link to Workflow Timeline project, it is helpful.