eLabSDK2.UI.Navigation

Hierarchy

unknown

↳ Navigation

Methods

addMainMenuAction

Static addMainMenuAction(menuItem): void

Add a custom action button to the main navigation bar.

This adds an action button to the main navigation, typically appearing as a clickable
icon or button in the navigation bar. Action buttons are different from menu items in
that they usually trigger immediate actions rather than navigation. Use this for quick
access to frequently-used features like creating resources, opening global dialogs,
or triggering workflows.

Parameters

Name	Type	Description
`menuItem`	`MenuItemConfiguration`	{ id: string, label: string, action: () => void, isVisible?: () => boolean, icon: string }

Returns

void

Example

// Add quick-create sample action
eLabSDK2.UI.Navigation.addMainMenuAction({
  id: 'quick-create-sample',
  label: 'Create Sample',
  action: () => {
    openCreateSampleDialog();
  },
  isVisible: () => {
    return eLabSDK2.System.User.hasPermissions('inventory', ['CREATE_SAMPLE']);
  },
  icon: 'fas fa-plus-circle'
});

Example

// Add global search action
eLabSDK2.UI.Navigation.addMainMenuAction({
  id: 'global-search',
  label: 'Search',
  action: () => {
    openGlobalSearchModal();
  },
  isVisible: () => true,
  icon: 'fas fa-search'
});

Example

// Add notification center action
eLabSDK2.UI.Navigation.addMainMenuAction({
  id: 'notifications',
  label: 'Notifications',
  action: () => {
    toggleNotificationPanel();
  },
  isVisible: () => true,
  icon: 'fas fa-bell'
});

addMainMenuItem

Static addMainMenuItem(menuItem): void

Add a custom menu item to the main navigation bar.

This adds a new item to the main application navigation menu, typically appearing
in the top navigation bar alongside default menu items like Dashboard, Inventory,
Journal, etc. Menu items can navigate to custom pages, trigger actions, or open
dialogs. Visibility can be controlled conditionally using the isVisible function.

Parameters

Name	Type	Description
`menuItem`	`MenuItemConfiguration`	{ id: string, label: string, action: () => void, isVisible?: () => boolean, icon?: string }

Returns

void

Example

// Add a simple menu item
eLabSDK2.UI.Navigation.addMainMenuItem({
  id: 'custom-reports',
  label: 'Reports',
  action: () => {
    window.location.href = '/custom/reports';
  },
  isVisible: () => true,
  icon: 'fas fa-chart-bar'
});

Example

// Add menu item with conditional visibility
eLabSDK2.UI.Navigation.addMainMenuItem({
  id: 'admin-tools',
  label: 'Admin Tools',
  action: () => {
    openAdminPanel();
  },
  isVisible: () => {
    return eLabSDK2.System.User.hasPermissions('admin', ['MANAGE_SYSTEM']);
  },
  icon: 'fas fa-tools'
});

Example

// Add menu item that opens a dialog
eLabSDK2.UI.Navigation.addMainMenuItem({
  id: 'help-menu',
  label: 'Help',
  action: () => {
    eLabSDK2.UI.Dialog.showDialog({
      title: 'Help',
      content: '<p>Welcome to the help section...</p>',
      buttons: {
        ok: { label: 'Close', id: 'close' }
      }
    });
  },
  isVisible: () => true,
  icon: 'fas fa-question-circle'
});

clearMainMenu

Static clearMainMenu(): void

Remove all default entries from the main navigation menu.

This clears all standard navigation menu items from the main menu, providing a blank
slate for building a completely custom navigation structure. Use this when you want
full control over the navigation menu, typically in white-label implementations or
custom applications built on the eLabNext platform. After clearing, add your custom
menu items using addMainMenuItem().

Warning: This removes all default navigation items including Dashboard, Inventory,
Journal, etc. Users will not be able to access these areas unless you provide
alternative navigation.

Returns

void

Example

// Create completely custom navigation
eLabSDK2.UI.Navigation.clearMainMenu();

// Add custom menu items
eLabSDK2.UI.Navigation.addMainMenuItem({
  id: 'home',
  label: 'Home',
  action: () => window.location.href = '/home',
  isVisible: () => true,
  icon: 'fas fa-home'
});

eLabSDK2.UI.Navigation.addMainMenuItem({
  id: 'my-samples',
  label: 'My Samples',
  action: () => window.location.href = '/samples',
  isVisible: () => true,
  icon: 'fas fa-flask'
});

Example

// Build white-label navigation
// Clear default menu and build custom branded navigation
eLabSDK2.UI.Navigation.clearMainMenu();

const customMenuItems = [
  { id: 'dashboard', label: 'Dashboard', url: '/dashboard', icon: 'fas fa-tachometer-alt' },
  { id: 'inventory', label: 'Inventory', url: '/inventory', icon: 'fas fa-warehouse' },
  { id: 'reports', label: 'Reports', url: '/reports', icon: 'fas fa-chart-line' }
];

customMenuItems.forEach(item => {
  eLabSDK2.UI.Navigation.addMainMenuItem({
    id: item.id,
    label: item.label,
    action: () => window.location.href = item.url,
    isVisible: () => true,
    icon: item.icon
  });
});