1. Atlas Systems
  2. ILLiad
  3. Release Notes

Implementing 9.2 Web Page Release Changes

Print Friendly and PDF Follow

Avatar
Brittany De Gail
Updated

The release of ILLiad 9.2 comes with several changes to the default web pages. To implement these changes, you can either:

  • Download the 9.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. 
Note: The ILLiad 9.2 default web pages also include all changes made in the 9.1 default web page point releases. Please review the Implementing the 9.1 Web Page Release Changes article and make any outstanding changes as necessary to ensure that your web pages are up to date.
If you have any questions, would like to request a copy of your web pages to implement these changes, or require Concierge Services when implementing the new web pages, please contact support at support@atlas-sys.com.

9.2 Release

30 August 2022 Web Page Changes

22 November 2022 Web Page Changes

14 June 2023 Web Page Changes

07 September 2023 Web Page Changes

9.2 Release

Change "display" Attribute to "displayStyle" 

Change "display" Attribute to "displayStyle"

To fix an issue where transaction notes display the incorrect date and time on the web, the "display" attribute was changed to "displayStyle" on the following web pages:

  • Lending/templates/DataRow_DefaultNote.html (line 4)
  • Lending/templates/DataRow_DefaultRequest.html (line 45)
  • templates/DataRow_CheckedOutItems.html (line 54)
  • templates/DataRow_DefaultNote.html (line 4)
  • templates/DataRow_DefaultRequest.html (line 54)
  • templates/DataRow_ElectronicDelivery.html (line 51)
  • templates/DataRow_ElectronicDeliveryUndelete.html (line 47)
The 'display' attribute is still currently supported in the 9.2 web pages, but the new 'displayStyle' attribute is preferred for optimal performance and to ensure compatibility with new functionality in future updates.

To implement this change, please overwrite the files listed above with the new default files or make the change on each page manually following the example below:

Example

Change this:

<span class="convert-local" data-iso8601=
"<#DATAROW field='TransactionDate' 
display='ISO8601'>">
<#DATAROW field='TransactionDate'></span>
  

To this:

<span class="convert-local" data-iso8601=
"<#DATAROW field='TransactionDate' 
displayStyle='ISO8601'>">
<#DATAROW field='TransactionDate'></span>

30 August 2022 Web Page Changes

These changes impact a large number of web pages. To implement the changes, please overwrite your default web pages with the updated files and reapply your customizations, or make the changes manually on each page if your customizations are extensive.

The ILLiad default web pages were updated with a number of changes to increase the accessibility of the web pages for users. As the specific changes may vary for each file and the release includes a large number of affected web pages, we are providing a few different resources on this page to assist you with applying the changes to your web page files. 

Code Comparison File | Description of Changes

Code Comparison File

To assist you with making these changes manually to your web pages, an HTML file containing the detailed code changes for each web page file is available for download:

After downloading the HTML file, you can double-click the downloaded file to open it up in your default web browser, then follow the instructions below to learn how to use the file to make your web pages changes.

Using the Code Comparision Files

Included in the HTML file, you will see a comparison pane for each web page with the old code displayed on the left and the new code displayed on the right, and the specific code changes highlighted in red font against a red background. Line numbers are also included for each web page file to assist you with making the changes. The HTML file will display the web pages in alphabetical order. You can find the filename at the top of each comparison pane. It is recommended to go through each web page included in the file in order and follow the displayed code comparisons to apply the changes.

For complex changes, including those made to JavaScript files, it is recommended to download the new default web pages from the ILLiad Downloads page and overwrite the old file in your web directory rather than attempt to make manual changes to the file.

CodeComparison.png

Description of Changes

Fix Contrast Issues for Hyperlinks | Update First-Time User Registration Page Title | Fix Contrast for "No Search Results" Text | Add Missing Labels for Required Fields | Add Button Borders | Fix Contrast Issues for Buttons and Input Fields | Allow Zooming for Mobile Users | Fix Notification Preferences Button Accessibility Issues | Accessibility Fix for DataRow Template Buttons | Remove Non-Accessible Tooltips | Fix "Actions" Button ID on DataRow_ElectronicDelivery.html | Accessibility Fix for Cookie Consent Banner | Fix Spacing Issue on DataRow Templates | Add Error Page to Lending Web Directory

To provide additional clarity, a description of each type of change you will find in the new version of the web pages is provided below with accompanying examples and a list of affected web pages.

Fix Contrast Issues for Hyperlinks

To fix color contrast issues for hyperlinks against the default web page background colors, custom focus indicators were added for hyperlinks, and hyperlinks are now underlined by default and removed on mouse hover. 

To implement these changes, please overwrite your default css\illiad.css and Lending\css\illiad.css files with the updated files or make the following changes:

css\illiad.css & Lending\css\illiad.css

Note: Newly added code comments have been highlighted below in yellow for better visibility

Change this (default lines 77-81):

a {
    color: #08415c;
    text-decoration: none;
}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  

To this:

a {
    color: #08415c;
    text-decoration: underline;
}

a.btn {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

/*Caution: Removing hyperlink focus style will
result in using browser defaults, which might affect accessibility.
For more information, see WCAG 1.4.11 and 2.4.7*/
a:focus, a:focus-visible {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000;
    outline: 2px transparent solid;
}

Update First-Time User Registration Page Title

To change the title of the first-time user registration page title from "ILLiad Logon" to "ILLiad - First Time User Registration," please overwrite your default FirstTime.html file with the updated file or make the following changes:

FirstTime.html

Change this (default lines 4-8):

<head>
<meta http-equiv="Pragma" content="no-cache">
<title>ILLiad Logon</title>
<#INCLUDE filename="include_head.html">
</head>
  

To this:

<head>
<meta http-equiv="Pragma" content="no-cache">
<title>ILLiad - First Time User Registration</title>
<#INCLUDE filename="include_head.html">
</head>

Fix Contrast for "No Search Results" Text

The default color of the "No search results" text on the search results page has been darkened to improve contrast with the default web page background color. To implement these changes, please overwrite your default css\illiad.css and Lending\css\illiad.css files with the updated files or make the following changes:

css\illiad.css & Lending\css\illiad.css

Change this (default lines 255-259):

#no-results-message {
    color: #868e96;
    font-size: 16px;
    padding: 4px 0 0;
}
  

To this:

#no-results-message {
    color: #5f5e5e;
    font-size: 16px;
    padding: 4px 0 0;
}

Add Missing Labels for Required Fields

To fix an issue where certain fields marked as required by default in the ILLiad Customization Manager's WebValidation table are not labeled as required on several default web pages, please overwrite the files listed below for each field with the new default files or make the change on each page manually following the examples below:

PhotoJournalInclusivePages field

Change this:

<div class="form-group col-md-9">
<label for="PhotoJournalInclusivePages">
<span class="field">
<span class="<#ERROR name='ERRORPhotoJournalInclusivePages'>">
Inclusive Pages
 
</span>
</span>
</label>
<input type="text" class="form-control" 
name="PhotoJournalInclusivePages" id="PhotoJournalInclusivePages" 
value="<#PARAM name='PhotoJournalInclusivePages'>"  >
</div>
  

To this:

<div class="form-group col-md-9">
<label for="PhotoJournalInclusivePages">
<span class="field">
<span class="<#ERROR name='ERRORPhotoJournalInclusivePages'>">
Inclusive Pages 
<span class="req">(required)</span> 
</span>
</span>
</label>
<input type="text" class="form-control" 
name="PhotoJournalInclusivePages" id="PhotoJournalInclusivePages" 
value="<#PARAM name='PhotoJournalInclusivePages'>" required>
</div>

On the following web pages at the specified default lines:

  • Lending\EditLendingGenericRequestArticle.html (default lines 114-123)
  • Lending\LendingGenericRequestArticle.html (default lines 113-122)

Department field

Change this:

<div class="form-group col-md-5">
<label for="Department">
<span class="field">
<span class="<#ERROR name='ERRORDepartment'>">
Department
 
</span>
</span>
</label>
<select id="Department" name="Department" size="1" 
class="custom-select mr-sm-2"  >
<#OPTION name="custom" groupname="Department" 
selectedValue="<#PARAM name='Department'>">
</select>
</div>
  

To this:

<div class="form-group col-md-5">
<label for="Department">
<span class="field">
<span class="<#ERROR name='ERRORDepartment'>">
Department
<span class="req">(required)</span> 
</span>
</span>
</label>
<select id="Department" name="Department" size="1" 
class="custom-select mr-sm-2" required>
<#OPTION name="custom" groupname="Department" 
selectedValue="<#PARAM name='Department'>">
</select>
</div>

On the following web pages at the specified default lines:

  • NewUserRegistration.html (default lines 94-105)
  • NewAuthRegistration.html (default lines 96-107)

Current Password & New Password fields

Change this:

<section name="password-info">
<div class="form-group col-md-5">
<label for="CurrentPassword">
<span class="<#ERROR name='ERRORCurrentPassword'>">
Current Password
 
</span>
</label>
<input type="password" class="form-control" 
name="CurrentPassword" id="CurrentPassword" 
aria-describedby="passwordHelp" autocomplete="off"  >
</div>

<div class="form-group col-md-5">
<label for="Password1">
<span class="<#ERROR name='ERRORPassword1'>">
New Password
 
</span>
</label>
<input type="password" class="form-control" 
name="Password1" id="Password1" autocomplete="off"  >
<div class="small-notes">
Passwords must be at least eight characters long 
and contain a lowercase letter, an uppercase letter, 
and a number.
</div>
</div>

<div class="form-group col-md-5">
<label for="Password2">
<span class="<#ERROR name='ERRORPassword2'>">
Re-enter New Password
 
</span>
</label>
<input type="password" class="form-control" 
name="Password2" id="Password2" autocomplete="off"  >
</div>
</section>
  

To this:

<section name="password-info">
<div class="form-group col-md-5">
<label for="CurrentPassword">
<span class="<#ERROR name='ERRORCurrentPassword'>">
Current Password
<span class="req">(required)</span> 
</span>
</label>
<input type="password" class="form-control" 
name="CurrentPassword" id="CurrentPassword" 
aria-describedby="passwordHelp" autocomplete="off" required>
</div>

<div class="form-group col-md-5">
<label for="Password1">
<span class="<#ERROR name='ERRORPassword1'>">
New Password
<span class="req">(required)</span> 
</span>
</label>
<input type="password" class="form-control" 
name="Password1" id="Password1" autocomplete="off" required>
<div class="small-notes">
Passwords must be at least eight characters long 
and contain a lowercase letter, an uppercase letter, 
and a number.
</div>
</div>

<div class="form-group col-md-5">
<label for="Password2">
<span class="<#ERROR name='ERRORPassword2'>">
Re-enter New Password
<span class="req">(required)</span> 
</span>
</label>
<input type="password" class="form-control" 
name="Password2" id="Password2" autocomplete="off" required>
</div>
</section>

On the following web pages at the specified default lines:

  • ChangePassword.html (default lines 25-55)
  • Lending\LendingChangePassword.html (default lines 24-55)

Username field

Change this:

<div class="logon-field form-group col-md-5">
<label for="username">
<span class="<#ERROR name='ERRORUsername'>">
Username
 
</span>
</label>
<input type="text" class="form-control" name="username" 
id="username" value="<#PARAM name='Username'>"  >
</div>
  

To this:

<div class="logon-field form-group col-md-5">
<label for="username">
<span class="<#ERROR name='ERRORUsername'>">
Username
<span class="req">(required)</span> 
</span>
</label>
<input type="text" class="form-control" name="username" 
id="username" value="<#PARAM name='Username'>" required>
</div>

On the following web pages at the specified default lines:

  • Lending\LendingForgotPassword.html (default lines 23-28)
  • ForgotPassword.html (default lines 23-28)

Add Button Borders

Borders have been added to all buttons to resolve color contrast issues. To implement these changes, please overwrite your default css\illiad.css and Lending\css\illiad.css files with the updated files or make the following changes:

css\illiad.css & Lending\css\illiad.css

Note: Newly added code comments have been highlighted below in yellow for better visibility

Change this (default lines 168-172):

/*These are CSS classes for the buttons*/
 
 
 
 
 
 
 
 
 
 
 
 
 

.btn-primary, .btn-secondary, .btn-light {
    border: none;
    margin: 10px 0;
}
  

To this:

/*These are CSS classes for the buttons*/
/*Caution: Altering button borders might affect accessibility.
For more information, see WCAG 1.4.11*/
.btn-primary, .btn-secondary, .btn-light, .btn.disabled, .btn:disabled,
.btn-primary:hover, .btn-secondary:hover, .btn-light:hover,
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle,
.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show>.btn-secondary.dropdown-toggle,
.btn-light:not(:disabled):not(.disabled):not(.dropdown-item).active, .btn-light:not(:disabled):not(.disabled):not(.dropdown-item):active, .show>.btn-light.dropdown-toggle {
    border: 1px solid #6C757D;
}

.btn-link, .btn-link.disabled, .btn-link:disabled, .dropdown-menu .dropdown-item.btn-light {
    border: none;
}

.btn-primary, .btn-secondary, .btn-light {
     
    margin: 10px 0;
}

Fix Contrast Issues for Buttons and Input Fields

To address color contrast issues for buttons and input fields against the default web page background colors, custom focus indicators were added for buttons and input fields and an outline was added for input fields. To implement these changes, please overwrite your default css\illiad.css and Lending\illiad.css files with the updated files or make the following changes:

css\illiad.css & Lending\css\illiad.css

Note: Newly added code comments have been highlighted below in yellow for better visibility

Add this (default line 76):

p {
    color: #5f5e5e;
    font-size: 16px;
    padding: 10px;

}

 
 
 
 
 
 
 
 
 
 
 
 
 

 
 
 
 
 
 
 
 
  

To this:

p {
    color: #5f5e5e;
    font-size: 16px;
    padding: 10px;

}

/*Caution: Removing or altering focus style might affect accessibility.
For more information, see WCAG 1.4.11 and 2.4.7*/
button:focus,
.btn:focus,
.btn:not(:disabled):not(.disabled).active:focus,
.btn:not(:disabled):not(.disabled):active:focus,
.show>.btn.dropdown-toggle:focus,
.form-control:focus,
.custom-select:focus,
.custom-control-input:focus~.custom-control-label::before {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000;
    outline: 2px transparent solid;
}

/*For Safari compatibility, which does not support box-shadows on
unstyled form controls. A black colored outline has
sufficient contrast against our white and grey backgrounds.*/
input:not(.form-control, .custom-select, .custom-control-input, .btn):focus {
    box-shadow: none;
    outline: 2px #000 solid;
    outline-offset: 2px;
}

 

And add this (default line 284):

section[name='order-info'] .form-check, 
form[name='ChangeUserInformation'] .form-check {
    padding-left: 2.25rem;
}
 
 
 
 
 
 
 
 
 
 
 

 
 
 
  

To this:

section[name='order-info'] .form-check, 
form[name='ChangeUserInformation'] .form-check {
    padding-left: 2.25rem;
}

/*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;
}

.custom-switch .custom-control-label::after {
background-color: #757575;
}

Allow Zooming for Mobile Users

To fix an issue where users on mobile devices can't zoom in and out of the web pages, please overwrite the files listed below with the updated files or make the following changes to each file following the example below:

Example

Change this:

<meta name="viewport" content="width=device-width, 
initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
  

To this:

<meta name="viewport" content="width=device-width, 
initial-scale=1.0 ">

On the following web pages at the specified default lines:

  • include_head.html (default line 2)
  • Lending\include_head.html (default line 2)
  • Lending\LendingLogon.html (default line 7)

Fix Notification Preferences Button Accessibility Issues

To fix accessibility issues caused by <a> tags used for the "All" and "None" buttons within include_notification_preferences.html, please overwrite your include_notification_preferences.html file with the updated file or make the following changes:

include_notification_preferences.html

Change this (default lines 15-24):

<div class="row">
<div class="col-3 offset-6">
<a data-notification-check="Email" data-notification-action="all">
<input class="btn btn-primary btn-md" type="button" 
aria-label="Select all email options for account notifications" 
onclick='SelectAll("notification1")' value="All" disabled/></a>
<a data-notification-check="Email" data-notification-action="none">
<input class="btn btn-primary btn-md" type="button" 
aria-label="Unselect all email options for account notifications" 
onclick='UnSelectAll("notification1")' value="None" disabled/></a>
</div>
<div class="col-3">
<a data-notification-check="Text" data-notification-action="all">
<input class="btn btn-primary btn-md" type="button" 
aria-label="Select all text/sms options for account notifications" 
onclick='SelectAll("notification2")' value="All"/></a>
<a data-notification-check="Text" data-notification-action="none">
<input class="btn btn-primary btn-md" type="button" 
aria-label="Unselect all text/sms options for account notifications" 
onclick='UnSelectAll("notification2")' value="None"/></a>
</div>
</div>
  

To this:

<div class="row">
<div class="col-3 offset-6">
<span data-notification-check="Email" data-notification-action="all">
<input class="btn btn-primary btn-md" type="button" 
aria-label="Select all email options for account notifications" 
onclick='SelectAll("notification1")' value="All" disabled/></span>
<span data-notification-check="Email" data-notification-action="none">
<input class="btn btn-primary btn-md" type="button" 
aria-label="Unselect all email options for account notifications" 
onclick='UnSelectAll("notification1")' value="None" disabled/></span>
</div>
<div class="col-3">
<span data-notification-check="Text" data-notification-action="all">
<input class="btn btn-primary btn-md" type="button" 
aria-label="Select all text/sms options for account notifications" 
onclick='SelectAll("notification2")' value="All"/></span>
<span data-notification-check="Text" data-notification-action="none">
<input class="btn btn-primary btn-md" type="button" 
aria-label="Unselect all text/sms options for account notifications" 
onclick='UnSelectAll("notification2")' value="None"/></span>
</div>
</div>

 

And change this (default lines 49-58):

<div class="row">
<div class="col-3 offset-6">
<a data-notification-check="Email" data-notification-action="all">
<input class="btn btn-primary btn-md" type="button" 
aria-label="Select all email options for request notifications" 
onclick='SelectAll("notification3")' value="All"/></a>
<a data-notification-check="Email" data-notification-action="none">
<input class="btn btn-primary btn-md" type="button" 
aria-label="Unselect all email options for request notifications" 
onclick='UnSelectAll("notification3")' value="None"/></a>
</div>
<div class="col-3">
<a data-notification-check="Text" data-notification-action="all">
<input class="btn btn-primary btn-md" type="button" 
aria-label="Select all text/sms options for request notifications" 
onclick='SelectAll("notification4")' value="All"/></a>
<a data-notification-check="Text" data-notification-action="none">
<input class="btn btn-primary btn-md" type="button" 
aria-label="Unselect all text/sms options for request notifications" 
onclick='UnSelectAll("notification4")' value="None"/></a>
</div>
</div>
  

To this:

<div class="row">
<div class="col-3 offset-6">
<span data-notification-check="Email" data-notification-action="all">
<input class="btn btn-primary btn-md" type="button" 
aria-label="Select all email options for request notifications" 
onclick='SelectAll("notification3")' value="All"/></span>
<span data-notification-check="Email" data-notification-action="none">
<input class="btn btn-primary btn-md" type="button" 
aria-label="Unselect all email options for request notifications" 
onclick='UnSelectAll("notification3")' value="None"/></span>
</div>
<div class="col-3">
<span data-notification-check="Text" data-notification-action="all">
<input class="btn btn-primary btn-md" type="button" 
aria-label="Select all text/sms options for request notifications" 
onclick='SelectAll("notification4")' value="All"/></span>
<span data-notification-check="Text" data-notification-action="none">
<input class="btn btn-primary btn-md" type="button" 
aria-label="Unselect all text/sms options for request notifications" 
onclick='UnSelectAll("notification4")' value="None"/></span>
</div>
</div>

Accessibility Fix for DataRow Template Buttons

To fix an issue where certain buttons used in the DataRow template files can't be activated using keyboard controls, please overwrite the files listed below with the new default files or make the change on each page manually following the example below:

Example

Change this:

<a class="btn btn-primary" role="button" 
href="<#ACTION action='10' form='72'>&amp;Value=<#DATAROW 
field='TransactionNumber'>">
<span class="fa fa-info-circle mr-1"></span>Details</a>
  

To this:

<a class="btn btn-primary"  
href="<#ACTION action='10' form='72'>&amp;Value=<#DATAROW 
field='TransactionNumber'>">
<span class="fa fa-info-circle mr-1"></span>Details</a>

On the following web pages at the specified default lines:

  • Lending\templates\DataRow_DefaultRequest.html (default line 14)
  • templates\DataRow_CheckedOutItems.html (default line 14)
  • templates\DataRow_DefaultRequest.html (default line 14)
  • templates\DataRow_ElectronicDelivery.html (default line 15)

Remove Non-Accessible Tooltips

To remove unnecessary tooltips from the DataRow template files that do not meet accessibility requirements, please overwrite the files listed below with the new default files or make the changes on each page manually following the instructions below:

js\atlasUtility.js & Lending\js\atlasUtility.js

The changes to these files are extensive. Please overwrite these files with the updated files.

css\illiad.css & Lending\css\illiad.css

Change this (default lines 320-363):

.modal-footer{
    padding: 0rem;
}

/* Tooltip container */
.tool-tip {
    display: inline-block;
    position: relative;
}

/* Tooltip text */
.tool-tip .tool-tip-text {
    background-color: #555;
    border-radius: 6px;
    color: #fff;
    font-size: small;
    padding: 5px 0;
    text-align: center;
    visibility: hidden;

    /* Position the tooltip text */
    bottom: 125%;
    left: 0%;
    position: absolute;
    z-index: 1;

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.3s;
}

/* Tooltip arrow */
.tool-tip .tool-tip-text::after {
    border-color: #555 transparent transparent transparent;
    border-style: solid;
    border-width: 5px;
    content: "";
    left: 50%;
    margin-left: -5px;
    position: absolute;
    top: 100%;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tool-tip:hover .tool-tip-text {
    opacity: 1;
    visibility: visible;
}
  

To this:

.modal-footer{
    padding: 0rem;
}

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

DataRow Template Files (Excluding DataRow_ElectronicDelivery.html)

Change this:

<div class="col-lg-5 col-md-12 text-right">
<div class="field mb2 text-muted">
Item Status
<span class="field-value font-weight-bold tool-tip">
<#DATAROW field='TransactionStatus'>
<span class="tool-tip-text">
Moved to <#DATAROW field='TransactionStatus'> on 
<span class="convert-local" 
data-iso8601="<#DATAROW field='TransactionDate' 
display='ISO8601'>"><#DATAROW field='TransactionDate'>
</span>
</span>
</span>
</div>
</div>
  

To this:

<div class="col-lg-5 col-md-12 text-right">
<div class="field mb2 text-muted">
Item Status
<span class="field-value font-weight-bold"  >
<#DATAROW field='TransactionStatus'>
 
 
 
 
 
 
 
</span>
</div>
</div>

On the following web pages at the specified default lines:

  • templates\DataRow_CheckedOutItems.html (default lines 48-57)
  • templates\DataRow_DefaultRequest.html (default lines 48-57)
  • templates\DataRow_ElectronicDeliveryUndelete.html (default lines 41-51)
  • Lending\templates\DataRow_DefaultRequest.html (default lines 38-49)

templates\DataRow_ElectronicDelivery.html

Change this (default lines 15-20):

<a role="button" class="btn btn-primary menuViewPdf 
<#DATAROW field='RequestActionAllowed' name='ViewPDF' 
disabledValue='btn-secondary+disabled'>" 
href="<#ACTION action='10' form='75'>&amp;Value=<#DATAROW 
field='TransactionNumber'>" 
data-toggle="popover" data-trigger="hover" 
data-placement="bottom" data-content="File Size: 
<#DATAROW field='FileSize' displayStyle='Default'>">
<span aria-hidden="true" class="fas fa-eye"></span>
 View</a>

<div class="btn-group" role="group">
<button id="btnGroupDrop " 
type="button" class="btn btn-secondary dropdown-toggle" 
data-toggle="dropdown" aria-haspopup="true" 
aria-expanded="false">
Actions
</button>
  

To this:

<a   class="btn btn-primary menuViewPdf 
<#DATAROW field='RequestActionAllowed' name='ViewPDF' 
disabledValue='btn-secondary+disabled'>" 
href="<#ACTION action='10' form='75'>&amp;Value=<#DATAROW 
field='TransactionNumber'>"
 
 
 >
<span aria-hidden="true" class="fas fa-eye"></span>
 View</a>

<div class="btn-group" role="group">
<button id="btnGroupDrop<#DATAROW field='TransactionNumber'>" 
type="button" class="btn btn-secondary dropdown-toggle" 
data-toggle="dropdown" aria-haspopup="true" 
aria-expanded="false">
Actions
</button>

And change this (default lines 40-56):

<div class="row">
<div class="col-lg-7 col-md-12">
<div class="field text-muted">Transaction Number
<span class="field-value font-weight-bold mr-1">
<#DATAROW field='TransactionNumber'></span></div>
 
 
 
 
</div>

<div class="col-lg-5 col-md-12 text-right">
<div class="field mb2 text-muted">
<span class="field-value font-weight-bold tool-tip">
<#DATAROW field='TransactionStatus'>
<span class="tool-tip-text">
Moved to <#DATAROW field='TransactionStatus'> on 
<span class="convert-local" 
data-iso8601="<#DATAROW field='TransactionDate' 
display='ISO8601'>"><#DATAROW field='TransactionDate'>
</span>
</span>
</span>
</div>
</div> 
</div>
  

To this:

<div class="row">
<div class="col-lg-7 col-md-12">
<div class="field text-muted">Transaction Number 
<span class="field-value font-weight-bold mr-1">
<#DATAROW field='TransactionNumber'></span></div>
<div class="field text-muted">File Size: 
<span class="field-value font-weight-bold mr-1">
<#DATAROW field="FileSize" displayStyle="Default">
</span></div>
</div>

<div class="col-lg-5 col-md-12 text-right">
<div class="field mb2 text-muted">
<span class="field-value font-weight-bold  ">
<#DATAROW field='TransactionStatus'>
 
 
 
 
 
 
 
</span>
</div>
</div> 
</div>

Fix "Actions" Button ID on DataRow_ElectronicDelivery.html

To fix an accessibility issue caused by an incorrect id value for the "Actions" button on DataRow_ElectronicDelivery.html, please overwrite your default DataRow_ElectronicDelivery.html file with the updated file or make the following changes:

templates\DataRowElectronicDelivery.html

Change this (default lines 18-20):

<button id="btnGroupDrop " 
type="button" 
class="btn btn-secondary dropdown-toggle" 
data-toggle="dropdown" aria-haspopup="true" 
aria-expanded="false">
 Actions
</button>
  

To this:

<button id="btnGroupDrop<#DATAROW field='TransactionNumber'>" 
type="button" 
class="btn btn-secondary dropdown-toggle" 
data-toggle="dropdown" aria-haspopup="true" 
aria-expanded="false">
 Actions
</button>

Accessibility Fix for Cookie Consent Banner

To fix an issue where the cookie notification popup can't be dismissed using keyboard controls, please overwrite the following files with the updated files, and either overwrite your default css\illiad.css and Lending\css\illiad.css files with the updated files or make the following changes:

js\atlasCookieConsent.js & Lending\js\atlasCookieConsent.js

The changes to this file are extensive. Please overwrite this file with the updated file.

js\cookieconsent.min.js & Lending\js\cookieconsent.min.js

The changes to this file are extensive. Please overwrite this file with the updated file.

css\cookieconsent.min.css & Lending\css\cookieconsent.min.css

The changes to this file are extensive. Please overwrite this file with the updated file.

css\illiad.css & Lending\css\illiad.css

Add this to the end of the file:

/* 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{
    color: var(--cc-btn-primary-bg);
}

.theme_atlas .cc_div #c-txt{
    color: var(--cc-text);
}

.theme_atlas .c-bn, .theme_atlas .c-bn:hover {
    border: 1px solid #79818B;
}

Fix Spacing Issue on DataRow Templates

To fix a spacing issue with the Transaction Number and Due Date fields on several DataRow template files, please overwrite the files listed below with the new default files or make the change on each page manually following the example below:

Example

Change this:

<div class="col-lg-7 col-md-12">
<div class="field text-muted">
Transaction Number<span class="field-value font-weight-bold mr-1">
<#DATAROW field='TransactionNumber'></span></div>
</div>
  

To this:

<div class="col-lg-7 col-md-12">
<div class="field text-muted">
Transaction Number <span class="field-value font-weight-bold mr-1">
<#DATAROW field='TransactionNumber'></span></div>
</div>

And change this:

<div class="field mb2 text-muted">
Due Date<span class="field-value font-weight-bold mr-1">
<#DATAROW field='DueDate'></span>
</div></div>
  

To this:

<div class="field mb2 text-muted">
Due Date <span class="field-value font-weight-bold mr-1">
<#DATAROW field='DueDate'></span>
</div></div>

On the following web pages at the specified default lines:

  • templates\DataRow_CheckedOutItems.html (default lines 46 & 55)
  • templates\DataRow_DefaultRequest.html (default lines 46 & 55)
  • templates\DataRow_ElectronicDelivery.html (default line 42 - Transaction Number field only)

Add Error Page to Lending Web Directory

To fix an issue where Lending web pages do not display an error page to the user, please download the latest set of default web pages from the ILLiad Downloads page and copy the following file into the Lending folder within your ILLiad web directory:

Lending\Error.html

Please download this file and add it to your Lending web directory.

22 November 2022 Web Page Changes

Resolve Contrast and Formatting Issues on Search Pages | Remove Unneccesary Hidden Inputs | Fix Page Header on NewAuthRegistration.html

Resolve Contrast and Formatting Issues on Search Pages

To fix the improper alignment of the radio buttons on the search web pages and to resolve contrast issues for the search box, please overwrite the files listed below with the new default files or make the change on each page manually following the examples below:

css\illiad.css & Lending\css\illiad.css

Note: Changes to code comments have been highlighted below in yellow for better visibility

Change this (default lines 404-406):

#searchType, #SearchTypeAll {
    display: inline !important;
}
  

To this:

#searchType label {
    width: auto;
}

ViewSearchResults.html & Lending\LendingViewSearchResults.html

Change this (default lines 21-40):

 
<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">
 

<!--Switch control for search filtering-->
<!--
<div class="custom-control custom-switch  " 
id="customSearchType">
<input type="checkbox" name="SearchType" 
class="custom-control-input" id="SearchType" 
value="<#PARAM name='SearchType'>">
<label class="custom-control-label" 
for="SearchType">Search <u>only</u> active requests
</label>
</div>
-->

<!--Radio control for search filtering-->
<br>

<div id="searchType"  >
 
<input checked   
name="SearchType" type="radio" id="SearchTypeActive" 
value="Active">
<label for="SearchTypeActive"  >
<span>Search <u>only</u> active requests</span></label>
 

 
<input class="ml-3" name="SearchType" 
type="radio" id="SearchTypeAll" value="All">
<label for="SearchTypeAll"  >
Search all requests</label>
 

 

To this:

<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">
</div>

<!--Switch control for search filtering-->
<!--
<div class="custom-control custom-switch mb-4" 
id="customSearchType">
<input type="checkbox" name="SearchType" 
class="custom-control-input" id="SearchType" 
value="<#PARAM name='SearchType'>">
<label class="custom-control-label" 
for="SearchType">Search <u>only</u> active requests
</label>
</div>
-->

<!--Radio control for search filtering-->
 

<div id="searchType" class="mb-3 mt-1">
<div class="form-check form-check-inline mr-3 mb-3">
<input checked class="form-check-input" 
name="SearchType" type="radio" id="SearchTypeActive" 
value="Active">
<label for="SearchTypeActive" class="form-check-label">
<span>Search <u>only</u> active requests</span></label>
</div>

<div class="form-check form-check-inline">
<input class="form-check-input" name="SearchType" 
type="radio" id="SearchTypeAll" value="All">
<label for="SearchTypeAll" class="form-check-label">
Search all requests</label>
</div>

Remove Unnecessary Hidden Inputs

Unnecessary hidden inputs have been removed from various web forms to enhance security and improve the efficiency of the code on these pages. The hidden inputs that should be removed within each file vary and are detailed in an expandable section below the code change example.  Please either overwrite these files with the new default files or locate and remove the listed hidden inputs on each page manually following the example below as a guide:

Lending\EditLendingGenericRequestArticle.html

In the following example, the RequestType, Username, SessionID, ESPNumber, CallNumber, and NotWantedAfter hidden inputs are removed.

Change this (default lines 13-24):

<div class="container">
    <main id="content" aria-label="Content">
        <form action="illiadlending.dll" method="post" 
         name="EditLendingGenericRequestArticle">
            <input type="hidden" name="ILLiadForm" 
             value="EditLendingGenericRequestArticle">
            <input type="hidden" name="RequestType" 
             value="<#PARAM name='RequestType'>">
            <input type="hidden" name="Username" 
             value="<#PARAM name='Username'>">
            <input type="hidden" name="SessionID" 
             value="<#PARAM name='SessionID'>">
            <input type="hidden" name="TransactionNumber" 
             value="<#PARAM name='TransactionNumber'>">
            <input type="hidden" name="ESPNumber" 
             value="<#PARAM name='ESPNumber'>">
            <input type="hidden" name="CallNumber" 
             value="<#PARAM name='CallNumber'>">
            <input type="hidden" name="NotWantedAfter" 
             value="<#PARAM name='NotWantedAfter'>">
            <#FORMSTATE>
  

To this:

<div class="container">
    <main id="content" aria-label="Content">
        <form action="illiadlending.dll" method="post" 
        name="EditLendingGenericRequestArticle">
            <input type="hidden" name="ILLiadForm" 
             value="EditLendingGenericRequestArticle">
             
             
             
             
             
             
            <input type="hidden" name="TransactionNumber" 
             value="<#PARAM name='TransactionNumber'>">
             
             
             
             
             
             
            <#FORMSTATE>
Click here for the list of affected default web pages
  • Lending\EditLendingGenericRequestArticle.html
    • Remove RequestType, Username, SessionID, ESPNumber, CallNumber, NotWantedAfter
  • Lending\EditLendingGenericRequestLoan.html
    • Remove Username, SessionID, ESPNumber, CallNumber, NotWantedAfter
  • Lending\LendingChangePassword.html
    • Remove Username, SessionID
  • Lending\LendingGenericRequestArticle.html
    • Remove Username, SessionID
  • Lending\LendingGenericRequestLoan.html
    • Remove Username, SessionID
  • Lending\LendingNewUserRegistration.html
    • Remove SessionID
  • Lending\LendingUpdateAddressInformation.html
    • Remove Username, SessionID
  • Lending\LendingViewSearchResults.html
    • Remove SessionID
  • ArticleRequest.html
    • Remove Username, SessionID
  • BookChapterRequest.html
    • Remove Username, SessionID
  • ChangePassword.html
    • Remove Username, SessionID
  • ChangeUserInformation.html
    • Remove Username, SessionID, ArticleBillingCategory, LoanBillingCategory, DeliveryGroup, LoanDeliveryGroup, WebDeliveryGroup
  • ConferencePaperRequest.html
    • Remove Username, SessionID
  • EditAccountInformation.html
    • Remove Username, SessionID
  • EditArticleRequest.html
    • Remove Username, SessionID, ESPNumber, CallNumber, NotWantedAfter
  • EditBookChapterRequest.html
    • Remove Username, SessionID, ESPNumber, CallNumber, NotWantedAfter
  • EditConferencePaperRequest.html
    • Remove Username, SessionID, ESPNumber, CallNumber, NotWantedAfter
  • EditGenericRequestTesting.html
    • Remove RequestType, Username, SessionID, ESPNumber, CallNumber, NotWantedAfter
  • EditLoanRequest.html
    • Remove RequestType, Username, SessionID, ESPNumber, CallNumber, NotWantedAfter
  • EditMultimediaRequest.html
    • Remove RequestType, Username, SessionID, NotWantedAfter
  • EditPatentRequest.html
    • Remove Username, SessionID, ESPNumber, CallNumber, NotWantedAfter
  • EditReportRequest.html
    • Remove Username, SessionID, ESPNumber, CallNumber, NotWantedAfter
  • EditStandardsDocumentRequest.html
    • Remove Username, SessionID, ESPNumber, CallNumber, NotWantedAfter
  • EditThesisRequest.html
    • Remove RequestType, Username, SessionID, ESPNumber, CallNumber, NotWantedAfter
  • GenericRequestTesting.html
    • Remove RequestType, Username, SessionID
  • LoanRequest.html
    • Remove Username, SessionID
  • MultimediaRequest.html
    • Remove Username, SessionID
  • PatentRequest.html
    • Remove Username, SessionID
  • ReportRequest.html
    • Remove Username, SessionID
  • StandardsDocumentRequest.html
    • Remove Username, SessionID
  • ThesisRequest.html
    • Remove Username, SessionID
  • ViewSearchResults.html
    • Remove SessionID

Fix Page Header on NewAuthRegistration.html

To fix an incorrect page header on NewAuthRegistration.html, please overwrite your NewAuthRegistration.html file with the new default file or make the changes manually following the example below:

NewAuthRegistration.html

Change this (default line 27):

<h2 class="page-header">
Change Personal Information</h2>
  

To this:

<h2 class="page-header">
New Authenticated User Registration for ILLiad</h2>

14 June 2023 Web Page Changes

Implement Captcha Support on User Registration Pages | Remove Unused Lending JavaScript File | Update Copyright Year | Adjust Color for Hyperlinks in Cookie Banner | Adjust Color for Web Alert Titles | Adjust Label Color for Form Fields Failing Validation | Reorder Links in include_head.html | Fix Timezone Conversion Issues | Update FAQ | Fixes for Web Alerts | Fix Broken Label Elements on Lending Pages | Realign Actions Menu Dropdown Options | Improve Transaction Menu Responsiveness | Update Value Persistence JavaScript | Accessibility Fixes for Small Notes | Remove Unused 'aria-describedby' Attributes

Implement Captcha Support on User Registration Pages

The NewUserRegistration.html and LendingNewUserRegistration.html web pages were 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 ILLiad article.
Note: The ILLiad Web DLL and Lending DLL components must be updated to v9.2.3 following the June 2023 server update instructions before the new captcha web pages can be used to implement the captcha requirement on the New User Registration forms. 

Remove Unused Lending JavaScript File

The userNotificationPreferences.js file located in the js subfolder of the Lending web pages has been removed from the default web pages and is no longer supported. This file is not actively used by the ILLiad Lending web pages and should be deleted from your Lending web directory, if present. To locate and remove this file, please follow the steps below:

  1. Navigate into the Lending folder in your ILLiad web directory
  2. Navigate into the js subfolder that is located inside the Lending folder
  3. Within the js folder, locate and remove/delete the userNotificationPreferences.js file
Warning! Do not delete the separate userNotificationPreferences.js file that is located within the js subfolder of the Borrowing web pages. To avoid deleting the wrong file, please ensure that you have navigated into the Lending folder before locating and removing the JavaScript file. 

Update Copyright Year

To update the hardcoded copyright year on the ILLiad web pages to the current year, please overwrite the files listed below with the updated files or make the following changes manually:

css\illiad.css & Lending\css\illiad.css

Change this (default line 4):

Copyright 2022 Atlas Systems, Inc. 
http://www.atlas-sys.com
  

To this:

Copyright 2023 Atlas Systems, Inc. 
http://www.atlas-sys.com

Then update the copyright year on the web pages listed below following this example for include_footer.html:

Change this (include_footer.html default line 3):

<div>&copy; 2022<a href="http://www.atlas-sys.com"> 
Atlas Systems, Inc.</a> All Rights Reserved.</div>
  

To this:

<div>&copy; 2023<a href="http://www.atlas-sys.com"> 
Atlas Systems, Inc.</a> All Rights Reserved.</div>

Make the change above on the following web pages at the specified default lines:

  • Lending\include_footer.html (default line 3)
  • Lending\LendingLogon.html (default line 84)
  • include_footer.html (default line 3)
  • Logon.html (default line 78)

Adjust Color for Hyperlinks in Cookie Banner

To fix contrast issues with the default color used for hyperlinks added to the cookie consent banner, please overwrite the files listed below with the updated files or make the following changes manually:

css\illiad.css & Lending\css\illiad.css

Change this (default lines 426-428):

.theme_atlas .cc_div a {
     
    color: var(--cc-btn-primary-bg);
}
  

To this:

.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 Color for Web Alert Titles

To fix contrast issues with the default color used to display web alert titles, please overwrite the files listed below with the updated files or make the following changes manually:

css\illiad.css & Lending\css\illiad.css

Change this (default line 265):

.btn-alert {
    color: #c74827;
    font-size: 14px;
    padding: 4px 12px 6px;
}
  

To this:

.btn-alert {
    color: #b81f18;
    font-size: 14px;
    padding: 4px 12px 6px;
}

Adjust Label Color for Form Fields Failing Validation

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 and Lending\js\atlasUtility.js files with the updated files and either overwrite your css\illiad.css and Lending\css\illiad.css files with the updated files or make the following changes manually:

js\atlasUtility.js & Lending\js\atlasUtility.js

Please overwrite these files with the updated files.

css\illiad.css & Lending\css\illiad.css

Change this (default line 147-149):

 
 
 

.fas {
    font-size: 16px;
}
  

To this:

.validationError {
    color: #b81f18;
}

.fas {
    font-size: 16px;
}

Reorder Links in include_head.html

To reorder the list of stylesheet links in order to improve the consistency of the code contained within the include_head.html file, please overwrite your default include_head.html file with the updated file or make the following changes manually:

include_head.html

Move this (default lines 10-13):

<link rel="stylesheet" type="text/css" 
href="css/cookieconsent.min.css" />
<link rel="stylesheet" type="text/css" 
href="css/illiad.css" media="screen"/>
<link rel="stylesheet" type="text/css" 
href="css/custom.css">
<link rel="stylesheet" type="text/css" 
href="css/print.css" media="print">
 
 
  

To the bottom of the list of links:

 
 
<link rel="stylesheet" type="text/css" 
href="css/illiad.css" media="screen"/>
<link rel="stylesheet" type="text/css" 
href="css/custom.css">
<link rel="stylesheet" type="text/css" 
href="css/print.css" media="print">
<link rel="stylesheet" type="text/css" 
href="css/cookieconsent.min.css" />

Fix Timezone Conversion Issues

To fix an issue where tracking entries for requests on the ILLiad web pages may sometimes display at a different timezone than what is shown in the ILLiad Client, please overwrite your default js\atlasUtility.js and Lending\js\atlasUtility.js files with the updated files and either overwrite the additional files listed below with the updated files or make the following changes manually:

js\atlasUtility.js & Lending\js\atlasUtility.js

Please overwrite these files with the updated files.

templates\DataRow_DefaultNote.html & Lending\templates\DataRow_DefaultNote.html

Change this (default line 4):

<span class="convert-local" 
data-iso8601="<#DATAROW field='NoteDate' 
displayStyle='ISO8601'>"><#DATAROW field='NoteDate'>
</span>

 

To this:

<span 
 
 ><#DATAROW field='NoteDate'>
</span>

include_head.html

Change this (default line 20):

<script src="js/custom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/
libs/moment.js/2.22.2/moment-with-locales.min.js" 
integrity="sha256-VrmtNHAdGzjNsUNtWYG55xxE9xDTz4
gF63x/prKXKH0=" crossorigin="anonymous"></script>
<script src="js/WebAlerts.js"></script>
  

To this:

<script src="js/custom.js"></script>
 
 
 
 
<script src="js/WebAlerts.js"></script>

Lending\include_head.html

Change this (default line 21):

<script src="js/custom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/
libs/moment.js/2.22.2/moment-with-locales.min.js" 
integrity="sha256-VrmtNHAdGzjNsUNtWYG55xxE9xDTz4
gF63x/prKXKH0=" crossorigin="anonymous"></script>
<script src="js/lendingWebAlerts.js"></script>
  

To this:

<script src="js/custom.js"></script>
 
 
 
 
<script src="js/lendingWebAlerts.js"></script>

Update FAQ

To update outdated information on the Borrowing and Lending FAQ web pages, please overwrite the files listed below with the updated files or make the following changes manually:

FAQ.html

Change this (default line 117):

<div>
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.
</div>
  

To this:

<div>
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.
</div>

And change this (default line 189):

<div>
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 ILLiad without any problems.
</div>
  

To this:

<div>
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 ILLiad system.
</div>

Lending\LendingFAQ.html

Change this (default line 120):

<p>
You need a Web browser that can handle forms, 
tables, and preferrably Cascading Style Sheets (CSS). 
We recommend the current versions of either 
Microsoft Internet Explorer or Mozilla Firefox.
</p>
  

To this:

<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 182-183):

<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 ILLiad without any problems.
</p>
  

To this:

<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 ILLiad system.
</p>

Fixes for Web Alerts

To add the missing 'type' attribute to the Close buttons used on web alerts and to fix an accessibility issue caused by a broken 'aria-labelledby' attribute, please overwrite the files listed below with the updated files:

js\webAlerts.js

The changes to this file are extensive. Please overwrite this file with the updated file.

Lending\js\lendingWebAlerts.js

The changes to this file are extensive. Please overwrite this file with the updated file.

Fix Broken Label Elements on Lending Pages

To fix incorrectly formatted label elements on the Lending web pages, please overwrite the files listed below with the updated files or make the following changes manually:

Lending\LendingNewUserRegistration.html

Change this (default lines 28-33):

<div class="form-group col-md-6"> 
 
<span class="<#ERROR name='ERRORLibraryName'>">
Library Name 
<span class="req">(required)</span> 
</span>
 
<input id="LibraryName" name="LibraryName" 
type="text" class="form-control" size="40" 
value="<#PARAM name='LibraryName'>" required>
</div>
 

To this:

<div class="form-group col-md-6">
<label for="LibraryName"> 
<span class="<#ERROR name='ERRORLibraryName'>">
Library Name 
<span class="req">(required)</span> 
</span>
</label>
<input id="LibraryName" name="LibraryName" 
type="text" class="form-control" size="40" 
value="<#PARAM name='LibraryName'>" required>
</div>

And change this (default line 117):

<div class="form-group col-md-5">
<label for="BorrowingDeptEmail"></label>
<span class="<#ERROR name='ERRORBorrowingDeptEmail'>">
E-Mail Address
<span class="req">(required)</span>
</span>
</label>
<input id="BorrowingDeptEmail" name="BorrowingDeptEmail" 
type="text" size="40" class="form-control" 
value="<#PARAM name='BorrowingDeptEmail'>" required>
</div>
  

To this:

<div class="form-group col-md-5">
<label for="BorrowingDeptEmail"> 
<span class="<#ERROR name='ERRORBorrowingDeptEmail'>">
E-Mail Address
<span class="req">(required)</span>
</span>
</label>
<input id="BorrowingDeptEmail" name="BorrowingDeptEmail" 
type="text" size="40" class="form-control" 
value="<#PARAM name='BorrowingDeptEmail'>" required>
</div>

Lending\LendingUpdateAddressInformation.html

Change this (default line 29):

<div class="form-group col-md-6"> 
<label for="LibraryName">
<span class="<#ERROR name='ERRORLibraryName'>">
Library Name 
<span class="req">(required)</span>
</span>
</span>
<input id="LibraryName" name="LibraryName" 
type="text"class="form-control" size="40" 
value="<#PARAM name='LibraryName'>" required>
</div>
 

To this:

<div class="form-group col-md-6"> 
<label for="LibraryName">
<span class="<#ERROR name='ERRORLibraryName'>">
Library Name 
<span class="req">(required)</span>
</span>
</label>
<input id="LibraryName" name="LibraryName" 
type="text"class="form-control" size="40" 
value="<#PARAM name='LibraryName'>" required>
</div>

And change this (default line 106):

<div class="form-group col-md-5">
<label for="BorrowingDeptEmail"></label>
<span class="<#ERROR name='ERRORBorrowingDeptEmail'>">
E-Mail Address
<span class="req">(required)</span>
</span>
</label>
<input id="BorrowingDeptEmail" name="BorrowingDeptEmail" 
type="text" size="40" class="form-control" 
value="<#PARAM name='BorrowingDeptEmail'>" required>
</div>
  

To this:

<div class="form-group col-md-5">
<label for="BorrowingDeptEmail"> 
<span class="<#ERROR name='ERRORBorrowingDeptEmail'>">
E-Mail Address
<span class="req">(required)</span>
</span>
</label>
<input id="BorrowingDeptEmail" name="BorrowingDeptEmail" 
type="text" size="40" class="form-control" 
value="<#PARAM name='BorrowingDeptEmail'>" required>
</div>

Realign Actions Menu Dropdown Options

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_CheckedOutItems.html default line 20):

<div class="dropdown-menu  " 
aria-labelledby="btnGroupDrop<#DATAROW field='TransactionNumber'>">
  

To this:

<div class="dropdown-menu dropdown-menu-right" 
aria-labelledby="btnGroupDrop<#DATAROW field='TransactionNumber'>">

On the following web pages at the specified default lines:

  • Lending\templates\DataRow_DefaultRequest.html (default line 20)
  • templates\DataRow_CheckedOutItems.html (default line 20)
  • templates\DataRow_DefaultRequest.html (default line 20)
  • templates\DataRow_ElectronicDelivery.html (default line 21)
  • templates\DataRow_ElectronicDeliveryUndelete.html (default line 27)

Improve Transaction Menu Responsiveness

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 the files listed below with the updated files or make the following changes manually:

css\illiad.css & Lending\css\illiad.css

Change this (default lines 254-256):

 
 
 

.badge-primary {
     background-color: #08415c;
}
  

To this:

#transaction-menu .btn:hover {
    text-decoration: underline;
}

.badge-primary {
    background-color: #08415c;
}

include_TransactionMenu.html & Lending\include_TransactionMenu.html

Change this (default lines 1-2):

<div   class="d-flex 
justify-content-center  ">
<div class="btn-group 
 "
role="group">
  

To this:

<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 change this (default lines 14-15):

<div class=" 
<#TRANSACTION field='RequestType' 
displayStyle='CompareValue' compareValue='Loan' 
disabledValue='d-none'>">
<a class="btn btn-light menuRenew  
<#TRANSACTION field='RequestActionAllowed' 
name='Renew' disabledValue='disabled'>"
href="<#ACTION action='11' form='67'>
&Value=<#TRANSACTION field='TransactionNumber'>">
<span aria-hidden="true" 
class="fas fa-calendar-alt "></span>
 Renew
</a>
</div>
  

To this:

<div class="btn-group 
<#TRANSACTION field='RequestType' 
displayStyle='CompareValue' compareValue='Loan' 
disabledValue='d-none'>">
<a class="btn btn-light menuRenew my-1 py-2 
<#TRANSACTION field='RequestActionAllowed' 
name='Renew' disabledValue='disabled'>"
href="<#ACTION action='11' form='67'>
&Value=<#TRANSACTION field='TransactionNumber'>">
<span aria-hidden="true" 
class="fas fa-calendar-alt "></span>
 Renew
</a>
</div>

And change this (default lines 31-32):

<div class=" 
<#TRANSACTION field='RequestType' 
displayStyle='CompareValue' compareValue='Article' 
disabledValue='d-none'>">
<a class="btn btn-light menuViewPdf  
<#TRANSACTION field='RequestActionAllowed' 
name='ViewPDF' disabledValue='disabled'>"
href="<#ACTION action='10' form='75'>
&Value=<#TRANSACTION field='TransactionNumber'>">
<span aria-hidden="true" 
class="fas fa-eye"></span>
 View Item
</a>
  

To this:

<div class="btn-group flex-column flex-grow-1 flex-md-row flex-md-grow-0 
<#TRANSACTION field='RequestType' 
displayStyle='CompareValue' compareValue='Article' 
disabledValue='d-none'>">
<a class="btn btn-light menuViewPdf my-1 py-2
<#TRANSACTION field='RequestActionAllowed' 
name='ViewPDF' disabledValue='disabled'>"
href="<#ACTION action='10' form='75'>
&Value=<#TRANSACTION field='TransactionNumber'>">
<span aria-hidden="true" 
class="fas fa-eye"></span>
 View Item
</a>

Then follow the example for the Edit Request button to add the "my-1 py-2" class to the code for the remaining buttons in this file at the default lines listed below:

Edit Request Button Example

Change this (default line 4):

<a class="btn btn-light menuEdit  
<#TRANSACTION field='RequestActionAllowed' 
name='Edit' disabledValue='disabled'>"
href="<#ACTION action='20' form='63'>&Value=
<#TRANSACTION field='TransactionNumber'>">
<span aria-hidden="true" 
class="fas fa-edit text-primary"></span>
 Edit Request
</a>
  

To this:

<a class="btn btn-light menuEdit my-1 py-2 
<#TRANSACTION field='RequestActionAllowed' 
name='Edit' disabledValue='disabled'>"
href="<#ACTION action='20' form='63'>&Value=
<#TRANSACTION field='TransactionNumber'>">
<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)
  • 21 (Resubmit Request button)
  • 26 (Clone Request button)
  • 37 (Delete Item button)
  • 42 (Undelete Item button)

Update Value Persistence JavaScript

The JavaScript used to persist a user's previously selected values within dropdown menus, radio buttons, and checkboxes on the ILLiad web pages was updated to fix issues where the checkbox toggle switch on the search web pages would not correctly filter search results to include active requests only and where values would not persist on Safari and other WebKit-based web browsers. To implement these changes, please overwrite your default js\atlasUtility.js and Lending\js\atlasUtility.js files with the updated files and either overwrite the additional files listed below with the updated files or make the following changes manually:

js\atlasUtility.js & Lending\js\atlasUtility.js

Please overwrite these files with the updated files.

ViewSearchResults.html & Lending\LendingViewSearchResults.html

Change this (default line 29):

<input type="checkbox" name="SearchType" 
class="custom-control-input" id="SearchType" 
value="<#PARAM name='SearchType'>">
  

To this:

<input type="checkbox" name="SearchType" 
class="custom-control-input" id="SearchType" 
value="Active" data-persisted-value="<#PARAM name='SearchType'>">

Then change this (default lines 37-45):

<div class="form-check form-check-inline 
mr-3 mb-3">
<input checked class="form-check-input" 
name="SearchType" type="radio" id="SearchTypeActive" 
value="Active"  >
<label for="SearchTypeActive" 
class="form-check-label"><span>Search 
<u>only</u> active requests</span></label>
</div>

<div class="form-check form-check-inline">
<input class="form-check-input" 
name="SearchType" type="radio" id="SearchTypeAll" 
value="All"  >
<label for="SearchTypeAll" class="form-check-label">
Search all requests</label>
</div>
  

To this:

<div class="form-check form-check-inline 
mr-3 mb-3">
<input checked class="form-check-input" 
name="SearchType" type="radio" id="SearchTypeActive" 
value="Active" data-persisted-value="<#PARAM name='SearchType'>">
<label for="SearchTypeActive" 
class="form-check-label"><span>Search 
<u>only</u> active requests</span></label>
</div>

<div class="form-check form-check-inline">
<input class="form-check-input" 
name="SearchType" type="radio" id="SearchTypeAll" 
value="All" data-persisted-value="<#PARAM name='SearchType'>">
<label for="SearchTypeAll" class="form-check-label">
Search all requests</label>
</div>

And delete this (default lines 64-65/66-67):

<script>
    $(document).ready(function () {
        var saveState="<#PARAM name='SearchType'>"
        $("input[name='SearchType'][value='"+ saveState +"']").prop("checked", true)
        if (($('#searchResults .requestResult').length == 0) && ($('#searchTerm').text() != '')) { 
            $('#no-results-message').show();
        } 
        else
        {
            $('#no-results-message').hide();
        }
    });
</script>

Then follow the example for ChangeUserInformation.html to change the "data-persistedValue" attribute to the new "data-persisted-value" attribute on each of the web page files and default lines listed below:

Example

Change this (ChangeUserInformation.html default line 212):

<select id="DeliveryGroup" name="DeliveryGroup" 
size="1" class="custom-select mr-sm-2" 
data-persistedValue="<#PARAM name='DeliveryGroup'>">
  

To this:

<select id="DeliveryGroup" name="DeliveryGroup" 
size="1" class="custom-select mr-sm-2" 
data-persisted-value="<#PARAM name='DeliveryGroup'>">

Change the persisted value attribute on these files at these default lines:

  • Lending\EditLendingGenericRequestArticle.html (default line 169)
  • Lending\EditLendingGenericRequestLoan.html (default lines 146, 164)
  • Lending\LendingGenericRequestArticle.html (default line 174)
  • Lending\LendingGenericRequestLoan.html (default lines 150, 168)
  • ChangeUserInformation.html (default lines 212, 226, 240)
  • EditGenericRequestTesting.html (default line 140)
  • EditLoanRequest.html (default line 141)
  • EditMultimediaRequest.html (default line 93)
  • EditReportRequest.html (default line 126)
  • GenericRequestTesting.html (default line 144)
  • LoanRequest.html (default line 144)
  • MultimediaRequest.html (default line 94)
  • NewAuthRegistration.html (default lines 213, 227, 241)
  • NewUserRegistration.html (default lines 207, 221, 235)
  • ReportRequest.html (default line 129)

Accessibility Fixes for Small Notes

To fix an issue where small notes attached to fields on web forms were not read automatically by screen readers, changes were made to the New Password field on various web pages and the Symbol/Username field on LendingNewUserRegistration.html. To implement these changes, please overwrite the files listed below for each field with the new default files or make the change on each page manually following the examples below:

New Password Field

ChangePassword.html Example

Change this (default lines 41-42):

<div class="form-group col-md-5">
<label for="Password1">
<span class="<#ERROR name='ERRORPassword1'>">
New Password
<span class="req">(required)</span>
</span>
</label>
<input type="password" class="form-control" 
name="Password1" id="Password1" autocomplete="off" 
  required>
<div class="small-notes"  >
Passwords must be at least eight characters 
long and contain a lowercase letter, an uppercase 
letter, and a number.
</div>
</div>
  

To this:

<div class="form-group col-md-5">
<label for="Password1">
<span class="<#ERROR name='ERRORPassword1'>">
New Password
<span class="req">(required)</span>
</span>
</label>
<input type="password" class="form-control" 
name="Password1" id="Password1" autocomplete="off" 
aria-describedby="passwordNotes" required>
<div class="small-notes" id="passwordNotes">
Passwords must be at least eight characters long 
and contain a lowercase letter, an uppercase 
letter, and a number.
</div>
</div>

On the following web pages at the specified default lines:

  • Lending\LendingChangePassword.html (default lines 41-42)

  • Lending\LendingNewPassword.html (default lines 38-39)

  • Lending\LendingNewUserRegistration.html (default lines 178-179)

  • ChangePassword.html (default lines 41-42)

  • NewPassword.html (default lines 31-32)

  • NewUserRegistration.html (default lines 265-266)

Symbol Field

To update the small notes for the Symbol/Username field, please overwrite your default Lending\LendingNewUserRegistration.html file with the updated file or make the following changes manually:

Lending\LendingNewUserRegistration.html 

Change this (default lines 167-168):

<div class="form-group col-md-4">
<label for="Username">
<span class="<#ERROR name='ERRORUsername'>">
Symbol
<span class="req">(required)</span>
</span>
</label>
<input type="text" class="form-control" 
name="Username" id="Username" 
value="<#PARAM name='NewUsername'>" autocomplete="off" 
  required>
<div class="small-notes"  >
This will also be used as your logon username.</div>
</div>
  

To this:

<div class="form-group col-md-4">
<label for="Username">
<span class="<#ERROR name='ERRORUsername'>">
Symbol
<span class="req">(required)</span>
</span>
</label>
<input type="text" class="form-control" 
name="Username" id="Username" 
value="<#PARAM name='NewUsername'>" autocomplete="off" 
aria-describedby="usernameNotes" required>
<div class="small-notes" id="usernameNotes">
This will also be used as your logon username.</div>
</div>

Remove Unused 'aria-describedby' Attributes

To remove unused 'aria-describedby' attributes for the Current Password field that may be flagged by accessibility checkers, please overwrite the files listed below with the updated files or make the following changes manually:

ChangePassword.html & Lending\LendingChangePassword.html

Change this (default line 31):

<div class="form-group col-md-5">
<label for="CurrentPassword">
<span class="<#ERROR name='ERRORCurrentPassword'>">
Current Password
<span class="req">(required)</span> 
</span>
</label>
<input type="password" class="form-control" 
name="CurrentPassword" id="CurrentPassword" 
aria-describedby="passwordHelp" autocomplete="off" required>
</div>
  

To this:

<div class="form-group col-md-5">
<label for="CurrentPassword">
<span class="<#ERROR name='ERRORCurrentPassword'>">
Current Password
<span class="req">(required)</span> 
</span>
</label>
<input type="password" class="form-control" 
name="CurrentPassword" id="CurrentPassword" 
  autocomplete="off" required>
</div>

07 September 2023 Web Page Changes

Remove Unused Images From Images Folders | Remove <fieldset> Tags From Web Page Files

Remove Unused Images From Images Folders

The following changes have been made to the files contained in the images folders in both the Borrowing and Lending default web pages (located within the ILLiad web directory by default at css/images & Lending/css/images):

  • Removed the following unused image files from the Borrowing and Lending images folders:
    • 2nd_nav_bg.gif
    • aoutside.gif
    • atlasbox.gif
    • body_bg.gif
    • bullet.gif
    • content_wrap_bg.gif
    • content_wrap_e_bg.gif
    • custli.gif
    • featurebox_bg.gif
    • featurebox2_bg.gif
    • header_bg.gif
    • menusep.gif
    • navbarlinkbg.gif
    • pdficon.gif
    • rss.gif
    • sprites.gif
    • td_bg.gif
  • Added a new .gitkeep placeholder file to the Borrowing and Lending images folders so that these folders will still remain available within GitHub when empty

To implement these changes:

  1. Navigate to your ILLiad web directory on the ILLiad server (default location: C:\inetpub\wwwroot\illiad\ or in GitHub)

  2. Navigate to each of the images folders used with your Borrowing and Lending web pages

    The images folders are located within the ILLiad web directory by default at css/images (Borrowing web pages) & Lending/css/images (Lending web pages).
  3. Delete the unused image files listed above from each images folder (css/images & Lending/css/images)
  4. If your ILLiad web page files are hosted in GitHub, download the latest copy of the ILLiad 9.2 default web pages and unzip the downloaded file

  5. Navigate into the unzipped folder containing the newly downloaded web page files and locate the .gitkeep file in the Borrowing and Lending images folders

    The images folders are located at css/images (Borrowing web pages) & Lending/css/images (Lending web pages) within the downloaded web page file package.
  6. Copy this .gitkeep file into both the Borrowing and Lending images folders (css/images & Lending/css/images) in your ILLiad web directory

Remove <fieldset> Tags From Web Page Files

The <fieldset> tags used on various Borrowing and Lending web page files were removed to ensure compliance with accessibility requirements outlined in WCAG 1.3.1. To implement these changes, please overwrite the files listed below with the new default files or make the change on each page manually following the example for ArticleRequest.html below:

ArticleRequest.html Example

Change this (default line 22):

<#FORMSTATE>

<fieldset>

<h2 class="page-header">Article Request</h2>
  

To this:

<#FORMSTATE>

 

<h2 class="page-header">Article Request</h2>

And change this (default line 174):

<#INCLUDE filename="include_request_cited.html">
<#INCLUDE filename="include_request_buttons.html">
</fieldset>
</form>
  

To this:

<#INCLUDE filename="include_request_cited.html">
<#INCLUDE filename="include_request_buttons.html">
 
</form>

Remove the <fieldset> tags following the example above on these files at these default lines:

  • Lending\EditLendingGenericRequestArticle.html (default lines 20, 201)
  • Lending\EditLendingGenericRequestLoan.html (default lines 20, 197)
  • Lending\LendingChangePassword.html (default lines 17, 58)
  • Lending\LendingGenericRequestArticle.html (default lines 23, 206)
  • Lending\LendingGenericRequestLoan.html (default lines 21, 201)
  • Lending\LendingNewPassword.html (default lines 22, 59)
  • Lending\LendingNewUserRegistration.html (default lines 19, 197)
  • Lending\LendingUpdateAddressInformation.html (default lines 18, 147)
  • ArticleRequest.html (default lines 22, 174)
  • BookChapterRequest.html (default lines 22, 185)
  • ChangePassword.html (default lines 18, 58)
  • ChangeUserInformation.html (default lines 19, 255)
  • ConferencePaperRequest.html (default lines 22, 172)
  • EditAccountInformation.html (default lines 25, 89)
  • EditArticleRequest.html (default lines 21, 172)
  • EditBookChapterRequest.html (default lines 22, 185)
  • EditConferencePaperRequest.html (default lines 22, 174)
  • EditGenericRequestTesting.html (default lines 19, 161)
  • EditLoanRequest.html (default lines 19, 162)
  • EditMultimediaRequest.html (default lines 19, 117)
  • EditPatentRequest.html (default lines 18, 121)
  • EditReportRequest.html (default lines 18, 147)
  • EditStandardsDocumentRequest.html (default lines 19, 111)
  • EditThesisRequest.html (default lines 18, 133)
  • GenericRequestTesting.html (default lines 22, 165)
  • LoanRequest.html (default lines 21, 165)
  • MultimediaRequest.html (default lines 19, 117)
  • NewAuthRegistration.html (default lines 25, 253)
  • NewUserRegistration.html (default lines 25, 286)
  • PatentRequest.html (default lines 21, 124)
  • ReportRequest.html (default lines 21, 150)
  • StandardsDocumentRequest.html (default lines 21, 114)
  • ThesisRequest.html (default lines 21, 134)

 

Questions?

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

Contact Support

Articles in this section