Getting Started with LabArchives Widgets

A beginner’s guide to understanding how to create powerful, custom LabArchives Widgets

3 min readJan 3, 2021

LabArchives is an electronic research notebook platform that allows researchers to compile and organize many different types of data within its virtual pages. One helpful feature of electronic research notebooks is the ability to create reusable forms for capturing data in repeat experiments. LabArchives allows users to create these forms through what it terms “Widgets,” which are forms that can store, manipulate, and display entered data. The form elements can include text or number fields, checkboxes, selection menus, and more, like in the example widget in the screenshot below.

Creating LabArchives Widgets involves using a mix of HTML and JavaScript. For designing the simplest forms, you will not even need to worry about editing the default JavaScript. You can also use LabArchives’s Rich Text Editor to create form elements without needing to know how to program in HTML and get on your way building your first widget. To really take advantage of the flexibility and power of LabArchives Widgets, though, learning the basics of HTML and JavaScript will serve you well. You can further control the style of your forms (things like font size, color, or spacing) using the language CSS. As you begin diving into the JavaScript for more complex widgets, you will also likely benefit from learning jQuery, which is a JavaScript library that makes it easier to complete many routine actions.

In this series, I describe the LabArchives Widget Manager and explain how the default JavaScript is organized and functions. Depending on your familiarity with HTML and JavaScript and your comfort with the LabArchives platform, some of these articles will be more helpful and relevant to you than others. You may also find yourself referring back to different parts of this series as your goals for creating new widgets change.

I began this process of designing LabArchives widgets about a month ago with only very basic knowledge of HTML and no experience with CSS, JavaScript, or jQuery. I certainly would not have made it very far without patient help and troubleshooting from my brother, a back-end software engineer at Maestro. Throughout this series, I will point you to other resources that I’ve found to be helpful along the way, and I won’t make too many assumptions about your familiarity with these languages.