5.03.2 Widget Building Basics
Posted by Katrina Vuong on 08 November 2019 09:47 AM
The Widget Building Process
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.
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.
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."
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.