eLabSDK.Wizard

Classes

Name	Description
initialize

Members

Name	Description
_currentPanel
_previousPanel
_wizardContent	Stores the wizard panels

Functions

Name	Description
addPanel(panel)	Add a panel (step) to the wizard workflow.

This adds a new panel to the wizard's sequence of steps. Each panel represents one step in
the workflow, typically displaying a form, information, or requiring user input. Panels are
automatically indexed in the order they're added and assigned the wizard's prefix. Use this
during wizard initialization to build the complete workflow before calling start(). Panels
can be eLabSDK.Wizard.Panel instances or configuration objects.
nextPanel(panel) | Displays the next panel
insert(config) | Insert a new panel to the currently active wizard
remove(config) | Remove a panel from the currently active wizard
lockNavigation() | Lock wizard navigation to prevent users from moving between panels.

This disables all navigation controls in the wizard: Previous/Next buttons, Finalize button,
and side menu panel selection. Use this during async operations (API calls, data validation,
processing) to prevent users from navigating away before the operation completes. Always
remember to call unLockNavigation() when the operation is done to restore navigation.
unLockNavigation() | Unlock wizard navigation to allow users to move between panels again.

This re-enables all navigation controls in the wizard: Previous/Next buttons, Finalize button,
and side menu panel selection. Call this after completing async operations that required
locking navigation (via lockNavigation()). Always pair lockNavigation() and unLockNavigation()
calls to ensure the wizard remains functional. Include error handling to unlock navigation
even if operations fail.
start() | Start the wizard and display it to the user.

This creates and shows the wizard dialog with all configured panels, navigation buttons,
and side menu. The first panel is automatically activated and displayed. Call this after
adding all panels to the wizard. The wizard validates that required data is present before
starting. The dialog includes Previous/Next/Finalize buttons configured during initialization
and executes callbacks for creation, closing, and completion events.
close() | Close the wizard, closes the dialog
_checkForRequiredData(panel) | Check if required data is availale to launch the wizard panel, display a log if logging enabled
_createMainContainer(panel) | Create the main container
createSideMenu(panel) | Create the navigation tree
activateMenuItem(panel) | Activate the triggered side menu item
_handleNavigationButtonDisplay(panel) | Display or hide buttons depending on which panel index is active

initialize

Kind: global class

new initialize(config)

Param	Type
config	`object`

_currentPanel

Kind: global variable
Properties

Name	Type
_currentPanel	`object`

_previousPanel

Kind: global variable
Properties

Name	Type
_previousPanel	`object`

_wizardContent

Stores the wizard panels

Kind: global variable
Properties

Name	Type
_wizardContent	`object`

addPanel(panel)

Add a panel (step) to the wizard workflow.

Kind: global function

Param	Type	Description
panel	`eLabSDK.Wizard.Panel` \| `Object`	A Wizard.Panel instance or configuration object for the panel

Example

// Create wizard and add panels
var wizard = new eLabSDK.Wizard({
  title: 'Sample Creation Wizard',
  width: 600,
  height: 400
});

// Add first panel
wizard.addPanel(new eLabSDK.Wizard.Panel({
  title: 'Basic Information',
  content: '<input type="text" name="sampleName" placeholder="Sample Name" />'
}));

// Add second panel
wizard.addPanel(new eLabSDK.Wizard.Panel({
  title: 'Storage Location',
  content: '<select name="storageLayer"><option>Freezer A</option></select>'
}));

wizard.start();

Example

// Add multiple panels in a loop
var wizard = new eLabSDK.Wizard({
  title: 'Multi-Step Process',
  width: 700,
  height: 500
});

var steps = [
  { title: 'Step 1: Information', content: '<div>Enter details</div>' },
  { title: 'Step 2: Confirmation', content: '<div>Review your input</div>' },
  { title: 'Step 3: Completion', content: '<div>Process complete</div>' }
];

steps.forEach(function(step) {
  wizard.addPanel(new eLabSDK.Wizard.Panel(step));
});

wizard.start();

nextPanel(panel)

Displays the next panel

Kind: global function

Param	Type
panel	`object`

insert(config)

Insert a new panel to the currently active wizard

Kind: global function

Param	Type
config	`obj`

remove(config)

Remove a panel from the currently active wizard

Kind: global function

Param	Type
config	`obj`

lockNavigation()

Lock wizard navigation to prevent users from moving between panels.

Kind: global function
Example

// Lock navigation during API call
var wizard = new eLabSDK.Wizard({
  title: 'Data Submission Wizard',
  nextButton: {
    label: 'Next',
    fn: function(panel) {
      // Lock navigation while submitting
      wizard.lockNavigation();
      
      $.post('/api/v1/samples', getData(), function(response) {
        console.log('Data submitted successfully');
        wizard.unLockNavigation();
        wizard.nextPanel(getNextPanel());
      }).fail(function(error) {
        alert('Submission failed: ' + error.message);
        wizard.unLockNavigation();
      });
    }
  }
});

Example

// Lock during validation
var wizard = new eLabSDK.Wizard({
  title: 'Sample Creation',
  nextButton: {
    label: 'Next',
    fn: function(panel) {
      wizard.lockNavigation();
      
      validateInput(panel.getData(), function(isValid) {
        if (isValid) {
          wizard.nextPanel(getNextPanel());
        } else {
          alert('Please correct the errors');
        }
        wizard.unLockNavigation();
      });
    }
  }
});

Example

// Lock during processing with timeout
wizard.lockNavigation();

setTimeout(function() {
  processData();
  wizard.unLockNavigation();
}, 2000);

unLockNavigation()

Unlock wizard navigation to allow users to move between panels again.

Kind: global function
Example

// Unlock after successful API call
wizard.lockNavigation();

$.post('/api/v1/data', formData, function(response) {
  console.log('Operation successful');
  wizard.unLockNavigation();
  moveToNextStep();
});

Example

// Unlock in both success and error cases
wizard.lockNavigation();

$.ajax({
  url: '/api/v1/validate',
  method: 'POST',
  data: getData()
}).done(function(result) {
  console.log('Validation passed');
  wizard.nextPanel(getNextPanel());
}).fail(function(error) {
  console.error('Validation failed:', error);
  alert('Please correct the errors');
}).always(function() {
  // Always unlock, regardless of success or failure
  wizard.unLockNavigation();
});

Example

// Unlock after timeout
wizard.lockNavigation();
console.log('Processing...');

setTimeout(function() {
  completeProcessing();
  wizard.unLockNavigation();
  console.log('Navigation restored');
}, 3000);

start()

Start the wizard and display it to the user.

Kind: global function
Example

// Create and start a basic wizard
var wizard = new eLabSDK.Wizard({
  title: 'Sample Creation Wizard',
  width: 600,
  height: 400,
  previousButton: { label: 'Back' },
  nextButton: { label: 'Next' },
  finalizeButton: { label: 'Create Sample' }
});

wizard.addPanel(new eLabSDK.Wizard.Panel({
  title: 'Step 1',
  content: '<input type="text" name="sampleName" />'
}));

wizard.addPanel(new eLabSDK.Wizard.Panel({
  title: 'Step 2',
  content: '<select name="sampleType"><option>Type A</option></select>'
}));

wizard.start(); // Display the wizard

Example

// Wizard with lifecycle callbacks
var wizard = new eLabSDK.Wizard({
  title: 'Data Entry Wizard',
  width: 700,
  height: 500,
  onAferCreateWizard: function() {
    console.log('Wizard opened');
    initializeFormValidation();
  },
  onBeforeCloseWizard: function() {
    console.log('Wizard closing - saving draft');
    saveDraftData();
  },
  onAferCloseWizard: function() {
    console.log('Wizard closed');
    cleanupResources();
  }
});

wizard.addPanel(new eLabSDK.Wizard.Panel({
  title: 'Information',
  content: '<form id="dataForm">...</form>'
}));

wizard.start();

Example

// Wizard with custom finalize action
var wizard = new eLabSDK.Wizard({
  title: 'Experiment Setup',
  width: 800,
  height: 600,
  finalizeButton: {
    label: 'Create Experiment',
    fn: function(panel) {
      wizard.lockNavigation();
      
      var experimentData = collectWizardData();
      
      eLabSDK.API.call({
        method: 'POST',
        path: 'experiments',
        body: experimentData,
        onSuccess: function(xhr, status, response) {
          alert('Experiment created with ID: ' + response);
          wizard.close();
        },
        onError: function(xhr, status, error) {
          alert('Error: ' + error);
          wizard.unLockNavigation();
        }
      });
    }
  }
});

// Add panels...
wizard.start();

close()

Close the wizard, closes the dialog

Kind: global function

_checkForRequiredData(panel)

Check if required data is availale to launch the wizard panel, display a log if logging enabled

Kind: global function

Param	Type
panel	`object`

_createMainContainer(panel)

Create the main container

Kind: global function

Param	Type
panel	`object`

createSideMenu(panel)

Create the navigation tree

Kind: global function

Param	Type
panel	`object`

activateMenuItem(panel)

Activate the triggered side menu item

Kind: global function

Param	Type
panel	`object`

_handleNavigationButtonDisplay(panel)

Display or hide buttons depending on which panel index is active

Kind: global function

Param	Type
panel	`object`