How to: Use the Property Value Estimator Sample

  • Article

The Property Value Estimator creates a Page Viewer Web Part that displays value estimates and property details, including a map, for home addresses in a contacts list. This mashup takes advantage of the Zillow API Network. The Zillow API Network site describes using these APIs to “turn member sites into mini real estate portals by offering Zestimate™ home valuations and property details.” The Property Value Estimator sample also uses Microsoft Virtual Earth’s mapping Web services and Microsoft Office Live Small Business Web services.

The Property Value Estimator sample uses the Business Contact Manager, which is included with every Office Live Small Business Essentials and Premium subscription.

In order to make this code sample work, Microsoft JScript functions are included in the download to package the SOAP requests you need to talk to Office Live Small Business Web services. You can use these same functions from the common JScript (olsharedlibv2.js) file to jump-start your development work. For other examples of the use of these Office Live Small Business Web services, see How to: Use the Contact Map Sample and How to: Use the Time Card Sample.

Note

This code sample passes the address for a contact in your Business Contact Manager Contacts list to Zillow.com to request valuation data. The data is passed over HTTP, and thus is not encrypted. No ID or name is passed with the address data. You can view the Zillow privacy policy here. Microsoft is not responsible for Zillow’s privacy policies and practices.

Download the sample

  1. To download the executable file, go to the Microsoft Download Center.
  2. Click the .exe file to install the Property Value Estimator files to the following location: C:\Microsoft Office Live Developer Resources\Property Value Estimator Sample

View the results

The Property Value Estimator files include a sample Web page with a pre-built Page Viewer Web Part so that you can see the results of the code. To view the results, do the following:

  1. To get a Zillow Web Services ID (ZWSID), register with Zillow.
  2. Verify that contacts with home addresses exist in the Contacts List of Business Contact Manager in your Office Live Small Business subscription.
  3. In the C:\Microsoft Office Live Developer Resources\Property Value Estimator Sample folder, open zillowsample.js for edit.
  4. In the zillowsample.js file, insert your ZWSID between the quotation marks in the following line of code:
    

    var g_strZillowId = "";       // Zillow.com ZWSID code

    1. Open the document library in your Office Live Small Business subscription where you want to store this sample code.
    2. In the document library, upload all of the files located in the C:\Microsoft Office Live Developer Resources\Property Value Estimator Sample folder.
    3. In the document library, click the samplepage.aspx file.

    The Property Value Estimator Web part

    Property Value Estimator

    This Sample Web page opens in the business application, with a Page Viewer Web Part displaying the Property Value Estimator sample user interface. The left side of this Web Part, under Contacts, includes a radio button for each of the contacts from Business Contact Manager that has an associated home address. Select the contact whose property you want to value.

    How it works

    We combine several functions in the zillowsample.js file to make this mashup.

    Get contact addresses available for value estimation

    To get a list of the items in the Contacts list of the Contact Manager, the Property Value Estimator code uses a Web service provided by Windows SharePoint Services. The zillowsample.js file does the following:

    1. The initialize function sets the Web context for this sample to Business Contact Manager (WebBCM).
      

      var strWebContext = document.location.protocol + "//" + document.location.hostname;
if(document.location.port != null)
{
strWebContext += ":" + document.location.port;
}
strWebContext +="/WebBCM";

      1. The initialize function creates a WssSoap object using this Web context.
        

        var g_oWssSoap = null;
        
g_oWssSoap = new WssSoap(strWebContext);

        1. The initialize function calls the getContacts function in the zillowsample.js file.
          

          getContacts();

          1. The getContacts function calls the getAllListItems method for the WssSoap object from the olsharedlibv2 file. It passes the list name, the array of field names to be returned, and the function name to call on completion.
            

            g_oWssSoap.getAllListItems(CONTACTSLISTNAME,
new Array("Title", "FirstName", "HomeAddressStreet", "HomeAddressCity", "HomeAddressStateOrProvince", "HomeAddressPostalCode"),
onGetContactResults);

            1. The getAllListItems method starts the process to package a SOAP request and post it to the GetListItems method in the Lists Web service in Windows SharePoint Services 3.0. For more information about this process, see How to: Interact With Business Applications the AJAX Way.

            Talk to Zillow

            The process used in the zillowsample.js file to talk to the Zillow APIs is:

            1. The getZillowInformation function constructs the address to be passed to the Zillow Web service. The address is constructed by using the items retrieved from the Contacts list as described above. The items are placed in the vParameters array.

              

              var oCurrContact = g_vContacts[g_iSelectedContactIndex];
// Parse the selected address value into params for Zillow RPCs
var vParameters = new Array();
vParameters["zws-id"] = g_strZillowId;
vParameters["address"] = oCurrContact.strAddressStreet;
if(oCurrContact.strAddressCity && oCurrContact.strStateOrProvince)
{
vParameters["citystatezip"] = oCurrContact.strAddressCity + " " + oCurrContact.strStateOrProvince;
}
else
{
vParameters["citystatezip"] = oCurrContact.strHomeAddressPostalCode;
}

              1. The vParameters array is then passed as a parameter in a zillowRPC function call to issue an asynchronous XmlHttpRequest GET to Zillow's GetSearchResults API. For more information about the proxy required to accomplish this task, see below.
                

                zillowRPC("GetSearchResults", vParameters, displayZillowSearchResults);

                1. The Zillow GetSearchResults API finds a property for the specified address. The content returned contains:
                  • The address for the property
                  • The Zillow Property ID (ZPID)
                  • The current Zestimate™
                  • The date on which the Zestimate™ was computed
                  • A valuation range
                  • The Zestimate™ ranking for the property within its ZIP code If no exact address match for a property is found, a list of closely matching properties is returned.
                Create a proxy effect

                In order for the zillowRPC function to make a Web service call to Zillow, this code sample must relay the call using a server proxy. This proxy effect is achieved through a Data Form Web Part on an ASP.NET server (.aspx) page.

                In order to use the .aspx file as a proxy, the Property Value Estimator code sample takes the following steps:

                1. The getZillowInformation function calls zillowRPC as described above.
                2. The zillowRPC function concatenates the proxy name with GetSearchResults, which was passed as a parameter to the function to create the URL for the HttpRequest.
                  

                  var strFullUrl = strAction + "ZillowProxy.aspx";

                  1. The zillowRPC function then performs an HTTP GET on the .aspx page and calls the zillowCallback function.
                    

                    g_oHttpRequest = new HttpRequest(strFullUrl, "GET", vParameters);
g_oHttpRequest.sendRequest(zillowCallback);

                    1. The zillowCallback function finds the XML data island that was output onto the page and returns the information to a callback function.

                    Create the property map

                    The function displayPropertyMap:

                    1. Displays the division of the map that contains the property for which you want the value.
                    2. Creates a Virtual Earth map object and centers it on the address for the property.
                    3. Creates a Virtual Earth pushpin object and sets caption information for it.
                    4. Adds the pushpin to the map.

                    You can view this map by scrolling down in the Page Viewer Web Part on the sample page.

                    For another example of a mashup of Virtual Earth and Office Live Small Business, see How to: Use the Contact Map Sample.

                    Display the results

                    The displayZillowSearchResults function is the callback function passed to zillowCallback in this code sample. It uses several more zillowRPC calls to collect valuation and property detail information on the property. It then displays the map and all of the other Zillow information about the property in a Page Viewer Web Part on the sample page.