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.
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.
Now, let’s try to create a simple add-on. Before jumping into coding, here are two valuable resources: eLabNext SDK documentation and eLabNext REST API documentation.
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.
One of the crucial things to remember while creating an add-on is prioritizing using SDK and API methods over custom code. A good example will be rendering buttons or making HTTP requests. By using the methods provided by SDK, you can be assured, e.g. buttons will have correct styling, or all the necessary headers will be appended to your HTTP request.
Obviously, most of the add-ons that will be created will be more complicated than this example. Naturally, while delivering more complex features, developers would like to use the power of breaking code into modules, minimizing code for production, writing test cases for their code, and using all the other advantages of modern web development. While working on the add-ons, we’ve created a boilerplate add-on, allowing users to achieve a project structure, packaging, testing, etc. The project can be found on GitHub.
Remember that the eLabNext SDK is gaining momentum; thus, the documentation needs to be completed. Please contact our team if you find yourself in a situation where help might be required. Our team will continue writing about the eLabNext add-on development process. We will cover topics like submissions of add-ons to eLab Marketplace, tips and tricks of eLabNext add-on development, talking about more complicated features development, and so on.
Input your search keywords and press Enter.
