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

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.

Custom Template LabArchives Widget

Creating LabArchives Widgets involves using a mix of HTML and JavaScript…


Miscellaneous suggestions for navigating and troubleshooting the widget design process

This article is part of a series on how to get started with designing custom LabArchives Widgets. You can find the introduction and links to the other articles in the series here.

  • Develop offline. Within the script editor, click the develope offline [sic] button. This will open the widget within a new webpage. Right click on the page and select View Page Source (if you are using Chrome). This will display the full HTML script to reproduce the widget, calling the necessary parent form methods and other helper scripts. You can then use your preferred coding application (I’ve been using…

Understanding the Seven Methods of the LabArchives Default Script

This article is part of a series on how to get started with designing custom LabArchives Widgets. You can find the introduction and links to the other articles in the series here.

As described in the introduction to the Script Editor, the widget script is actually contained within an object called my_widget_script by default. The HTML script that you edit within the HTML editor is contained within a <form> tag with the attribute id="the_form", should you need to reference it in your JavaScript. There are 7 default methods within my_widget_script; these are init, to_json, from_json, test_data, is_valid, is_edited, and reset_edited


Introduction to the Script Editor and a Brief Overview of JavaScript

This article is part of a series on how to get started with designing custom LabArchives Widgets. You can find the introduction and links to the other articles in the series here.

The third tab within the Widgets Manager is the Script Editor, which provides the JavaScript instructions for how to display, save, and work with the form elements. This is really where the power of these widgets lies, as the JavaScript code can be used to validate the form data, make calculations, or change components of the form. …


How to begin designing your Widget using HTML form elements

This article is part of a series on how to get started with designing custom LabArchives Widgets. You can find the introduction and links to the other articles in the series here.

After navigating to the Widget Manager and opening a widget, the first tab that is shown is the Widget HTML Editor. This defaults to a preview of the page within the Rich Text Editor. While the HTML Editor can give you a general idea of how your form will appear, you should use the Preview pane to view it with styling. …


How to access the LabArchives Widget Manager

This article is part of a series on how to get started with designing custom LabArchives Widgets. You can find the introduction and links to the other articles in the series here.

Screen capture for accessing Widget Manager

You can create new Widgets by accessing the Widget Manager, as described in this LabArchives Knowledgebase article. Briefly, navigate to the three-dot menu in the upper-right hand corner of the screen, click on “Widgets,” then “Widget Manager.”

From there, you can look through the default LabArchives widgets or press “New” or “Copy” to begin creating your own.

Amanda G. Gibson

PhD Candidate in Neuroscience at University of Michigan. Hope College Graduate in Psych and Spanish. Enjoys data organization. Passionate about teaching science

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store