Can you set the load order with JS.RegisterJSInclude() in Ektron v8.6?

Question

I'd like to use Ektron's JS.RegisterJSInclude to load my JavaScript files, but I'd like to set the load order of the JavaScript.

    Ektron.Cms.CommonApi _api = new Ektron.Cms.CommonApi();

    // I'd like this to be called first every time
    JS.RegisterJSInclude(this, _api.SitePath + "/js/first.js", "FirstJS");

    JS.RegisterJSInclude(this, _api.SitePath + "/js/atk.js", "AdobeTypeKitJS");
    JS.RegisterJSInclude(this, _api.SitePath + "/js/file2.js", "File2JS");

    // I'd like this to be called last every time
    JS.RegisterJSInclude(this, _api.SitePath + "/js/last.js", "LastJS");

These files will load in order they are called. What I'd like to do is have control of what order they are called whether this is called from a MasterPage, a WebForm, or a widget. For example if I had a call to

    Ektron.Cms.CommonApi _api = new Ektron.Cms.CommonApi();
    JS.RegisterJSInclude(this, _api.SitePath + "/js/widget.js", "WidgetJS");

In a widget, I'd like it to always come before the 'LastJS'.

Is this possible with Ektron v8.6?

Answer 1

You didn't specify a version, so I'm going to assume 8.5+ with full Framework API

It comes down to page event execution order - there isn't a way to specify a priority order manually.

However, if you load /js/widget.js in the widget Init event and load the others in the page Load event, then widget.js should be first loaded, for example. I'm not sure this is ideal for what you've described above - you may be asking for the widget JS to be loaded between two others in the code above, which isn't possible. At least, not out of the box.

But there may be something you can do with a custom solution. For example, something like this should work, though I've not tested it. I'm using HTTPContext to pass objects from one event to the next - which will work across widgets, pages, master, etc.

// adding javascript objects to http context in init function on page/widget
protected void Page_Init(object sender, EventArgs e)
{
    List<JSObject> AddOns;
    object StoredAddOns = HttpContext.Current.Items["JSAddOns"];
    if (StoredAddOns == null)
    {
        AddOns = new List<JSObject>();
    }
    else
    {
        AddOns = (List<JSObject>)StoredAddOns;
    }
    // javascript being added to the list in the wrong order intentionally
    AddOns.Add(new JSObject() { name = "LastJS", path = "/js/last.js", priority = 10 });
    AddOns.Add(new JSObject() { name = "WidgetJS", path = "/js/widget.js", priority = 5 });
    HttpContext.Current.Items["JSAddOns"] = AddOns;
}

// reading js objects from httpcontext and adding them to the page using framework ui api
// this could just as easily be prerender - as long as the event that reads the objects is after the event that writes them
protected void Page_Load(object sender, EventArgs e)
{
    object StoredAddOns = HttpContext.Current.Items["JSAddOns"];
    if (StoredAddOns != null)
    {
        var AddOns = (List<JSObject>)StoredAddOns;
        // using LINQ to order the JS objects by custom-defined priority setting
        var SortedAddOns = AddOns.OrderBy(j => j.priority);
        // looping through items in priority order to add to the page
        foreach (var js in SortedAddOns)
        {
            Ektron.Cms.Framework.UI.JavaScript.Register(this, js.path, true);
        }
    }
}

// the custom js object
public class JSObject
{
    public int priority { get; set; }
    public string path { get; set; }
    public string name { get; set; }
    public JSObject()
    {
        priority = 0;
        path = string.Empty;
        name = string.Empty;
    }
}

Side Note: If you're going to use SitePath, don't start the next string with /. Otherwise, the path will come out //js/widget.js, assuming your Ektron application is in the root of your site, or /path//js/widget.js if it's in a subfolder or child application.