Library Assessment Working Group University of Illinois at Urbana-Champaign Hyperlinks in Desk Tracker Field Names Some Tips and Troubleshooting We have discovered a few problems with putting hyperlinks into the names of fields (e.g. “Description,” “RRGIS-This Question is About,” et cetera) in Desk Tracker. This document briefly describes what can go wrong and how to fix it. First of all, you can add a hyperlink to any field name simply by using HTML when you are writing out the name. So if we go to Desk Tracker’s Manage tab (only visible for administrators who can edit forms), then under the Page List select a tab such as Activity to see what fields are available, we can edit the name of a field by clicking on the pencil icon beside its name under the Edit Page Fields header and choosing rename. We could also choose add new field if we were creating one that does not yet exist. When renaming a field, Desk Tracker provides a perfectly justified warning: Renaming a field is a serious action. The new name will appear on all reports and data downloads. If the new name changes the meaning of the field, your report data will be compromised! Only use this tool to correct typos and formatting issues. Do not enter a name that changes the meaning of the field! That is worth considering, but we are just adding a hyperlink, not changing the nature of the data collected. In the text bar, we surround our field name with the tags for the HTML anchor element <a> just like we would if we were adding a link to a website: Before – After – Now, when we view our field under the Activity tab, the name is a hyperlink. This is a great way to put documentation just one click away from all the staff who enter data. But now, unfortunately, the link can cause problems when we attempt to retrieve our data. The built-in Desk Tracker graphs break, but what is worse flat-format reports will Library Assessment Working Group University of Illinois at Urbana-Champaign encounter an error because the field name is too long for processing. When generating a report, we will see a stark website with only the following message: Identifier name 'a href=http www example com directory directory index htmlTEST Question a' is too long In general, if we cannot fit all the characters of the field name (including HTML tags) in the length of the box provided on the rename form, then this error will occur. The After example above, for instance, does not encounter this error because it fits within the box. There are a few easy ways to get our field name text to be shorter: Leave off the HTML title attribute. This attribute just causes a small pop-up message when the cursor hovers over our link so it is not vital. Use a URL shortener on your link. Any one will do, but try to choose one of the smallest (tr.im, is.gd, or even bit.ly) ones available, e.g. not TinyURL. Never put “index.html” at the end of a URL. Browsers automatically go to index.html when directed to a directory, so in the example we should have put “http://www.example.com/” because it is shorter but functionally equivalent. However, when we go to rename our field, something strange is happening. Only the very beginning of our opening <a> tag is in the text box, the hyperlink itself is completely absent, and the rest of our text appears outside the box as text which we have no way of editing: The solution to this problem lies in using our Internet browser’s developer tools to trick the page into displaying correctly, then changing the field name and submitting the form. Most modern browsers (Google Chrome, Safari, Opera) have developer tools built in and Mozilla’s Firefox has an excellent extension called Firebug that is analogous. Here are instructions on how to open developer tools in the aforementioned browsers: In Chrome, they are available under View > Developer > Developer Tools. The keyboard shortcuts are ⌘+Option+I on Mac and Control+Shift+I on Windows. In Safari, in the Preferences dialog, under the Advanced tab all the way to the right, check the “Show Develop menu in menu bar” box. There is now a Develop menu that provides tools, and the same ⌘+Option+I shortcut will open them. In Opera, select the Tools menu, then Advanced, and open Opera Dragonfly. The keyboard shortcuts are identical to Chrome and Safari. On Firefox, after installing Firebug, click the little bug icon on the lower-right. I do not use Internet Explorer but it does ship with developer tools for versions >7. If you are an IE devotee, then you could probably figure out how to do this by executing a few Google searches. My screenshots will be from Google Chrome but all of these developer packages work almost exactly the same. What we want to do is inspect the <input> element that shows only the start of our field name. All the developer tools will allow give an “inspect element” option if we right- Library Assessment Working Group University of Illinois at Urbana-Champaign click on an element. From there, we can start to see what went wrong by looking at the highlighted HTML in the source code below: All our text was supposed to be in the <input> element’s value property, which only reads value=“<a href=”. So what happened? Remember, we put quotes around the href URL in the field name’s <a> tag, so when Desk Tracker went to create this input element, it encountered the opening quotation mark of our <a> and thought it was the closing quotation mark of the value attribute. That is why everything which followed that first quotation mark appears in an inappropriate place. But what do we do to fix this? Developer tools allow us to “edit” (not really, the underlying page is not affected, only how our browser sees it) HTML. In the source code panel below the website, double-click and delete all the stray text outside of that value attribute (everything in the 2nd red box above) until you have a website which looks like this: We can now close the developer tools, either by repeating the keyboard shortcut or clicking a minimize button, and finish renaming our field. Remember, the quotes around the URL in our href attribute caused this problem, so all we have to do to circumvent this issue in the future is omit all quotation marks in our <a> tag, leaving the field name to resemble something like this: <a href=http://www.example.com/>TEST Question</a> Ideally, we would use a shortened URL instead, but the above does work. Furthermore, the upcoming HTML5 standard is looser when it comes to requiring quotes for attributes, so not only does this work in all the browsers I tested, but it also will be valid HTML going forward. Contact Assessment at assessment@library.illinois.edu, with any questions.