Skip to Content
avatar image
Former Member

How to force Design Studio extensions to load js libraries in correct order?

Hi,

I'm trying to load several JS libraries in a specific order for an extension I am creating. The first must finish loading before the others are loaded, as they depend on the first. I was under the impression that the implementation of RequireJS would do this automatically, but it seems that it is loading the other JS libraries before the first is completely loaded.

My code:

define(["sap/designstudio/sdk/component",
	"../../res/js/highcharts/highcharts",
	"../../res/js/highcharts/highcharts-more",
	"../../res/js/highcharts/solid-gauge",
	"css!../css/component.css"], 
        function(Component, Highcharts, res1, res2, css) {


    Component.subclass("component.name",function() {
        .....
        this.afterUpdate = function() {
            highchart = new Highcharts.chart(myDiv, {
                ....
            }
        };
    });
});

The problem is that I keep getting errors from the second and third libraries that Highcharts isn't loaded yet. I also get an "Highcharts is undefined" error from the line that tries to create the chart (even though Highcharts is defined by then). If I open the console in my browser and type in Highcharts, it shows that it is correctly initialized.

Is requireJS supposed to load these libraries in the correct order, or do I have to do it manually (as I was doing it before)?

EDIT: There seems to be a general issue accessing Highcharts. If I try console.log(Highcharts) anywhere in my code, I get undefined. However, when I try console.log(this), I do see the Highcharts object below it, with all its functions.

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

0 Answers