1. Atlas Systems
  2. Aeon
  3. Custom Fields

Adding Custom Fields to Web Forms

Print Friendly and PDF Follow

Avatar
Brittany De Gail
Updated

As of Aeon v5.1, a custom field can be added as an additional input field on any of the relevant web forms once it is configured in the Customization Manager's Custom Field Definitions table. This article contains code templates and configuration examples for custom fields of several different data types to help guide you through this process.

In the code templates below, [ContextType] should be replaced with the Context Type of the custom field (User, Transaction, or Activity) and [ShortName] with the Short Name of the custom field as configured in the Custom Field Definitions table. 
For more information about the custom fields feature, see Unlimited Custom Fields. 

Adding a Custom Short Text Input Field

You can add a short text input for a custom field of the ShortText, LongText, or Integer data type by using the following template:

<div class="form-group col-md-5">
    <label for="CustomFields.[ShortName]">
       <span class="<#ERROR name='ERRORCustomFields.[ShortName]'>">
               [Insert text for field name you want to display here]
       </span>
    </label>
    <input type="text" class="form-control" name="[ContextType].CustomFields.[ShortName]" id="CustomFields.[ShortName]" value="<#PARAM name='[ContextType].CustomFields.[ShortName]'>">
</div>
Tip: You can change the number at the end of the <div> class attribute to adjust the size of the input field:
<div class="form-group col-md-5">
Click for Example: Adding a "Folder" Field

FolderExample.png

The following code will display a short text "Folder" input field:

<div class="form-group col-md-3">
   <label for="CustomFields.Folder">
      <span class="<#ERROR name='ERRORCustomFields.Folder'>">
              Folder
      </span>
   </label>
      <input type="text" class="form-control" name="Transaction.CustomFields.Folder" id="CustomFields.Folder" value="<#PARAM name='Transaction.CustomFields.Folder'>">
</div>

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

Field Value
ID This value is automatically generated.
Context Type Transaction
Data Type ShortText
Short Name Folder
Label Folder

Adding a Custom Long Text Input Field

You can display a longer text input for a custom field of the LongText data type by using the following template:

<div class="form-group col-md-8">
   <label for="CustomFields.[ShortName]">
      <span class="<#ERROR name='ERRORCustomFields.[ShortName]'>">
              [Insert text for field name you want to display here]
      </span>
   </label>
   <textarea class="form-control" name="[ContextType].CustomFields.[ShortName]" id="CustomFields.[ShortName]" rows="2" cols="40"><#PARAM name="[ContextType].CustomFields.[ShortName]"></textarea>
   <div class="small-notes">[This text displays in small font under the input field]</div>
</div>
Click for Example: Adding an "Additional Information" Field

Additional_Information.png

The following code will display a long text "Additional Information" input field:

<div class="form-group col-md-8">
  <label for="CustomFields.AdditionalInfo">
     <span class="<#ERROR name='ERRORCustomFields.AdditionalInfo'>">
             Additional Information
     </span>
  </label>
  <textarea class="form-control" name="User.CustomFields.AdditionalInfo" id="CustomFields.AdditionalInfo" rows="2" cols="40"><#PARAM name="User.CustomFields.AdditionalInfo"></textarea>
  <div class="small-notes">Enter any additional information you would like library staff to know.</div>
</div>

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

Field Value
ID This value is automatically generated.
Context Type User
Data Type LongText
Short Name AdditionalInfo
Label Additional Information

Adding a Dropdown for a CustomDropDown Field

You can add a dropdown for a custom field of the CustomDropDown data type by using the following template:

<div class="form-group col-md-4">
    <label for="CustomFields.[ShortName]">
       <span class="<#ERROR name='ERRORCustomFields.[ShortName]'>">
               [Insert text for field name you want to display here]
       </span>
    </label>
    <select class="custom-select mr-sm-2" name="[ContextType].CustomFields.[ShortName]" id="CustomFields.[ShortName]">
       <#OPTION fieldname="[ShortName]" name="Custom" selectedValue="<#PARAM name='[ContextType].CustomFields.[ShortName]'>" defaultName="[Insert text you want to display by default here]" defaultValue="">
    </select>
</div>
Note: This field must be defined as a field of the CustomDropDown data type in the Customization Manager's Custom Field Definitions table and the Short Name of that custom field must match a Group Name defined with values in the Custom Drop Down table (click the example below for additional guidance).
Click for Example: Adding a "Research Purpose" Dropdown

Dropdown.png

The following code will display a dropdown field that the user can use to select a "Research Purpose":

<div class="form-group col-md-4">
   <label for="CustomFields.ResearchPurpose">
      <span class="<#ERROR name='ERRORCustomFields.ResearchPurpose'>">
              Research Purpose
      </span>
   </label>
   <select class="custom-select mr-sm-2" name="User.CustomFields.ResearchPurpose" id="CustomFields.ResearchPurpose">
   <#OPTION fieldname="ResearchPurpose" name="Custom" selectedValue="<#PARAM name='User.CustomFields.ResearchPurpose'>" defaultName="Choose an option" defaultValue="">
   </select>
</div>

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

Field Value
ID This value is automatically generated.
Context Type User
Data Type CustomDropDown
Short Name ResearchPurpose
Label Research Purpose

The values for this field were entered into the Customization Manager's Custom Drop Down table as follows:

CustomDropDown_Table.png

If you would like to add this field, you can configure any specific values you'd like in the CustomDropDown table as long as the Group Name value matches the Short Name in the CustomFieldDefinitions table.

Adding a Checkbox for a Custom Boolean Field

You can add a checkbox input field for a custom field of the Boolean data type by using the following template:

<div class="form-group col-md-5">
   <label for="[ShortName]">
      <span class="<#ERROR name='ERRORCustomFields.[ShortName]'>">
              [Insert text for field name you want to display here]
      </span>
   </label>
   <input type="checkbox" id="[ShortName]" name="[ContextType].CustomFields.[ShortName] class="checkbox-as-bool" data-bool-fieldname="[ContextType].CustomFields.[ShortName]" <#CHECKED name="[ContextType].CustomFields.[ShortName]">>
</div>
Warning: Do not set a custom Boolean field as required if false/unchecked is an acceptable value for the form.
Click for Example: Adding a "Sign up for newsletter?" Checkbox

Newsletter.png

The following code will display a checkbox that users can use to opt-in to receive your newsletter:

<div class="form-group col-md-5">
  <label for="Newsletter">
     <span class="<#ERROR name='ERRORCustomFields.Newsletter'>">
             Sign up for newsletter?
     </span>
   </label>
   <input type="checkbox" id="Newsletter" name="User.CustomFields.Newsletter" class="checkbox-as-bool" data-bool-fieldname="User.CustomFields.Newsletter" <#CHECKED name="User.CustomFields.Newsletter">>
</div>

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

Field Value
ID This value is automatically generated.
Context Type User
Data Type Boolean
Short Name Newsletter
Label Send Newsletter?

Note: The version of the atlasUtility.js JavaScript file included in the Aeon 5.1 Default Web Pages must be present in your web directory and linked to your web form (if the link is not present already) to ensure that the Boolean checkbox field data will pass through correctly when the form is submitted. The atlasUtility.js file is linked to web forms by default through the include_head.html file referenced in the <head> element of the form. For example:

<head>
<title>Aeon - New User Registration</title>
<#INCLUDE filename="include_head.html">
</head>

If your form has been modified to remove the reference to the include_head.html file, please ensure that the link to atlasUtility.js is added manually within the form's <head> element:

<script src=“js/atlasUtility.js”></script>

Adding a Custom Date Field

You can add a calendar dropdown input field for a custom field of the Date data type by using the following template:

<script>
  $( function() {
    $( "#CustomFields_[ShortName]" ).datepicker();
  } );
</script>

<div class="form-group col-sm-4">
   <label for="CustomFields_[ShortName]">
      <span class="<#ERROR name='ERRORCustomFields.[ShortName]'>">
          [Insert text for field name you want to display here]
      </span>
   </label>
   <div class="input-group">
       <input class="form-control" id="CustomFields_[ShortName]" name="[ContextType].CustomFields.[ShortName]" type="text" aria-describedby="button-datePicker-[shortName]" value="<#PARAM name='[ContextType].CustomFields.[ShortName]'>">
       <div class="input-group-append">
         <button class="btn btn-outline-secondary dateTrigger" type="button" role="button" id="button-datePicker-[shortName]" data-triggerDatePicker="#CustomFields_[ShortName]" aria-label="Calendar">
           <span class="fas fa-calendar ui-datepicker-trigger"></span>
         </button>
       </div>
   </div>
  
   <div class="small-notes">
       [This text displays in small font under the input field]
   </div>
</div>

Formatting Note

When implementing the calendar dropdown field, any references to the custom field that will be used by the JavaScript should be formatted with underscores instead of periods to avoid issues. For example, the formatting "CustomFields_[ShortName]" should be used in the JavaScript code block, the input id attribute, and the data-triggerDatePicker attribute. All references to the custom field that are used by the Aeon DLL will need to retain the usual "CustomFields.[ShortName]" formatting EXCEPT the label element's for attribute which should use an underscore to match the formatting of the input id attribute.

Click for Example: Adding a "Need By Date" Field

NeedBy2.png

The following code will display a calendar dropdown that users can use to select a "Need By" date for an item:

<script>
  $( function() {
    $( "#CustomFields_NeedBy" ).datepicker();
  } );
</script>

<div class="form-group col-sm-4">
   <label for="CustomFields_NeedBy">
      <span class="<#ERROR name='ERRORCustomFields.NeedBy'>">
          Need By Date
      </span>
   </label>
   <div class="input-group">
       <input class="form-control" id="CustomFields_NeedBy" name="Transaction.CustomFields.NeedBy" type="text" aria-describedby="button-datePicker-needBy" value="<#PARAM name='Transaction.CustomFields.NeedBy'>">
       <div class="input-group-append">
         <button class="btn btn-outline-secondary dateTrigger" type="button" role="button" id="button-datePicker-needBy" data-triggerDatePicker="#CustomFields_NeedBy" aria-label="Calendar">
           <span class="fas fa-calendar ui-datepicker-trigger"></span>
         </button>
       </div>
   </div>
  
   <div class="small-notes">
       Select the date you need the item.
   </div>
</div>

The configuration for this field in the CustomFieldDefinitions table is as follows:

Field Value
ID This value is automatically generated.
Context Type Transaction
Data Type Date
Short Name NeedBy
Label Need By Date

Questions?

If this article didn’t resolve your issue, please contact Atlas Support for assistance:

Contact Support

Articles in this section