eLabSDK2.Marketplace.Addon.InstalledAddonDetail

Hierarchy

unknown

↳ InstalledAddonDetail

Methods

addSection

Static addSection(section): void

Add a custom section to an installed add-on's detail page.

Note: This functionality only works when the add-on is published or released through
the Developer Platform.

This allows you to inject custom HTML content as a section on the add-on detail page
(the page users see when viewing an installed add-on). Use this to display add-on
information, documentation, configuration options, usage statistics, or any custom
content relevant to your add-on. Sections can include any HTML and can be conditionally
shown based on configuration or state.

Parameters

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

Returns

void

Example

// Add usage statistics section
var MyAddon = {};
(function (addonContext) {
  addonContext.init = (config) => {
    eLabSDK2.Marketplace.Addon.InstalledAddonDetail.onAfterPageLoad(
      async () => {
        eLabSDK2.Marketplace.Addon.InstalledAddonDetail.addSection({
          id: 'usage-stats',
          header: 'Usage Statistics',
          contents: '<div id="stats-container"></div>',
          onRendered: () => {
            loadAndDisplayUsageStats();
          }
        });
      },
      'stats-section'
    );
  };
})(MyAddon);

Example

// Add configuration section
eLabSDK2.Marketplace.Addon.InstalledAddonDetail.addSection({
  id: 'config-section',
  header: 'Configuration',
  contents: '<p>API Key: <input type="text" id="api-key" /></p>',
  onRendered: () => {
    document.getElementById('api-key').addEventListener('change', saveApiKey);
  }
});

addTopNotice

Static addTopNotice(notice): void

Add a notification banner to the top of an installed add-on's detail page.

Note: This functionality only works when the add-on is published or released through
the Developer Platform.

This displays an informational, warning, error, or success notice at the top of the
add-on detail page (the page users see when viewing an installed add-on). Use this to
display status messages, configuration requirements, warnings, or other important
information about the add-on to users. The notice visibility can be conditionally
controlled using the isVisible function.

Parameters

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

Returns

void

Example

// Add configuration warning notice
var MyAddon = {};
(function (addonContext) {
  addonContext.init = (config) => {
    eLabSDK2.Marketplace.Addon.InstalledAddonDetail.onAfterPageLoad(
      async () => {
        eLabSDK2.Marketplace.Addon.InstalledAddonDetail.addTopNotice({
          id: 'config-warning',
          style: 'warning',
          title: 'Configuration Required',
          contents: 'Please configure API credentials in settings',
          icon: 'fas fa-exclamation-triangle',
          isVisible: () => !config.apiKeyConfigured
        });
      },
      'config-check'
    );
  };
})(MyAddon);

Example

// Add success notice after update
eLabSDK2.Marketplace.Addon.InstalledAddonDetail.addTopNotice({
  id: 'update-success',
  style: 'success',
  title: 'Updated Successfully',
  contents: 'Add-on has been updated to version 2.0',
  icon: 'fas fa-check-circle',
  isVisible: () => true
});

onAfterPageLoad

Static onAfterPageLoad(callback, id): void

This event fires after the add-on detail page has completed rendering and all initial data
is loaded and displayed. Use this for tasks that require the DOM elements to exist, such as
adding custom sections, displaying notices, attaching event listeners, initializing UI
components, or performing actions based on the loaded add-on configuration.

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

// Initialize add-on features after page loads
var MyAddon = {};
(function (context) {
  context.init = (config) => {
    eLabSDK2.Marketplace.Addon.InstalledAddonDetail.onAfterPageLoad(
      async (detail) => {
        console.log('Add-on detail page loaded:', detail);
        await initializeAddonFeatures();
        displayConfigurationStatus();
      },
      'init-addon'
    );
  };
})(MyAddon);

Example

// Add custom sections after page load
eLabSDK2.Marketplace.Addon.InstalledAddonDetail.onAfterPageLoad(
  () => {
    eLabSDK2.Marketplace.Addon.InstalledAddonDetail.addSection({
      id: 'custom-info',
      header: 'Information',
      contents: '<p>Add-on is active and running</p>'
    });
  },
  'add-sections'
);

Example

// Track page load time
const loadStart = Date.now();
eLabSDK2.Marketplace.Addon.InstalledAddonDetail.onAfterPageLoad(
  () => {
    const loadTime = Date.now() - loadStart;
    trackAnalytics('addon_detail_load_time', loadTime);
  },
  'track-load-time'
);