Information Technology Support
Page tree
Table of Contents

Overview


There may be some situations in which we want a certain field to only show when a certain checkbox is selected within a form, then disappear if unchecked. Some field properties are modified and a rule is put in place to achieve this.

Process


  1. Add the checkbox control with the desired options
    Control Checkbox Field Image
  2. Add any additional fields that will be dependent on the checkbox selection(s) (will only show when a specific checkbox is checked)
    Control Text Field Image
  3. In the field properties section for each of the fields that will be shown/hidden based on selection, uncheck the Visible option
    1. This will make gray out the area around the field in the editor, and make it hidden on the actual form
      Control Visibility Toggle Image
  4. All form designer controls have been placed and adjusted, now to move onto the form rules
  5. Select Rules from the toolbar on the top
    Rules Button Image
  6. Create a new rule by selecting the red (plus) icon next to the "Create New Rule" text
    Add New Rule Button Image
  7. When selected, a new rule will appear below. Select the pencil icon () next to the new rule to edit it. 
  8. Modify the rule Name and Description fields to convey it's function 
    Edit Name And Description Fields Of Rule
  9. Select the Rule Code tab below the Name and Description fields 
    Rule Code Tab Image
  10. You will be prompted to enable editing, select the Edit Code button on the right to continue
    Edit Code Button Image
  11. Paste the following code in the rule code text area:

    // Only copy and use this rule for checkbox fields!
    var found = false;
    for (var i = 0; i < cbx_color.value.length; i++) {
        // Set which selection in the checkboxes will 
    	// show/hide the field.
    	if (cbx_color[i].value === 'Other') {
    		found = true;
    		break;
        } 
    }
    if (found === true) {
        // Change the part before the period on each of the following
    	// to the field you want to show/hide based on checkbox
    	// selection.
    	txt_othercolor.visible = true;
    	txt_othercolor.required = true;
    } else {
    	txt_othercolor.visible = false;
    	txt_othercolor.required = false;
    }

    Pasted Rule Code Image

  12. In the pasted code, modify the following: 

    1. Change where it says "cbx_color" (lines 3, 6) to the Name value of your checkbox control

    2. Change where it says "txt_othercolor" (lines 15, 16, 18, 19) to the Name value of your field you want to make visible
    3. Change where it says "'Other'" (line 6)  to the value of the checkbox option you want to be checked to make the field visible
      1. When you added the checkbox control, you should've modified the values available as well. The values are displayed in a "Option=Name" format, each on it's own line. Make sure you change where it says "'Other'" to the checkbox's "Option" property and not it's name! Also be sure to include the single quotes. 

        If you forget what any of the parameters or names were, you can expand each item in the Form Outline to get a view of what exists!

  13. Select the Save Icon () from the top-right
     
  14. Test the form by selecting the designated checkbox that makes the other control appear


  • No labels