eLabSDK.GUI.Button

Functions

Name	Description
getConfig()	Get the current configuration options for this button.

This returns the complete configuration object for the button, including all options
that were passed during initialization plus any default values. Use this to inspect
button settings, retrieve the button's properties, or pass configuration to other
components.
render() | Render the button and return it as a jQuery object.

This creates the button's HTML representation and returns it as a jQuery-wrapped DOM
element that can be inserted into the page. The button is styled according to its type
and includes any configured icon and label. Use this to add the button to any location
in the DOM. The returned jQuery object has click handlers already attached.
addCounter(config) | Add a numeric counter badge to the button.

This displays a small red badge with a count value overlaid on the button, typically
used to show notifications, pending items, or unread messages. The counter can display
a static value or dynamically load from a server endpoint. Values over 99 are displayed
as "99+". The counter is positioned in the top-right corner of the button with automatic
styling applied.
appendAfter(target, [maxTries]) | Append the button immediately after a target element in the DOM.

This renders the button and inserts it right after the specified target element. If the
target doesn't exist yet, the function will wait and retry up to maxTries times (checking
every 100ms). This is useful for dynamically adding buttons next to existing page elements
that might be loaded asynchronously. The button will be automatically rendered and inserted
when the target becomes available.
action() | Programmatically trigger the button's action callback.

This executes the action function that was configured for the button during initialization,
just as if the button was clicked by the user. Use this to programmatically trigger button
actions without user interaction, such as in automated workflows, keyboard shortcuts, or
when responding to external events.

getConfig()

Get the current configuration options for this button.

Kind: global function
Returns: Object - The button's configuration object containing all options (type, label, icon, action, etc.)
Example

// Create button and retrieve its configuration
var button = new eLabSDK.GUI.Button({
  label: 'My Button',
  type: 'confirm',
  action: function() { alert('Clicked'); }
});
var config = button.getConfig();
console.log('Button label: ' + config.label);
console.log('Button type: ' + config.type);

Example

// Clone button configuration
var button1 = new eLabSDK.GUI.Button({
  label: 'Original Button',
  type: 'success'
});
var config = button1.getConfig();
var button2 = new eLabSDK.GUI.Button(config);

render()

Render the button and return it as a jQuery object.

Kind: global function
Returns: jQuery - A jQuery object containing the rendered button element
Example

// Create and render a button
var button = new eLabSDK.GUI.Button({
  label: 'Save Changes',
  type: 'confirm',
  action: function() {
    saveData();
  }
});
var $btn = button.render();
$('#toolbar').append($btn);

Example

// Create multiple buttons in a toolbar
var saveBtn = new eLabSDK.GUI.Button({
  label: 'Save',
  icon: 'fa-save',
  type: 'success'
});
var cancelBtn = new eLabSDK.GUI.Button({
  label: 'Cancel',
  type: 'decline'
});

$('#buttonBar')
  .append(saveBtn.render())
  .append(cancelBtn.render());

Example

// Manipulate rendered button
var button = new eLabSDK.GUI.Button({ label: 'Click Me' });
var $btn = button.render();
$btn.css('margin-right', '10px');
$btn.attr('data-test-id', 'my-button');
$('#container').append($btn);

addCounter(config)

Add a numeric counter badge to the button.

Kind: global function

Param	Type	Default	Description
config	`Object`		Configuration object for the counter
[config.cssClass]	`string`	`''className''`	Optional CSS class to apply to the counter for custom styling
[config.value]	`number` \| `string`	`0`	Static counter value to display
[config.source]	`string`	`''''`	Optional API endpoint URL to load counter value from (should return {count: number})

Example

// Add static counter to button
var button = new eLabSDK.GUI.Button({
  label: 'Notifications',
  icon: 'fa-bell'
});
button.addCounter({
  value: 5
});
$('#toolbar').append(button.render());

Example

// Load counter from server
var button = new eLabSDK.GUI.Button({
  label: 'Pending Tasks',
  type: 'warning'
});
button.addCounter({
  source: '/api/v1/tasks/count?status=pending',
  cssClass: 'taskCounter'
});
$('#header').append(button.render());

Example

// Display high count (99+)
var button = new eLabSDK.GUI.Button({
  label: 'Messages',
  icon: 'fa-envelope'
});
button.addCounter({
  value: 150  // Will display as "99+"
});

Example

// Update counter periodically
var button = new eLabSDK.GUI.Button({
  label: 'Alerts'
});
button.addCounter({ value: 0 });
$('#container').append(button.render());

// Refresh counter every 30 seconds
setInterval(function() {
  button.addCounter({
    source: '/api/v1/alerts/count'
  });
}, 30000);

appendAfter(target, [maxTries])

Append the button immediately after a target element in the DOM.

Kind: global function

Param	Type	Default	Description
target	`string` \| `jQuery`		CSS selector or jQuery object identifying the element to insert after
[maxTries]	`number`	`20`	Maximum number of retry attempts if target doesn't exist (default: 20 attempts = 2 seconds)

Example

// Append button after specific element
var button = new eLabSDK.GUI.Button({
  label: 'Extra Action',
  icon: 'fa-star',
  action: function() {
    performExtraAction();
  }
});
button.appendAfter('#existingButton');

Example

// Wait for dynamically loaded element
var button = new eLabSDK.GUI.Button({
  label: 'Custom Export',
  type: 'success'
});
// Will wait up to 5 seconds for toolbar to load
button.appendAfter('#toolbar .export-button', 50);

Example

// Add button after element with limited retries
var button = new eLabSDK.GUI.Button({
  label: 'Quick Action',
  icon: 'fa-bolt'
});
// Will only wait 1 second (10 attempts)
button.appendAfter('#actionBar', 10);

Example

// Add multiple buttons after same element
var button1 = new eLabSDK.GUI.Button({ label: 'Action 1' });
var button2 = new eLabSDK.GUI.Button({ label: 'Action 2' });

button1.appendAfter('#toolbar');
// Button 2 will be added after button 1
button2.appendAfter('#toolbar');

action()

Programmatically trigger the button's action callback.

Kind: global function
Example

// Create button and trigger programmatically
var button = new eLabSDK.GUI.Button({
  label: 'Save',
  action: function() {
    console.log('Saving data...');
    saveData();
  }
});

// Trigger action without clicking
button.action();

Example

// Keyboard shortcut to trigger button
var saveButton = new eLabSDK.GUI.Button({
  label: 'Save',
  action: function() {
    saveDocument();
  }
});
$('#toolbar').append(saveButton.render());

// Ctrl+S triggers save button
$(document).on('keydown', function(e) {
  if (e.ctrlKey && e.key === 's') {
    e.preventDefault();
    saveButton.action();
  }
});

Example

// Auto-trigger after delay
var notificationBtn = new eLabSDK.GUI.Button({
  label: 'Show Notification',
  action: function() {
    alert('Important reminder!');
  }
});

// Trigger after 5 seconds
setTimeout(function() {
  notificationBtn.action();
}, 5000);