Automatically Generate Checkbox Selections for a CustomDropDown Group

The <#OPTION> web tag was configured in Aeon v5.1 to handle auto-generating a list of checkbox options for a group defined in the CustomDropDown table. This makes it possible to offer a range of options to the user to select on your web forms without having to hardcode each option into the code for the page. 

Configuration Overview | Code Example - Default Aeon Field | Code Example - Custom Aeon Field  

Configuration Overview

This tag is used by first specifying a Group Name defined in the CustomDropDown table in the required fieldName attribute within the tag. A selectedValue attribute with a <#PARAM> tag value, a name attribute with the value "Custom" and a type attribute with the value "checkbox" must also be written into the tag. If using this tag with a CustomDropDown type custom field configured in the CustomFieldDefinitions table, a customFieldContext attribute is also required that specifies the context type for the field (User, Transaction, or Activity). 

After a group name is specified, a list of checkbox options will generate and display on the web page based on the Label Name for each individual value that is configured for that group in the CustomDropDown table. If one of these options is selected by the user, then the Label Value configured for that option will be stored in the field upon submission of the form. An additional "Other" text box can be configured to display below the checkbox options by setting the includeOther attribute to "True" and will allow the user to enter a custom value.

Multiple checkbox options can be selected and will be stored as text in that field in the database. These values will be separated by the delimiter specified by the delimiter attribute in the tag, or with a comma by default if no delimiter is configured.

Code Example - Default Aeon Field

In the following example, the default ResearchTopics field will be configured to display as a list of specific options the user can select rather than as an open text field.

Step One: CustomDropDown Table

First, a group for this field containing several different options must be configured in the CustomDropDown table:

Step Two: Web Page Code

After the options are configured in the CustomDropDown table, the <#OPTION> tag should be added underneath the label for the field in the code for the web form. For accessibility purposes, you will also need to modify the existing code to replace the <div> and <label> elements with <fieldset> and <legend> elements. The <fieldset> element acts as the container that groups all the relevant checkbox inputs and the group label, which is configured to display on the web form using the <legend> element.

Change this:

<div class="form-group col-md-6">
    <label for="ResearchTopics">
        <span class="<#ERROR name='ERRORResearchTopics'>">
            Research Topics
        </span>
    </label>
       <textarea class="form-control" name="ResearchTopics" 
        id="ResearchTopics" rows="2" cols="40">
        <#PARAM name="ResearchTopics"></textarea>
</div>

To this:

<fieldset class="form-group col-md-4">
    <legend>
        <span class="<#ERROR name='ERRORResearchTopics'>">
            Research Topics
        </span>
    </legend>
        <#OPTION name="Custom" 
         selectedValue="<#PARAM name='ResearchTopics'>" 
         fieldName="ResearchTopics" type="checkbox" delimiter=" " 
         includeOther="true" otherLabel="Other">
</fieldset>

Results

After configuration, the Research Topics field will now display individual checkbox options according to the Label Name for each value configured in the CustomDropDown table:

Upon submitting the form, these values will be saved and appear in the Staff Client according to the Label Value for each option in the CustomDropDown table. Multiple values will be separated by the delimiter value in the tag (in this case, configured to be a blank space). The value entered in the "Other" text box will also be saved in the field:

Code Example - Custom Aeon Field

In the following example, a custom Favorite Color field defined in the CustomFieldDefinitions table will be configured to display on the web form as a list of specific options the user can select.

Step One: CustomFieldDefinitions Table

The configuration for this field in the Customization Manager's CustomFieldDefinitions table is as follows:

Step Two: CustomDropDown Table

Next, a group for this field containing several different options must be configured in the CustomDropDown table, for example:

Step Three: Web Page Code

After the options are configured in the CustomDropDown table, the field should be added to the code for the web form using the <#OPTION> tag, and <fieldset> and <legend> elements. The <fieldset> element acts as the container that groups all the relevant checkbox inputs and the group label, which is configured to display on the web form using the <legend> element:

<fieldset class="form-group col-md-4">
    <legend>
        <span class="<#ERROR name='ERRORUser.CustomFields.Color'>">
            Favorite Color
        </span>
    </legend>
        <#OPTION name="Custom" 
         selectedValue="<#PARAM name='User.CustomFields.Color'>" 
         fieldname="Color" type="checkbox" delimiter=" " 
         customFieldContext="User" includeOther="true" otherLabel="Other"> 
</fieldset>

Adjusting the Font Size for Legend Text

The font size used to display the legend text for the checkbox group field on the web form may appear larger than the label text used for other fields on the form. To reset the font size used for the legend text to match the font size used for the label text on your forms, add the following lines of code to the custom.css file located in the css folder of your Aeon web directory :

form fieldset legend {
    font-size: inherit;
}