Implementing Aeon 6.0 Web Page Release Changes
Changes to the Aeon 6.0 default and feature-specific web pages are added periodically as point releases. To implement these changes, you can either:
- Download the 6.0 web pages and replace your existing pages.
- If you have customizations, find and replace the following code changes mentioned below. Any code highlighted in yellow needs to be removed and any code highlighted in blue needs to be added.
If you have any questions or require Concierge Services when implementing the new web pages, please contact support at support@atlas-sys.com.
- 03 July 2024 Point Release (Default & Feature-Specific Web Pages)
03 July 2024 Point Release (Default & Feature-Specific Web Pages)
Add Copyright and License Information to Datepicker.js | Fix Keyboard Accessibility Issue on NewAuthRegistration.html | Fix Accessibility Issue with "Other" Dropdown Feature | Fix Site Map Issue | Fix Issues with Boolean Checkbox Fields | Adjust Naming of Account Management-Related Web Page Features | Implement Layout and Style Improvements for Printed Pages | Add New Minified CSS and JavaScript Files | Adjust Button Styling for Electronic Delivery Datarows
Add Copyright and License Information to Datepicker.js
To add the license and copyright statement for the third-party date picker code library used in the datepicker.js file, please download the latest default web pages and overwrite your js\datepicker.js file with the updated file.
js\datepicker.js
Please overwrite this file with the updated file.
Fix Keyboard Accessibility Issue on NewAuthRegistration.html
To reformat the "Important Copyright Information" and "Aeon FAQ (Frequently Asked Questions)" section headers on NewAuthRegistration.html as buttons to fix an accessibility issue where these sections could not be expanded or collapsed using keyboard controls, please overwrite your default css\aeon.css and NewAuthRegistration.html files with the updated files or make the following changes manually:
css\aeon.css
Change this (default lines 251-257):
#transaction-menu .btn:hover {
text-decoration: underline;
}
.badge-primary {
background-color: #08415c;
}
To this:
#transaction-menu .btn:hover {
text-decoration: underline;
}
.atlas-accordion .btn { /* ← Added for accessible accordion styling */
display: block;
font-size: inherit;
text-align: left;
width: 100%;
}
.atlas-accordion .btn .fa.fa-chevron-down { /* ← Added for chevron icon sizing */
font-size: 1.5rem;
}
.badge-primary {
background-color: #08415c;
}
NewAuthRegistration.html
Change this (default lines 29-49):
<h2 data-toggle="collapse" data-target="#copyright"
title="Click to expand section">
Important Copyright Information
</h2>
<div id="copyright" class="collapse">
<div class="mb-3">
WARNING CONCERNING COPYRIGHT RESTRICTIONS
</div>
<div class="mb-3">
The copyright law of the United States (Title 17, United States Code)
governs the making of photocopies or other reproductions of copyrighted materials.
</div>
<div class="mb-3">
Under certain conditions specified in the law, libraries and archives are
authorized to furnish a photocopy or other reproduction. One of these specified
conditions is that the photocopy or reproduction is not to be "used for any
purpose other than private study, scholarship, or research". If a user makes
a request for, or later uses, a photocopy or reproduction for purposes in
excess of "fair use", that user may be liable for copyright infringement.
</div>
<div class="mb-4">
This institution reserves the right to refuse to accept a copying order
if, in its judgment, fulfillment of the order would involve violation
of copyright law.
</div>
</div>
<h2 data-toggle="collapse" data-target="#faq"
title="Click to expand section">
Aeon FAQ (Frequently Asked Questions)
</h2>
<div id="faq" class="collapse">
<div class="mb-3">
Before registering, you may wish to read the Aeon
<a href="<#ACTION action='10' form='20'>">FAQ</a>.
The FAQ may answer other questions you have about the
Aeon Special Collections Management System.
</div>
<div class="mb-5">
By submitting this form you acknowledge and agree to all
of the terms and conditions above. Please pay particular
attention to the copyright statement and the Aeon FAQ.
After reading this information, you can fill out your personal
details and click the "Submit Information" button to continue.
</div>
</div>
<br>
To this:
<div class="atlas-accordion mb-3"> <!-- ← Added accordion wrapper -->
<h2 class="p-0">
<button class="btn btn-light h2 m-0" type="button"
data-toggle="collapse" data-target="#copyright"
title="Click to expand section" aria-expanded="false"
aria-controls="copyright"> <!-- ← Converted to accessible button -->
<span aria-hidden="true" class="fa fa-chevron-down px-2"></span>
<span>Important Copyright Information</span>
</button>
</h2>
<div id="copyright" class="collapse">
<div class="card-body"> <!-- ← Added card-body wrapper -->
<div class="mb-3">
WARNING CONCERNING COPYRIGHT RESTRICTIONS
</div>
<div class="mb-3">
The copyright law of the United States (Title 17, United States Code)
governs the making of photocopies or other reproductions of copyrighted materials.
</div>
<div class="mb-3">
Under certain conditions specified in the law, libraries and archives are
authorized to furnish a photocopy or other reproduction. One of these specified
conditions is that the photocopy or reproduction is not to be "used for any
purpose other than private study, scholarship, or research". If a user makes
a request for, or later uses, a photocopy or reproduction for purposes in
excess of "fair use", that user may be liable for copyright infringement.
</div>
<div class="mb-3"> <!-- ← Changed from mb-4 to mb-3 for consistency -->
This institution reserves the right to refuse to accept a copying order
if, in its judgment, fulfillment of the order would involve violation
of copyright law.
</div>
</div>
</div>
<h2 class="p-0">
<button class="btn btn-light h2 m-0" type="button"
data-toggle="collapse" data-target="#faq"
title="Click to expand section" aria-expanded="false"
aria-controls="faq"> <!-- ← Converted to accessible button -->
<span aria-hidden="true" class="fa fa-chevron-down px-2"></span>
<span>Aeon FAQ (Frequently Asked Questions)</span>
</button>
</h2>
<div id="faq" class="collapse">
<div class="card-body"> <!-- ← Added card-body wrapper -->
<div class="mb-3">
Before registering, you may wish to read the Aeon
<a href="<#ACTION action='10' form='20'>">FAQ</a>.
The FAQ may answer other questions you have about the
Aeon Special Collections Management System.
</div>
<div class="mb-3"> <!-- ← Changed from mb-5 to mb-3 for consistency -->
By submitting this form you acknowledge and agree to all
of the terms and conditions above. Please pay particular
attention to the copyright statement and the Aeon FAQ.
After reading this information, you can fill out your personal
details and click the "Submit Information" button to continue.
</div>
</div>
</div>
</div>
<br>
Fix Accessibility Issue with "Other" Dropdown Feature
To fix an accessibility issue with the "Other" dropdown javascript feature by removing the behavior where keyboard focus is automatically moved to the associated text field when the "Other" option is chosen from the dropdown, please download the latest default web pages and overwrite your js\atlasUtility.js file with the updated file.
js\atlasUtility.js
Please overwrite this file with the updated file.
Fix Site Map Issue
To fix an issue where empty hyperlinks are generated in the site map (SiteMap.html) if a hyperlinked image is added to the footer (include_footer.html), please download the latest default web pages and overwrite your js\buildSiteMap.js file with the updated file.
js\buildSiteMap.js
Please overwrite this file with the updated file.
Fix Issues with Boolean Checkbox Fields
To fix issues where Boolean checkbox fields configured on the web pages may not correctly load their values from the database and may not submit a value to the database when unchecked, please download the latest default web pages and overwrite your js\atlasUtility.js file with the updated file, then follow the additional instructions below to update the code for any custom Boolean fields you have implemented as checkboxes on your web pages (if present):
Note: If you have already updated your js\atlasUtility.js file following the instructions in the Fix Accessibility Issue with "Other" Dropdown Feature section above, you do not have to overwrite this file again.
js\atlasUtility.js
Please overwrite this file with the updated file.
Update Custom Boolean Checkbox Fields
If you have implemented any custom Boolean fields (i.e., fields configured in the CustomFieldDefinitions table in the Aeon Customization Manager with the Boolean data type) as checkbox fields on your web pages, please use the example below to update the code for each field's <input> element to remove the name attribute:
Example
Change this:
<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>
To this:
<div class="form-group col-md-5">
<label for="Newsletter">
<span class="<#ERROR name='ERRORCustomFields.Newsletter'>">
Sign up for newsletter?
</span>
</label>
<!-- ↓ Removed name attribute from input -->
<input type="checkbox" id="Newsletter"
class="checkbox-as-bool"
data-bool-fieldname="User.CustomFields.Newsletter"
<#CHECKED name="User.CustomFields.Newsletter">>
</div>
Adjust Button Styling for Electronic Delivery Datarows
The styling of the buttons contained within the DataRow_ElectronicDelivery.html file was modified to improve the responsive accessibility of these buttons and to make the styling consistent with other DataRows containing three or more buttons on the Aeon web interface. To implement these changes, please overwrite your templates\DataRow_ElectronicDelivery.html file with the updated file or make the following changes manually:
templates\DataRow_ElectronicDelivery.html
Change this (default line 14):
<div class="btn-group" role="group"
aria-label="Actions for Request <#DATAROW>">
To this:
<!-- ↓ Changed to large-btn-group -->
<div class="large-btn-group" role="group"
aria-label="Actions for Request <#DATAROW>">
Adjust Naming of Account Management-Related Web Page Features
The following updates were made to the Aeon default and feature-specific web pages to rename some of the account management-related features for clarity and to ensure naming consistency across the web pages:
- The My Profile dropdown in the navigation menu was renamed Account Info
- The option within the My Profile dropdown menu to navigate to the ChangeUserInformation.html page was changed from Change User Information to Update User Information
- The page title and page header on ChangeUserInformation.html were changed to Update User Information to match the new name for the navigation link
To implement these changes, please overwrite the files listed below with the new default files or make the following changes on each page manually:
Note: Files with the AppointmentScheduling prefix noted below are available in the feature-specific web page download. If you are downloading and overwriting your web page files with the new default/feature-specific web page files, ensure that the feature-specific version of the file is used (if one is available) if you are using appointment scheduling features in Aeon.
ChangeUserInformation.html
Change this (default line 5):
<title>Aeon - Change User Information</title>
To this:
<title>Aeon - Update User Information</title>
And change this (default line 20):
<h2>Change User Information</h2>
To this:
<h2>Update User Information</h2>
include_nav.html (default lines 60-64) or AppointmentScheduling\include_nav.html (default lines 65-69)
Change this:
<a class="nav-link dropdown-toggle" href="#"
id="navbarMyProfile" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<span aria-hidden="true" class="fas fa-user"></span> My Profile
</a>
<div class="dropdown-menu" aria-labelledby="navbarMyProfile">
<a class="dropdown-item" href="<#ACTION action='10' form='20'>">
<span aria-hidden="true" class="fas fa-user-edit"></span>
Change User Information
</a>
To this:
<a class="nav-link dropdown-toggle" href="#"
id="navbarAccountInfo" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<span aria-hidden="true" class="fas fa-user"></span> Account Info
</a>
<div class="dropdown-menu" aria-labelledby="navbarAccountInfo">
<a class="dropdown-item" href="<#ACTION action='10' form='20'>">
<span aria-hidden="true" class="fas fa-user-edit"></span>
Update User Information
</a>
Implement Layout and Style Improvements for Printed Pages
The following changes have been made to the layout and style used to format the Aeon default and feature-specific web pages when they are printed from the web browser to improve the readability of the printed material and to increase focus on essential information:
- The following elements are now hidden when the web page is printed:
- Action buttons (e.g., Edit, Cancel, etc.) on web pages containing transaction details
- Most buttons included in the DataRow template files (e.g., Details, Action, etc.)
- The "Skip to main content" link
- Web alerts
- Form controls on the search results web page
- The summary of charges will now appear before the list of orders when the ViewOrderEstimates.html, ViewOrderApprovals.html, and CreditCardPayment.html pages are printed
- Form fields are now formatted with a black border color and black text when printed to enhance color contrast
- Buttons and badges are now formatted with a white background color and black text when printed to enhance color contrast
- Set the font size used for body text on print layouts to 11pt
- Implemented missing print styling on theLogon.html web page so that this page is now properly formatted when printed
To implement these changes, please overwrite the files listed below with the new default files or make the following changes to each file manually:
css\print.css
Please overwrite this file with the updated file.
templates\DataRow_ReviewRequest.html
Change this (default lines 17-18):
<div class="col-lg-7 col-md-12 text-right">
<a class="btn btn-primary menuEdit <#DATAROW>"
href="<#DLL>?Action=20&Value=<#DATAROW>">
<span aria-hidden="true" class="far fa-edit"></span> Edit
</a>
To this:
<div class="col-lg-7 col-md-12 text-right">
<!-- ↓ Added button group wrapper -->
<div class="large-btn-group" role="group"
aria-label="Actions for Request <#DATAROW>">
<a class="btn btn-primary menuEdit <#DATAROW>"
href="<#DLL>?Action=20&Value=<#DATAROW>">
<span aria-hidden="true" class="far fa-edit"></span> Edit
</a>
And change this (default lines 30-34):
<a class="dropdown-item btn btn-light menuPhotoduplication <#DATAROW>"
href="aeon.dll?Action=23&Type=12&Value=<#DATAROW>">
<span aria-hidden="true" class="fas fa-share-square"></span>
Submit Request
</a>
</div></div></div></div>
To this:
<a class="dropdown-item btn btn-light menuPhotoduplication <#DATAROW>"
href="aeon.dll?Action=23&Type=12&Value=<#DATAROW>">
<span aria-hidden="true" class="fas fa-share-square"></span>
Submit Request
</a>
</div></div></div></div></div> <!-- ↓ Added closing div for button group -->
CreditCardPayment.html (default) or Sagepay\CreditCardPayment.html (feature-specific)
Note: If you are downloading and overwriting your web page files with the new default/feature-specific web page files, ensure that the feature-specific version of this file is used if you are using the Sage Pay payment provider with Aeon.
Change this (default line 12):
<div class="container">
<main id="content" aria-label="Content">
<div class="row ">
<div class="col-lg-9">
<h2 class="h3 py-0">Payment Details</h2>
To this:
<div class="container">
<main id="content" aria-label="Content">
<!-- ↓ Added payment-container class -->
<div class="row payment-container">
<div class="col-lg-9">
<h2 class="h3 py-0">Payment Details</h2>
include_head.html
Change this (default lines 8-10):
<link rel="stylesheet" href="css/aeon.css" >
<link rel="stylesheet" href="css/custom.css">
<link rel="stylesheet" href="css/print.css" media="print" />
To this:
<!-- ↓ Added media attribute -->
<link rel="stylesheet" href="css/aeon.css" media="screen">
<link rel="stylesheet" href="css/custom.css">
<!-- ↓ Removed trailing slash -->
<link rel="stylesheet" href="css/print.css" media="print">
Logon.html
Change this (default lines 14-16):
<link rel="stylesheet" href="css/aeon.css" >
<link rel="stylesheet" href="css/custom.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
crossorigin="anonymous">
To this:
<!-- ↓ Added media attribute -->
<link rel="stylesheet" href="css/aeon.css" media="screen">
<link rel="stylesheet" href="css/custom.css">
<!-- ↓ Added print stylesheet -->
<link rel="stylesheet" href="css/print.css" media="print">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
crossorigin="anonymous">
Add New Minified CSS and JavaScript Files
This release includes new minified versions of most default JavaScript and CSS files used in the Aeon default and feature-specific web pages. These files will have the extension .min.js or .min.css and will be present in thejs or css folder of the default and feature-specific web page downloads alongside the original un-minified version of each file. The new minified files help to optimize the performance of the Aeon web interface and may reduce page load times for users.
To ensure that your web pages use the new minified files after you have added them to your Aeon web directory, you will need to replace several additional web page files listed below with the updated default files, or manually edit each file to ensure each file points to the new minified JavaScript and CSS files in your web directory. To implement these changes, follow the instructions below:
First, download the latest default & feature-specific web pages and add the following new files to your web directory in the specified folders (each file is present in the default web page download unless otherwise specified):
- Add these files to the cssfolder:
- css\aeon.min.css
- css\print.min.css
- Add these files to the jsfolder:
- js\lang\en-US.min.js
- Note: This file is located within thelang subfolder
- js\ArchivalRequest.min.js
- js\atlasUtility.min.js
- js\billingAccountsOptionHandler.min.js
- js\billingContextOptionHandler.min.js
- js\buildSiteMap.min.js
- js\duplicationPermissionToggle.min.js
- js\EADRequest.min.js
- js\KeepInReview.min.js
- js\scheduled-date.min.js
- js\schedule-review-toggle.min.js
- js\search.min.js
- js\switchRequestForm.min.js
- js\webAlerts.min.js
- AppointmentScheduling\js\appointments.min.js (note: this file is included in the feature-specific web page download and is used with appointment scheduling features)
- js\lang\en-US.min.js
Then, overwrite the following file in your web directory with the updated file:
- Overwrite the following file with the updated file in yourjsfolder:
- js\datepicker.min.js
Finally, update each web page file listed below with the updated file or follow the instructions for each file below to implement the required changes manually in the code:
Note: Files with the AppointmentScheduling prefix noted below are available in the feature-specific web page download. If you are downloading and overwriting your web page files with the new default/feature-specific web page files, ensure that the feature-specific version of the file is used (if one is available) if you are using appointment scheduling features in Aeon.
ArchivalRequest.html
Change this (default lines 7-8):
<script type="text/javascript" src="js/ArchivalRequest.js"></script>
<script type="text/javascript" src="js/duplicationPermissionToggle.js"></script>
To this:
<!-- ↓ Using minified version -->
<script type="text/javascript" src="js/ArchivalRequest.min.js"></script>
<!-- ↓ Using minified version -->
<script type="text/javascript" src="js/duplicationPermissionToggle.min.js"></script>
EADRequest.html (default) or AppointmentScheduling\EADRequest.html (feature-specific)
Change this (default line 11):
<script type="text/javascript" src="js/EADRequest.js"></script>
To this:
<!-- ↓ Using minified version -->
<script type="text/javascript" src="js/EADRequest.min.js"></script>
Multiple web page files:
Change this:
<script type="text/javascript" src="js/billingContextOptionHandler.js"></script>
<script type="text/javascript" src="js/billingAccountsOptionHandler.js"></script>
To this:
<!-- ↓ Using minified version -->
<script type="text/javascript" src="js/billingContextOptionHandler.min.js"></script>
<!-- ↓ Using minified version -->
<script type="text/javascript" src="js/billingAccountsOptionHandler.min.js"></script>
On the following web page files at the specified default lines:
- EditGenericRequestManuscriptPhotodup.html (default lines 147-148)
- EditGenericRequestMonographPhotodup.html (default lines 183-184)
- EditPhotoduplicationRequest.html (default lines 202-203)
- GenericRequestManuscriptPhotodup.html (default lines 154-155)
- GenericRequestMonographPhotodup.html (default lines 190-191)
- include_photodup_toggle_enabled.html [default] (default lines 43-44) or AppointmentScheduling\include_photodup_toggle_enabled.html [feature-specific] (default lines 31-32)
- PhotoduplicationRequest.html (default lines 190-191)
include_head.html
Note: The changes shown below assume you have already put into place the additional changes to this file documented in the previous Implement Layout and Style Improvements for Printed Pages section above.
Change this (default lines 8-10):
<link rel="stylesheet" href="css/aeon.css" media="screen">
<link rel="stylesheet" href="css/custom.css">
<link rel="stylesheet" href="css/print.css" media="print">
To this:
<!-- ↓ Using minified version -->
<link rel="stylesheet" href="css/aeon.min.css" media="screen">
<link rel="stylesheet" href="css/custom.css">
<!-- ↓ Using minified version -->
<link rel="stylesheet" href="css/print.min.css" media="print">
Then change this (default line 20):
<script src="js/atlasUtility.js"></script>
To this:
<!-- ↓ Using minified version -->
<script src="js/atlasUtility.min.js"></script>
Finally, change this (default line 24):
<script src="js/webAlerts.js"></script>
To this:
<!-- ↓ Using minified version -->
<script src="js/webAlerts.min.js"></script>
include_head_request.html
Change this (default lines 1-5):
<script type="text/javascript" src="js/schedule-review-toggle.js"></script>
<script type="text/javascript" src="js/switchRequestForm.js"></script>
<script type="text/javascript" src="js/lang/en-US.js"></script>
<script type="text/javascript" src="js/datepicker.min.js"></script>
<script type="text/javascript" src="js/scheduled-date.js"></script>
To this:
<!-- ↓ Using minified version -->
<script type="text/javascript" src="js/schedule-review-toggle.min.js"></script>
<!-- ↓ Using minified version -->
<script type="text/javascript" src="js/switchRequestForm.min.js"></script>
<!-- ↓ Using minified version -->
<script type="text/javascript" src="js/lang/en-US.min.js"></script>
<script type="text/javascript" src="js/datepicker.min.js"></script>
<!-- ↓ Using minified version -->
<script type="text/javascript" src="js/scheduled-date.min.js"></script>
Logon.html
Note: The changes shown below assume you have already put into place the additional changes to this file documented in the previous Implement Layout and Style Improvements for Printed Pages section above.
Change this (default line 14):
<link rel="stylesheet" href="css/aeon.css" media="screen">
To this:
<!-- ↓ Using minified version -->
<link rel="stylesheet" href="css/aeon.min.css" media="screen">
Change this (default line 16):
<link rel="stylesheet" href="css/print.css" media="print">
To this:
<!-- ↓ Using minified version -->
<link rel="stylesheet" href="css/print.min.css" media="print">
Finally, change this (default line 91):
<script src="js/webAlerts.js"></script>
To this:
<!-- ↓ Using minified version -->
<script src="js/webAlerts.min.js"></script>
SiteMap.html
Change this (default line 6):
<script src="js/buildSiteMap.js"></script>
To this:
<!-- ↓ Using minified version -->
<script src="js/buildSiteMap.min.js"></script>
ViewSearchResults.html
Change this (default line 7):
<script type="text/javascript" src="js/search.js"></script>
To this:
<!-- ↓ Using minified version -->
<script type="text/javascript" src="js/search.min.js"></script>
ViewUserReviewRequests.html (default) or AppointmentScheduling\ViewUserReviewRequests.html (feature-specific)
Change this (default line 8):
<script type="text/javascript" src="js/KeepInReview.js"></script>
To this:
<!-- ↓ Using minified version -->
<script type="text/javascript" src="js/KeepInReview.min.js"></script>
AppointmentScheduling\include_appointment_scripts.html
Change this (default lines 1-3):
<script type="text/javascript" src="js/lang/en-US.js"></script>
<script type="text/javascript" src="js/datepicker.min.js"></script>
<script type="text/javascript" src="js/appointments.js"></script>
To this:
<!-- ↓ Using minified version -->
<script type="text/javascript" src="js/lang/en-US.min.js"></script>
<script type="text/javascript" src="js/datepicker.min.js"></script>
<!-- ↓ Using minified version -->
<script type="text/javascript" src="js/appointments.min.js"></script>
November 10, 2025 Point Release (Default & Feature-Specific Web Pages)
Update Bootstrap to v5.3 | Update Moment.js Libraries | Add Atlas Copyright Include File | Add Autocomplete Attributes to Form Fields | Better Support for Removing Appointment Scheduler | Fix State Field on Sage Pay Credit Card Payment Form
Update Bootstrap to v5.3
Bootstrap has been updated from version 4.3.1 to version 5.3 for security purposes. Due to the extensive nature of these changes, it is strongly recommended to download the latest default and feature-specific web pages and overwrite the following files with the updated versions:
Files to overwrite:
- css\aeon.css
- css\aeon.min.css
- css\print.css
- css\print.min.css
- All .js files
- All .min.js files
Additionally, the following new files must be added:
- js\bootstrap.bundle.min.js (Bootstrap 5.3 library)
- js\bootstrap.bundle.min.js.map
Files to remove:
- js\popper.min.js (no longer needed - Popper.js is now bundled with Bootstrap)
The accessibility and usability improvements described below are automatically included when you overwrite the files listed above with the latest versions from the default web pages download.
Important: Bootstrap 5 includes significant class name changes and structural updates. If you have custom CSS or JavaScript that relies on Bootstrap 4 classes or behavior, you may need to update your customizations.
For a quick reference of the most common Bootstrap 5 changes in Aeon, see our Bootstrap 5 Migration Guide. For comprehensive details, consult the official Bootstrap 5 migration guide.
Additional Improvements Included:
The Bootstrap 5 upgrade also includes several accessibility and usability improvements to JavaScript and CSS files:
Accessibility Enhancements:
- Datepicker Calendar: Added ARIA roles (
role="grid",role="button") andaria-disabledstates to calendar navigation controls for improved screen reader support - Day of Week Announcements: Standardized datepicker to announce only the full day name for screen readers
- Disabled Dates: Improved how unavailable/disabled dates are communicated to screen readers with updated help text on appointment scheduling pages
- Appointment Focus: Fixed keyboard focus behavior after creating appointments
- Semantic List Structures: Pages displaying collections of data rows (requests, activities, appointments) now use proper HTML list elements (
<ul>,<li>) to communicate visual relationships programmatically to screen readers - Logon Page Navigation: Added
role="navigation"to account-related link containers on Logon.html and Logon2.html for proper screen reader identification
Files affected by these improvements:
- js/datepicker.js, js/datepicker.min.js
- js/lang/en-US.js, js/lang/en-US.min.js
- AppointmentScheduling/js/appointments.js, AppointmentScheduling/js/appointments.min.js
- Logon.html, Logon2.html
- Multiple DataRow template files
- AppointmentScheduling pages (EditAppointment.html, ViewAppointments.html, etc.)
Update Moment.js Libraries
To upgrade the Moment.js and Moment-timezone JavaScript libraries to v2.30.1 and v0.6.0 respectively, and to change from CDN-hosted scripts to locally-hosted scripts for security purposes, please download the latest default web pages and make the following changes:
Files to add:
- js\moment-with-locales.min.js (new file)
- js\moment-timezone-with-data.min.js (new file)
include_head.html
Change this (default lines vary by version):
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.31/moment-timezone-with-data.min.js"></script>
To this:
<!-- CHANGES: Updated to use locally-hosted Moment.js libraries for security -->
<!-- Changed from CDN to local file ↓ -->
<script src="js/moment-with-locales.min.js"></script>
<!-- Changed from CDN to local file ↓ -->
<script src="js/moment-timezone-with-data.min.js"></script>
<!-- Updated to v2.30.1 (Moment.js) and v0.6.0 (Moment-timezone) -->
Note: For .js and minified files (.min.css and .min.js), copy the latest version from the Aeon defaults and overwrite.
Add Atlas Copyright Include File
The Atlas copyright line in Aeon web pages has been centralized to a separate include file. Previously, most pages used a <#COPYRIGHT> tag that displayed a copyright year based on the DLL version. Since web pages are released more frequently than web DLL updates, the copyright year now reflects the web page release date.
Files to add:
- include_copyright.html (new file)
Please download the latest default web pages and add the new include_copyright.html file, then update the following files:
include_footer.html
Change this (default lines vary by version):
<div class="text-center">© <#COPYRIGHT></div>
To this:
<!-- CHANGES: Replaced <#COPYRIGHT> tag with include file -->
<#INCLUDE filename="include_copyright.html">
<!-- ↑ Centralized copyright to separate include file for easier maintenance -->
include_footer_request.html
Change this (default lines vary by version):
<div class="text-center">© <#COPYRIGHT></div>
To this:
<!-- CHANGES: Replaced <#COPYRIGHT> tag with include file -->
<#INCLUDE filename="include_copyright.html">
<!-- ↑ Centralized copyright to separate include file for easier maintenance -->
Logon.html
Note: The Logon.html page does not support the include file system and must be updated manually.
Change this (default lines vary by version):
<div class="text-center">© <#COPYRIGHT></div>
To this:
<!-- CHANGES: Updated copyright year to 2025 and changed HTTP to HTTPS -->
<div class="text-center">
© 2001-2025
<a href="https://www.atlas-sys.com"
target="_blank"
rel="noopener noreferrer">Atlas Systems, Inc.</a>
All Rights Reserved.
</div>
<!-- Changed to hardcoded copyright with current year and secure HTTPS link -->
Add Autocomplete Attributes to Form Fields
Autocomplete attributes have been added to form fields throughout the web pages for improved accessibility. Fields on registration and user information forms now have explicit autocomplete values to help users complete forms more easily.
Note: These autocomplete attributes reflect the default purpose of the form fields. If you have customized any fields to serve a different purpose, you may need to adjust the autocomplete value accordingly. More information on accessibility-related autocomplete values can be found at the WCAG website and general information on autocomplete at MDN.
ChangeUserInformation.html
Change this (default line 35):
<input type="text" class="form-control" name="FirstName" id="FirstName"
value="<#PARAM name='FirstName'>" required>
To this:
<!-- CHANGES: Added autocomplete attribute for accessibility -->
<input type="text" class="form-control" name="FirstName" id="FirstName"
value="<#PARAM name='FirstName'>" autocomplete="given-name" required>
<!-- Added autocomplete="given-name" -->
Change this (default line 45):
<input type="text" class="form-control" name="LastName" id="LastName"
value="<#PARAM name='LastName'>" required>
To this:
<!-- CHANGES: Added autocomplete attribute for accessibility -->
<input type="text" class="form-control" name="LastName" id="LastName"
value="<#PARAM name='LastName'>" autocomplete="family-name" required>
<!-- Added autocomplete="family-name" -->
Change this (default line 74):
<input type="text" class="form-control" name="Phone" id="Phone"
value="<#PARAM name='Phone'>" required>
To this:
<!-- CHANGES: Added autocomplete attribute for accessibility -->
<input type="text" class="form-control" name="Phone" id="Phone"
value="<#PARAM name='Phone'>" autocomplete="tel" required>
<!-- Added autocomplete="tel" -->
Change this:
<input type="text" class="form-control" name="Organization" id="Organization"
value="<#PARAM name='Organization'>">
To this:
<!-- CHANGES: Added autocomplete attribute for accessibility -->
<input type="text" class="form-control" name="Organization" id="Organization"
value="<#PARAM name='Organization'>" autocomplete="organization">
<!-- Added autocomplete="organization" -->
Change this:
<input type="text" class="form-control" name="Address" id="Address"
value="<#PARAM name='Address'>" required>
To this:
<!-- CHANGES: Added autocomplete attribute for accessibility -->
<input type="text" class="form-control" name="Address" id="Address"
value="<#PARAM name='Address'>" autocomplete="address-line1" required>
<!-- Added autocomplete="address-line1" -->
Change this:
<input type="text" class="form-control" name="Address2" id="Address2"
value="<#PARAM name='Address2'>">
To this:
<!-- CHANGES: Added autocomplete attribute for accessibility -->
<input type="text" class="form-control" name="Address2" id="Address2"
value="<#PARAM name='Address2'>" autocomplete="address-line2">
<!-- Added autocomplete="address-line2" -->
Change this:
<input type="text" class="form-control" name="City" id="City"
value="<#PARAM name='City'>" required>
To this:
<!-- CHANGES: Added autocomplete attribute for accessibility -->
<input type="text" class="form-control" name="City" id="City"
value="<#PARAM name='City'>" autocomplete="address-level2" required>
<!-- Added autocomplete="address-level2" -->
Change this:
<select class="custom-select mr-sm-2" name="State" id="State" required>
To this:
<!-- CHANGES: Added autocomplete attribute for accessibility -->
<select class="custom-select mr-sm-2" name="State" id="State"
autocomplete="address-level1" required>
<!-- Added autocomplete="address-level1" -->
Change this:
<input type="text" class="form-control" name="Zip" id="Zip"
value="<#PARAM name='Zip'>" required>
To this:
<!-- CHANGES: Added autocomplete attribute for accessibility -->
<input type="text" class="form-control" name="Zip" id="Zip"
value="<#PARAM name='Zip'>" autocomplete="postal-code" required>
<!-- Added autocomplete="postal-code" -->
Change this:
<select class="custom-select mr-sm-2" name="Country" id="Country" required>
To this:
<!-- CHANGES: Added autocomplete attribute for accessibility -->
<select class="custom-select mr-sm-2" name="Country" id="Country"
autocomplete="country-name" required>
<!-- Added autocomplete="country-name" -->
Change this:
<input type="text" class="form-control" name="SAddress" id="SAddress"
value="<#PARAM name='SAddress'>">
To this:
<!-- CHANGES: Added autocomplete attribute for secondary address accessibility -->
<input type="text" class="form-control" name="SAddress" id="SAddress"
value="<#PARAM name='SAddress'>"
autocomplete="section-alt address-line1">
<!-- Added autocomplete="section-alt address-line1" for secondary address -->
Change this:
<input type="text" class="form-control" name="SAddress2" id="SAddress2"
value="<#PARAM name='SAddress2'>">
To this:
<!-- CHANGES: Added autocomplete attribute for secondary address accessibility -->
<input type="text" class="form-control" name="SAddress2" id="SAddress2"
value="<#PARAM name='SAddress2'>"
autocomplete="section-alt address-line2">
<!-- Added autocomplete="section-alt address-line2" for secondary address -->
Change this:
<input type="text" class="form-control" name="SCity" id="SCity"
value="<#PARAM name='SCity'>">
To this:
<!-- CHANGES: Added autocomplete attribute for secondary address accessibility -->
<input type="text" class="form-control" name="SCity" id="SCity"
value="<#PARAM name='SCity'>"
autocomplete="section-alt address-level2">
<!-- Added autocomplete="section-alt address-level2" for secondary city -->
Change this:
<select class="custom-select mr-sm-2" name="SState" id="SState">
To this:
<!-- CHANGES: Added autocomplete attribute for secondary address accessibility -->
<select class="custom-select mr-sm-2" name="SState" id="SState"
autocomplete="section-alt address-level1">
<!-- Added autocomplete="section-alt address-level1" for secondary state -->
Change this:
<input type="text" class="form-control" name="SZip" id="SZip"
value="<#PARAM name='SZip'>">
To this:
<!-- CHANGES: Added autocomplete attribute for secondary address accessibility -->
<input type="text" class="form-control" name="SZip" id="SZip"
value="<#PARAM name='SZip'>"
autocomplete="section-alt postal-code">
<!-- Added autocomplete="section-alt postal-code" for secondary zip -->
Change this:
<select class="custom-select mr-sm-2" name="SCountry" id="SCountry">
To this:
<!-- CHANGES: Added autocomplete attribute for secondary address accessibility -->
<select class="custom-select mr-sm-2" name="SCountry" id="SCountry"
autocomplete="section-alt country-name">
<!-- Added autocomplete="section-alt country-name" for secondary country -->
Note: The secondary address fields (S-prefixed) use section-alt as part of the autocomplete value to distinguish them from the primary address fields. This allows browsers to properly autofill both primary and secondary addresses separately.
ExpiredUsers.html
Apply the same autocomplete attribute changes as shown above for ChangeUserInformation.html to the corresponding fields in ExpiredUsers.html.
NewAuthRegistration.html
Apply the same autocomplete attribute changes as shown above for ChangeUserInformation.html to the corresponding fields in NewAuthRegistration.html.
NewUserRegistration.html
Apply the same autocomplete attribute changes as shown above for ChangeUserInformation.html to the corresponding fields in NewUserRegistration.html.
ForgotPassword.html
Change this (default line varies by version):
<input type="text" class="form-control" name="Username" id="Username" required>
To this:
<!-- CHANGES: Added autocomplete="off" for security -->
<input type="text" class="form-control" name="Username" id="Username"
autocomplete="off" required>
<!-- Added autocomplete="off" for username field security -->
Logon.html
Change this (default line varies by version):
<input type="text" class="form-control" name="Username" id="Username"
tabindex="1" required>
To this:
<!-- CHANGES: Added autocomplete="off" for security -->
<input type="text" class="form-control" name="Username" id="Username"
tabindex="1" autocomplete="off" required>
<!-- Added autocomplete="off" for username field security -->
Note: Only the Username field was modified on this page. The Password field already had the autocomplete attribute.
Note: For Logon.html, ignore any differences in the <meta> tag when comparing files. Only the autocomplete code changes shown above are relevant.
Logon2.html
Apply the same username autocomplete="off" change as shown above for Logon.html to the corresponding field in Logon2.html. The Password field already had the autocomplete attribute.
Sagepay\CreditCardPayment.html
Add autocomplete="off" to all billing-related fields:
Find each of the following fields and add autocomplete="off" to the input or select element:
- AddressSelection
- BillingFirstnames
- BillingSurname
- BillingAddress1
- BillingAddress2
- BillingCity
- BillingState
- BillingCountry
- BillingPostCode
- BillingPhone
- BillingEmail
Example for BillingFirstnames field:
Change this:
<input type="text" class="form-control" name="BillingFirstnames" id="BillingFirstnames"
required>
To this:
<!-- CHANGES: Added autocomplete="off" for billing field security -->
<input type="text" class="form-control" name="BillingFirstnames" id="BillingFirstnames"
autocomplete="off" required>
<!-- Added autocomplete="off" for billing security -->
Apply this same pattern to all billing fields listed above.
Better Support for Removing Appointment Scheduler
Better support was added for optionally removing the Appointment Scheduler controls on the View Appointments page (ViewAppointments.html). Previously, a JavaScript console error would result if the appointment fields and/or the New Appointment button were removed on that page.
To implement this fix, please download the latest feature-specific web pages and overwrite the following files with the updated versions:
AppointmentScheduling\js\appointments.js AppointmentScheduling\js\appointments.min.js
Note: For .js and minified files (.min.css and .min.js), copy the latest version from the Aeon defaults and overwrite.
Fix State Field on Sage Pay Credit Card Payment Form
The State field was fixed on the Sage Pay version of the CreditCardPayment.html form to correctly show itself if the United States is selected in the Country dropdown field.
To implement this fix, please download the latest feature-specific web pages and overwrite your Sagepay\CreditCardPayment.html file with the updated file or make the following changes manually:
Sagepay\CreditCardPayment.html
Change this (default line 121):
<div class="form-group col-md-4 d-none">
To this:
<!-- CHANGES: Removed d-none class and added id for JavaScript visibility control -->
<div id="BillingStateLabel" class="form-group col-md-4">
<!-- ↑ Added id="BillingStateLabel" and removed d-none to allow dynamic visibility -->
Change this (default line 127):
<select class="custom-select mr-sm-2" id="BillingState" name="BillingState" size="1">
To this:
<!-- CHANGES: Added autocomplete="off" for billing field security -->
<select class="custom-select mr-sm-2" id="BillingState" name="BillingState" size="1" autocomplete="off">
<!-- ↑ Added autocomplete="off" -->
Change this (default line 139):
<select class="custom-select mr-sm-2" id="BillingCountry" name="BillingCountry" size="1" title="Selecting a country will dynamically show or hide the state address field." onchange="setStateVisibility();" required>
To this:
<!-- CHANGES: Added autocomplete="off" for billing field security -->
<select class="custom-select mr-sm-2" id="BillingCountry" name="BillingCountry" size="1" title="Selecting a country will dynamically show or hide the state address field." onchange="setStateVisibility();" autocomplete="off" required>
<!-- ↑ Added autocomplete="off" -->
Note: The JavaScript function setStateVisibility() uses jQuery's .show() and .hide() methods to control the visibility of the #BillingStateLabel element based on the selected country. This fix removes the hardcoded d-none class that was preventing the State field from displaying.