The Widget Manager can be used to create and manage interactive widgets tailored to specific requirements using a range of elements, including text boxes, radio buttons, drop-down menus, tables, and checkboxes—all of which can be seamlessly embedded within a LabArchives notebook. The minimum requirements to build custom widgets begin with basic HTML proficiency. To program more complex and sophisticated widgets that support the use of logic and calculations, JavaScript is also supported.
Notebook Owners, Account Admins, and Notebook Admins can access the Widget Manager to create new widgets and manage existing widgets. Notebook Users and Guests with Edit Access will have have the ability to use the custom widgets that have been enabled in the notebooks they are a member of. For additional information on the LabArchives built-in Widgets that are available and accessible to all notebook members through the Entry menu, see the Widget article.
To access the Widget Manager, visit the triple-dot menu in the top-right corner of the notebook, hover over Widgets, and select Widget Manager. As a reminder, this menu is only available to Notebook Owners, Account Admin and Notebook Admins.
Completed Custom Widgets that are saved to a Notebook will be added to the Widget Entry menu where they can be inserted onto a Notebook Page.
Widget Building Tips
Whether you're building a form to track experiments or a calculator for quick lab metrics, approaching widget creation with a developer’s mindset will help you build tools that are not only functional, but also reliable and efficient.
To begin, follow these three key steps:
1. Plan Your Layout and Logic
Before writing a single line of code, it's essential to plan the structure and behavior of your widget. This step is similar to designing a small-scale application.
Define the purpose: Clarify what your widget is intended to do. Will it collect data, perform calculations, display results, or validate input?
Sketch the interface: Visualize how the widget should appear on the page. Identify required elements such as text fields, dropdowns, checkboxes, or tables.
Anticipate team interaction: Think through how your team will interact with the widget. Will one input trigger another? What logic governs the flow of data between fields?
Consider formatting for printing or export: If you plan to print or export the widget as a PDF, make sure the layout fits within a standard sheet of paper (typically 8.5 x 11 inches). Avoid designs that require scrolling or span too wide.
2. Code the Logic Behind Your Widget
With your layout planned, it's time to bring your widget to life by writing the HTML and JavaScript that power it.
Structure your fields using HTML: Define input types such as
text,number,date, ordropdownto align with your data needs. Use clear, descriptive labels so your team understands what to enter, and assign uniqueidattributes to each field to support precise JavaScript interaction.
name attribute written in lowercase. Without it, LabArchives won’t be able to save the entered data, and you may encounter an error when running or submitting the widget.Write JavaScript to control behavior: Use JavaScript to define how the widget should respond to inputs—such as performing calculations, validating fields, or updating other elements dynamically.
Test logic incrementally: Build and test in small steps by clicking Run Code. Implement one function at a time and verify its behavior before adding more logic.
By combining clean HTML structure with functional JavaScript, you create a responsive and reliable widget tailored to your team’s needs.
3. Test Your Widget in the LabArchives Environment
Once your widget's structure and logic are in place, it’s time to test it within the LabArchives environment using the Widget Manager’s built-in modes:
Display Mode: Shows how the widget will look on a Notebook page. Use it to preview layout, formatting, and overall design.
Edit Mode: Lets you simulate how your team will use the widget—entering data, triggering functions, and interacting with dynamic features.
Start with basic functionality, test frequently, and build incrementally. Testing helps catch errors early and ensures the widget performs as expected for your team’s needs.
Once you're satisfied with your widget’s functionality and appearance, click Save Changes.
Then, navigate to your LabArchives page and add the widget as an entry to see how it appears in context. This final step allows you to evaluate the widget's usability, layout, and behavior directly within your notebook environment.
Using the Widget Manager to Create a Custom Widget
If you're comfortable with HTML and JavaScript, the Widget Manager allows you to build custom widgets from scratch. To begin, open the Widget Manager, click the + New Widget button. This opens the Widget Information tab, where you can define the key details for your widget.
Widget Title: Use a clear, descriptive name. A concise title helps others quickly understand the widget's purpose.
Widget Description: Write a brief explanation of what the widget does and how it should be used. This description offers essential context for collaborators or future users.
After entering the basic information, proceed to the Code Editor tab to construct your widget.
HTML Editor: Use HTML to design the widget's structure and layout, including input fields, buttons, tables, and other UI elements.
JavaScript Editor: Add logic and interactivity to your widget using JavaScript. This can include input validation, automated calculations, dynamic behavior, and more.
name attribute in lowercase. Without it, LabArchives won’t be able to save the entered data—and you may see an error when trying to run or submit the widget.Running and Previewing You Custom Widget
After writing the Widget code, click the Run Code button to see your widget in action. Then use the Display Mode and Edit Mode for identifying any errors or issues in your code. If something isn't working as expected, use these views to troubleshoot and refine your widget before finalizing it.
Display Mode: Shows how the widget will appear on a Notebook page. Use this mode to preview the final layout and visual design.
Edit Mode: Allows you to test how users will interact with your custom widget, such as entering data or triggering dynamic features. This mode should be used for the following:
Validate the widget to ensure it functions correctly
Reload Widget Values to check how data loads into the widget
Reset Edited to test saving behavior of a widget
Managing Existing Widgets
From the Widget Manager, you can manage all your existing custom widgets:
Edit: Click a widget’s name in the dropdown menu to update its code, title, or description.
Duplicate: Click the two-paper icon to create a copy for versioning or repurposing.
-
Delete: Click the trash can icon to permanently remove a widget. Deletion is irreversible—proceed with caution.
Keeping widgets organized and up to date ensures they remain useful across your notebooks and collaborative projects.
Sharing and Reusing Custom Widget Code
Custom widgets can be shared with colleagues outside of those that already have access to your Widget Manager by copying the source code. Once a LabArchives user has the source code, they can add it to their Widget Manager to replicate the exact widget without having to build the widget from scratch.
Sharing a Widget
Open the custom widget in the Widget Manager.
Go to the Code Editor tab.
Copy the HTML and/or JavaScript code.
Share the code through email, documentation, or a collaboration platform.
Recreating a Shared Widget
Open the Widget Manager.
Click + New Widget.
Fill out Widget Title and Widget Description.
Paste the shared code into the appropriate HTML or JavaScript editor tabs.
Fill out the Title and Description fields.
Click Run Code to preview and test.
Click Save Changes to finalize.
name attributes and verify the widget behaves as expected.