|
Untitled-1
Untitled-1
Untitled-1
|
|
 |
|
|
Untitled-1
 |
 |
|
Creating an organization lookup sidebar gadget, part 2 of 2.
|
|
|
 |
|
Location: Blogs Bean LabsProgramming (C#/.Net/etc) |
 |
| Posted by: frijoles |
3/23/2007 |
Now that we have a working webservice and gadget, we're going to modify the webservice to return some user data instead of some simple text. To begin with,
open up the WebService code. Feel free to comment the HelloWorld method out, or leave it in if you'd like to use it for testing.
Before we add our new method, let's start by adding a new class. I'm going to stick it in the same WebService file to save space, but in the real world, you may create a brand new class file that holds everything you need.
public class UserData
{
}
In the UserData class, we'll throw in some properties. Let's do firstname and phonenumber, both as strings:
public class UserData
{
private string _first_name;
private string _phone_number;
public string PhoneNumber
{
get { return _phone_number; }
set { _phone_number = value; }
}
public string FirstName
{
get { return _first_name; }
set { _first_name = value; }
}
}
Add in two constructors for UserData so that we can easily populate it later:
public UserData()
{ }
public UserData(string name, string phone)
{
_first_name = name;
_phone_number = phone;
}
That will be all we need for now. Again, in a real application, you'll have lots of supporting code, such as database calls, iterators, and other various I-things. Maybe even some generics to make it look impressive (see MuteThis' articles for information about making your code look impressive).
Now then, back to the webservice class. Just below the HelloWorld method (or where it previously was), create your search method:
[WebMethod]
public UserData SearchForUser(string name)
{
}
I'm also going to add a new method called PopulateUsers. This is a simple method that will just give us some basic information to work with. You could replace this with some code that gathers your data from a database, xml file, etc. This is going to return an Arraylist of UserData objects that I can iterate through later.
private ArrayList PopulateUsers()
{
ArrayList users = new ArrayList();
users.Add(new UserData("frijoles", "555-1234"));
users.Add(new UserData("nothingmn", "555-3321"));
return users;
}
Now, inside SearchForUser, let's add in the code to do everything:
[WebMethod]
public UserData SearchForUser(string name)
{
ArrayList users = PopulateUsers();
for (int i = 0; i < users.Count; i++)
{
if ( ((UserData)users[i]).FirstName == name)
return (UserData)users[i];
}
throw new Exception();
}
The query.html page will call SearchForUser and pass it a string, the name we want to search on. First, the service populates the user list from some source. Second, we run a loop on the arraylist to find the correct UserData that we are searching for. Once found, if it is, then we return that element of the arraylist (the user we were looking for). If it's not found, throw an execption. The exception will be detected by our calling code and show the error instead of trying to display the user data.
Open up the query.html file, which was found in your SideBar Gadget's area. There are three places we need to change. First, the calling code. Locate the line in the DoSearch function (around line 44):
service.WebService.callService("HelloWorld", parmValue);
And replace it with:
service.WebService.callService("SearchForUser", parmValue);
That will change the gadget to look at the function we just created. Next, we need to change the fields that we are expecting back (around line 29). You need to make sure the fields here exactly match your fields in UserData or you'll get an error when it tries to find the data:
var fields = ["HelloWorldResult"];
Replaced with:
var fields = ["FirstName", "PhoneNumber"];
And last but not least, our print statement. If you wanted to make the results look better, this is where you'd do it:
html += "<div>" + user.HelloWorldResult + "</div>";
Becomes:
html += "<div>" + user.FirstName + "<br/>" + user.PhoneNumber + "</div>";
Compile the code and add the gadget back to the sidebar (remove the previous one from the sidebar if it is there already [don't uninstall it though!]). Type in 'frijoles' in the search box and click the search button. You should get back a phone number. To deploy the gadget, you can archive the folder in to a .zip file. Move the zip file out of the gadget directory and rename it to OrgChart.gadget (a gadget file is just a zip file renamed). If you double click the gadget file, it should ask you to install now.
Future Enhancements
There are lots of ways to improve this code. A few changes I've made to our version:
- Added a return key check when using the textbox. Makes it so users don't have to press a button to search.
- Added a search icon graphic next to the textbox (this is part of the original code, but I didn't want to redistribute the graphic since it's not mine).
- Make the search function look for both a first name and last name, as well as an email address.
- Add a bunch of CSS to make it look better.
And of course lots of code enhancements. That concludes this article. I hope it's helpful!
|
|
| Permalink |
Trackback |
|
|
|
 |
|
 |
|
|
|
|
|
|
|
|