Implementing the Aeon v5.0 Web Pages Guide

The following guide details best practices for implementing the New Fully Accessible and Responsive Web Pages released with Aeon v5.0. 

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 v5.0 Aeon web pages and add them to your Testweb directory. Please note that Aeon must be updated to v5.0 in order to use the v5.0 web pages.

1. Download the latest version of the v5.0 default web pages from the Aeon Downloads page.
2. Make a backup of the current files in your Testweb directory.

3. Move the v5.0 pages into your Testweb directory via GitHub or, if you have direct access to your server, by copying the files into the Testweb folder (C:\Program Files (x86)\Aeon\Web\testweb). Your local Aeon administrator or Atlas can also assist you with this process, if necessary.

   Atlas-hosted sites in the PCI environment (those that use a credit card payment gateway) will need to coordinate with Atlas Support staff to make backups and to upload any new pages into Testweb. For assistance, please contact Atlas Support at support@atlas-sys.com.
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://yourAeonWebAddress/testweb/logon.html
5. Keep a copy of the v5.0 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.

Step Two: Make Customizations and Test

Simple Customizations | Testing the New Web Pages with OpenURL | Testing the New Web Pages with EAD Finding Aids

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.

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 27) and Include_header.html (default line 7):

<img src="css/images/Aeon_96.png" 
alt="Aeon logo" class="img-fluid">

<img src="css/images/yourImageFilename.png" 
alt="logo" class="img-fluid">

Edit the Navigation Bar Menu Options

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 "Photoduplication Request" option on the "New Requests" dropdown menu to display "Photocopy Request" instead, you would make the following change:

<a class="dropdown-item" 
href="<#ACTION action='10' 
form='23'>">Photoduplication Request</a>

<a class="dropdown-item" 
href="<#ACTION action='10' 
form='23'>">Photocopy Request</a>

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 "Photoduplication Request" option in the "New Request" dropdown menu, you would make the following change:

 <a class="dropdown-item" 
href="<#ACTION action='10' 
form='23'>">Photoduplication Request</a> 

<!-- <a class="dropdown-item" 
href="<#ACTION action='10' 
form='23'>">Photoduplication Request</a> -->

Edit Font and Color 

The colors and fonts used to style the Aeon web pages can be edited in the custom.css file. By default, Aeon 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 Aeon points to by adding the following code to custom.css and changing the import URL:

custom.css (add to default line 6) 

@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 to 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 "Describe a New Request" and "Item Information" 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 aeon.css line 12:

Accessing Developer Tools

The following list contains information on 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 the part of the page you want to change and click "Inspect Element."
• Safari: Right-click 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 "Collection Name/Location" field on DefaultRequest.html to display just "Collection Name" instead, you would make the following change:

<label for="Location">
   <span class="<#ERROR name='ERRORLocation'>">
       Collection Name/Location
   </span>
</label>

<label for="Location">
   <span class="<#ERROR name='ERRORLocation'>">
       Collection Name
   </span>
</label>

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

<label for="Location">
   <span class="<#ERROR name='ERRORLocation'>">
       Collection Name/Location
   </span>
</label>

<label for="Location">
   <span class="<#ERROR name='ERRORLocation'>">
       Collection Name
   </span>
</label>

Adding Fields

You can customize the request form to add additional available fields, or configure one of the blank item, user, or activity 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="<#ERROR name='ERRORItemInfo1'>">
Arranger
</span>
<span class="req">(required)</span>
</label>
<input type="text" class="form-control" name="ItemInfo1" id="ItemInfo1" value="<#PARAM name='ItemInfo1'>">

<span class="small-notes">
Please write out the full name
</span> 
</div></div>

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 Aeon 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.

Testing the New Web Pages with EAD Finding Aids

After customizing your new web pages, you should test them with your EAD request link resolver to ensure that there are no issues between the new web pages, your XSLT file, and your finding aid database. To test this functionality with the new pages in Testweb, use the following steps:

1. Find an item to request via your finding aid interface.
2. Click to request the item. Your Aeon 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 EAD request 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.

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:\Program Files (x86)\Aeon\Web).