Implementing the ILLiad v9.1 Web Pages Guide (v9.1)

Print Friendly and PDF Follow

The following guide details best practices for implementing the New Fully Accessible and Responsive Web Pages released with ILLiad v9.1. 

When implementing the new default web pages, please move your customizations to the new default web pages to ensure the compatibility of the new pages. If you have any questions or require Concierge Services when implementing the new web pages, please contact support at support@atlas-sys.com.

To ensure any changes made to the default web pages adhere to accessibility standards, please review the W3C Web Content Accessibility Guidelines and the Section 508 Accessibility Program.

To maintain responsive web design best practices, please review the Bootstrap 4 documentation before making changes. For example, logo images can be made accessible in both the PC and mobile view by adding the bootstrap class "img-fluid" as mentioned in the Bootstrap image documentation

Table of Contents

  1. Download the New Pages and Upload to Testweb
  2. Make Customizations and Test
  3. Go Live

Step One: Download the New Pages and Upload to Testweb

Follow the steps below to download the new v9.1 ILLiad web pages and add them to your Testweb directory. Please note that ILLiad must be updated to v9.1 in order to use the v9.1 web pages.

  1. Download the latest version of the v9.1 default web pages from the ILLiad Downloads page.
  2. Make a backup of the current files in your Testweb directory.
  3. Move the v9.1 pages into your Testweb directory via FTP or, if you have direct access to your server, by copying the files into the Testweb folder (c:\inetpub\wwwroot\illiad\testweb). Your local ILLiad administrator or Atlas can also assist you with this process, if necessary.
  4. View the new pages and decide which edits you would like to make using the information in step two of this article as a guide by logging into the test web pages via the Testweb URL: http://yourILLiadWebAddress/testweb/logon.html
  5. Keep a copy of the v9.1 pages on your local machine, and use these to make your edits with an application such as Notepad++ or Visual Studio Code.
  6. After making changes to the files on your local machine, re-upload the new files to your Testweb directory to view and test your changes.
Make sure the Webpath.txt file inside the Testweb folder contains the correct location for the Testweb directory. For example, if you put your Testweb in c:\inetpub\wwwroot\illiad\testweb, the webpath.txt file inside that folder would have one line that says c:\inetpub\wwwroot\illiad\testweb.

Step Two: Make Customizations and Test

Simple Customizations | Testing the New Web Pages with OpenURL

Before You Begin: Best Practices for Editing the Web Pages

  • Make changes on a copy of the web page files saved to your local machine rather than directly to the files hosted on your server within the Testweb directory.
  • Limit the number of changes made at once, and test after each change. Make sure to:
    • Verify that all required fields are working properly.
    • Make test requests through the new web pages, then check the ILLiad Client to verify that the information was transferred correctly.
  • Add comments to the code each time you make a change, explaining what you have changed and why.
    • For CSS files, use the format  /* Comment Text */
    • For HTML files, use the format <!-- Comment Text -->
Do not delete any of the following items from your code or web directory files:
  • Hidden fields for username, sessionid, and formstate
  • The <#FORMSTATE> DLL tag
  • Illiad.dll or any other other DLL files in your web directory

Simple Customizations

Add a Logo | Edit the Navigation Bar Options | Edit Font and Color | Add or Change Fields on Forms

The following list contains a few easy changes you can make to the web pages in order to customize them to your needs. Please make sure to ask your marketing department if you will need to use any specific fonts, colors, or logos for branding.

You can find detailed information on the differences between the new web pages and old web pages, as well as information on a few other customizations to consider in the New Fully Accessible and Responsive Web Pages article. 

Add a Logo 

To add a logo to your web pages, follow these steps:

  1. Obtain a copy of the image file for the logo from your marketing department.
  2. Place a copy of this file in the images folder located within the Testweb directory: "testweb\css\images".
  3. Add the code for the logo to Logon.html (default line 28) and Include_header.html (default line 5):

Change this:

 
 
 
 
<h1>
ILLiad
</h1>

 

To this:

<div class="container">
<img class="img-fluid"
src="css/images/yourImageFilename.png" alt="logo">
</div>
<h1>
ILLiad
</h1>
You must include the "img-fluid" class and alt attribute in the code for the image in order to adhere to accessibility and responsive web design standards.

Edit the Navigation Bar Menu Options

Navigation_bar.png

You can edit the options that appear on the dropdown menus in the navigation bar by making the following changes to the Include_nav.html file. 

Changing the Name of a Menu Option

To change the name of an option that appears on a dropdown menu, you will need to edit the display text for that option in the HTML. For example, to change the "Article" option on the "New Request" dropdown menu to display "PDF" instead, you would make the following change:

Change this (default line 20):

<a class="dropdown-item" 
href="<#ACTION action='10'
form='22'>">Article</a>

 

To this:

<a class="dropdown-item" 
href="<#ACTION action='10'
form='22'>">PDF</a>

If you change the name of a page in the dropdown menu, you should also make that change on the corresponding web page to which it links, and on any other affected pages.

In the previous example, because the name of the link to the Article Request form has been changed from "Article" to "PDF,"  ArticleRequest.html and EditArticleRequest.html should be edited to display "PDF Request" to the user instead of "Article Request."

Removing a Menu Option

You can remove an option from a dropdown menu by commenting out the code for that option. For example, to remove the "Multimedia" option in the "New Request" dropdown menu, you would make the following change:

Change this (default line 28):

 <a class="dropdown-item" 
href="<#ACTION action='10'
form='32'>">Multimedia</a> 

 

To this:

<!-- <a class="dropdown-item" 
href="<#ACTION action='10'
form='32'>">Multimedia</a> -->

Edit Font and Color 

The colors and fonts used to style the ILLiad web pages can be edited in the illiad.css file. By default, ILLiad uses the Google Fonts library. Your marketing department may require you to point to a specific font for branding purposes. If so, you can edit the font library that ILLiad points to here:

illiad.css (default line 7)

@import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto');

Using Developer Tools to Test Changes

Many browsers have built in "Developer Tools," which allow you click on any part of a web page to see which part of the code controls the styling for that part of the page, and also to test changes to the color and font directly in the browser.

In the example below, the color of the "ILLiad" and "Update Profile" headers has been changed to red using the browser's Developer Tools. The Developer Tools window also contains information specifying that the code to control this setting is located in illiad.css line 23:

DevTools3.png

After testing changes to fonts and colors in the Developer Tools, you must edit the illiad.css file with the new code to save your changes. Developer Tools is meant for testing purposes only and will not apply any changes you make to the your illiad.css file in the web directory.

Accessing Developer Tools

The following list contains information for how to access the Developer Tools on a few popular web browsers. Please see your web browser's documentation for information on accessing Developer Tools if it is not listed below:

  • Google Chrome: Right-click on the part of the page you want to change and click "Inspect."
  • Firefox: Right-click on on the part of the page you want to change and click "Inspect Element."
  • Safari: Right-click on on the part of the page you want to change and click "Inspect Element."

Add or Change Fields on Forms

Changing Field Names

You can change the name of a field as it appears on a form by editing its display text. Remember that if you make a change to a field on a request form, you must also make the same change on its corresponding edit page.

For example, to change the name of the "Title" field on LoanRequest.html to display "Item Title" instead, you would make the following change:

Change this (default lines 29-32):

<label for="LoanTitle">
<span class="field">
<span class=
"<#ERROR name='ERRORLoanTitle'>">
Title

 

To this:

<label for="LoanTitle">
<span class="field">
<span class=
"<#ERROR name='ERRORLoanTitle'>">
Item Title

You would then also need to update that field on EditLoanRequest.html:

Change this (default lines 30-33):

<label for="LoanTitle">
<span class="field">
<span class=
"<#ERROR name='ERRORLoanTitle'>">
Title

 

To this:

<label for="LoanTitle">
<span class="field">
<span class=
"<#ERROR name='ERRORLoanTitle'>">
Item Title

Adding Fields

You can customize the request form to add additional available fields such as PMID or DOI, or configure one of the blank item info (e.g., ItemInfo1) fields to add a custom field for any other desired information. The following example shows how to use ItemInfo1 to collect information for a required "Arranger" field on a web request form:

<div class="form-group col-md-9">
<label for="ItemInfo1">
<span class="field">
<span class="<#ERROR name='ERRORItemInfo1'>">
Arranger
<span class="req">(required)</span>
</span>
<br/>
<span class="small-notes">
Please write out the full name
</span>
</span>
</label>
<input type="text" class="form-control" name="ItemInfo1"
id="ItemInfo1" value="<#PARAM name='ItemInfo1'>">
</div>
Remember to update the field's entry in the Customization Manager's WebValidation table when changing a field from required to not required, or vice versa. See Changing Required Fields in the documentation for more information.

Testing the New Web Pages with OpenURL 

After customizing your new web pages, you should test them with your OpenURL link resolver to ensure that there are no issues. To test OpenURL with the new pages, use the following steps:

  1. Find an item to request via OpenURL.
  2. Click to request the item. Your ILLiad logon page should appear.
  3. Copy the URL for this page and paste it into a text editor such as Notepad.
  4. Edit the URL to point to your Testweb server (see the example below).
  5. Copy and paste the new Testweb URL into your web browser and navigate to this page.
  6. Log in and review the information on the request form to confirm that the OpenURL link is working properly.

Adding Testweb to the URL

To point your URL to Testweb, just add "testweb" to the beginning of the link address. Please note that your URL may be slightly different than the examples below depending on how your web pages are configured.

Single Server

Change this:

  • https://yourILLiadServerURL/illiad/ illiad.dll?Action%3D10...

To this:

  • https://yourILLiadServerURL/illiad/testweb/illiad.dll?Action%3D10...

Shared Server

Change this:

  • https://yourILLiadServerURL/illiad/main/ illiad.dll?Action%3D10...

To this:

  • https://yourILLiadServerURL/illiad/main/testweb/illiad.dll?Action%3D10...

Step Three: Go Live

When you have made all the necessary customizations to the new web pages and have tested them thoroughly using Testweb, the next step is to go live by moving the new pages from the Testweb directory to the Production directory (default location: c:\inetpub\wwwroot\illiad or c:\inetpub\wwwroot\illiad\site for shared server locations).

VTL_VideoLink.png

Questions?

If this article didn’t resolve your issue, please take a moment and answer a few questions to help improve our documentation:

Feedback