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

Microsoft Continues to Embrace the Open-Source Community

Microsoft ❤ Linux

Must Consider Top Website Development Trends in 2020

How I Stopped Fighting With My Girlfriend By Becoming A Cartoon, Using JavaScript and Computer…

The TEC Presents: Dashboards, Gitbooks, Grants & Festivals

Poseidon Mining Testnet Phase5 is LIVE !

Practical Python for Beginners #1

sTOS Benefits & IDO Participant Airdrop[EN/KR]

Cryptography Using Python Hashing

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

Chrome Dinosaur Game 🎮 Using 📜 JavaScript! | Kaboom.Js 💥 Tutorial #3

Getting Google Maps up and running with Nuxt.js

Koovs Website Cloning

Introduction to Koa JavaScript framework