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…


How to make textareas grow or shrink with text entry

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.

You can find the code to implement these textareas in my GitHub repository https://github.com/gibson-amandag/LabArchivesWidgetTemplates/tree/main/_commonComponents/autoAdjustTextarea

When adding a textarea to your widget, it’s often nice to have the textarea grow and shrink as the content within it changes, rather than relying on a fixed number of rows and the scroll bar. In this article, I provide an example to achieve this behavior.

To implement this solution, you must add…


Tutorial for how to add Bootstrap and use CSS to style LabAchives widgets

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.

Bootstrap

Demonstration of responsive widget based on window width

Adding Bootstrap styling within your widget is especially helpful for creating visually appealing and responsive elements that adjust based on the screen size. The snippet below is added within the HTML editor with Source enabled.

Because the LabArchives parent form calls its own version of jQuery, which does not meet the minimum standards for…


Assist users in filling in dates and times with the correct format when using the Safari browser

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.

You can find the full javascript code associated with this article in my GitHub repository https://github.com/gibson-amandag/LabArchivesWidgetTemplates/tree/main/_commonComponents/checkDatesForSafari

The Safari browser does not implement the date picker as Chrome does. As a result, users of your widget need to be guided as to how to enter dates in the format that is expected for calculations with those dates. Regardless of the user display value in Chrome, the val that is…


How to create an output table with the form entries from LabArchives widgets for further data analysis

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 generalized code to implement an output table is available in my GitHub repository at https://github.com/gibson-amandag/LabArchivesWidgetTemplates/tree/main/_commonComponents/show-calc-save-copyTable

Table of Contents

Oftentimes, I’m designing a widget to collect data that I then want to add to an Excel file to use for analysis. While just having the…


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 Grad. Enjoys data organization. Passionate about teaching science. gibsonamanda.com

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