Guides
Support

eLabSDK2.Inventory.StorageUnit.StorageUnitDetail

Hierarchy

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

NameTypeDescription
sectionCustomSectionInput{id: string, isVisible?: (storageUnitId: number) => boolean, isLoading?: (storageUnitId: number) => boolean, onRendered?: () => void, position?: string, contents: string, header?: { contents: string, style?: string }}

Returns

void

Example

// Add temperature monitoring section
eLabSDK2.Inventory.StorageUnit.StorageUnitDetail.addSection({
  id: 'temperature-monitor',
  position: 'top',
  header: {
    contents: 'Temperature Monitoring'
  },
  contents: '<div id="temp-chart"></div>',
  isVisible: (unitId) => unitId > 0,
  isLoading: () => !dataReady,
  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: {
    contents: '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.

When type is 'table', content is an SDKTableConfig:

  • columns — an array of column objects, not strings. name is the key read from each row
    object and the header label fallback; displayName is the header label when set. A column with
    type: 'html' renders contents(row) as HTML instead of the plain row[name] value. That string is
    inserted unsanitized, so build it from static markup and never interpolate a record, user or API value
    into it — return a value through a plain column instead.
  • data — an array of row objects keyed by the column names.
  • empty — { iconClassName, text }, shown when data is empty. Always supply it: text is read
    unconditionally on the empty-state path, so omitting it breaks the tab as soon as a page is empty.
  • paging — { showPager, currentPage, recordCount, totalRecords, handlePage }. currentPage is
    zero-based, recordCount is the page size, and totalRecords (not totalCount) drives the pager.
    handlePage receives a single object, { page, records }, with page zero-based. records
    arrives as a string after a page-size change, so coerce it before doing arithmetic on it.

Re-supply the tab as a new object to refresh it — addTab({ ...tab, content: { ...tab.content } }).
Re-adding the same object reference does not re-render: the store replaces the array element with an
identical reference, so Vue sees no change. Set reloadOnTabChange: true to have handlePage called
with the current { page, records } when the tab is opened, which is what loads its first page.

Parameters

NameTypeDescription
tabCustomTab{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
const maintenanceTab = {
  id: 'maintenance-records',
  title: 'Maintenance Records',
  type: 'table',
  content: {
    columns: [
      { name: 'date', displayName: 'Date' },
      { name: 'type', displayName: 'Type' },
      { name: 'technician', displayName: 'Technician' },
      {
        name: 'status',
        displayName: 'Status',
        type: 'html',
        contents: (row) =>
          row.status === 'passed'
            ? '<span style="color: var(--hx-fg-success)">Passed</span>'
            : '<span style="color: var(--hx-fg-error)">Failed</span>'
      }
    ],
    data: [
      { date: '2024-11-01', type: 'Calibration', technician: 'John Doe', status: 'passed' }
    ],
    empty: { iconClassName: 'fa-wrench', text: 'No maintenance records for this unit' },
    paging: {
      showPager: true,
      currentPage: 0,
      recordCount: 10,
      totalRecords: 50,
      handlePage: async ({ page, records }) => {
        const unitId = eLabSDK2.Inventory.StorageUnit.StorageUnitDetail.getStorageUnitID();
        const result = await fetchMaintenanceRecords(unitId, page, records);
        maintenanceTab.content.data = result.data;
        maintenanceTab.content.paging.currentPage = page;
        maintenanceTab.content.paging.totalRecords = result.totalRecords;
        eLabSDK2.Inventory.StorageUnit.StorageUnitDetail.addTab({
          ...maintenanceTab,
          content: { ...maintenanceTab.content }
        });
      }
    }
  }
};
eLabSDK2.Inventory.StorageUnit.StorageUnitDetail.addTab(maintenanceTab);

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

NameTypeDescription
noticeBoxNotice{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

Register a callback to execute after the storage unit detail page DOM has been fully rendered.

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

NameTypeDescription
callbackFunctionFunction to execute after the DOM is rendered. Receives detail information as parameter.
idstringUnique 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

Register a callback to execute when the storage unit detail page is fully loaded and ready.

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

NameTypeDescription
callback(event: CustomEvent<number>) => voidFunction to execute when the page is ready. Receives a CustomEvent with the storage unit ID as detail.
idstringUnique 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

Register a callback to execute when a custom section in the storage unit detail page is ready.

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

NameTypeDescription
callback(event: Event) => voidFunction to execute when the section is ready. Receives an Event object as parameter.
idstringUnique 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

Register a custom action button in the storage unit detail page.

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

NameTypeDescription
actionAction{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 tab's handlePage is re-invoked
with { page, records } taken from its current paging, so the page in view is re-fetched.

Returns

void

Example

// Refresh custom table after data change
const logTab = {
  id: 'maintenance-log',
  title: 'Maintenance Log',
  type: 'table',
  reloadOnTabChange: true,
  content: {
    columns: [
      { name: 'date', displayName: 'Date' },
      { name: 'type', displayName: 'Type' },
      { name: 'technician', displayName: 'Technician' }
    ],
    data: [],
    empty: { iconClassName: 'fa-wrench', text: 'No maintenance records for this unit' },
    paging: {
      showPager: true,
      currentPage: 0,
      recordCount: 10,
      totalRecords: 50,
      handlePage: async ({ page, records }) => {
        const unitId = eLabSDK2.Inventory.StorageUnit.StorageUnitDetail.getStorageUnitID();
        const result = await fetchMaintenanceRecords(unitId, page, records);
        logTab.content.data = result.data;
        logTab.content.paging.currentPage = page;
        logTab.content.paging.totalRecords = result.totalRecords;
        eLabSDK2.Inventory.StorageUnit.StorageUnitDetail.addTab({
          ...logTab,
          content: { ...logTab.content }
        });
      }
    }
  }
};
eLabSDK2.Inventory.StorageUnit.StorageUnitDetail.addTab(logTab);

// 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);
  }
});

© 2026 eLabNext

Updated 2 days ago

Did this page help you?