Implementing Aeon 5.2 Web Page Release Changes
The release of Aeon 5.2 comes with several changes to the default web pages. To implement these changes, you can either:
- Download the 5.2 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.
- 5.2 Major Release (Appointment Scheduling Pages)
- 5.2 Major Release (Default Web Pages)
- July 6, 2023 Point Release (Default & Feature-Specific Web Pages)
- October 16, 2023 Point Release (Default & Feature-Specific Web Pages)
- March 18, 2024 Point Release (Default & Feature-Specific Web Pages)
- April 4, 2024 Point Release (Default & Feature-Specific Web Pages)
- July 3, 2024 Point Release (Default & Feature-Specific Web Pages)
5.2 Major Release (Appointment Scheduling Pages)
The Appointment Scheduling web pages have been significantly overhauled in Aeon 5.2. Please follow the instructions below to update your 5.1 Appointment Scheduling web pages to the new Appointment Scheduling web pages available for 5.2.
Minimum Server Requirement
You must be on Aeon Server v5.2.4 or later to implement the web page changes listed below.
Please ensure that you have followed the directions to add the ReadingRoomID field to the WebValidation table for your request forms and Saved Requests page before implementing the new web pages.
In addition to the changes noted below, the Aeon 5.2 Appointment Scheduling web pages also include new feature-specific DefaultRequest.html, GenericRequestManuscript.html, GenericRequestMonograph.html, and GenericRequestSerial.html files and their corresponding Edit files. These files differ from their default versions in that the appointment scheduling fields are included by default in place of the scheduled date fields in order to ease the appointment scheduling web page implementation process. These files do not need to be updated if you have already implemented the appointment scheduling fields on your request forms.
Files to Remove | Files to Add | Files to Overwrite | Files to Overwrite or Modify | Updating the EAD Request Form
Files to Remove
The following files should be removed from the Aeon web directory:
- CSS folder:
- css/icons/dxicons.ttf
- css/icons/dxicons.woff
- css/icons/dxicons.woff2
- css/appointments.css
- css/dx.common.css
- css/dx.light.css
- JS folder:
- js/dx.all.js
Files to Add
The following files are new in Aeon 5.2 and should be added to your web directory. Please download the latest default and feature-specific web pages for Aeon 5.2 and add the new files:
-
Feature-Specific Web Pages (AppointmentScheduling folder):
- include_appointment_info_ead.html
- include_appointment_info_no_site.html
- include_photodup_toggle_disabled.html
- include_photodup_toggle_enabled.html
-
Default Web Pages:
- ArchivalRequest.html
- include_photoduplication_archival_request.html
- Templates folder:
- templates\DataRow_ArchivalRequestContainer.html
- CSS folder:
- css\images\fa-calendar.svg
Note: This file should be added to the images subfolder inside the CSS folder - css\datepicker.min.css - JS folder: - Copy over the entire 'lang' subfolder containing: - js\lang\en-US.js - js\ArchivalRequest.js - js\datepicker.min.js
Files to Overwrite
The following files have been substantially updated in Aeon 5.2. Please download the latest default and feature-specific web pages and overwrite these files with the updated files:
- include_appointment_info.html
- include_appointment_scripts.html
- EditAppointment.html
- ViewAppointments.html
If you have made customizations to your ViewAppointments.html file that you do not want to lose, please move your customizations to the new 5.2 file before copying the file to your web directory.
- CSS folder:
- css\cookieconsent.min.css*
- JS folder:
- js\appointment.js
- js\atlasCookieConsent.js*
- js\atlasUtility.js*
- js\billingAccountsOptionHandler.js*
- js\billingContextOptionHandler.js*
- js\cookieconsent.min.js*
- js\duplicationPermissionToggle.js*
- js\KeepInReview.js*
- js\scheduled-date.js*
*Included in the 5.2 Default Web Pages download
Files to Overwrite or Modify
It is strongly recommended to also overwrite the following web page files with the new updated files released for Aeon 5.2. However, if any of these files have been extensively modified for your institution, then the required code changes for each file can be made manually to your existing files following the instructions in the expandable section below:
- include_head.html*
- include_head_request.html*
- ViewAppointment.html
- CSS folder:
- css\aeon.css*
- Templates folder:
- templates\DataRow_DefaultAppointment.html
*Included in the 5.2 Default Web Pages download
Click to view manual update instructions
css\aeon.css
Change this (default lines 321-330):
/*Caution: Changing form field border color can affect accessibility
For more information see WCAG 1.4.11*/
.form-control,
.form-control:focus,
.custom-select,
.custom-select:focus,
.custom-control .custom-control-label::before,
.custom-control-input:focus:not(:checked)~.custom-control-label::before {
border-color: #757575;
}
To this:
/*Caution: Changing form field border color can affect accessibility
For more information see WCAG 1.4.11*/
.form-control,
.form-control:focus,
.custom-select,
.custom-select:focus,
.custom-control .custom-control-label::before,
.custom-control-input:focus:not(:checked)~.custom-control-label::before,
.control-group { /* ← Added .control-group selector */
border-color: #757575;
}
Then add this code to the end of the aeon.css file if not already present:
/* Cookie Consent Styling */
.theme_atlas {
--cc-bg: #333333;
--cc-text: #fff;
--cc-btn-primary-bg: #08415c;
--cc-btn-primary-text: #fff;
}
.theme_atlas .cc_div a,
.theme_atlas .cc_div .cc-link {
border-color: #d6d6d6;
color: #d6d6d6;
}
.theme_atlas .cc_div #c-txt {
color: var(--cc-text);
}
.theme_atlas .c-bn,
.theme_atlas .c-bn:hover {
border: 1px solid #79818B;
}
Then add this code to the end of the aeon.css file:
/* Datepicker styling */
.date-picker-control,
.date-picker-control:link,
.date-picker-control:visited {
background-image: url("images/fa-calendar.svg");
background-position: 0,0;
}
.date-picker {
font-family: 'Open Sans', sans-serif;
color: #08415c;
}
.date-picker .date-picker-today,
.oldie .date-picker .date-picker-today {
background-image: none;
background: #fff;
}
.date-picker .day-disabled {
background-image: none;
color: #555;
background-color: #e6e6e6;
}
.day-disabled .date-picker-hover {
color: #555;
}
.date-picker table {
border-color: #000;
border-radius: .25rem;
background-image: none;
}
.date-picker td {
background-image: none;
border-color: #919191;
text-shadow: none;
}
.date-picker .date-picker-unused {
background-color: #fcfcfc;
background-image: none;
}
.btn-primary-append {
margin: 0;
}
.btn-secondary-append {
margin-top: 0;
}
.date-picker .date-picker-highlight {
color: #333;
}
.date-picker .date-picker-hover {
text-shadow: none;
background: #c9e7e9;
color: #415A76;
border-color: #000;
}
.date-picker .date-picker-hover.day-disabled {
background-image: none;
background-color: #e6e6e6;
}
.date-picker-focus .date-picker-hover {
animation: none;
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
-o-animation: none;
}
.btn-outline-secondary {
color: #000;
}
.date-picker-button-active span,
.date-picker-control:hover span {
box-shadow: none;
}
.validation-message {
font-style: italic;
}
@media (max-width: 767.98px) {
.mx-w-100 {
width: 100% !important;
}
}
include_head_request.html
Add this code to the end of the file:
<script type="text/javascript" src="js/lang/en-US.js"></script>
<script type="text/javascript" src="js/datepicker.min.js"></script>
include_head.html
Change this (default lines 7-12):
<link rel="stylesheet" href="css/aeon.css">
<link rel="stylesheet" href="css/custom.css">
<link rel="stylesheet" href="css/print.css" media="print" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"
integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/cookieconsent.min.css" />
To this:
<link rel="stylesheet" type="text/css" href="css/datepicker.min.css"/> <!-- ← Added datepicker CSS -->
<link rel="stylesheet" href="css/aeon.css">
<link rel="stylesheet" href="css/custom.css">
<link rel="stylesheet" href="css/print.css" media="print" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"
integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/cookieconsent.min.css" />
templates\DataRow_DefaultAppointment.html
Change this (default lines 6-10):
<h4 class="card-title">
<a href="aeon.dll?&Action=10&Form=95&Value=<#DATAROW>"><#DATAROW></a>
</h4>
<div class="h5 card-subtitle text-muted"><#DATAROW></div>
To this:
<h4 class="card-title">
<a href="aeon.dll?&Action=10&Form=95&Value=<#DATAROW>"><#DATAROW></a>
</h4>
<div class="h5 card-subtitle text-muted"><#DATAROW></div>
<span class="field text-muted">Status
<span class="field-value font-weight-bold ml-1"><#DATAROW></span> <!-- ← Added status display -->
</span>
And change this (default line 27):
<div class="dropdown-menu "
data-noaction-message="You are not able to perform any actions for this appointment"
aria-labelledby="btnGroupDrop<#DATAROW>">
To this:
<!-- ↓ Added dropdown-menu-right class -->
<div class="dropdown-menu dropdown-menu-right"
data-noaction-message="You are not able to perform any actions for this appointment"
aria-labelledby="btnGroupDrop<#DATAROW>">
ViewAppointment.html
Change this (default lines 66-75):
<div class="field list-group-item">
<div class="d-flex justify-content-between">
<span class="transaction-label">Stop Time</span>
<strong>
<span class="field-value mr-1" data-formatOnly="true"
data-formatString="LLL" data-servertime="<#APPOINTMENT>">
<#APPOINTMENT>
</span>
</strong>
</div>
</div>
</div>
</div>
To this:
<div class="field list-group-item">
<div class="d-flex justify-content-between">
<span class="transaction-label">Stop Time</span>
<strong>
<span class="field-value mr-1" data-formatOnly="true"
data-formatString="LLL" data-servertime="<#APPOINTMENT>">
<#APPOINTMENT>
</span>
</strong>
</div>
</div>
<!-- ↓ Added appointment status field -->
<div class="field list-group-item">
<div class="d-flex justify-content-between">
<span class="transaction-label">Appointment Status</span>
<strong>
<span class="field-value mr-1"><#APPOINTMENT></span>
</strong>
</div>
</div>
</div>
</div>
Updating the EAD Request Form
The EAD Request form (EADRequest.html) has been updated with the new appointment scheduling fields and functionality. This file should be updated differently based on how the 5.1 appointment scheduling fields were implemented on this form.
Update Instructions for Appointment Scheduling Fields Implemented via Include File
If appointment scheduling fields were added to your EAD Request form via a link to an "include_appointment_info_ead.html" include file, please follow the instructions below to update your include_appointment_info_ead.html file:
- Download the latest feature-specific appointment scheduling pages from the Aeon Downloads page
- Overwrite your existing include_appointment_info_ead.html field with the updated file
If you have used a different name for this file, please delete the old file and replace it with the updated include_appointment_info_ead.html file, then update the line of code used to link to the include file on EADRequest.html with the new filename (see step 3)
-
Check to ensure that your EADRequest.html uses the following code to link to the new include file:
<#INCLUDE filename="include_appointment_info_ead.html">
Update Instructions for Hardcoded Appointment Scheduling Fields
If your EAD Request form contains hardcoded appointment scheduling fields (i.e., the code for those fields is directly within EADRequest.html and are not in an include_appointment_info_ead.html file), please follow the instructions below to remove the old fields and implement the new fields using the new include_appointment_info_ead.html file:
-
Locate the hardcoded appointment scheduling fields within EADRequest.html: Request For (RequestLink),Site,Reading Room (ReadingRoomID),Appointment (AppointmentID)
-
Delete the code for the hardcoded fields and replace it with the following line of code:
<#INCLUDE filename="include_appointment_info_ead.html">
WebValidation Table Updates for EADRequest.html
Follow the steps in the documentation to ensure that the ReadingRoomID field has been added to the WebValidation table for EADRequest.html. Additionally, if you had added a rule to the WebValidation table in the Aeon Customization Manager to require the Appointment field (AppointmentID) on EADRequest.form in Aeon 5.1, delete this rule. This rule is no longer necessary to properly enforce the appointment requirement on EADRequest.html in Aeon 5.2.
5.2 Major Release (Default Web Pages)
New Accessible Scheduled Date Calendar | Fix Issue with Fields Hidden by Toggle Options on Request Forms | Remove Hidden Username Inputs and <div> Tags | Fix Field Value Persistence for Safari Browser | Remove 'Required' Attribute from EditEADRequest.html | Update FAQ | Add Missing 'type' Attribute to Buttons | Improve Color Contrast for Buttons and Dropdown Menu Options | Fix Broken Web Alert Attribute | Remove Broken Attribute on ChangePassword.html | Adjust Color for Hyperlinks in Cookie Banner | Adjust Label Color for Form Fields Failing Validation | Adjust Formatting for Search Box | Improve Transaction Menu Responsiveness | Realign Actions Menu Dropdown Options | Fix Text Responsiveness Issues | Update Copyright Year on Logon.html | Add Information to Saved Requests Page
New Accessible Scheduled Date Calendar
The date picker calendar used for the Scheduled Date field in the default Aeon web pages has been updated with a significantly more accessible version for screen reader and keyboard-only users. Implementing the new accessible calendar tool will require adding new files to your web directory and modifying existing files according to the instructions below.
New Files to Add | Files to Overwrite | Files to Overwrite or Modify | Updating the EAD Request Form | Updating Other Request Forms
These changes are for updating the default Scheduled Date functionality in your Aeon web pages. If you are not using the Scheduled Date field and instead have implemented the appointment scheduling functionality, please see the appointment scheduling web page update instructions above.
New Files to Add
The following files are new in Aeon 5.2 and should be added to your web directory. Please download the latest default web pages and add the following new files:
- include_scheduled_date.html
- include_scheduled_date_ead.html
- CSS folder:
- css\images\fa-calendar.svg
Note: This file should be added to the images subfolder inside the CSS folder - css\datepicker.min.css
- JS folder:
- Copy over the entire 'lang' subfolder containing:
- js\lang\en-US.js
- js\datepicker.min.js
- Copy over the entire 'lang' subfolder containing:
Files to Overwrite
The following files have been updated and should be overwritten to ensure the most recent version of each file is being used. Please download the latest default web pages and overwrite these files with the updated files:
- CSS folder:
- css\cookieconsent.min.css
- JS folder:
- js\atlasCookieConsent.js
- js\cookieconsent.min.js
- js\scheduled-date.js
Files to Overwrite or Modify
It is strongly recommended to also overwrite the following web page files with the new updated files released for Aeon 5.2. However, if any of these files have been extensively modified for your institution, then the required code changes for each file can be made manually to your existing files following the instructions in the expandable section below:
- include_head.html
- include_head_request.html
- ViewUserReviewRequests.html
- CSS folder:
- css\aeon.css
Click to view manual update instructions
css\aeon.css
Change this (default lines 321-330):
/* Caution: Changing form field border color can affect accessibility
For more information see WCAG 1.4.11 */
.form-control,
.form-control:focus,
.custom-select,
.custom-select:focus,
.custom-control .custom-control-label::before,
.custom-control-input:focus:not(:checked)~.custom-control-label::before {
border-color: #757575;
}
To this:
/* CHANGES: Added .control-group selector for additional form element styling */
/* Caution: Changing form field border color can affect accessibility
For more information see WCAG 1.4.11 */
.form-control,
.form-control:focus,
.custom-select,
.custom-select:focus,
.custom-control .custom-control-label::before,
.custom-control-input:focus:not(:checked)~.custom-control-label::before,
.control-group { /* ↓ Added .control-group selector */
border-color: #757575;
}
Then add this code to the end of the aeon.css file if not already present:
/* Cookie Consent Styling */
.theme_atlas {
--cc-bg: #333333;
--cc-text: #fff;
--cc-btn-primary-bg: #08415c;
--cc-btn-primary-text: #fff;
}
.theme_atlas .cc_div a,
.theme_atlas .cc_div .cc-link {
border-color: #d6d6d6;
color: #d6d6d6;
}
.theme_atlas .cc_div #c-txt {
color: var(--cc-text);
}
.theme_atlas .c-bn,
.theme_atlas .c-bn:hover {
border: 1px solid #79818B;
}
Then add this code to the end of the aeon.css file:
/* Datepicker styling */
.date-picker-control,
.date-picker-control:link,
.date-picker-control:visited {
background-image: url("images/fa-calendar.svg");
background-position: 0,0;
}
.date-picker {
font-family: 'Open Sans', sans-serif;
color: #08415c;
}
.date-picker .date-picker-today,
.oldie .date-picker .date-picker-today {
background-image: none;
background: #fff;
}
.date-picker .day-disabled {
background-image: none;
color: #555;
background-color: #e6e6e6;
}
.day-disabled .date-picker-hover {
color: #555;
}
.date-picker table {
border-color: #000;
border-radius: .25rem;
background-image: none;
}
.date-picker td {
background-image: none;
border-color: #919191;
text-shadow: none;
}
.date-picker .date-picker-unused {
background-color: #fcfcfc;
background-image: none;
}
.btn-primary-append {
margin: 0;
}
.btn-secondary-append {
margin-top: 0;
}
.date-picker .date-picker-highlight {
color: #333;
}
.date-picker .date-picker-hover {
text-shadow: none;
background: #c9e7e9;
color: #415A76;
border-color: #000;
}
.date-picker .date-picker-hover.day-disabled {
background-image: none;
background-color: #e6e6e6;
}
.date-picker-focus .date-picker-hover {
animation: none;
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
-o-animation: none;
}
.btn-outline-secondary {
color: #000;
}
.date-picker-button-active span,
.date-picker-control:hover span {
box-shadow: none;
}
.validation-message {
font-style: italic;
}
@media (max-width: 767.98px) {
.mx-w-100 {
width: 100% !important;
}
}
include_head_request.html
Add this code to the end of the file:
<script type="text/javascript" src="js/lang/en-US.js"></script>
<script type="text/javascript" src="js/datepicker.min.js"></script>
include_head.html
Change this (default lines 7-12):
<link rel="stylesheet" href="css/aeon.css">
<link rel="stylesheet" href="css/custom.css">
<link rel="stylesheet" href="css/print.css" media="print" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"
integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/cookieconsent.min.css" />
To this:
<!-- CHANGES: Added datepicker.min.css stylesheet reference at the beginning -->
<!-- ↓ Added for date picker functionality -->
<link rel="stylesheet" type="text/css" href="css/datepicker.min.css"/>
<link rel="stylesheet" href="css/aeon.css">
<link rel="stylesheet" href="css/custom.css">
<link rel="stylesheet" href="css/print.css" media="print" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"
integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/cookieconsent.min.css" />
ViewUserReviewRequests.html
Change this (default lines 35-48):
<div id ="scheduled-date-div" class="visit-date form-group col-sm-4">
<label for="ScheduledDate">
<span class="<#ERROR>">Date of Visit</span>
</label>
<div class="input-group">
<input class="form-control"
id="ScheduledDate"
name="ScheduledDate"
type="text"
aria-describedby="button-datePicker-scheduledDate scheduledDateNotes"
value="<#PARAM name='ScheduledDate'>">
<div class="input-group-append">
<button class="btn btn-outline-secondary dateTrigger"
type="button"
role="button"
id="button-datePicker-scheduledDate"
data-triggerDatePicker="#ScheduledDate"
aria-label="Calendar">
<span class="fas fa-calendar ui-datepicker-trigger"></span>
</button>
</div>
</div>
To this:
<!-- CHANGES: Replaced button-based date picker with simplified div element -->
<div id ="scheduled-date-div" class="visit-date form-group col-sm-4">
<label for="ScheduledDate">
<span class="<#ERROR>">Date of Visit</span>
</label>
<div class="input-group">
<input class="form-control"
id="ScheduledDate"
name="ScheduledDate"
type="text"
aria-describedby="scheduledDateNotes"
value="<#PARAM name='ScheduledDate'>">
<!-- ↓ Replaced complex button structure with simple div -->
<div id="datePickerButton" class="input-group-append btn btn-outline-secondary"></div>
</div>
Updating the EAD Request Form
To implement the new Scheduled Date functionality on the EAD Request form, please overwrite your default EADRequest.html file with the updated file or make the changes manually following the example below:
EADRequest.html
These changes are only for updating the default Scheduled Date functionality in your Aeon web pages. If you are not using the Scheduled Date field and instead have implemented the appointment scheduling functionality, please see the appointment scheduling web page update instructions above.
Change this (default lines 100-118):
<div class="form-group col-sm-4">
<label for="ScheduledDate">
<span class="<#ERROR>">Date of Visit</span>
</label>
<div class="input-group">
<input class="form-control"
id="ScheduledDate"
name="FormDataField"
type="text"
aria-describedby="button-datePicker-scheduledDate scheduledDateNotes"
value="<#PARAM name='ScheduledDate'>">
<div class="input-group-append">
<button class="btn btn-outline-secondary dateTrigger"
type="button"
role="button"
id="button-datePicker-scheduledDate"
data-triggerDatePicker="#ScheduledDate"
aria-label="Calendar">
<span class="fas fa-calendar ui-datepicker-trigger"></span>
</button>
</div>
</div>
<div class="small-notes" id="scheduledDateNotes">
Select the date you plan to visit.
</div>
</div>
To this:
<!-- CHANGES: Replaced complex scheduled date form with include file -->
<!-- ↓ Simplified to use include file for EAD-specific scheduled date functionality -->
<#INCLUDE filename="include_scheduled_date_ead.html">
Updating Other Request Forms
All request forms and their corresponding edit forms (excluding EADRequest.html) that use the Scheduled Date field should be modified to use the new include_scheduled_date.html include file in place of the hardcoded Scheduled Date field. To implement these changes, make the following update on each of your request forms that contain the Scheduled Date field following the example for DefaultRequest.html below:
These changes are only for updating the default Scheduled Date functionality in your Aeon web pages. If you are not using the Scheduled Date field and instead have implemented the appointment scheduling functionality, please see the appointment scheduling web page update instructions above.
Change this (DefaultRequest.html default lines 167-185):
<div class="form-group col-sm-4">
<label for="ScheduledDate">
<span class="<#ERROR>">Date of Visit</span>
</label>
<div class="input-group">
<input class="form-control"
id="ScheduledDate"
name="ScheduledDate"
type="text"
aria-describedby="button-datePicker-scheduledDate scheduledDateNotes"
value="<#PARAM name='ScheduledDate'>">
<div class="input-group-append">
<button class="btn btn-outline-secondary dateTrigger"
type="button"
role="button"
id="button-datePicker-scheduledDate"
data-triggerDatePicker="#ScheduledDate"
aria-label="Calendar">
<span class="fas fa-calendar ui-datepicker-trigger"></span>
</button>
</div>
</div>
<div class="small-notes" id="scheduledDateNotes">
Select the date you plan to visit.
</div>
</div>
To this:
<!-- CHANGES: Replaced complex scheduled date form with standard include file -->
<!-- ↓ Simplified to use include file for standard scheduled date functionality -->
<#INCLUDE filename="include_scheduled_date.html">
Make the changes above on the following default request forms:
- DefaultRequest.html (default lines 167-185)
- EditDefaultRequest.html (default lines 176-194)
- GenericRequestManuscript.html (default lines 133-151)
- EditGenericRequestManuscript.html (default lines 127-145)
- GenericRequestMonograph.html (default lines 170-188)
- EditGenericRequestMonograph.html (default lines 182-200)
- GenericRequestSerial.html (default lines 138-156)
- EditGenericRequestSerial.html (default lines 167-185)
Fix Issue with Fields Hidden by Toggle Options on Request Forms
These changes were also applied in the v5.1.38 default web pages release.
To fix an issue where hidden billing fields (such as those hidden by a customized photoduplication toggle option on the EAD Request form) could become enabled (but remain hidden) on request forms and prevent submission of the form, please download the latest default web pages and overwrite your js\billingContextOptionHandler.js and js\duplicationPermissionToggle.js files with the updated files.
The fix will not apply to any affected billing fields that use the position: fixed CSS property. The following error message will be returned in the browser console when this issue occurs:
The [HTML ID for the affected billing field] SELECT element has a fixed position and
its visibility may not be accurately determined by billingContextOptionHandler.js
To resolve this issue, please locate the affected billing field within the code for the relevant web page and remove the position: fixed property.
js\billingContextOptionHandler.js
Please overwrite this file with the updated file.
js\duplicationPermissionToggle.js
Please overwrite this file with the updated file.
Remove Hidden Username Inputs and <div> Tags
Unnecessary hidden inputs for the username field have been removed from the default web pages to improve the efficiency of the code on these pages. Please either overwrite these files with the new default files or make the changes each page manually following the examples below as a guide:
Example - Default Web Pages
The "Username" hidden input should be deleted from the default web pages following the example below:
Change this (DefaultRequest.html default line 18):
<input type="hidden" name="AeonForm" value="DefaultRequest">
<input type="hidden" name="Username" value="<#PARAM name='Username'>">
<input type="hidden" name="TransactionLink" value="<#PARAM name='TransactionLink'>">
To this:
<!-- CHANGES: Removed Username hidden input for security -->
<input type="hidden" name="AeonForm" value="DefaultRequest">
<!-- ↓ Removed Username hidden input -->
<input type="hidden" name="TransactionLink" value="<#PARAM name='TransactionLink'>">
On the following web pages at the specified default lines:
- ChangePassword.html (default line 16)
- DefaultRequest.html (default line 18)
- EADRequest.html (default line 40)
- EditDefaultRequest.html (default line 18)
- EditEADRequest.html (default line 18)
- EditGenericRequestManuscript.html (default line 19)
- EditGenericRequestManuscriptPhotodup.html (default line 19)
- EditGenericRequestMonograph.html (default line 19)
- EditGenericRequestMonographPhotodup.html (default line 19)
- EditGenericRequestSerial.html (default line 19)
- EditPhotoduplicationRequest.html (default line 19)
- GenericRequestManuscript.html (default line 19)
- GenericRequestManuscriptPhotodup.html (default line 19)
- GenericRequestMonograph.html (default line 19)
- GenericRequestMonographPhotodup.html (default line 19)
- GenericRequestSerial.html (default line 19)
- PhotoduplicationRequest.html (default line 19)
Fix Field Value Persistence for Safari Browser
To fix an issue where fields marked with the "data-persisted-value" attribute will not properly persist their values in the Safari web browser, 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.
Remove 'required' Attribute from EditEADRequest.html
To remove an unnecessary 'required' attribute from the ItemSubTitle field on EditEADRequest.html, please overwrite your default EditEADRequest.html file with the updated file or make the following changes:
EditEADRequest.html
Change this (default line 44):
<textarea class="form-control"
name="ItemSubTitle"
id="ItemSubTitle"
rows="2"
cols="40"
required><#PARAM name='ItemSubTitle'></textarea>
To this:
<!-- CHANGES: Removed required attribute from ItemSubTitle field -->
<textarea class="form-control"
name="ItemSubTitle"
id="ItemSubTitle"
rows="2"
cols="40">
<!-- ↑ Removed required attribute -->
<#PARAM name='ItemSubTitle'></textarea>
Update FAQ
To update outdated information on the default FAQ web page, please overwrite your default FAQ.html file with the updated file or make the following changes:
FAQ.html
Change this (default line 82):
<p>You need a Web browser that can handle forms, tables, and preferably
cascading style sheets (CSS). We recommend the current versions of either
Microsoft Internet Explorer or Mozilla Firefox.</p>
To this:
<!-- CHANGES: Updated browser recommendations to current versions -->
<p>You need a Web browser that can handle forms, tables, and preferably
cascading style sheets (CSS). We recommend the current versions of
Google Chrome, Microsoft Edge, Mozilla Firefox, or Apple Safari.</p>
And change this (default lines 126-127):
<p>The technology that we use sends a Session ID to be stored on your machine.
You can refuse this cookie and still be able to use Aeon without any problems.</p>
To this:
<!-- CHANGES: Updated cookie information to reflect current requirements -->
<p>The technology that we use sends a Session ID to be stored on your machine.
This cookie is required to remain logged in to the Aeon system.</p>
Add Missing 'type' Attribute to Buttons
'Type' attributes have been added to buttons where missing to fix intermittent issues when using buttons on the order processing web pages, web alerts, and Saved Requests page. To implement these changes, please overwrite your webAlerts.js file with the updated file and either overwrite the files listed below with the updated files or make the changes manually as shown below:
js\webAlerts.js
The changes to this file are extensive. Please overwrite this file with the updated file.
ViewUserReviewRequests.html
Change this (default lines 26-27):
<button class="selectOptions btn btn-link checkAll"
data-form="ViewUserReviewRequests"
aria-label="Select all of the displayed requests."
role="button">Select All</button>
<button class="selectOptions btn btn-link checkNone"
data-form="ViewUserReviewRequests"
aria-label="Unselect all of the displayed requests."
role="button">Select None</button>
To this:
<!-- CHANGES: Added type="button" attribute to both buttons -->
<!-- ↓ Added explicit button type for improved semantics -->
<button type="button"
class="selectOptions btn btn-link checkAll"
data-form="ViewUserReviewRequests"
aria-label="Select all of the displayed requests."
role="button">Select All</button>
<!-- ↓ Added explicit button type for improved semantics -->
<button type="button"
class="selectOptions btn btn-link checkNone"
data-form="ViewUserReviewRequests"
aria-label="Unselect all of the displayed requests."
role="button">Select None</button>
ViewOrderEstimates.html
Change this (default lines 30-31):
<button class="selectOptions btn btn-link checkAll"
data-form="orderEstimates"
aria-label="Select all of the displayed requests."
role="button">Select All</button>
<button class="selectOptions btn btn-link checkNone"
data-form="orderEstimates"
aria-label="Unselect all of the displayed requests."
role="button">Select None</button>
To this:
<!-- CHANGES: Added type="button" attribute to both buttons -->
<!-- ↓ Added explicit button type for improved semantics -->
<button type="button"
class="selectOptions btn btn-link checkAll"
data-form="orderEstimates"
aria-label="Select all of the displayed requests."
role="button">Select All</button>
<!-- ↓ Added explicit button type for improved semantics -->
<button type="button"
class="selectOptions btn btn-link checkNone"
data-form="orderEstimates"
aria-label="Unselect all of the displayed requests."
role="button">Select None</button>
ViewOrderApprovals.html
Change this (default lines 29-30):
<button class="selectOptions btn btn-link checkAll"
data-form="orderApprovals"
aria-label="Select all of the displayed requests."
role="button">Select All</button>
<button class="selectOptions btn btn-link checkNone"
data-form="orderApprovals"
aria-label="Unselect all of the displayed requests."
role="button">Select None</button>
To this:
<!-- CHANGES: Added type="button" attribute to both buttons -->
<!-- ↓ Added explicit button type for improved semantics -->
<button type="button"
class="selectOptions btn btn-link checkAll"
data-form="orderApprovals"
aria-label="Select all of the displayed requests."
role="button">Select All</button>
<!-- ↓ Added explicit button type for improved semantics -->
<button type="button"
class="selectOptions btn btn-link checkNone"
data-form="orderApprovals"
aria-label="Unselect all of the displayed requests."
role="button">Select None</button>
templates\payment\include_payment_buttons.html
Change this (default line 2):
<button id="cancel"
name="SubmitButton"
value="Cancel - Exit to Main Menu"
class="btn btn-primary btn-block"
formnovalidate>Cancel - Exit to Main Menu</button>
To this:
<!-- CHANGES: Added type="button" attribute to cancel button -->
<!-- ↓ Added explicit button type attribute -->
<button id="cancel"
type="button"
name="SubmitButton"
value="Cancel - Exit to Main Menu"
class="btn btn-primary btn-block"
formnovalidate>Cancel - Exit to Main Menu</button>
Improve Color Contrast for Buttons and Dropdown Menu Options
The "text-info" class has been removed from several buttons and dropdown menu items in the DataRow template files to improve color contrast against the default Aeon web pages. To implement these changes, please either overwrite the files listed below with the updated files or make the changes manually as shown below:
templates\DataRow_BillingDetail.html
Change this (default line 6):
<button type="button"
class="text-info btn btn-light ml-1"
data-toggle="collapse"
aria-expanded="false"
aria-controls="collapseBillingDetail<#DATAROW>"
data-target="#collapseBillingDetail<#DATAROW>"
aria-label="Toggle billing details for <#DATAROW>">
<span aria-hidden="true" class="fa fa-chevron-down text-info mr-1"></span>
</button>
To this:
<!-- CHANGES: Removed text-info class from button and span for improved contrast -->
<!-- ↓ Removed text-info class from button and span elements -->
<button type="button"
class="btn btn-light ml-1"
data-toggle="collapse"
aria-expanded="false"
aria-controls="collapseBillingDetail<#DATAROW>"
data-target="#collapseBillingDetail<#DATAROW>"
aria-label="Toggle billing details for <#DATAROW>">
<span aria-hidden="true" class="fa fa-chevron-down mr-1"></span>
</button>
templates\DataRow_CreditCardOrder.html
Change this (default line 15):
<a class="text-info btn btn-light"
aria-controls="collapseRequest<#DATAROW>"
href="<#DLL>?Action=10&Form=63&Value=<#DATAROW>">
<span aria-hidden="true" class="fa fa-info-circle text-info mr-1"></span>Details
</a>
To this:
<!-- CHANGES: Removed text-info class from anchor and span for improved contrast -->
<!-- ↓ Removed text-info class from anchor and span elements -->
<a class="btn btn-light"
aria-controls="collapseRequest<#DATAROW>"
href="<#DLL>?Action=10&Form=63&Value=<#DATAROW>">
<span aria-hidden="true" class="fa fa-info-circle mr-1"></span>Details
</a>
templates\DataRow_ElectronicDelivery.html
Change this (default line 22):
<a class="dropdown-item text-info btn btn-light"
href="aeon.dll?Action=10&Form=63&Value=<#DATAROW>">
<span class="fa fa-info-circle text-info mr-1"></span>Details
</a>
To this:
<!-- CHANGES: Removed text-info class from anchor and span for improved contrast -->
<!-- ↓ Removed text-info class from anchor and span elements -->
<a class="dropdown-item btn btn-light"
href="aeon.dll?Action=10&Form=63&Value=<#DATAROW>">
<span class="fa fa-info-circle mr-1"></span>Details
</a>
templates\DataRow_OrderBilling.html
Change this (default line 50):
<span aria-hidden="true" class="fas fa-eye text-info mr-2"></span>View Item</a>
To this:
<!-- CHANGES: Removed text-info class from span for improved contrast -->
<!-- ↓ Removed text-info class from span element -->
<span aria-hidden="true" class="fas fa-eye mr-2"></span>View Item</a>
templates\DataRow_OrderEstimate.html
Change this (default line 48):
<span aria-hidden="true" class="fas fa-eye text-info mr-2"></span>View Request</a>
To this:
<!-- CHANGES: Removed text-info class from span for improved contrast -->
<!-- ↓ Removed text-info class from span element -->
<span aria-hidden="true" class="fas fa-eye mr-2"></span>View Request</a>
Fix Broken Web Alert Attribute
These changes were also applied in the v5.1.38 default web pages release.
To fix a broken 'aria-labelledby' attribute causing an accessibility issue on the modal dialog for web alerts, please download the latest default web pages and overwrite your js\webAlerts.js file with the updated file.
js\webAlerts.js
Please overwrite this file with the updated file.
Remove Broken Attribute on ChangePassword.html
These changes were also applied in the v5.1.38 default web pages release.
To remove a broken 'aria-describedby' attribute causing an accessibility issue on ChangePassword.html, please overwrite your default ChangePassword.html file with the updated file or make the following changes:
ChangePassword.html
Change this (default lines 23-30):
<div class="form-group col-md-5">
<label for="CurrentPassword">
<span class="<#ERROR>">Current Password</span>
</label>
<input type="password"
class="form-control"
name="CurrentPassword"
id="CurrentPassword"
aria-describedby="passwordHelp"
autocomplete="off">
</div>
To this:
<!-- CHANGES: Removed broken aria-describedby attribute -->
<!-- ↓ Removed aria-describedby="passwordHelp" attribute -->
<div class="form-group col-md-5">
<label for="CurrentPassword">
<span class="<#ERROR>">Current Password</span>
</label>
<input type="password"
class="form-control"
name="CurrentPassword"
id="CurrentPassword"
autocomplete="off">
</div>
Adjust Color for Hyperlinks in Cookie Banner
These changes were also applied in the v5.1.38 default web pages release.
To fix contrast issues with the default color used for hyperlinks added to the cookie consent banner, please overwrite your default css\aeon.css file with the updated file or make the following changes:
css\aeon.css
Change this (default lines 450-452):
.theme_atlas .cc_div a {
color: var(--cc-btn-primary-bg);
}
To this:
/* CHANGES: Updated cookie banner link styling for improved contrast */
/* ↓ Added .cc-link selector and changed to specific color values */
.theme_atlas .cc_div a,
.theme_atlas .cc_div .cc-link {
border-color: #d6d6d6;
color: #d6d6d6;
}
To learn how to add a custom hyperlink to the cookie consent banner, see Adding a Custom Hyperlink to the Cookie Consent Banner.
Adjust Label Color for Form Fields Failing Validation
These changes were also applied in the v5.1.38 default web pages release.
The default label color used to highlight fields that fail server validation when a form is submitted was changed to fix contrast issues against the default web page background colors. To implement this change, please overwrite your default js\atlasUtility.js file with the updated file and overwrite your css\aeon.css file with the updated file or make the following changes:
js\atlasUtility.js
Please overwrite this file with the updated file.
css\aeon.css
Change this (default line 126-129):
.fas {
font-size: 16px;
}
To this:
/* CHANGES: Added validation error styling for improved contrast */
/* ↓ Added validation error color styling */
.validationError {
color: #b81f18;
}
.fas {
font-size: 16px;
}
Adjust Formatting for Search Box
These changes were also applied in the v5.1.38 default web pages release.
To fix color contrast issues with the default color used for the border around the search box and to improve the overall layout of the web page, please overwrite your default ViewSearchResults.html file with the updated file or make the following changes:
ViewSearchResults.html
Change this (default lines 19-23):
<input type="hidden" name="AeonForm" value="Search">
<input id="SearchCriteria"
value="<#PARAM name='SearchCriteria'>"
name="SearchCriteria"
type="text"
title="Search criteria">
<input class="btn btn-primary btn-sm"
type="submit"
name="SubmitButton"
value="Search"
title="Search"
data-button-nodisable>
To this:
<!-- CHANGES: Improved search box layout and styling for better contrast -->
<!-- ↓ Added form-inline container and updated classes -->
<input type="hidden" name="AeonForm" value="Search">
<div class="form-inline m-0">
<input id="SearchCriteria"
class="form-control mr-1"
value="<#PARAM name='SearchCriteria'>"
name="SearchCriteria"
type="text"
title="Search criteria">
<input class="btn btn-primary"
type="submit"
name="SubmitButton"
value="Search"
title="Search"
data-button-nodisable">
</div>
And change this (default lines 32-33):
<!--Radio control for search filtering-->
<br>
To this:
<!-- CHANGES: Removed br tag for improved spacing -->
<!-- ↓ Removed br tag -->
<!--Radio control for search filtering-->
Improve Transaction Menu Responsiveness
These changes were also applied in the v5.1.38 default web pages release.
To fix issues with the responsiveness and readability of the transaction menu on smaller display sizes and to add an underline on hover for its enabled menu buttons, please overwrite your default aeon.css and include_TransactionMenu.html files with the updated files or make the following changes:
aeon.css
Change this (default lines 237-240):
.badge-primary {
background-color: #08415c;
}
To this:
/* CHANGES: Added transaction menu hover styling for improved UX */
/* ↓ Added hover underline effect for transaction menu buttons */
#transaction-menu .btn:hover {
text-decoration: underline;
}
.badge-primary {
background-color: #08415c;
}
include_TransactionMenu.html
Change this (default lines 1-2):
<div class="d-flex justify-content-center">
<div class="btn-group" role="group">
To this:
<!-- CHANGES: Enhanced transaction menu with responsive design and improved spacing -->
<!-- ↓ Added ID, margin classes, and responsive flex classes -->
<div id="transaction-menu" class="d-flex justify-content-center mb-1 mt-4">
<div class="btn-group flex-column flex-grow-1 flex-md-row flex-md-grow-0" role="group">
Then follow the example for the Edit Request button to add the "my-1 py-2" class to the code for all buttons on this page at the default lines listed below:
Edit Request Button Example
Change this (default lines 4-7):
<a class="btn btn-light menuEdit <#TRANSACTION>"
href="aeon.dll?Action=20&Form=63&Value=<#TRANSACTION>">
<span aria-hidden="true" class="fas fa-edit text-primary"></span> Edit Request
</a>
To this:
<!-- CHANGES: Added responsive spacing classes for improved mobile layout -->
<!-- ↓ Added my-1 py-2 classes for vertical margin and padding -->
<a class="btn btn-light menuEdit my-1 py-2 <#TRANSACTION>"
href="aeon.dll?Action=20&Form=63&Value=<#TRANSACTION>">
<span aria-hidden="true" class="fas fa-edit text-primary"></span> Edit Request
</a>
Add the "my-1 py-2" class to these default lines:
- 4 (Edit Request button)
- 9 (Cancel Request button)
- 14 (Remove from Hold button)
- 19 (Resubmit Request button)
- 24 (Request Copy button)
- 29 (Clone Request button)
- 34 (Clone to Copy button)
- 39 (View Item button)
- 44 (Delete Item button)
- 49 (Submit Request button)
- 54 (Approve Estimate button)
- 59 (Approve Billing button)
- 64 (Export Citation button)
Realign Actions Menu Dropdown Options
These changes were also applied in the v5.1.38 default web pages release.
To fix an issue where the Actions menu dropdown options are not fully visible on smaller display sizes, please overwrite the files listed below with the new default files or make the change on each page manually following the example below:
Example
Add the "dropdown-menu-right" class to the code for the dropdown menu <div> container:
Change this (DataRow_DefaultActivity.html default line 30):
<div class="dropdown-menu"
aria-labelledby="btnGroupActivityDrop<#DATAROW>">
To this:
<!-- CHANGES: Added dropdown-menu-right class for better alignment on small screens -->
<!-- ↓ Added dropdown-menu-right class -->
<div class="dropdown-menu dropdown-menu-right"
aria-labelledby="btnGroupActivityDrop<#DATAROW>">
On the following web pages at the specified default lines:
- DataRow_DefaultActivity.html (default line 30)
- DataRow_DefaultRequest.html (default line 20)
- DataRow_ElectronicDelivery.html (default line 21)
- DataRow_OrderBilling.html (default line 48)
- DataRow_OrderEstimate.html (default line 46)
- DataRow_ReviewRequest.html (default line 24)
Fix Text Responsiveness Issues
These changes were also applied in the v5.1.38 default web pages release.
To fix issues where text would cross over other text and cause readability issues on various web pages when viewed on small screen sizes or high zoom levels, please overwrite the files noted below with the updated files or make the following changes manually:
Note: These changes will also fix text responsiveness issues on ViewAppointment.html though no changes are required for the code within this file.
aeon.css
Change this (default lines 336-338):
.transaction-label {
width: 33%;
}
To this:
/* CHANGES: Changed from width to flex-basis for better responsive behavior */
/* ↓ Changed width to flex-basis for improved flexibility */
.transaction-label {
flex-basis: 33%;
}
ActivityInformation.html
Follow the example for the Name field on ActivityInformation.html to add the "transaction-label" class to the code within each file listed below for the fields located at the default lines indicated:
Name Field Example
Change this (default lines 6-13):
<div class="field list-group-item">
<div class="d-flex justify-content-between">
<span>Name</span>
<strong><span class="field-value"><#ACTIVITY></span></strong>
</div>
</div>
To this:
<!-- CHANGES: Added transaction-label class for improved responsive layout -->
<div class="field list-group-item">
<div class="d-flex justify-content-between">
<span class="transaction-label">Name</span> <!-- ← Added transaction-label class -->
<strong><span class="field-value"><#ACTIVITY></span></strong>
</div>
</div>
Add the "transaction-label" class to the fields located at the default lines on the following web page files:
ActivityInformation.html:
- 8 (Name field)
- 17 (Description field)
- 26 (Type [ActivityType] field)
- 35 (Status [ActivityStatus] field)
- 44 (Status Date [ActivityStatusDate] field)
- 53 (Location field)
- 62 (Begin Date field)
- 71 (End Date field)
include_ResearcherTagsUpdate.html:
- 7 (Current Tags [ResearcherTags] field)
ViewDetailedManuscriptInformation.html:
- 7 (Transaction Number field)
- 16 (Title [ItemTitle] field)
- 25 (Author [ItemAuthor] field)
- 34 (Date [ItemDate] field)
- 43 (Collection Name/Location [Location] field)
- 52 (Call Number field)
- 61 (Box(es)/Folder(s) [ItemVolume] field)
- 70 (Requested For [ResearcherUsername] field)
- 79 (Activity Number [ActivityID] field)
- 88 (Scheduled Date field)
- 97 (Special Request field)
ViewDetailedMonographInformation.html:
- 7 (Transaction Number field)
- 16 (Title [ItemTitle] field)
- 25 (Author [ItemAuthor] field)
- 34 (Place of Publication [ItemPlace] field)
- 43 (Publisher [ItemPublisher] field)
- 52 (Date [ItemDate] field)
- 61 (Edition [ItemEdition] field)
- 70 (Volume/Box [ItemVolume] field)
- 79 (Issue/Copy [ItemIssue] field)
- 88 (Size/Physical Description [ItemCitation] field)
- 97 (Call Number field)
- 106 (Collection Name/Location [Location] field)
- 115 (Requested For [ResearcherUsername] field)
- 124 (Activity Number [ActivityID] field)
- 133 (ScheduledDate field)
- 142 (Special Request field)
ViewDetailedSerialInformation.html:
- 8 (Transaction Number field)
- 17 (Title [ItemTitle] field)
- 26 (Place of Publication [ItemPlace] field)
- 35 (Date [ItemDate] field)
- 44 (Volume/Box [ItemVolume] field)
- 53 (Issue/Copy [ItemIssue] field)
- 62 (Call Number field)
- 71 (Collection Name/Location [Location] field)
- 80 (Requested For [ResearcherUsername] field)
- 89 (Activity Number [ActivityID] field)
- 98 (Scheduled Date field)
- 107 (Special Request field)
Update Copyright Year on Logon.html
These changes were also applied in the v5.1.38 default web pages release.
To update the hardcoded copyright year on the Logon web page to the current year, please overwrite your default Logon.html file with the updated file or make the following changes:
Logon.html
Change this (default line 78):
<div> © 2022 <a href="http://www.atlas-sys.com"> Atlas Systems, Inc.</a> All Rights Reserved.</div>
To this:
<!-- CHANGES: Updated copyright year to current year -->
<!-- ↓ Updated year from 2022 to 2023 -->
<div> © 2023 <a href="http://www.atlas-sys.com"> Atlas Systems, Inc.</a> All Rights Reserved.</div>
Add Information to Saved Requests Page
To add transaction number and site information to requests listed on the Saved Requests web page, please overwrite your default DataRow_ReviewRequest.html file with the updated file or make the following changes:
templates\DataRow_ReviewRequest.html
Change this (default line 13):
<div class="card-subtitle text-muted h5"><#DATAROW></div>
To this:
<!-- CHANGES: Added transaction number and site information to saved requests page -->
<div class="card-subtitle text-muted h5"><#DATAROW></div>
<div class="field text-muted">
Transaction Number
<span class="field-value font-weight-bold ml-1"><#DATAROW></span>
</div>
<div class="field text-muted">
Site
<span class="field-value font-weight-bold ml-1"><#DATAROW></span>
</div>
<!-- ↑ Added transaction number and site information fields -->
July 6, 2023 Point Release (Default & Feature-Specific Web Pages)
Implement Captcha Support on User Registration Pages | Implement Support for <#PHOTOTOGGLE> Tag on Web Forms and Update ArchivalRequest.html | Fix Issues with "Schedule a New Appointment" Button | Hide Usernames from "Request For" Dropdown
Minimum Server Requirement
You must be on Aeon Server v5.2.4 to implement the web page changes listed below.
Implement Captcha Support on User Registration Pages
The NewUserRegistration.html web page was modified and the following new files were added to the default web pages to implement captcha support on the New User Registration forms:
- include_captcha_none.html
- include_hcaptcha.html
- include_mtcaptcha.html
- include_recaptcha_v2_checkbox.html
- include_recaptcha_v2_invisible.html
- include_recaptcha_v3.html
For detailed instructions on configuring these changes, please see the captcha configuration section of the Preventing Account Creation Spam in Aeon article.
Implement Support for <#PHOTOTOGGLE> Tag on Web Forms and Update ArchivalRequest.html
To implement support for the new <#PHOTOTOGGLE> tag that can be used to configure a photoduplication toggle option on the Aeon web request forms and to update your ArchivalRequest.html file to include this tag by default, please overwrite the files listed in the instructions below.
Note: Following these instructions will update ArchivalRequest.html to include the new <#PHOTOTOGGLE> tag by default, however, the photoduplication toggle options will not display to your patrons when the form is accessed on the Aeon web interface until the new PhotoduplicationEnabled customization key included in the Aeon Server v5.2.4 update has been switched to Yes. For more information on configuring this key after updating your web pages, see The Archival Request Form.
The <#PHOTOTOGGLE> tag is only included on ArchivalRequest.html by default. To learn how to configure the <#PHOTOTOGGLE> tag on additional web forms where it is not included by default and to learn how to customize the content displayed by the tag, see Implementing a Photoduplication Toggle Option on Request Forms.
Default Web Pages
Please follow the steps below to update your default web pages to support the <#PHOTOTOGGLE> tag:
- Download the Aeon v5.2.4 default web pages
- Locate the ArchivalRequest.html and include_photoduplication_archival_request.html files within the downloaded web page files and add/overwrite these files within your Aeon web directory (in GitHub or at the default location on the Aeon server: C:\Program Files (x86)\Aeon\Web)
- If you are not using appointment scheduling features, also locate and add the include_photodup_toggle_disabled.html and include_photodup_toggle_enabled.html files to your Aeon web directory.
- Locate the billingAccountsOptionHandler.js, billingContextHandler.js, and duplicationPermissionToggle.js files in the js subfolder within the downloaded web page files and use these files to overwrite the existing version of these files in the js subfolder in your Aeon web directory to ensure that the most recent versions of these files are being used on your web pages
Feature-Specific Appointment Scheduling Web Pages
If you are using appointment scheduling features in Aeon, please follow the additional steps below after following the steps for updating the default web pages listed aboveto ensure your appointment scheduling web pages are fully updated to support the <#PHOTOTOGGLE> tag:
- Download the Aeon v5.2.4 feature-specific web pages
- Locate the include_appointment_info_no_site.html, include_photodup_toggle_disabled.html, and include_photodup_toggle_enabled.html files within the downloaded web page files in the AppointmentScheduling folder and add/overwrite these files within your Aeon web directory
- Locate the appointments.js file in the js subfolder within the downloaded web page files and overwrite the appointments.js file located in the js subfolder in your Aeon web directory
Fix Issues with "Schedule a New Appointment" Button
To fix an issue where clicking the Schedule a New Appointment button from the Aeon web pages would sometimes not properly display the appointment scheduling fields, please download the latest feature-specific web pages and overwrite your js\appointments.js file with the updated file.
js\appointments.js
Please overwrite this file with the updated file.
Hide Usernames from "Request For" Dropdown
To hide usernames from displaying within the list of users in the Request For field dropdown, please overwrite the files listed below with the new default files or make the change on each page manually following the example below:
Example
Add the hideUsernames="true" attribute to the <#OPTION name="RequestLinks"> code:
Change this:
<#OPTION name="RequestLinks">
To this:
<!-- CHANGES: Added hideUsernames attribute to hide usernames from dropdown -->
<#OPTION name="RequestLinks" hideUsernames="true"> <!-- ← Added hideUsernames="true" -->
On the following web pages at the specified default lines:
- EADRequest.html (default line 95)
- If using appointment scheduling web pages:
- include_appointment_info_ead.html (default line 13)
- include_appointment_info.html (default line 13)
- ViewAppointments.html (default line 56)
Note: This change was also applied on include_appointment_info_no_site.html, but this file should be overwritten instead of manually modified to implement support for the <#PHOTOTOGGLE> as noted in the section above.
October 16, 2023 Point Release (Default & Feature-Specific Web Pages)
Remove Unused Images From the Images Folder | Standardize Text Input Widths on EditGenericRequestMonograph.html | Remove Extraneous Spaces from Code in Photoduplication Forms
Remove Unused Images From the Images Folder
The following image files have been removed from the images folder in the default web pages (located within the Aeon web directory by default at css/images):
|
|
---|
To implement these changes:
- Navigate to your Aeon web directory on the Aeon server (default location: C:\Program Files (x86)\Aeon\Webor in GitHub)
- Navigate to the images folder located within the Aeon web directory by default at css/images
- Delete the unused image files listed above from the images folder
Standardize Text Input Widths on EditGenericRequestMonograph.html
To standardize the column widths used for the ItemEdition, ItemVolume, and ItemIssue field text inputs on the edit form for monograph requests, please overwrite your default EditGenericRequestMonograph.html file with the updated file or make the following changes manually:
Note: This change was made to both the default version of the EditGenericRequestMonograph.html file and the feature-specific version of the EditGenericRequestMonograph.html file used with appointment scheduling functionality that is available in the feature-specific web pages download. If you are downloading the new web pages and replacing this file in your web directory instead of applying the code changes manually, please ensure that the feature-specific version of this file is downloaded and used if you are using appointment scheduling features.
EditGenericRequestMonograph.html
Change this (default lines 78-103):
<div class="form-group col-md-4">
<label for="ItemEdition">
<span class="<#ERROR>">Edition</span>
</label>
<input type="text" class="form-control" name="ItemEdition" id="ItemEdition"
value="<#PARAM name='ItemEdition'>">
</div>
<div class="form-group col-md-4">
<label for="ItemVolume">
<span class="<#ERROR>">Volume</span>
</label>
<input type="text" class="form-control" name="ItemVolume" id="ItemVolume"
value="<#PARAM name='ItemVolume'>">
</div>
<div class="form-group col-md-4">
<label for="ItemIssue">
<span class="<#ERROR>">Copy</span>
</label>
<input type="text" class="form-control" name="ItemIssue" id="ItemIssue"
value="<#PARAM name='ItemIssue'>">
</div>
To this:
<!-- CHANGES: Changed column width from col-md-4 to col-md-3 for better layout -->
<div class="form-group col-md-3"> <!-- ← Changed from col-md-4 to col-md-3 -->
<label for="ItemEdition">
<span class="<#ERROR>">Edition</span>
</label>
<input type="text" class="form-control" name="ItemEdition" id="ItemEdition"
value="<#PARAM name='ItemEdition'>">
</div>
<div class="form-group col-md-3"> <!-- ← Changed from col-md-4 to col-md-3 -->
<label for="ItemVolume">
<span class="<#ERROR>">Volume</span>
</label>
<input type="text" class="form-control" name="ItemVolume" id="ItemVolume"
value="<#PARAM name='ItemVolume'>">
</div>
<div class="form-group col-md-3"> <!-- ← Changed from col-md-4 to col-md-3 -->
<label for="ItemIssue">
<span class="<#ERROR>">Copy</span>
</label>
<input type="text" class="form-control" name="ItemIssue" id="ItemIssue"
value="<#PARAM name='ItemIssue'>">
</div>
Remove Extraneous Spaces from Code in Photoduplication Forms
To remove extraneous spaces located in the code for several photoduplication forms, please overwrite the default files listed below with the updated files or make the changes manually to each file following the example below:
Example
Change this (PhotoduplicationRequest.html default line 146):
<select class="custom-select mr-sm-2" id="RequestLink" name="RequestLink" size="1">
To this:
<!-- CHANGES: Removed extraneous space before id attribute -->
<!-- ↓ Removed extra space before id attribute -->
<select class="custom-select mr-sm-2" id="RequestLink" name="RequestLink" size="1">
On the following web pages at the specified default lines:
- EditGenericRequestManuscriptPhotodup.html (default line 103)
- EditGenericRequestMonographPhotodup.html (default line 139)
- PhotoduplicationRequest.html (default line 146)
March 18, 2024 Point Release (Default & Feature-Specific Web Pages)
Remove jQuery UI JavaScript Library From Web Pages | Change Default Password Reset Instructions on FAQ Page | Fix Appointment Minimum Lead Days Behavior | Fix Appointment Scheduling JavaScript Console Error and Issues Using Date Picker Calendar Dropdowns Inside Photoduplication Toggles | Fix Text Emphasis on Search Results Page | Add Missing Transaction Number and File Size Information for Electronically Delivered Requests | Update Copyright Year on Logon.html to 2024
Remove jQuery UI JavaScript Library From Web Pages
The jQuery UI JavaScript Library has been removed from the Aeon web pages for security purposes.It is highly recommended to update your web pages to implement this change to ensure the best possible security on the Aeon web interface.
To remove the jQuery UI JavaScript Library and its CSS theme from the web pages, please overwrite your default include_head_request.html and include_appointment_scripts.html (if using appointment scheduling features) files with the updated files or make the following changes manually:
Prerequisite: Ensure Date Pickers Have Been Updated
Removing the jQuery UI JavaScript Library will break any existing implementations of the Aeon 5.1 version of date picker calendar dropdown tools used for custom Date fields, Appointment Scheduling fields, and/or the Scheduled Date field on the web pages. Please ensure that you have followed the instructions to update each of your existing date picker implementations to use the 5.2 version of this tool before removing the jQuery library:
include_head_request.html
Remove the following lines (default lines 1-2):
<link rel="stylesheet"
href="https://code.jquery.com/ui/1.12.1/themes/redmond/jquery-ui.css"
integrity="sha384-XNjeV9qOpTfbgoJN6kPRjm9I4k+wosO3rtYtMhi4PdGKh/lG8T0iMPnXxPis/LLf"
crossorigin="anonymous">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha384-Dziy8F2VlJQLMShA6FHWNul/veM9bCkRUaLqr199K94ntO5QUrLJBEbYegdSkkqX"
crossorigin="anonymous"></script>
<script type="text/javascript" src="js/schedule-review-toggle.js"></script>
Leaving only:
<!-- CHANGES: Removed jQuery UI library and CSS for security -->
<!-- ↓ Only the schedule-review-toggle.js script remains -->
<script type="text/javascript" src="js/schedule-review-toggle.js"></script>
\AppointmentScheduling\include_appointment_scripts.html
Note: This file is included in the Aeon feature-specific web page download and only needs to be updated if you are using appointment scheduling features and have installed the appointment scheduling web pages.
Remove the following lines (default lines 1-2):
<link rel="stylesheet"
href="https://code.jquery.com/ui/1.12.1/themes/redmond/jquery-ui.css"
integrity="sha384-XNjeV9qOpTfbgoJN6kPRjm9I4k+wosO3rtYtMhi4PdGKh/lG8T0iMPnXxPis/LLf"
crossorigin="anonymous">
<script type="text/javascript"
src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha384-Dziy8F2VlJQLMShA6FHWNul/veM9bCkRUaLqr199K94ntO5QUrLJBEbYegdSkkqX"
crossorigin="anonymous"></script>
<script type="text/javascript" src="js/lang/en-US.js"></script>
Leaving only:
<!-- CHANGES: Removed jQuery UI library and CSS for security -->
<!-- ↓ Only the language script remains -->
<script type="text/javascript" src="js/lang/en-US.js"></script>
Change Default Password Reset Instructions on FAQ Page
The default password reset instructions on the FAQ web page were changed to first direct patrons to use the Forgot Password web form to reset their password before contacting staff. For security purposes, patrons should be encouraged to reset their own passwords. The new text also contains a "mailto" link for contacting staff that will automatically pull in email address information from the relevant value configured in the LocalInfo table in the Aeon Customization Manager. To implement these changes, please overwrite your default FAQ.html file with the updated file or make the following changes manually:
FAQ.html
Change this (default lines 71-74):
<p>In the event that you forget your password, please contact the Special Collections
office at (800) 555-1212. We can then reset your password allowing you access to Aeon.
Please change your password once you logon to Aeon.</p>
To this:
<!-- CHANGES: Updated password reset instructions to direct users to self-service option first -->
<p>In the event that you forget your password, please use the
<a href="aeon.dll?Action=10&Form=84">Forgot Password</a> form to reset your password.
You will receive an email with a link to reset your password.<br />
If you still need assistance, please <a href="mailto:<#CUSTOMIZATION>">contact staff</a>.</p>
Fix Appointment Minimum Lead Days Behavior
To fix an issue where the Aeon web interface would only consider the current date and would not consider the current time when determining whether an appointment could be scheduled in a reading room based on the room's Appointment Minimum Lead Days value in the Aeon Customization Manager, please download the latest feature-specific web pages and overwrite your js\appointments.js file with the updated file.
AppointmentScheduling\js\appointments.js
Please overwrite this file with the updated file.
Fix Appointment Scheduling JavaScript Console Error and Issues Using Date Picker Calendars Inside Photoduplication Toggles
To fix an issue where manually entering a date when making an appointment on the web interface could potentially cause a JavaScript console error in the web browser and to also fix an issue where fields containing a date picker calendar dropdown tool would not initialize correctly when placed inside a photoduplication toggle, please download the latest default web pages and overwrite your js\datepicker.js and js\datepicker.min.js files with the updated files.
js\datepicker.js
Please overwrite this file with the updated file.
js\datepicker.min.js
Please overwrite this file with the updated file.
Implementing the updated versions of the JavaScript files above will also simplify the code needed to implement custom Date fields on web forms using the Aeon 5.2 web pages and the code needed to update custom Date fields that were previously implemented on web forms using the code supported by the 5.1 web pages to the new code used with Aeon 5.2. If you have already added a custom date field to your web form(s) using the previously available instructions, no changes are needed and your existing implementation will still work after updating these JavaScript files.
Fix Text Emphasis on Search Results Page
To change the format used to emphasize text on the search results web page from underlined to bolded text to adhere to W3C HTML5 guidelines, please overwrite your default ViewSearchResults.html file with the updated file or make the following changes manually:
ViewSearchResults.html
Change this (default lines 30-31):
<input type="checkbox"
name="SearchType"
class="custom-control-input"
id="SearchType"
value="Active"
data-persisted-value="<#PARAM name='SearchType'>">
<label class="custom-control-label" for="SearchType">
Search <u>only</u> active requests
</label>
To this:
<!-- CHANGES: Changed from underline to strong formatting for better HTML5 compliance -->
<input type="checkbox"
name="SearchType"
class="custom-control-input"
id="SearchType"
value="Active"
data-persisted-value="<#PARAM name='SearchType'>">
<label class="custom-control-label" for="SearchType">
Search <strong>only</strong> active requests <!-- ← Changed from <u> to <strong> -->
</label>
Change this (default lines 38-39):
<input checked
name="SearchType"
type="radio"
id="SearchTypeActive"
value="Active"
data-persisted-value="<#PARAM name='SearchType'>">
<label for="SearchTypeActive">
<span>Search <u>only</u> active requests</span>
</label>
To this:
<!-- CHANGES: Changed from underline to strong formatting for better HTML5 compliance -->
<input checked
name="SearchType"
type="radio"
id="SearchTypeActive"
value="Active"
data-persisted-value="<#PARAM name='SearchType'>">
<label for="SearchTypeActive">
<span>Search <strong>only</strong> active requests</span> <!-- ← Changed from <u> to <strong> -->
</label>
Add Missing Transaction Number and File Size Information for Electronically Delivered Requests
To remove non-functional popup text for file size and add missing transaction number and file size information to the requests displayed on the Electronically Delivered Items web page, please overwrite your default DataRow_ElectronicDelivery.html file with the updated file or make the following changes manually:
templates\DataRow_ElectronicDelivery.html
Remove the following code (default line 15):
<a class="btn btn-primary menuViewItemFile <#DATAROW>"
href="aeon.dll?Action=10&Form=75&Value=<#DATAROW>"
data-toggle="popover"
data-trigger="hover"
data-placement="bottom"
data-content="File Size: <#DATAROW>">View</a>
Replace with:
<!-- CHANGES: Removed non-functional popover attributes for file size -->
<a class="btn btn-primary menuViewItemFile <#DATAROW>"
href="aeon.dll?Action=10&Form=75&Value=<#DATAROW>">View</a>
<!-- ↑ Removed data-toggle, data-trigger, data-placement, and data-content attributes -->
Change this (default line 35):
<div class="col-lg-7 col-md-12"> </div>
To this:
<!-- CHANGES: Added transaction number and file size information for electronically delivered requests -->
<div class="col-lg-7 col-md-12">
<div class="field text-muted">
Transaction Number
<span class="field-value font-weight-bold ml-1"><#DATAROW></span>
</div>
<div class="field text-muted">
File Size
<span class="field-value font-weight-bold ml-1"><#DATAROW></span>
</div>
</div>
<!-- ↑ Added transaction number and file size fields inside the column -->
Update Copyright Year on Logon.html to 2024
To update the hardcoded copyright year on the Logon web page to the current year, please overwrite your default Logon.html file with the updated file or make the following changes:
Logon.html
Change this (default line 78):
<div> © 2023 <a href="http://www.atlas-sys.com"> Atlas Systems, Inc.</a> All Rights Reserved.</div>
To this:
<!-- CHANGES: Updated copyright year from 2023 to 2024 -->
<div> © 2024 <a href="http://www.atlas-sys.com"> Atlas Systems, Inc.</a> All Rights Reserved.</div>
<!-- ↑ Changed from 2023 to 2024 -->
April 4, 2024 Point Release (Default & Feature-Specific Web Pages)
Fix JavaScript Console Error for Invalid Appointment Date Input | Prevent Activation of Disabled Transaction Buttons | Remove Unused CSS Properties | Encode Ampersands in HTML Attributes
Fix JavaScript Console Error for Invalid Appointment Date Input
To fix an issue where manually entering invalid data into the Appointment Date field (e.g., letters or a string of numbers) when making an appointment on the web interface would cause a JavaScript console error in the web browser, please download the latest feature-specific web pages and overwrite your js\appointments.js file with the updated file.
AppointmentScheduling\js\appointments.js
Please overwrite this file with the updated file.
Prevent Activation of Disabled Transaction Buttons
To fix an issue where disabled action buttons for transactions on the Aeon web interface could still be activated using keyboard controls, please download the latest default web pages and overwrite your default js\atlasUtility.js file with the updated file and then overwrite your default css\aeon.css file with the updated file or make the changes below manually:
js\atlasUtility.js
Please overwrite this file with the updated file.
css\aeon.css
Change this (default line 88):
a.btn {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
To this:
/* CHANGES: Added disabled button styling to prevent activation via keyboard controls */
a.btn {
text-decoration: none;
}
a:not([href]):not([tabindex]).dropdown-item.btn.disabled {
color: #6c757d; /* ← Added disabled dropdown button styling */
}
a:not([href]):not([tabindex]).btn-primary.disabled,
a:not([href]):not([tabindex]).btn-secondary.disabled {
color: #fff; /* ← Added disabled primary/secondary button styling */
}
a:hover {
text-decoration: none;
}
Remove Unused CSS Properties
To remove unused color, font, and font-kerning CSS properties for the "main-navbar" class from the aeon.css file, please overwrite your default css\aeon.css file with the updated file or make the following changes manually:
css\aeon.css
Change this (default lines 273-279):
.main-navbar {
background-color: #08415c;
color: #000;
padding: 5px;
font: bold 26px 'Open Sans', sans-serif;
font-kerning: auto;
}
To this:
/* CHANGES: Removed unused color, font, and font-kerning properties */
.main-navbar {
background-color: #08415c;
padding: 5px;
}
/* ↑ Removed color, font, and font-kerning properties */
Encode Ampersands in HTML Attributes
As a best practice, all ampersands (&) should be encoded (using the format &) when included inside HTML attributes, such as when included in the href attribute for an anchor element (<a>) or the value attribute for an input element (<input>). To encode these ampersands in the Aeon web pages, please overwrite the files listed below with the new default files or make the changes on each page manually following the example below:
Note: Ampersands should not be encoded when used in JavaScript code. When making these changes manually, please ensure that ampersands included within any <script> tags in the web page file (i.e., within any blocks of code located between the <script> and </script> tags) are left unencoded.
Example - ViewActivity.html
Change the unencoded ampersand [&] (default lines 24-25):
<a class="btn btn-primary btn-md"
href="<#ACTION action="10" form="20">&Value=<#PARAM name='Value'>">
Download Excel workbook with all Activity details
</a>
<a class="btn btn-primary btn-md"
href="<#ACTION action="10" form="20">&Value=<#PARAM name='Value'>">
Download iCalendar file
</a>
To encode it [&]:
<!-- CHANGES: Encoded ampersands in href attributes for HTML compliance -->
<a class="btn btn-primary btn-md"
href="<#ACTION action="10" form="20">&Value=<#PARAM name='Value'>">
Download Excel workbook with all Activity details
</a>
<a class="btn btn-primary btn-md"
href="<#ACTION action="10" form="20">&Value=<#PARAM name='Value'>">
Download iCalendar file
</a>
<!-- ↑ Changed & to & in href attributes -->
Encode the ampersands (&) on the following web pages at the specified default lines:
Default Web Pages:
- ArchivalRequest.html (default line 16)
- FAQ.html (default line 72)
- include_nav.html (default line 54)
- Logon.html (default lines 65, 70, 80)
- Logon2.html (default lines 48, 51)
- ViewActivity.html (default lines 24, 25)
- templates\DataRow_CreditCardOrder.html (default lines 8, 15)
- templates\DataRow_DefaultActivity.html (default lines 7, 24)
- templates\DataRow_DefaultRequest.html (default lines 7, 14)
- templates\DataRow_ElectronicDelivery.html (default line 7)
- templates\DataRow_OrderBilling.html (default lines 11, 41)
- templates\DataRow_OrderEstimate.html (default lines 11, 41)
- templates\DataRow_ReviewRequest.html (default line 20)
- Note: There is only one unencoded ampersand to encode on this line.
- templates\payment\include_payment_form_authorize.net.html (default line 6)
- templates\payment\include_payment_form_cybersource.html (default lines 25, 26, 27)
- templates\payment\include_payment_form_payeezy.html (default line 6)
- templates\payment\include_payment_form_paypal.html (default lines 6, 11)
Feature-Specific Web Pages:
- AppointmentScheduling\templates\DataRow_DefaultAppointment.html (default lines 7, 23)
- AppointmentScheduling\include_nav.html (default line 59)
- AppointmentScheduling\ViewAppointment.html (default line 92)
- Sagepay\CreditCardPayment.html (default lines 47, 55)
July 3, 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:
/* CHANGES: Added atlas-accordion button styling for keyboard accessibility */
#transaction-menu .btn:hover {
text-decoration: underline;
}
.atlas-accordion .btn {
display: block; /* ← Added for proper button display */
font-size: inherit; /* ← Added to inherit font sizing */
text-align: left; /* ← Added for left alignment */
width: 100%; /* ← Added for full width */
}
.atlas-accordion .btn .fa.fa-chevron-down {
font-size: 1.5rem; /* ← Added for chevron icon sizing */
}
.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 isnot to be "used for any purpose other than private study, scholarship, or research". Ifa 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 ManagementSystem.</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>
To this:
<!-- CHANGES: Converted h2 headers to buttons for keyboard accessibility -->
<div class="atlas-accordion mb-3">
<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">
<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">
<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 isnot to be "used for any purpose other than private study, scholarship, or research". Ifa 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">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">
<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">
<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 ManagementSystem.</div>
<div class="mb-3">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>
<!-- ↑ Wrapped in atlas-accordion div and converted h2 elements to accessible buttons with proper ARIA attributes -->
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>">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>>
</div>
To this:
<!-- CHANGES: Removed name attribute from Boolean checkbox field -->
<div class="form-group col-md-5">
<label for="Newsletter">
<span class="<#ERROR>">Sign up for newsletter?</span>
</label>
<input type="checkbox"
id="Newsletter"
class="checkbox-as-bool"
data-bool-fieldname="User.CustomFields.Newsletter"
<#CHECKED>>
</div>
<!-- ↑ Removed name="User.CustomFields.Newsletter" attribute -->
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:
<!-- CHANGES: Changed from btn-group to large-btn-group for improved responsive accessibility -->
<div class="large-btn-group" role="group" aria-label="Actions for Request <#DATAROW>">
<!-- ↑ Changed class from btn-group to large-btn-group -->
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:
<!-- CHANGES: Updated page title from "Change" to "Update" User Information -->
<title>Aeon - Update User Information</title>
<!-- ↑ Changed from "Change" to "Update" -->
And change this (default line 20):
<h2>Change User Information</h2>
To this:
<!-- CHANGES: Updated page header from "Change" to "Update" User Information -->
<h2>Update User Information</h2>
<!-- ↑ Changed from "Change" to "Update" -->
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>
</div>
To this:
<!-- CHANGES: Renamed "My Profile" to "Account Info" and updated related IDs and text -->
<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>
</div>
<!-- ↑ Changed ID from navbarMyProfile to navbarAccountInfo, text from "My Profile" to "Account Info", and "Change" to "Update" -->
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 span aria-hidden="true" class="far fa-edit"></span> Edit
</a>
</div>
To this:
<!-- CHANGES: Added large-btn-group wrapper for improved responsive accessibility -->
<div class="col-lg-7 col-md-12 text-right">
<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 span aria-hidden="true" class="far fa-edit"></span> Edit
</a>
<!-- ↓ Button group continues below -->
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:
<!-- CHANGES: Added closing div for large-btn-group wrapper -->
<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 large-btn-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:
<!-- CHANGES: Added payment-container class for improved print styling -->
<div class="container">
<main id="content" aria-label="Content">
<div class="row payment-container">
<div class="col-lg-9">
<h2 class="h3 py-0">Payment Details</h2>
<!-- ↑ Added payment-container class -->
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:
<!-- CHANGES: Added media="screen" to aeon.css and cleaned up print.css media attribute -->
<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">
<!-- ↑ Added media="screen" to aeon.css, removed trailing slash from print.css -->
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:
<!-- CHANGES: Added media="screen" to aeon.css and included print.css for proper print styling -->
<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"> <!-- ← Added print stylesheet -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
crossorigin="anonymous">
<!-- ↑ Added media="screen" to aeon.css and added print.css link -->
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:
<!-- CHANGES: Updated to use minified JavaScript files for better performance -->
<script type="text/javascript" src="js/ArchivalRequest.min.js"></script>
<script type="text/javascript" src="js/duplicationPermissionToggle.min.js"></script>
<!-- ↑ Changed .js to .min.js for both scripts -->
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:
<!-- CHANGES: Updated to use minified JavaScript file for better performance -->
<script type="text/javascript" src="js/EADRequest.min.js"></script>
<!-- ↑ Changed .js to .min.js -->
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:
<!-- CHANGES: Updated to use minified JavaScript files for better performance -->
<script type="text/javascript" src="js/billingContextOptionHandler.min.js"></script>
<script type="text/javascript" src="js/billingAccountsOptionHandler.min.js"></script>
<!-- ↑ Changed .js to .min.js for both billing scripts -->
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:
<!-- CHANGES: Updated to use minified CSS files for better performance -->
<link rel="stylesheet" href="css/aeon.min.css" media="screen">
<link rel="stylesheet" href="css/custom.css">
<link rel="stylesheet" href="css/print.min.css" media="print">
<!-- ↑ Changed aeon.css to aeon.min.css and print.css to print.min.css -->
Then change this (default line 20):
<script src="js/atlasUtility.js"></script>
To this:
<!-- CHANGES: Updated to use minified JavaScript file for better performance -->
<script src="js/atlasUtility.min.js"></script>
<!-- ↑ Changed .js to .min.js -->
Finally, change this (default line 24):
<script src="js/webAlerts.js"></script>
To this:
<!-- CHANGES: Updated to use minified JavaScript file for better performance -->
<script src="js/webAlerts.min.js"></script>
<!-- ↑ Changed .js to .min.js -->
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:
<!-- CHANGES: Updated to use minified JavaScript files for better performance -->
<script type="text/javascript" src="js/schedule-review-toggle.min.js"></script>
<script type="text/javascript" src="js/switchRequestForm.min.js"></script>
<script type="text/javascript" src="js/lang/en-US.min.js"></script>
<script type="text/javascript" src="js/datepicker.min.js"></script> <!-- ← Already minified -->
<script type="text/javascript" src="js/scheduled-date.min.js"></script>
<!-- ↑ Changed .js to .min.js for schedule-review-toggle, switchRequestForm, lang/en-US, and scheduled-date -->
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:
<!-- CHANGES: Updated to use minified CSS file for better performance -->
<link rel="stylesheet" href="css/aeon.min.css" media="screen">
<!-- ↑ Changed .css to .min.css -->
Change this (default line 16):
<link rel="stylesheet" href="css/print.css" media="print">
To this:
<!-- CHANGES: Updated to use minified CSS file for better performance -->
<link rel="stylesheet" href="css/print.min.css" media="print">
<!-- ↑ Changed .css to .min.css -->
Finally, change this (default line 91):
<script src="js/webAlerts.js"></script>
To this:
<!-- CHANGES: Updated to use minified JavaScript file for better performance -->
<script src="js/webAlerts.min.js"></script>
<!-- ↑ Changed .js to .min.js -->
SiteMap.html
Change this (default line 6):
<script src="js/buildSiteMap.js"></script>
To this:
<!-- CHANGES: Updated to use minified JavaScript file for better performance -->
<script src="js/buildSiteMap.min.js"></script>
<!-- ↑ Changed .js to .min.js -->
ViewSearchResults.html
Change this (default line 7):
<script type="text/javascript" src="js/search.js"></script>
To this:
<!-- CHANGES: Updated to use minified JavaScript file for better performance -->
<script type="text/javascript" src="js/search.min.js"></script>
<!-- ↑ Changed .js to .min.js -->
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:
<!-- CHANGES: Updated to use minified JavaScript file for better performance -->
<script type="text/javascript" src="js/KeepInReview.min.js"></script>
<!-- ↑ Changed .js to .min.js -->
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:
<!-- CHANGES: Updated to use minified JavaScript files for better performance -->
<script type="text/javascript" src="js/lang/en-US.min.js"></script>
<script type="text/javascript" src="js/datepicker.min.js"></script> <!-- ← Already minified -->
<script type="text/javascript" src="js/appointments.min.js"></script>
<!-- ↑ Changed en-US.js to en-US.min.js and appointments.js to appointments.min.js -->