Hyperlinks in Desk Tracker Field Names Some Tips and Troubleshooting

advertisement
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.
Download