Implementing 9.2 Web Page Release Changes

Brittany De Gail

Updated November 22, 2022 20:21

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

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:

Default Pages Accessibility Fixes [Click to 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.

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>

ILLiad August 30 2022 Changes.html
(3 MB)

9.2 Release

Change "display" Attribute to "displayStyle"

Example

30 August 2022 Web Page Changes

Code Comparison File

Using the Code Comparision Files

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

22 November 2022 Web Page Changes

Resolve Contrast and Formatting Issues on Search Pages

Remove Unnecessary Hidden Inputs

Fix Page Header on NewAuthRegistration.html

Articles in this section