Using Multiple Instances of Author API

This article describes best practice when working with multiple instances of Author API concurrently. In particular it specifies the recommended events to listen to before starting the initialization of each subsequent instance.

Overview

Although it is not recommended to use multiple instances of Author API concurrently, this article outlines the best practices when certain UX/UI or Authoring workflows require doing so. The recommended approach of using a single instance along with the public method moveInstanceTo will also be described briefly.

As Author API is a single page application which makes multiple external HTTP requests, it is possible to run into issues during the initialization phase due to the fact that a browser's connection limit can be hit if initialization of each instance is not done sequentially. See details of the current parallel request limit broken down by each browser.

The table below documents what event you should listen to before starting initialization of another instance:

 

Scenario

Event 

Initialising in item_list mode

render:itemlist

Initialising in activity_list mode

render:activitylist

Initialising in item_edit mode

render:item

Initialising in activity_edit mode

render:activity

Initialising in any mode but immediately navigating to widget edit mode on ready

widgetedit:editor:ready

 Table 1: events to monitor, before starting another instance

 

Example using a single instance

This code sample demonstrates how you can use a single instance of Author API with the public method moveInstanceTo. As Author API is a complex single page application we recommend tailoring your UX/UI to allow the use of a single instance that is shown and hidden in various states. State change should be controlled using the navigatepublic method and visibility should be controlled by the moveInstanceTo public method by moving the instance to a DOM element which is visible/invisible.


var authorApp = LearnosityAuthor.init(initializationObject, callbacks);
var customButton1 = document.querySelector('button .name-1');
var customButton2 = document.querySelector('button .name-2');
var authorApiContainer1 = document.querySelector('.author-api-container-1');
var authorApiContainer2 = document.querySelector('.author-api-container-2'); // create a UI interaction event
customButton1.on('click', function () { 
// hide the previous container authorApiContainer2.style.display = 'none';
// make the container visible authorApiContainer1.style.display = 'block';
// move Author API to the visible container authorApp.moveInstanceTo(authorApiContainer1);
// change its state appropriately authorApp.navigate('item/' + reference)); }); // as above but moving to another container customButton2.on('click', function () { authorApiContainer1.style.display = 'none'; authorApiContainer2.style.display = 'block'; authorApp.moveInstanceTo(authorApiContainer2); authorApp.navigate('activity/' + reference)); });

Code example 1: using a single instance

 

Example using multiple instances

The code sample below demonstrates the sequential loading of two application instances. A common use case for this is when the user experience requires the ability to edit both a Question and Feature concurrently:


var authorApp1, authorApp2;

// Initialize the first instance
authorApp1 = LearnosityAuthor.init(initOptions, {
readyListener: init,
    errorListener: {}
});

function init() {
// Navigate to Question edit view with some default Question JSON
authorApp1.navigate(“items/12345/widgets/new/{"widgetJson": {defaultQuestionJson}}”);
// Wait until the Question editor has fully loaded
authorApp1.on('widgetedit:editor:ready', function () {
// Initialize the second instance
authorApp2 = LearnosityAuthor.init(initOptions, {
readyListener: init2,
errorListener: {}
});
function init2() {
// Navigate to Question edit view with some default feature JSON
authorApp2.navigate(“items/12345/widgets/new/{"widgetJson": {defaultFeatureJson}}”);
}
});
}

Code example 2: using multiple instances

Was this article helpful?

Did you arrive here by accident? If so, learn more about Learnosity.