5.03.2 Widget Building Basics
The Widget Building Process
- 1. Organize and Plan your Widget
Most widgets are a collection of rich text and one or more interactive Form Elements. You can add non-interactive text, like labels or instructions. Many users will organize their widget in a document outside of the widget manager. Keep in mind, if you would like to print or create a PDF of the widget, it must fit on a standard sheet of paper.
After you decide on a structure for your widget, you will need to build that structure in the widget canvas. The Widget Manager functions a lot like the Rich Text Editor. For more information on the text tools available, see the Rich Text Article click here.
2. Add Interactive Form Elements to your Widget
Now that you have an outline for your widget, you will need to add the interactive Form Elements. Please see below for more information each Form Element Type.
Selection Fields (Drop-down menus)
Hidden Fields (Used to create Freezerbox or Database Widgets)
3. Test your Widget
While building your widget, be sure to test the form elements on a page of your notebook. If a form element is not functioning properly, check the Form Element Name and Value.
Form Element Naming Rules
NOTE: To function properly, each form element in your widget needs a unique, lowercase name without special characters.
- To function properly, each Form Element must have a unique name.
- Avoid using an underscore (_) unless you are adding a Form Command.
- Some Form Commands may not function correctly if there is a space in the element name.
- The name must contain at least one alphabetical character
- The name cannot be “length”
Text Fields are used to add short numerical information or text in a single line. To add a Text Field (also called a text box) to your canvas, click the button indicated below in the upper toolbar of the Canvas.
Input a unique name for the text field. You can indicate a width, and a number of maximum characters.
Text fields can be given specific commands by adding an underscore to the name. To learn about Form Commands, click here.
To change the text formatting for a text field or text area, click “Source” and add a Style for the field. The example below will create a text field named “field1” with text that is bold, red and has a font size of 16.
Selection fields allow users to select between predefined options. To add a Selection Field to your canvas, click the button indicated below in the upper toolbar of the Canvas.
- Input a unique name for your selection field
- Populate your selection field with a list of options.To add a new option, add Text and a unique value, then click “Add”. The “Text” field is the option that will appear on the dropdown list.
NOTE: Your selection field will not function properly if the Text or Value field is missing information, or if the value is used more than once.
Text Areas can be click-dragged to any dimension of your choosing. After saving, the text area will always return to the default size. If the page is printed or converted to PDF, only the text visible in the default size will be visible.
To add a Text Area to your canvas, click the button indicated below in the upper toolbar of the Canvas
Input a unique name for the text area. You can set a default text area size by indicating a Column and Row size.
To add a Check Box to your canvas, click the button indicated below in the upper toolbar of the Canvas.
To function Properly, each checkbox requires a unique name. The “selected” option will display the checkbox as checked and users cannot save the widget if it is unchecked.
A group of Radio Buttons can be used for multiple choice questions. To add a Radio Button to your canvas, click the button indicated below in the upper toolbar of the Canvas.
To select one radio button out of an array of radio buttons, each button needs to have the same name but a distinct value.
In the example below, all buttons have the name “question1” but the value of “1”,”2″, “3”, and “4.”
Any widget can become a freezerbox or database widget by adding a Hidden Field. To add a Hidden Field to your canvas, click the button indicated below in the upper toolbar of the Canvas.
Name the Hidden field “is_database“ or “is_freezerbox” and click “OK.” Once the widget is added to a page, it will function like a freezerbox or database widget.