Dynamic Page Elements with Javascript

My SharePoint escapades continue!

Before my company started using SharePoint, it had a web based employee directory already in place. I'm not sure how this directory is maintained or updated, but it seems to be the best way to find contact information for anyone in the company (excluding the Outlook address book).

The task before me was to find a way to integrate the old system with the new SharePoint site that we are building. As with most tasks, I wanted to find the simplest and most elegant way to achieve this while expending the least amount of effort. Here is my solution...

The Challenge: Integrate a legacy web based service into SharePoint.

The Problem: The legacy service requires input strings in order to return values so a Web Capture Web Part wouldn't work.

The Solution: JavaScript and <iframe>. The legacy web service used variables from the URL string to process and display information. My solution simply presents the user with text fields to input these variables and then uses the setAttribute function to tell the <iframe> object to load that URL and resize the object on the page. Here's the code:

<iframe id="Person" src="" width="100%" height="0" frameborder=0 scrolling=no></iframe>

<input type=text name="fname" id="fname" value="First Name" onFocus="Enbl()"><br><input type=text name="lname" id="lname" value="Last Name" onFocus="Enbl()"><br><input type=button name="Search" value="Search" onClick="PeopleSearch()">&nbsp<input type=button name="Clear" value="Clear" onClick="Clr()">
<script type="text/javascript">
function PeopleSearch()
// put the input strings into the URL for the legacy app and open the iframe
{
var strFname = document.getElementById("fname").value;
var strLname = document.getElementById("lname").value;
document.getElementById("Person").setAttribute("src", "http://iemployee/employees.aspx?lastname=" + strLname + "&firstname=" + strFname);
document.getElementById("Person").setAttribute("height", "125");
}
function Clr()
// reset the input boxes and close the iframe
{
document.getElementById("fname").value = "First Name";
document.getElementById("lname").value = "Last Name";
document.getElementById("Person").setAttribute("src", "");
document.getElementById("Person").setAttribute("height", "0");
}
function Enbl()
// clear the input boxes when they get focus
{
if (document.getElementById("fname").value == "First Name")
{
 document.getElementById("fname").setAttribute("value", "");
 document.getElementById("lname").setAttribute("value", "");
}
}
</script>

This solution can be used to incorporate most any web service into your page dynamically with just a little trial and error.

Enjoy!