Getting to Know the LabArchives Widget Manager
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.
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.
The Widget Manager has three panes, (1) Widget HTML Editor, (2) Preview and (3) Script Editor
The HTML Editor is where you define the layout of your widget. This includes creating the form inputs and applying desired styling. There are Knowledgebase articles that describe how to use the Rich Text Editor to create form elements and the basics of building new widgets. This series will not cover the use of the Rich Text Editor for adding form elements. Instead, it will focus on using HTML code to directly define and style the widget elements. You can enter HTML code into the HTML Editor by pressing the source button.
The Preview pane allows you to see what your widget will look like in when saved to a page in the notebook (Preview for Displaying) and when editing (Preview for Editing). In these previews, sample data is injected into the form. As exhibited in the screenshot on the left by the greyed-out buttons, you can change how your widget is displayed and how users can interact with it when viewing the widget versus editing the widget. This will be covered in another article.
The Preview for Editing tab also adds three additional buttons that can help you ensure that all components of your widget are working appropriately. Validate checks that the form is valid and can be saved to the page. Within the preview for editing, LabArchives tracks whether or not the form input has been edited, posting a message “Edits made.” This can be reset by pressing the call reset_edited button. Finally, reload widget values calls the to_json and from_json methods store and refill the contents of the form inputs, respectively. These methods will be covered in detail in other articles.
The Script Editor contains the JavaScript code for the widget. The JavaScript works behind the scenes to help respond to user interactions with the widget, and to make sure that the data is stored and refilled when the widget is saved to the page. Editing this JavaScript can allow you to make much more complex or dynamic widgets. However, this is little documentation for how this script functions or is organized. Therefore, much of this series is dedicated to describing how to work with the Script Editor.
My GitHub Repository with Widget Templates
You can find the full code for a template widget and other examples at https://github.com/gibson-amandag/LabArchivesWidgetTemplates.
