Enabling the Click and Drag and Sort By Methods for Viewing Items

The web interface can be java-based to allow dragging and dropping of items or buttons/icons to move items up and down the list.

Adding Files

In order to implement the Drag and Drop and Sort by Dropdown functionality available on the Ares web interface, your site will need to install the new jquery and jquery-ui files and update your aresajax.js file to the new version.

1. One way to do this is to replace the js and css folders in your Ares web directory (found in C:\inetpub\wwwroot\Ares by default) with the updated folders found in your Ares updates directory (C:\Ares\Updates\WebPages by default).
2. If you don't want to replace the folders completely:
   1. Locate the aresajax.js file and the jquery-xxx.js file in the C:\Ares\Updates\WebPages\js folder and copy them to the js folder in your Ares web directory (C:\inetpub\wwwroot\Ares\js by default).
   2. Locate the jquery-ui-xxx.js file in the C:\Ares\Updates\WebPages\css folder and copy it to the css folder in your Ares web directory (C:\inetpub\wwwroot\Ares\css by default).

Edit the ICourseInfo.html File

In addition to adding the files mentioned above, changes need to be made to the ICourseInfo.html file.

1. First, the following two lines to need to be added after the fat.js script inclusion line:

   <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
   <script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>

2. Next, the following lines need to be added just before the items table:

   <div style="float: right">
   	<select id="SortCourseItems" name="SortCourseItems" onchange="ResortItems('<#PARAM name="SessionID">', '<#PARAM name="Value">',  this[selectedIndex].value);"/>
   		<option value="">Sort By</option>
   		<option value="SortOrder,Title,ArticleTitle">Default</option>
   		<option value="Title,ArticleTitle">Title</option>
   		<option value="Author">Author</option>
   		<option value="InactiveDate">Available Until</option>
   	</select>
   	<input type="button" onClick="SaveSortOrder('ItemTable', 'ID', '<#ACTION action="70" type="786">')" value="Save Order"/>
   </div>

   • (Optional) You can add fields to the Sort By Dropdown box by adding the option value to the code:

     <option value="CallNumber">Call Number</option>

   • (Optional) The display text for the column can be changed but if it is changed the SaveSortOrder method call that occurs in the OnClick event of the Save Order button will need to be modified so that the second parameter matches the new display text. The SaveSortOrder method call as written above, is shown here:

     SaveSortOrder('ItemTable', 'ID', '<#ACTION action="70" type="786">')

3. Then, the column definition "ItemID:ID" needs to be added to the item table tag as shown here:

   <#TABLE class="instructor-table" name="Item" id="ItemTable" type="CourseItems" headerText="Reserve Items" LinkType="ItemInfo" AllowRowClick="Yes" LinkColumn="BothTitlesIcon" AllowJavascriptHover="Yes" column="ItemID:ID" column="BothTitlesIcon:Title" column="Author:Author" column="inactiveDate:Inactive" column="CurrentStatus:Status" column="Tags:Tags" NoDataAction="ShowMessage" NoDataMessage="There are no items in this course." allowsort="true">