eLabSDK2.Inventory.Equipment.EquipmentDetail

Hierarchy

Equipment

↳ EquipmentDetail

Methods

addSection

Static addSection(section): void

Add a custom section to an equipment detail page's overview tab.

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

Parameters

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

Returns

void

Example

// Add usage statistics section
eLabSDK2.Inventory.Equipment.EquipmentDetail.addSection({
  id: 'usage-stats',
  position: 'bottom',
  header: {
    title: 'Usage Statistics',
    icon: 'fas fa-chart-line'
  },
  contents: '<div id="usage-chart"></div>',
  isVisible: (equipmentId) => equipmentId > 0,
  onRendered: () => {
    // Initialize chart after section is rendered
    renderUsageChart(document.getElementById('usage-chart'));
  }
});

Example

// Add maintenance history section
eLabSDK2.Inventory.Equipment.EquipmentDetail.addSection({
  id: 'maintenance-history',
  position: 'top',
  header: {
    title: 'Recent Maintenance',
    icon: 'fas fa-tools'
  },
  contents: `
    <ul class="maintenance-list">
      <li>Calibration: 2024-10-15</li>
      <li>Cleaning: 2024-11-01</li>
    </ul>
  `,
  isVisible: (equipmentId) => true
});

addTab

Static addTab(tab): void

Add a custom tab to the equipment detail page.

This creates a new tab in the equipment 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 equipment-specific
data, reports, or functionality that doesn't fit in the existing tabs.

Parameters

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

Returns

void

Example

// Add custom HTML tab
eLabSDK2.Inventory.Equipment.EquipmentDetail.addTab({
  id: 'maintenance-log',
  title: 'Maintenance Log',
  type: 'custom',
  content: '<div id="maintenance-log-container">Loading...</div>',
  onRendered: async () => {
    const container = document.getElementById('maintenance-log-container');
    const log = await fetchMaintenanceLog();
    container.innerHTML = renderMaintenanceLog(log);
  },
  isVisible: (equipmentId) => equipmentId > 0
});

Example

// Add tab with table layout
eLabSDK2.Inventory.Equipment.EquipmentDetail.addTab({
  id: 'usage-history',
  title: 'Usage History',
  type: 'table',
  content: {
    columns: ['Date', 'User', 'Duration', 'Purpose'],
    data: [
      ['2024-11-01', 'John Doe', '2 hours', 'Research'],
      ['2024-11-02', 'Jane Smith', '1.5 hours', 'Quality Control']
    ],
    paging: {
      showPager: true,
      currentPage: 1,
      recordCount: 20,
      totalCount: 50,
      handlePage: (page, recordsPerPage) => {
        loadUsageHistory(page, recordsPerPage);
      }
    }
  },
  isVisible: (equipmentId) => true
});

Example

// Add tab with dynamic function content
eLabSDK2.Inventory.Equipment.EquipmentDetail.addTab({
  id: 'calibration-status',
  title: 'Calibration Status',
  type: 'custom',
  content: (equipmentId) => {
    const status = getCalibrationStatus(equipmentId);
    return `
      <div class="calibration-status">
        <h3>Last Calibration: ${status.lastDate}</h3>
        <p>Next Due: ${status.nextDue}</p>
        <p>Status: ${status.current}</p>
      </div>
    `;
  },
  isVisible: (equipmentId) => hasCalibrationTracking(equipmentId),
  isLoading: (equipmentId) => !isDataLoaded(equipmentId)
});

addTopNotice

Static addTopNotice(notice): void

Add a notification banner to the top of an equipment detail page.

This displays an informational, warning, error, or success notice at the top of the
equipment detail page. Notices are useful for alerting users to important information
about the equipment, such as maintenance status, calibration warnings, or operational
alerts. The notice visibility can be conditionally controlled using the isVisible function.

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 calibration warning for equipment based on storage layer
eLabSDK2.Inventory.Equipment.EquipmentDetail.addTopNotice({
  id: 'calibration-due',
  type: 'warning',
  title: 'Calibration Due',
  contents: 'This equipment requires calibration. Please schedule maintenance.',
  icon: 'fas fa-wrench',
  isVisible: (storageLayer) => {
    // Check if storage layer has maintenance flag
    return storageLayer.needsMaintenance === true;
  }
});

Example

// Add error notice for unavailable equipment
eLabSDK2.Inventory.Equipment.EquipmentDetail.addTopNotice({
  id: 'out-of-service',
  type: 'error',
  title: 'Out of Service',
  contents: 'This equipment is currently unavailable for use.',
  icon: 'fas fa-ban',
  isVisible: (storageLayer) => storageLayer.status === 'INACTIVE'
});

Example

// Add success notice for recently maintained equipment
eLabSDK2.Inventory.Equipment.EquipmentDetail.addTopNotice({
  id: 'recently-calibrated',
  type: 'success',
  title: 'Recently Calibrated',
  contents: 'This equipment was calibrated on ' + new Date().toLocaleDateString(),
  icon: 'fas fa-check-circle',
  isVisible: (storageLayer) => {
    return storageLayer.lastMaintenanceDate &&
           (Date.now() - new Date(storageLayer.lastMaintenanceDate).getTime()) < 7 * 24 * 60 * 60 * 1000;
  }
});

onAfterPageLoad

Static onAfterPageLoad(callback, id): void

This event fires after the page has completed rendering the DOM and all initial elements are
visible. Use this for tasks that require the DOM to exist, such as manipulating page elements,
attaching event listeners, or initializing UI components. This is similar to onReady() but may
fire at a slightly different point in the lifecycle.

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

// Modify DOM elements after page loads
eLabSDK2.Inventory.Equipment.EquipmentDetail.onAfterPageLoad((detail) => {
  console.log('Equipment detail page rendered:', detail);
  const container = document.querySelector('.equipment-detail');
  if (container) {
    container.classList.add('custom-styling');
  }
}, 'modify-dom-elements');

Example

// Attach event listeners after render
eLabSDK2.Inventory.Equipment.EquipmentDetail.onAfterPageLoad(() => {
  document.querySelectorAll('.equipment-action-btn').forEach(btn => {
    btn.addEventListener('click', handleEquipmentAction);
  });
}, 'attach-event-listeners');

Example

// Initialize third-party UI components
eLabSDK2.Inventory.Equipment.EquipmentDetail.onAfterPageLoad(() => {
  // Initialize tooltips
  const tooltips = document.querySelectorAll('[data-tooltip]');
  tooltips.forEach(el => initializeTooltip(el));

  // Initialize date pickers
  $('.date-picker').datepicker();
}, 'init-ui-components');

Overrides

Equipment.onAfterPageLoad

onBeforePageLoad

Static onBeforePageLoad(callback, id): void

This event fires at the very beginning of the page load process, before any data is fetched
or the DOM is rendered. Use this for early initialization tasks such as setting up global
state, preparing data structures, or modifying the page loading behavior. This is the earliest
hook available in the equipment detail page lifecycle.

Parameters

Name	Type	Description
`callback`	`Function`	Function to execute before page load begins. Receives detail information as parameter.
`id`	`string`	Unique identifier for this callback registration.

Returns

void

Example

// Initialize global state before page loads
eLabSDK2.Inventory.Equipment.EquipmentDetail.onBeforePageLoad((detail) => {
  console.log('Equipment detail page loading:', detail);
  initializeGlobalEquipmentState();
}, 'init-global-state');

Example

// Set up tracking before page loads
eLabSDK2.Inventory.Equipment.EquipmentDetail.onBeforePageLoad(() => {
  trackPageView('equipment-detail');
  startLoadTimeTimer();
}, 'analytics-tracking');

Example

// Prepare data structures
eLabSDK2.Inventory.Equipment.EquipmentDetail.onBeforePageLoad(() => {
  // Clear any cached data from previous equipment
  clearEquipmentCache();
  // Prepare data structures for new equipment
  initializeDataStructures();
}, 'prepare-data-structures');

Overrides

Equipment.onBeforePageLoad

onReady

Static onReady(callback, id): void

This event fires after the equipment detail page has completed loading all data and rendering
the DOM. Use this to perform actions that depend on the equipment data being fully available,
such as adding custom UI elements, modifying the page, or triggering additional data fetches.
The callback receives the equipment ID as the detail property of the event parameter.

Parameters

Name	Type	Description
`callback`	(`e`: `CustomEvent`<`number`>) => `void`	Function to execute when the page is ready. Receives a CustomEvent with the equipment ID as detail.
`id`	`string`	Unique identifier for this callback registration. Used to prevent duplicate registrations and allow cleanup.

Returns

void

Example

// Log when equipment detail page is ready
eLabSDK2.Inventory.Equipment.EquipmentDetail.onReady((event) => {
  const equipmentId = event.detail;
  console.log(`Equipment ${equipmentId} detail page is ready`);
}, 'equipment-ready-logger');

Example

// Fetch additional data when page is ready
eLabSDK2.Inventory.Equipment.EquipmentDetail.onReady(async (event) => {
  const equipmentId = event.detail;
  const calibrationHistory = await fetchCalibrationHistory(equipmentId);
  displayCalibrationInfo(calibrationHistory);
}, 'fetch-calibration-data');

Example

// Add custom elements after page loads
eLabSDK2.Inventory.Equipment.EquipmentDetail.onReady((event) => {
  const container = document.querySelector('.equipment-detail');
  const statusBadge = document.createElement('div');
  statusBadge.className = 'custom-status-badge';
  statusBadge.textContent = 'Operational';
  container?.appendChild(statusBadge);
}, 'add-status-badge');

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 perform initialization tasks that require the section's DOM elements to exist,
such as attaching event listeners, initializing third-party libraries, or populating dynamic content.

Parameters

Name	Type	Description
`callback`	`VoidCallback`	Function to execute when the section is ready.
`id`	`string`	Unique identifier for this callback registration.

Returns

void

Example

// Initialize a chart after section is ready
eLabSDK2.Inventory.Equipment.EquipmentDetail.onSectionReady(() => {
  const chartContainer = document.getElementById('usage-chart');
  if (chartContainer) {
    initializeChart(chartContainer, equipmentData);
  }
}, 'init-usage-chart');

Example

// Attach event listeners to section elements
eLabSDK2.Inventory.Equipment.EquipmentDetail.onSectionReady(() => {
  document.querySelectorAll('.maintenance-item').forEach(item => {
    item.addEventListener('click', showMaintenanceDetails);
  });
}, 'attach-maintenance-listeners');

registerAction

Static registerAction(action): void

This adds a custom action button to the equipment detail page, typically in the actions
toolbar or menu. Actions can be used to trigger custom operations, open dialogs, or
perform equipment-specific tasks. The action visibility can be controlled conditionally.

Parameters

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

Returns

void

Example

// Add calibration action button
eLabSDK2.Inventory.Equipment.EquipmentDetail.registerAction({
  id: 'schedule-calibration',
  label: 'Schedule Calibration',
  icon: 'fas fa-calendar-check',
  onClick: () => {
    openCalibrationScheduler();
  },
  isVisible: (context) => {
    console.log(`Equipment ID: ${context.equipmentId}, Tab: ${context.tab}`);
    return true;
  }
});

Example

// Add conditional export action visible only on specific tab
eLabSDK2.Inventory.Equipment.EquipmentDetail.registerAction({
  id: 'export-usage-data',
  label: 'Export Usage Data',
  icon: 'fas fa-download',
  onClick: async () => {
    const equipmentId = eLabSDK2.Inventory.Equipment.EquipmentDetail.getEquipmentID();
    const data = await fetchUsageData(equipmentId);
    exportToCSV(data);
  },
  isVisible: (context) => {
    // Only show on overview tab for equipment with ID > 100
    return context.tab === 'overview' && context.equipmentId > 100;
  }
});

updateCustomList

Static updateCustomList(): void

Trigger an update of all custom lists in the equipment detail page.

This dispatches an event that causes all custom tables and lists added via addTab() with
type 'table' to refresh their data by calling their handlePage functions. Use this after
performing operations that modify the data displayed in custom lists, such as adding,
editing, or deleting records.

Returns

void

Example

// Refresh lists after adding a maintenance record
async function addMaintenanceRecord(record) {
  await api.createMaintenanceRecord(record);
  // Trigger refresh of all custom lists
  eLabSDK2.Inventory.Equipment.EquipmentDetail.updateCustomList();
}

Example

// Refresh lists after bulk operation
eLabSDK2.Inventory.Equipment.EquipmentDetail.registerAction({
  id: 'bulk-update',
  label: 'Bulk Update',
  onClick: async () => {
    await performBulkUpdate();
    // Refresh all lists to show updated data
    eLabSDK2.Inventory.Equipment.EquipmentDetail.updateCustomList();
    eLabSDK2.UI.Toast.showToast('Lists updated successfully', 3000);
  }
});