The Widget Manager makes it easy for anyone to create and manage interactive widgets in a LabArchives notebook. You can build widgets using simple elements like text boxes, radio buttons, drop-down menus, tables, and checkboxes—no coding required. Everything can be seamlessly embedded into your notebook. For those who want to go further, JavaScript is also supported to program more complex and sophisticated widgets that include logic and calculations.
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.
Using the Widget Manager to Create a Custom Widget
To create a custom widgets, open the Widget Manager from the triple-dot menu, then click New under Available Widgets.
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.
Tip: Be sure to click Save Widget regularly throughout the widget creation process. This helps prevent data loss due to accidental navigation, browser issues, or timeouts.
After entering the basic information, proceed to the Widget Canvas tab to construct your widget in the Widget HTML Editor tab. The tab includes a collection of tools to help you build your widget including interactive form elements.
| Element | Purpose | Details & Options |
|---|---|---|
| Text Fields | For short, single-line entries (e.g., names, numbers, IDs). | Set a unique name, width, and max characters. Use form commands like _number or _formula for automatic calculations.To style text (bold, color), open Source and add simple CSS. |
| Selection Fields (Drop-downs) | Let users choose from a predefined list of options. | Each option needs a Text label and unique Value. Modify: Edit and save changes. Up / Down: Reorder options. Delete: Remove an option. Set as default: Choose which appears first. Allow multiple: Show all options and allow multiple selections. |
| Text Areas | For longer, multi-line text entries (e.g., notes). | Set columns and rows for size. Resizable during editing, but resets to saved size. On print or PDF export, only visible text within the saved area appears. |
| Checkboxes | For yes/no or multi-select options. | Each checkbox must have a unique name. Check selected to make it checked by default. Required boxes must be completed before saving. |
| Radio Buttons | For single-choice selections. | All buttons in a group share the same Name. Each must have a unique Value (e.g., Yes, No, Maybe). |
| Hidden Fields | Used for special widget types: Freezer Box or Database widgets. | Name the field is_database or is_freezerbox to enable database or freezer box widgets. |
Form Commands
In addition to field elements, you can use Form Commands to give fields extra behaviors. Commands are added by appending _<command> to the Form Element Name (for example, age_number_mandatory). You can also use the Value field to set defaults or fine-tune the behavior.
| Command | What it does | Use with | Example / Notes |
|---|---|---|---|
_mandatory |
Field must be filled to save | Any field | Use for required fields |
_calculator |
Adds a pop-up calculator | Text fields | Not supported in Text Areas |
_date |
Adds a date picker | Text fields | Enter format in Value (e.g., dd/mm/yyyy) |
_color |
Adds a color selector | Freezer Boxes | Not supported in other field types |
_number |
Only allows numbers, periods, commas | Text fields | Good for numeric input |
_formula |
Runs a calculation or expression | Text fields | JavaScript expression goes in Value |
Running and Previewing You Custom Widget
Once you’ve built your widget, you can use the preview and script editor tools to review, test, and refine it.
Preview tab
View and test the widget before adding it to your notebook. This ensures your widget works and looks as intended.
Script Editor tab
Provides access to the underlying script that powers your widget. This tab is recommended only for advanced users who are comfortable editing code directly.
Note: JavaScript can be used to create custom widgets, but scripts can only be entered in the Script Editor tab. JavaScript is not allowed in the Widget HTML Editor tab.
Widget Building Tips
Building a widget is a step-by-step process that begins with planning and ends with testing your design. By organizing your ideas, adding the right form elements, and checking that everything works properly, you can create widgets that are simple, reliable, and tailored to your specific needs.
1. Plan Your Layout and Logic
Before you start building, take a few minutes to plan the layout and purpose of your widget. Most widgets combine rich text (like labels, instructions, or notes) with interactive form elements (like checkboxes or drop-downs).
Tips for planning:
Sketch or outline your widget in a separate document first.
Keep in mind that widgets are often printed or exported as PDFs, so design them to fit on a standard sheet of paper.
For best results, keep the maximum width at 800 pixels.
Once you’ve decided on your structure, you can start building it in the Widget Canvas. The Widget Manager works a lot like the Rich Text Editor, so you’ll find familiar formatting tools.
2. Add Interactive Form Elements
Once your layout is ready, add the components that make your widget functional, such as:
Text Fields – short answers
Text Areas – longer responses
Selection Fields – drop-down lists
Checkboxes – multiple selections
Radio Buttons – single selections
Hidden Fields – for specialized uses (e.g., Freezer Box or Database Widgets)
Form commands add extra functionality to your widget—like repeating entries, performing calculations, or linking data between fields.
They’re added by appending an underscore and command to a form name (e.g., sampleid_mandatory).
Naming Rules
Each element must have a unique, lowercase name with no spaces or special characters.
Use underscores only with form commands (e.g.,
mouseid_mandatory).Avoid using “length” as a name—it breaks functionality.
✅ Examples:cage1,earlength_number
❌ Avoid:Cage#1,mouse_id,length
Step-by-Step Example
The following example shows how to use form commands and calculation fields together to create a simple, interactive widget that performs automatic math based on user input. Use _number for input fields and _formula for result fields to generate values automatically.
Add two text fields
Example:field1_number,field2_number
These are where users enter numbers.Add a result field
Example:field3_formula
This displays the calculated result.-
Define the formula
In the Value box, enter:
#{field1_number} + #{field2_number}
Or for advanced math:
Math.pow(#{field1_number}, #{field2_number}) Save and test your widget.
Type values into the first two boxes—your result appears automatically in the result field.
3. Test Your Widget in the LabArchives Environment
Testing ensures your widget works as intended. You can:
Preview in the Widget Manager – click the Preview Tab to quickly see how your widget looks and behaves. Once you're satisfied with your widget’s functionality and appearance, click Save widget.
-
Test in a Notebook Page – insert the widget into a page and interact with it (check boxes, type in fields, use drop-downs).
If something doesn’t work, double-check the Form Element Name and Value. Most issues come from naming errors like duplicates, missing letters, or invalid characters.
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.
Copy: Click Copy to create a copy for versioning or repurposing. The duplicated widget will appear with “copy” automatically added to the Widget Title field.
-
Delete: Click the Delete 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 Source 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 under Available Widgets
Fill out Widget Title and Widget Description.
Paste the shared code into the appropriate Source or JavaScript editor tabs.
Click Preview to preview and test.
Click Save to finalize.