eLabSDK.Wizard.Panel

Classes

Name	Description
initialize

Members

Name	Description
_panelBody
_data

Functions

Name	Description
activate()	Activate (show) this wizard panel.

This makes the panel visible in the wizard. If the panel has already been rendered, it's
simply shown. If not yet rendered, the panel is created and added to the wizard DOM. The
onRender callback is executed after the panel is activated. This is called internally by
the wizard navigation system but can also be called manually to programmatically navigate
to a specific panel.
deactivate() | Deactivate (hide) this wizard panel.

This hides the panel from view in the wizard without removing it from the DOM. The panel
remains in memory and can be reactivated later with activate(). This is called internally
by the wizard navigation system when moving between panels, but can also be called manually
to programmatically hide panels. Use this when implementing custom navigation logic or when
you need to temporarily hide a panel without destroying it.
addHTML(config) | Add HTML content to the panel body.

This appends HTML content to the panel's internal content array. The content is rendered
when the panel is activated. Multiple HTML blocks can be added and they will be concatenated
in the order they were added. Use this to dynamically build panel content or add elements
progressively.
remove(object) | Remove an object from the panel body content array.

This removes elements from the panel's internal content array (_panelBody). Note: The current
implementation has incomplete logic and may not work as intended. Use addHTML() to add content
dynamically. This method is provided for completeness but may require enhancement for production
use.
_render(_panelBody) | Create a new panel - runs only once unless the panel to activate does not excist
setData(value, input) | Save form data for this panel.

This stores a key-value pair representing form input data for the panel. If data with the
same input ID already exists, it's replaced. The data is stored in the panel's internal
data array and can be retrieved later with getData(). Use this to capture user input as
they progress through the wizard, enabling validation, data collection, or state management
across panels.
getData([panel]) | Retrieve all data stored for this panel.

This returns the array of all data stored via setData() for this panel. Each data entry
is an object with 'id' and 'value' properties. Use this to collect user input from the
panel, validate data before proceeding, or submit collected data at the end of the wizard.

Events

Name	Description
"onRender"	Method triggered after the panel has been rendered
"onRender"	Method triggered after the panel has been turned hidden

initialize

Kind: global class

new initialize(config)

Param	Type
config	`object`

_panelBody

Kind: global variable
Properties

Name	Type
_panelBody	`array`

_data

Kind: global variable
Properties

Name	Type
_data	`object`

activate()

Activate (show) this wizard panel.

Kind: global function
Example

// Manually activate a specific panel
var wizard = new eLabSDK.Wizard({ title: 'My Wizard' });

var panel1 = new eLabSDK.Wizard.Panel({
  title: 'Step 1',
  content: '<input type="text" id="name" />',
  onRender: function(panelIndex) {
    console.log('Panel ' + panelIndex + ' is now active');
    $('#name').focus();
  }
});

wizard.addPanel(panel1);
wizard.start();

// Later, manually activate the panel
panel1.activate();

Example

// Conditional panel activation
var panel2 = new eLabSDK.Wizard.Panel({
  title: 'Advanced Options',
  content: '<div>Advanced settings...</div>',
  onRender: function() {
    loadAdvancedSettings();
  }
});

// Activate only if user has permissions
if (userHasAdvancedPermissions()) {
  panel2.activate();
}

deactivate()

Deactivate (hide) this wizard panel.

Kind: global function
Example

// Manually deactivate a panel
var wizard = new eLabSDK.Wizard({ title: 'My Wizard' });

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

wizard.addPanel(panel1);
wizard.start();

// Later, hide the panel
panel1.deactivate();

Example

// Conditional panel visibility
var advancedPanel = new eLabSDK.Wizard.Panel({
  title: 'Advanced Settings'
});

$('#toggleAdvanced').on('change', function() {
  if ($(this).is(':checked')) {
    advancedPanel.activate();
  } else {
    advancedPanel.deactivate();
  }
});

Example

// Hide all panels except current
wizard._wizardContent.forEach(function(panel, index) {
  if (index !== wizard._currentPanel) {
    panel.deactivate();
  }
});

addHTML(config)

Add HTML content to the panel body.

Kind: global function

Param	Type	Description
config	`string`	HTML string to add to the panel body

Example

// Add HTML content to panel
var panel = new eLabSDK.Wizard.Panel({
  title: 'Data Entry'
});

panel.addHTML('<div class="form-group"><label>Name:</label>');
panel.addHTML('<input type="text" id="userName" class="form-control" /></div>');
panel.addHTML('<div class="form-group"><label>Email:</label>');
panel.addHTML('<input type="email" id="userEmail" class="form-control" /></div>');

wizard.addPanel(panel);

Example

// Dynamically add fields based on data
var panel = new eLabSDK.Wizard.Panel({
  title: 'Sample Fields'
});

var fields = ['Concentration', 'pH', 'Temperature'];
fields.forEach(function(fieldName) {
  panel.addHTML(
    '<div class="field">' +
    '<label>' + fieldName + ':</label>' +
    '<input type="text" name="' + fieldName + '" />' +
    '</div>'
  );
});

remove(object)

Remove an object from the panel body content array.

Kind: global function
Returns: Array - The updated _panelBody array

Param	Type	Description
object	`Object`	The object to remove from the panel body

Example

// Basic usage (note: implementation may be incomplete)
var panel = new eLabSDK.Wizard.Panel({
  title: 'My Panel'
});

panel.addHTML('<div id="section1">Content 1</div>');
panel.addHTML('<div id="section2">Content 2</div>');

// Attempt to remove content
panel.remove(contentObject);

_render(_panelBody)

Create a new panel - runs only once unless the panel to activate does not excist

Kind: global function
Returns: obj - _panelBody

Param	Type
_panelBody	`obj`

setData(value, input)

Save form data for this panel.

Kind: global function

Param	Type	Description
value	`*`	The value to store (any type: string, number, boolean, object, etc.)
input	`string`	The identifier/key for this data (typically input field ID or name)

Example

// Store form input data
var panel = new eLabSDK.Wizard.Panel({
  title: 'User Information',
  content: '<input type="text" id="userName" /><input type="email" id="userEmail" />',
  onRender: function() {
    var self = this;
    
    $('#userName').on('change', function() {
      panel.setData($(this).val(), 'userName');
    });
    
    $('#userEmail').on('change', function() {
      panel.setData($(this).val(), 'userEmail');
    });
  }
});

Example

// Store complex data
var panel = new eLabSDK.Wizard.Panel({
  title: 'Sample Selection',
  content: '<div id="sampleSelector"></div>',
  onRender: function() {
    $('#selectSamplesBtn').on('click', function() {
      var selectedSamples = getSelectedSamples();
      panel.setData(selectedSamples, 'selectedSamples');
      panel.setData(selectedSamples.length, 'sampleCount');
    });
  }
});

Example

// Store data before moving to next panel
wizard.options.nextButton.fn = function(currentPanel) {
  // Collect all form data before proceeding
  $('input, select', currentPanel).each(function() {
    var $field = $(this);
    currentPanel.setData($field.val(), $field.attr('id'));
  });
  
  wizard.nextPanel(getNextPanel());
};

getData([panel])

Retrieve all data stored for this panel.

Kind: global function
Returns: Array.<Object> - Array of data objects, each with {id: string, value: *} properties

Param	Type	Description
[panel]	`Object`	Optional panel parameter (not used in current implementation)

Example

// Get panel data for validation
wizard.options.nextButton.fn = function(currentPanel) {
  var panelData = currentPanel.getData();
  
  var isValid = true;
  panelData.forEach(function(field) {
    if (!field.value || field.value === '') {
      alert('Please fill in all fields');
      isValid = false;
    }
  });
  
  if (isValid) {
    wizard.nextPanel(getNextPanel());
  }
};

Example

// Collect all wizard data at finalize
wizard.options.finalizeButton.fn = function(currentPanel) {
  var allData = {};
  
  // Collect data from all panels
  wizard._wizardContent.forEach(function(panel) {
    var panelData = panel.getData();
    panelData.forEach(function(field) {
      allData[field.id] = field.value;
    });
  });
  
  console.log('Collected wizard data:', allData);
  submitDataToServer(allData);
};

Example

// Display summary of entered data
var summaryPanel = new eLabSDK.Wizard.Panel({
  title: 'Review Your Input',
  onRender: function() {
    var $summary = $('#summaryContainer');
    
    // Get data from previous panels
    wizard._wizardContent.forEach(function(panel, index) {
      if (index < wizard._currentPanel) {
        var data = panel.getData();
        data.forEach(function(field) {
          $summary.append(
            '<div><strong>' + field.id + ':</strong> ' + field.value + '</div>'
          );
        });
      }
    });
  }
});

"onRender"

Method triggered after the panel has been rendered

Kind: event emitted
Example

var pn = panel1.onRender(function () { 
          alert('Panel onRender'); 
      });

"onRender"

Method triggered after the panel has been turned hidden

Kind: event emitted
Example

var pn = panel1.onExit(function () { 
          alert('Panel onExit'); 
      });