This article was originally published by eLabNext prior to its integration into SciSure. SciSure was formed in 2025 through the merger of eLabNext and SciShield.
AOByte recently started a new partnership with eLabNext, an all-in-one lab management software. eLabNext solutions help to improve the quality of the research by providing all-around tools for any lab. Due to its rapid expansion, eLabNext has decided to release an SDK, allowing developers to create new add-ons that other users can install on the eLabNext dashboard. Add-ons allow users to integrate 3rd party software into dashboards, software such as Dropbox, Google Drive, etc. Add-ons also enable users to add functionality to their dashboard without waiting for their desired functionality to be released by eLabNext.
Our company is proud to accompany eLabNext on its journey. Seeing a growing demand, we’ve decided to share part of our journey of creating custom add-ons. This article is a good place to start if you’re interested in eLabNext add-on development.
Starting Add-on Development
To start add-on development, you must first turn on Developer mode from settings. Navigate to Account Settings > Developer. Developer mode is turned on by simply toggling the switch. In turned-on Developer mode, the SDK will attempt to inject an add-on JavaScript file from the “Add-on script URL” on the page load. A single JavaScript file will be loaded at runtime on page load each time you browse the eLabNext dashboard.
Use the Download Template from the Developer settings page to create an empty add-on. This is a working sample add-on, which can be fed to the SDK via an HTTP server of your choice. Our team is using a NodeJS-based http-server for development purposes. The add-on below achieves a simple task of displaying the tasks table in the dashboard. It also allows users to create and delete tasks.
/*
@rootVar: SAMPLE_ADDON
@name: Sample
@description: Sample addon
@author: Stepan Smbatyan
@version: 1.0.0
*/
var SAMPLE_ADDON = {};
((context) => {
context.init = (config) => {
$(() => {
context.SampleAddon = new context.SampleAddon(config);
});
};
context.SampleAddon = new Class({
Implements: [Options, Events],
Extends: eLabSDK.Base,
options: {},
initialize: function (config) {
// Store a reference to the function's context
var self = this;
// Set the options for the application using the provided configuration
self.setOptions(config);
$(document).ready(() => {
const currentPage = Helper.History.get('pageID');
const pageID = currentPage || new URLSearchParams(window.location.search).get('pageID');
renderTaskPage();
if (pageID === 'tasks') {
getTasks().then(({ data }) => {
renderTaskTable(data);
addDeleteBtnListener();
});
}
});
},
});
// #TODO: remove context.init() when upload as add-on to marketplace
context.init();
})(SAMPLE_ADDON);
// ======================================= DOM =======================================
/**
* Renders the task list UI by updating the browser history, creating a button and table,
* filling the table with task data, and updating the main content section with the table container.
* @param {Event} e - Optional event object. If provided, prevents the default action.
*/
const renderTaskTable = (data) => {
const button = createAddTaskButton();
$('#main-content')
.html('
')
.prepend(button.render());
const table = createTaskTable();
table.data = data;
table._renderHTML();
};
/**
* Creates a custom page for tasks using eLabSDK.
* This function initializes a new CustomPage object with specified configurations.
* @returns {CustomPage} A CustomPage object representing the task page.
*/
const renderTaskPage = () => {
return new eLabSDK.CustomPage({
rootVar: '.nav-main-level',
pageID: 'tasks',
mainMenu: 'Tasks',
subMenu: 'Task list',
});
};
/**
* Creates a button element using the eLabSDK.GUI.Button constructor.
* The button is configured with a label, CSS class,
* and an action to show a dialog for updating tasks.
* @returns {eLabSDK.GUI.Button} - A button element configured to add a new task when clicked.