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:
Group Name | Label Name | Label Value |
ResearchTopics | Kung Fu | KungFu |
ResearchTopics | History | History |
ResearchTopics | Art | Art |
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.
The text displayed by the <legend> element for the field on the web form may appear larger than the text displayed by the <label> element for other fields on the web form. To standardize the font size used for the text displayed by <legend> and <label> elements on your forms, see the instructions in the Adjusting the Font Size for Legend Text section below.
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>
- Required:
- name - "Custom"
- selectedValue - "<#PARAM name='[GroupName]'>"
- fieldName - The name of the group in the Customization Manager's CustomDropDown table that the checkboxes options are associated with.
- type - "checkbox"
- Optional:
- delimiter - This can be any character that you want to separate your values in the database. (optional - will default to ','). In the example above, the delimiter is a single space.
- includeOther - Determines if an "Other" text box should appear after the list of checkboxes. Default value: False. Can also be set to True.
- otherLabel - Label displayed with the "Other" text box, if it exists. Default value: "Other"
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:
Field | Value |
ID | This value is automatically generated |
Context Type | User |
Data Type | CustomDropDown |
Short Name | Color |
Label | Favorite Color |
Step Two: CustomDropDown Table
Next, a group for this field containing several different options must be configured in the CustomDropDown table, for example:
Group Name | Label Name | Label Value |
Color | Blue | Blue |
Color | Red | Red |
Color | Green | Green |
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:
The text displayed by the <legend> element for the field on the web form may appear larger than the text displayed by the <label> element for other fields on the web form. To standardize the font size used for the text displayed by <legend> and <label> elements on your forms, see the instructions in the Adjusting the Font Size for Legend Text section below.
<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>
- Required:
- name - "Custom"
- selectedValue - "<#PARAM name='[ContextType].CustomFields.[ShortName]'>"
- Note that [ContextType] and [ShortName] should be replaced with the context type and short name configured for the field in the CustomFieldDefinitions table.
- fieldName - The name of the group in the Customization Manager's CustomDropDown table that the checkboxes options are associated with.
- type - "checkbox"
- customFieldContext - The context type for the field as defined in the CustomFieldDefinitions table (User, Transaction, or Activity). In this case, "User"
- Optional:
- delimiter - This can be any character that you want to separate your values in the database. (optional - will default to ','). In the example above, the delimiter is a single space.
- includeOther - Determines if an "Other" text box should appear after the list of checkboxes. Default value: "False" (can also be set to "True")
- otherLabel - Label displayed with the "Other" text box, if it exists. Default value: "Other"
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;
}