eLabSDK2.Inventory.StorageLayer.StorageLayerDetail

Hierarchy

StorageLayer

↳ StorageLayerDetail

Methods

addSection

Static addSection(section): void

Add a custom section to the storage layer detail page's overview tab.

This allows you to inject custom HTML content into the storage layer overview tab at a
specified position. Sections can include any HTML content and can be conditionally shown
based on storage layer properties. Use this to display storage layer-specific information,
custom widgets, capacity visualizations, or any additional data relevant to the storage layer.

Parameters

Name	Type	Description
`section`	`CustomSection`	{ id: string, isVisible?: (storageLayerId: number) => boolean, onRendered?: () => void, position?: string, contents: string, header?: { title: string, icon?: string } }

Returns

void

Example

// Add capacity visualization section
eLabSDK2.Inventory.StorageLayer.StorageLayerDetail.addSection({
  id: 'capacity-viz',
  position: 'top',
  header: {
    title: 'Capacity Visualization',
    icon: 'fas fa-chart-pie'
  },
  contents: '<div id="capacity-chart"></div>',
  onRendered: () => {
    const layer = eLabSDK2.Inventory.StorageLayer.StorageLayerDetail.getStorageLayer();
    renderCapacityChart(layer);
  }
});

addTopNotice

Static addTopNotice(notice): void

Add a notification banner to the top of the storage layer detail page.

This displays an informational, warning, error, or success notice at the top of the
storage layer detail page. Notices are useful for alerting users to important information
about the storage layer, such as capacity warnings, maintenance status, temperature alerts,
or custom status messages. The notice visibility can be conditionally controlled based on
storage layer properties.

Parameters

Name	Type	Description
`notice`	`BoxNotice`	{ id: string, type: 'info' \| 'warning' \| 'error' \| 'success', contents: string, icon: string, isVisible?: (storageLayer: StorageLayer) => boolean, title?: string }

Returns

void

Example

// Add capacity warning notice
eLabSDK2.Inventory.StorageLayer.StorageLayerDetail.addTopNotice({
  id: 'capacity-warning',
  type: 'warning',
  title: 'Capacity Warning',
  contents: 'This storage layer is nearly full',
  icon: 'fas fa-exclamation-triangle',
  isVisible: (sl) => {
    const percentFull = (sl.occupiedPositions / sl.capacity) * 100;
    return percentFull > 80;
  }
});

Example

// Add maintenance notice for specific layer
eLabSDK2.Inventory.StorageLayer.StorageLayerDetail.addTopNotice({
  id: 'maintenance-notice',
  type: 'error',
  title: 'Under Maintenance',
  contents: 'This storage layer is currently under maintenance',
  icon: 'fas fa-wrench',
  isVisible: (sl) => sl.storageLayerID === 3
});

getPositionName

Static getPositionName(position): string

Get the human-friendly position name for a given position index in the storage layer.

This converts a numeric position index (1-based) into a human-readable position name
based on the storage layer's dimensions and configuration. For example, position 1 might
be "A1" in a grid layout, or "Position 1" in a linear layout. The naming convention
automatically adjusts based on whether the layer is transposed (rows/columns swapped).
Use this to display user-friendly position identifiers in custom interfaces.

Parameters

Name	Type	Description
`position`	`number`	The numeric position index (1-based) representing a position in the storage layer.

Returns

string

A string representing the human-friendly name of the position (e.g., 'A1', 'B3', 'Position 5').

Example

// Get the human-friendly name of the first position
const posName = eLabSDK2.Inventory.StorageLayer.StorageLayerDetail.getPositionName(1);
console.log(posName); // Output: 'A1' (in a grid layout)

Example

// Display position names for all positions in a storage layer
const layer = eLabSDK2.Inventory.StorageLayer.StorageLayerDetail.getStorageLayer();
for (let i = 1; i <= layer.capacity; i++) {
  const posName = eLabSDK2.Inventory.StorageLayer.StorageLayerDetail.getPositionName(i);
  console.log(`Position ${i}: ${posName}`);
}

Example

// Use in custom UI to label positions
const position = 12;
const posName = eLabSDK2.Inventory.StorageLayer.StorageLayerDetail.getPositionName(position);
document.getElementById(`pos-${position}`).textContent = posName;

getStorageLayer

Static getStorageLayer(): ActiveStorageLayer

Get the complete storage layer object for the currently active (selected) storage layer.

This retrieves the full storage layer object with all its properties including name,
dimensions, capacity, occupied positions, parent storage unit information, and more.
Use this to access detailed storage layer data when building custom functionality in
the storage layer detail page context.

Returns

ActiveStorageLayer

An ActiveStorageLayer object containing all storage layer properties and metadata.

Example

// Access storage layer properties
const layer = eLabSDK2.Inventory.StorageLayer.StorageLayerDetail.getStorageLayer();
console.log(`Name: ${layer.name}`);
console.log(`Capacity: ${layer.capacity}`);
console.log(`Occupied: ${layer.occupiedPositions}`);
console.log(`Dimension: ${layer.dimension}`);

Example

// Calculate capacity utilization
const layer = eLabSDK2.Inventory.StorageLayer.StorageLayerDetail.getStorageLayer();
const utilizationPercent = (layer.occupiedPositions / layer.capacity) * 100;
console.log(`Utilization: ${utilizationPercent.toFixed(1)}%`);

Example

// Use in custom action
eLabSDK2.Inventory.StorageLayer.StorageLayerDetail.registerAction({
  id: 'show-capacity',
  label: 'Show Capacity',
  onClick: () => {
    const layer = eLabSDK2.Inventory.StorageLayer.StorageLayerDetail.getStorageLayer();
    alert(`${layer.occupiedPositions} / ${layer.capacity} positions occupied`);
  }
});

onAfterPageLoad

Static onAfterPageLoad(callback, id): void

This event fires after the page has completed rendering and all initial storage layer data
is loaded and displayed. Use this for tasks that require the DOM elements to exist, such as
manipulating page elements, attaching event listeners, initializing UI components, or
performing actions based on the loaded storage layer data.

Parameters

Name	Type	Description
`callback`	`Function`	Function to execute after the DOM is rendered. Receives detail information as parameter.
`id`	`string`	Unique identifier for this callback registration.

Returns

void

Example

// Add custom visualizations after page loads
eLabSDK2.Inventory.StorageLayer.StorageLayerDetail.onAfterPageLoad((detail) => {
  console.log('Storage layer detail rendered:', detail);
  const layer = eLabSDK2.Inventory.StorageLayer.StorageLayerDetail.getStorageLayer();
  renderCapacityChart(layer);
}, 'render-chart');

Example

// Attach event listeners after render
eLabSDK2.Inventory.StorageLayer.StorageLayerDetail.onAfterPageLoad(() => {
  document.querySelectorAll('.position-cell').forEach(cell => {
    cell.addEventListener('click', handlePositionClick);
  });
}, 'attach-listeners');

Example

// Measure page load time
eLabSDK2.Inventory.StorageLayer.StorageLayerDetail.onAfterPageLoad(() => {
  const loadTime = Date.now() - window.layerLoadStartTime;
  console.log(`Storage layer detail loaded in ${loadTime}ms`);
  trackAnalytics('storage_layer_detail_load_time', loadTime);
}, 'measure-performance');

Overrides

StorageLayer.onAfterPageLoad

onReady

Static onReady(callback, id): void

This event fires after the storage layer detail page has completed loading all data and
rendering the DOM. Use this to perform actions that depend on the storage layer data and
DOM being fully available, such as custom visualizations, data processing, or external
integrations.

Parameters

Name	Type	Description
`callback`	() => `void`	Function to execute when the page is ready.
`id`	`string`	Unique identifier for this callback registration.

Returns

void

Example

// Initialize custom features when storage layer is ready
eLabSDK2.Inventory.StorageLayer.StorageLayerDetail.onReady(() => {
  console.log('Storage layer detail page ready');
  const layer = eLabSDK2.Inventory.StorageLayer.StorageLayerDetail.getStorageLayer();
  renderCustomVisualization(layer);
}, 'init-visualization');

Example

// Load related data after page is ready
eLabSDK2.Inventory.StorageLayer.StorageLayerDetail.onReady(async () => {
  const layerId = eLabSDK2.Inventory.StorageLayer.getActiveStorageLayerID();
  if (layerId) {
    const contents = await fetchStorageLayerContents(layerId);
    displayContents(contents);
  }
}, 'load-contents');

onSectionReady

Static onSectionReady(callback, id): void

This event fires after a custom section added via addSection() has been rendered in the DOM.
Use this to initialize components, attach event listeners, or perform operations specific to
custom sections you've added to the storage layer detail page.

Parameters

Name	Type	Description
`callback`	() => `void`	Function to execute when the section is ready.
`id`	`string`	Unique identifier for this callback registration.

Returns

void

Example

// Initialize custom section after it's rendered
eLabSDK2.Inventory.StorageLayer.StorageLayerDetail.onSectionReady(() => {
  console.log('Custom section rendered');
  initializeCustomSectionComponents();
}, 'init-section');

Example

// Attach event listeners to custom section elements
eLabSDK2.Inventory.StorageLayer.StorageLayerDetail.onSectionReady(() => {
  document.querySelectorAll('.custom-section-button').forEach(btn => {
    btn.addEventListener('click', handleCustomAction);
  });
}, 'attach-section-listeners');

registerAction

Static registerAction(action): void

This adds a custom action button to the storage layer detail page, typically in the actions
toolbar or menu. Actions can be used to perform operations on the storage layer, trigger
custom workflows, or open dialogs. The action visibility can be controlled conditionally,
and you can specify which tabs the action should appear on.

Parameters

Name	Type	Description
`action`	`Action`	{ id: string, label: string, onClick?: (storageLayerId: number) => void, title?: string, icon?: string, isVisible?: (context: { storageLayerId: number, tab: string, originalEvent: Event }) => boolean, showOnTabs?: string \| string[] }

Returns

void

Example

// Register a custom action with context-aware visibility
eLabSDK2.Inventory.StorageLayer.StorageLayerDetail.registerAction({
  id: 'log-layer-id',
  label: 'Log Layer ID',
  onClick: (storageLayerId) => {
    console.log(`Storage Layer ID: ${storageLayerId}`);
  },
  icon: 'fas fa-info-circle',
  isVisible: (context) => {
    console.log(`Layer ID: ${context.storageLayerId}, Tab: ${context.tab}`);
    return true;
  }
});

Example

// Add export action visible only on specific tab
eLabSDK2.Inventory.StorageLayer.StorageLayerDetail.registerAction({
  id: 'export-layer',
  label: 'Export Contents',
  title: 'Export all samples in this storage layer',
  icon: 'fas fa-file-export',
  onClick: async (layerId) => {
    const contents = await fetchStorageLayerContents(layerId);
    exportToCSV(contents);
  },
  isVisible: (context) => {
    // Only show on overview tab for layers with ID > 100
    return context.tab === 'overview' && context.storageLayerId > 100;
  }
});

registerBulkAction

Static registerBulkAction(action): void

This adds a custom bulk action button that appears when one or more storage layers are
selected in the inventory browser. Bulk actions allow you to perform operations on multiple
storage layers at once, such as updating properties, moving contents, or generating reports.
The action visibility can be controlled using conditional logic.

Parameters

Name	Type	Description
`action`	`Action`	{ id: string, label: string, onClick?: () => void, title?: string, icon?: string, isVisible?: boolean \| ((...args: unknown[]) => boolean) }

Returns

void

Example

// Add bulk export action for selected storage layers
eLabSDK2.Inventory.StorageLayer.StorageLayerDetail.registerBulkAction({
  id: 'bulk-export-layers',
  label: 'Export Selected',
  icon: 'fas fa-file-export',
  onClick: () => {
    const selectedIds = eLabSDK2.Inventory.StorageLayer.getSelectedStorageLayers();
    exportMultipleStorageLayers(selectedIds);
  },
  isVisible: () => {
    return eLabSDK2.Inventory.StorageLayer.getSelectedStorageLayers().length > 0;
  }
});

Example

// Add bulk status update action
eLabSDK2.Inventory.StorageLayer.StorageLayerDetail.registerBulkAction({
  id: 'mark-maintenance',
  label: 'Mark as Maintenance',
  icon: 'fas fa-wrench',
  onClick: async () => {
    const selectedIds = eLabSDK2.Inventory.StorageLayer.getSelectedStorageLayers();
    await updateStorageLayerStatus(selectedIds, 'MAINTENANCE');
    eLabSDK2.UI.Toast.showToast(`${selectedIds.length} layers marked for maintenance`, 2000);
  }
});