Getting Started with 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. 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.




PhD Candidate in Neuroscience at University of Michigan. Hope College Grad. Enjoys data organization. Passionate about teaching science.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Managing Technical Debt in .NET Core projects with NDepend

Applying Laws of Scalability to Technology and People

Agility is now not just a methodology, It’s a survival mode

Useless Java: Day 12

How to tackle System Design when you don’t have any idea about the problem domain.

Why I’m launching a new programming magazine in 2020 [Part I]

CS Degree vs Coding Bootcamp: The Halfway Review

How to swap variables in python

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
Amanda G. Gibson

Amanda G. Gibson

PhD Candidate in Neuroscience at University of Michigan. Hope College Grad. Enjoys data organization. Passionate about teaching science.

More from Medium

Responsive React Table With Mui-datatables With Footer

npm mui-datatables

Handling Pagination in Strapi v4 with SvelteKit

CRUD Is Dead, Long Live CRUD!

Implement LTI tool to html and JS