How Can We Help?

5.03.3 Using Form Elements

Created On
← All Topics

Form elements within a Widget can be given specific Form Commands that give these elements special attributes. They can restrict the kind of input place into the field, they can allow form elements to do calculations, and more.  

A Form Element can be given a Form Element Nnme and a value using Field Properties. To learn more about the specific requirements for Form Element names and values CLICK HERE.  

Fields can be given specific Form Commands by adding an underscore to the Form Element Name. Multiple form commands can be used (e.g. mass_number_mandatory). 

The Value field is used to define a default value or customize the Field Command. 

LIST OF FORM COMMANDS

_mandatory            This requires users to enter data in the field to save the entry in the Notebook.  This can be used on any Field Element. 
_calculator  If used, this will display a pop-up scientific calculator adjacent to the field.  This should be used in text fields (not “text area”). 
_date 

If used, this will display a pop-up calendar adjacent to the field. This should be used in text fields (not “text area”).
Enter the format for the data in the “value” field. Example: dd/mm/yy or dd-mm-yyyy  

For more information: Datepicker Widget
_color  If used, this will display a dropdown list of color choices. This can only be used with freezerboxes. 
_number  This extension limits the input to numbers, periods or commas. This should be used in text fields (not “text area”). 
_formula  Used to perform calculations and evaluate expressions.  This should be used in Text Fields. 

 

How to preform calculations using Form Commands

The _number and _formula form commands can be used to preform calculations inside of a widget. A calculation can be performed using one or more text fields with results displayed in another text field.  

  1. Each Text field used as a variable in a calculation must include “_number” at the end of the Form Element Name 
  2. The Result Text field must include “_formula“ at the end of the Form Element Name. The Value field must contain a valid JavaScript expression representing the calculation.  
  3. The name of each form element or variable in a calculation MUST be enclosed by #{} For example “#{field1_number}” 
  4. Javascript operators (like +, -, *, and /) can be used to perform a calculation. Parenthesis () or square brackets [] can indicate the order of operations. 

Be aware that your form elements may not display the results of your calculations until you input a value in all form elements involved in the calculation. 

Example: Calculate field1+field2 = field3 

  1. Create two text fields named “field1_number” and “field2_number” 

 

      2. Create a third text field named “field3_formula” Now, input the appropriate code in the value field to calculates the sum.
This code would be #{field1_number}+#{field2_number} 


      3. Save the Widget and add it as an entry in your notebook. To test the calculation, add a number to field1 and field2 and view the result in field3.  

To perform more complex mathematical calculations, use a Math Object in the value field.  For more information on Math Objects CLICK HERE

Example: Calculate field1 to the power of field2 (field1field2) 

  1. Create two text fields named field1_number“,“field2_number”  
  2. Create a third text field named “field3_formula“ and add a value of Math.pow(#{field1_number}, #{field2_number}) 
  3. Save the Widget and add it as an entry in your notebook. To test the calculation, add a number to field1 and field2 and view the result in field3. 
Table of Contents
Loading...