eLabSDK2.Inventory.StorageUnit.StorageUnitDetail

Hierarchy

StorageUnit

↳ StorageUnitDetail

Methods

addSection

Static addSection(section): void

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

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

Parameters

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

Returns

void

Example

// Add temperature monitoring section
eLabSDK2.Inventory.StorageUnit.StorageUnitDetail.addSection({
  id: 'temperature-monitor',
  position: 'top',
  header: {
    title: 'Temperature Monitoring',
    icon: 'fas fa-thermometer-half'
  },
  contents: '<div id="temp-chart"></div>',
  isVisible: (unitId) => unitId > 0,
  onRendered: () => {
    const unit = eLabSDK2.Inventory.StorageUnit.StorageUnitDetail.getStorageUnitDetail();
    renderTemperatureChart(unit);
  }
});

Example

// Add capacity visualization section
eLabSDK2.Inventory.StorageUnit.StorageUnitDetail.addSection({
  id: 'capacity-viz',
  position: 'bottom',
  header: {
    title: 'Capacity Overview'
  },
  contents: '<div class="capacity-widget"></div>',
  onRendered: () => {
    const unit = eLabSDK2.Inventory.StorageUnit.StorageUnitDetail.getStorageUnitDetail();
    displayCapacityWidget(unit);
  }
});

addTab

Static addTab(tab): void

Add a custom tab to the storage unit detail page.

This creates a new tab in the storage unit detail page that can display custom content.
Tabs can show custom HTML, dynamic content via functions, or pre-formatted tables using
the SDK's table configuration. This is useful for displaying storage unit-specific data,
temperature logs, maintenance records, or any functionality that warrants its own dedicated view.

Parameters

Name	Type	Description
`tab`	`CustomSection`	{ id: string, title: string, type: 'table' \| 'custom', content: string \| (() => string) \| SDKTableConfig, isVisible?: (storageUnitId: number) => boolean, isLoading?: (storageUnitId: number) => boolean, onRendered?: () => void }

Returns

void

Example

// Add custom HTML tab
eLabSDK2.Inventory.StorageUnit.StorageUnitDetail.addTab({
  id: 'temperature-logs',
  title: 'Temperature History',
  type: 'custom',
  content: '<div id="temp-chart"></div>',
  onRendered: async () => {
    const unitId = eLabSDK2.Inventory.StorageUnit.StorageUnitDetail.getStorageUnitID();
    const tempData = await fetchTemperatureLogs(unitId);
    renderTemperatureChart(tempData);
  }
});

Example

// Add table tab with paging
eLabSDK2.Inventory.StorageUnit.StorageUnitDetail.addTab({
  id: 'maintenance-records',
  title: 'Maintenance Records',
  type: 'table',
  content: {
    columns: ['Date', 'Type', 'Technician', 'Status'],
    data: [],
    paging: {
      showPager: true,
      currentPage: 1,
      recordCount: 10,
      totalCount: 50,
      handlePage: async (recordsPerPage, currentPage) => {
        const unitId = eLabSDK2.Inventory.StorageUnit.StorageUnitDetail.getStorageUnitID();
        const records = await fetchMaintenanceRecords(unitId, currentPage, recordsPerPage);
        updateTableData(records);
      }
    }
  }
});

addTopNotice

Static addTopNotice(notice): void

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

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

Parameters

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

Returns

void

Example

// Add capacity warning notice
eLabSDK2.Inventory.StorageUnit.StorageUnitDetail.addTopNotice({
  id: 'capacity-warning',
  type: 'warning',
  title: 'Capacity Warning',
  contents: 'This storage unit is nearly full',
  icon: 'fas fa-exclamation-triangle',
  isVisible: (su) => {
    const percentFull = (su.occupiedCapacity / su.totalCapacity) * 100;
    return percentFull > 85;
  }
});

Example

// Add maintenance notice for specific unit
eLabSDK2.Inventory.StorageUnit.StorageUnitDetail.addTopNotice({
  id: 'maintenance-alert',
  type: 'error',
  title: 'Maintenance Required',
  contents: 'This storage unit requires immediate maintenance',
  icon: 'fas fa-wrench',
  isVisible: (su) => su.storageLayerID === 3
});

getStorageUnitDetail

Static getStorageUnitDetail(): StorageDetailStoreInterface

Get the complete details of the currently selected storage unit in the detail view.

This retrieves the full state object for the storage unit currently loaded in the storage
unit detail page, including the storage unit object itself, related data like storage layers,
and UI state information. Use this to access comprehensive storage unit information when
building custom features or integrations in the storage unit detail context.

Returns

StorageDetailStoreInterface

A StorageDetailStoreInterface object containing the storage unit object and related entities.

Example

// Get current storage unit details
const details = eLabSDK2.Inventory.StorageUnit.StorageUnitDetail.getStorageUnitDetail();
console.log(`Storage Unit: ${details.storageDetail?.name}`);
console.log(`Type: ${details.storageDetail?.storageType}`);

Example

// Access storage unit properties
const details = eLabSDK2.Inventory.StorageUnit.StorageUnitDetail.getStorageUnitDetail();
if (details.storageDetail) {
  console.log(`Location: ${details.storageDetail.building}, ${details.storageDetail.room}`);
  console.log(`Barcode: ${details.storageDetail.barcode}`);
}

getStorageUnitID

Static getStorageUnitID(): number

Get the storage unit ID of the currently displayed storage unit in the detail view.

This is a convenience method to quickly retrieve just the storage unit ID without
accessing the full storage unit detail object. Returns null if no storage unit is
currently loaded in the detail view. Use this for API calls, tracking, or conditional
logic that needs to know which storage unit is being viewed.

Returns

number

The numeric storage unit ID of the currently displayed storage unit, or null if no storage unit is loaded.

Example

// Get current storage unit ID
const unitId = eLabSDK2.Inventory.StorageUnit.StorageUnitDetail.getStorageUnitID();
if (unitId) {
  console.log(`Viewing storage unit ID: ${unitId}`);
} else {
  console.log('No storage unit currently loaded');
}

Example

// Use in API call
const unitId = eLabSDK2.Inventory.StorageUnit.StorageUnitDetail.getStorageUnitID();
if (unitId) {
  const history = await fetchStorageUnitHistory(unitId);
  displayHistory(history);
}

Example

// Track which storage unit user is viewing
const unitId = eLabSDK2.Inventory.StorageUnit.StorageUnitDetail.getStorageUnitID();
if (unitId) {
  trackAnalytics('storage_unit_viewed', { unitId: unitId });
}

onAfterPageLoad

Static onAfterPageLoad(callback, id): void

This event fires after the page has completed rendering and all initial storage unit 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 unit 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.StorageUnit.StorageUnitDetail.onAfterPageLoad((detail) => {
  console.log('Storage unit detail rendered:', detail);
  const unit = eLabSDK2.Inventory.StorageUnit.StorageUnitDetail.getStorageUnitDetail();
  renderStorageCapacityChart(unit);
}, 'render-chart');

Example

// Attach event listeners after render
eLabSDK2.Inventory.StorageUnit.StorageUnitDetail.onAfterPageLoad(() => {
  document.querySelectorAll('.storage-layer-tile').forEach(tile => {
    tile.addEventListener('click', handleLayerClick);
  });
}, 'attach-listeners');

Example

// Measure page load time
eLabSDK2.Inventory.StorageUnit.StorageUnitDetail.onAfterPageLoad(() => {
  const loadTime = Date.now() - window.unitLoadStartTime;
  console.log(`Storage unit detail loaded in ${loadTime}ms`);
  trackAnalytics('storage_unit_detail_load_time', loadTime);
}, 'measure-performance');

Overrides

StorageUnit.onAfterPageLoad

onReady

Static onReady(callback, id): void

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

Parameters

Name	Type	Description
`callback`	(`event`: `CustomEvent`<`number`>) => `void`	Function to execute when the page is ready. Receives a CustomEvent with the storage unit ID as detail.
`id`	`string`	Unique identifier for this callback registration.

Returns

void

Example

// Initialize custom features when storage unit is ready
eLabSDK2.Inventory.StorageUnit.StorageUnitDetail.onReady((event) => {
  const storageUnitId = event.detail;
  console.log(`Storage unit ${storageUnitId} ready`);
  const details = eLabSDK2.Inventory.StorageUnit.StorageUnitDetail.getStorageUnitDetail();
  renderStorageVisualization(details);
}, 'init-visualization');

Example

// Load related data after page is ready
eLabSDK2.Inventory.StorageUnit.StorageUnitDetail.onReady(async (event) => {
  const storageUnitId = event.detail;
  const contents = await fetchStorageUnitContents(storageUnitId);
  displayContentsSummary(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 unit detail page.

Parameters

Name	Type	Description
`callback`	(`event`: `Event`) => `void`	Function to execute when the section is ready. Receives an Event object as parameter.
`id`	`string`	Unique identifier for this callback registration.

Returns

void

Example

// Initialize custom section after it's rendered
eLabSDK2.Inventory.StorageUnit.StorageUnitDetail.onSectionReady((event) => {
  console.log('Custom section rendered');
  initializeCustomComponents();
}, 'init-section');

Example

// Attach event listeners to custom section elements
eLabSDK2.Inventory.StorageUnit.StorageUnitDetail.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 unit detail page, typically in the actions
toolbar or menu. Actions can be used to perform operations on the storage unit, trigger
custom workflows, open dialogs, or integrate with external systems. The action visibility
can be controlled conditionally based on storage unit properties.

Parameters

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

Returns

void

Example

// Add export action for storage unit
eLabSDK2.Inventory.StorageUnit.StorageUnitDetail.registerAction({
  id: 'export-unit',
  label: 'Export Contents',
  icon: 'fas fa-file-export',
  onClick: async () => {
    const unitId = eLabSDK2.Inventory.StorageUnit.StorageUnitDetail.getStorageUnitID();
    const contents = await fetchStorageUnitContents(unitId);
    exportToCSV(contents);
  },
  isVisible: (context) => {
    console.log(`Unit ID: ${context.storageUnitId}, Tab: ${context.tab}`);
    return true;
  }
});

Example

// Add conditional maintenance action visible only on specific tab
eLabSDK2.Inventory.StorageUnit.StorageUnitDetail.registerAction({
  id: 'schedule-maintenance',
  label: 'Schedule Maintenance',
  icon: 'fas fa-wrench',
  onClick: () => {
    openMaintenanceScheduler();
  },
  isVisible: (context) => {
    // Only show on overview tab for units with ID > 50
    return context.tab === 'overview' && context.storageUnitId > 50;
  }
});

updateCustomList

Static updateCustomList(): void

Trigger an update for custom lists displayed in storage unit detail tabs.

This dispatches a global event that triggers the handlePage callback in custom tab
configurations. Use this when you've added a custom table tab (type: 'table') and need
to refresh its data without completely reloading the tab. The event causes the tab's
pagination handler to be called, allowing you to fetch and display updated data.

Returns

void

Example

// Refresh custom table after data change
eLabSDK2.Inventory.StorageUnit.StorageUnitDetail.addTab({
  id: 'maintenance-log',
  title: 'Maintenance Log',
  type: 'table',
  content: {
    columns: ['Date', 'Type', 'Technician'],
    data: [],
    paging: {
      showPager: true,
      currentPage: 1,
      recordCount: 10,
      totalCount: 50,
      handlePage: async (recordsPerPage, currentPage) => {
        const unitId = eLabSDK2.Inventory.StorageUnit.StorageUnitDetail.getStorageUnitID();
        const records = await fetchMaintenanceRecords(unitId, currentPage, recordsPerPage);
        updateTableData(records);
      }
    }
  }
});

// Trigger update after adding maintenance record
async function addMaintenanceRecord(unitId, record) {
  await api.addMaintenanceRecord(unitId, record);
  eLabSDK2.Inventory.StorageUnit.StorageUnitDetail.updateCustomList();
}

Example

// Use in custom action
eLabSDK2.Inventory.StorageUnit.StorageUnitDetail.registerAction({
  id: 'refresh-tables',
  label: 'Refresh Data',
  onClick: () => {
    eLabSDK2.Inventory.StorageUnit.StorageUnitDetail.updateCustomList();
    eLabSDK2.UI.Toast.showToast('Tables refreshed', 2000);
  }
});