Familiar with Zillow.com? It’s a great site that offers Zestimate™ home valuations and property details based on an address you provide. Using the Property Value Estimator sample code, a Web developer can easily create a page in your Microsoft Office Live subscription that:

·         Lets you select an address from your Microsoft Office Live Business Contact Manager Contacts list.

·         Maps the selected contact address.

·         Displays Zestimate™ home valuation and property details on this map.

The Microsoft Office Live team has created a set of sample code that demonstrates how a developer can use Microsoft Office Live Web services to create a mashup (that is, a Web page or application that integrates complementary elements from two or more sources) to extend the functionality of a Microsoft Office Live business application. 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 great mapping Web services and Microsoft Office Live Web services. The Property Value Estimator sample uses one of the business applications, Microsoft Office Live Business Contact Manager, which is included with any Microsoft Office Live Premium or Microsoft Office Live Essentials subscription.

Note that 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.

Look at the end result

The best way to understand the functionality is to install the Property Value Estimator code sample on a Microsoft Office Live business application. The download is an executable file that has everything you need, including a sample page containing a Web Part displaying a sample Property Value Estimator user interface, so that you can quickly see the results of using the code. Here’s what you need to do to check it out.

To download the Property Value Estimator 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

To view the results of this sample code:

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 Microsoft Office Live 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

5.       Open the document library in your Microsoft Office Live subscription where you want to store this sample code.

6.       In the document library, upload all of the files located in the C:\Microsoft Office Live Developer Resources\Property Value Estimator Sample folder.

7.       In the document library, click the samplepage.aspx file.

The Property Value Estimator Page Viewer Web Part

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.

The Property Value Estimator

How it works

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

Get contacts available for value estimation

The getContacts function uses a Microsoft Windows SharePoint Services 3.0 Web service to get the list of contacts from the specified context. In this sample, the context is Microsoft Office Live Business Contact Manager (WEBBCM).

In order to make this code sample work, we put Microsoft JScript functions together to package up the SOAP requests you need to talk to Microsoft Office Live 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 Microsoft Office Live Web services, seethe Microsoft Office Live Developer Guide articles about the Contact Map code sample and the Time Card code sample.

Talk to Zillow

We use the getZillowInformation function to construct the address to be passed to the Zillow Web service. We construct the address by using the contact data retrieved from the Contacts list in Microsoft Office Live Business Contact Manager. The results are placed in the vParameters array. 

This array is then passed as a parameter in a zillowRPC function call to issue an asynchronous XmlHttpRequest GET to Zillow's GetSearchResults API.

zillowRPC("GetSearchResults", vParameters, displayZillowSearchResults);

The Zillow GetSearchResults API finds a property for a specified address. The content returned contains the address for the property, the Zillow Property ID (ZPID), and the current Zestimate. It also includes the date on which the Zestimate was computed, a valuation range, and 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.

In order for the zillowRPC function to make a Web service call to Zillow, we must relay the call using a server proxy. In this code sample, we achieve a proxy effect through a Data Form Web Part on an ASP.NET server (.aspx) page. To make a call to a Zillow API, we perform an http GET on the .aspx page.

In order to use the .aspx file as a proxy, we first concatenate 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";

We then perform an http GET on the .aspx page, passing as parameters this new URL and the vParameters array of address information created above.

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

The zillowRPC function takes the Web response from the proxy page and finds the XML data island that was output onto the page using the zillowCallback function.

    g_oHttpRequest.sendRequest(zillowCallback);

    function zillowCallback(oWebResponse)

    {

        var strResponseText = oWebResponse.responseText;

        var XMLRESPONSESTART = "<xml";

        var XMLRESPONSEEND = "</xml>";

        var iStartIndex = strResponseText.indexOf(XMLRESPONSESTART);

        var iEndIndex = strResponseText.indexOf(XMLRESPONSEEND) +

                        XMLRESPONSEEND.length;

        var strResponseXml = strResponseText.substring(iStartIndex,

                             iEndIndex);

        var oXmlDocument = loadXml(strResponseXml);

        fCallback(oXmlDocument.firstChild);

    }

Create the property map

The function displayPropertyMap creates a Virtual Earth map object that is centered on the address for the property you want to value. It then adds to the map a pushpin with Zillow Zestimate™ caption information.  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 Microsoft Office Live, see the Contact Map code sample.

Display the results

In the displayZillowSearchResults function, we use several more zillowRPC calls to collect valuation and property detail information on the property. We then display the map and all of the other Zillow information about the property in a Page Viewer Web Part on the sample page.

Go to town

This is just a quick example of the type of service you can add to your client’s Microsoft Office Live Premium or Essentials subscription. The Web services provided by Windows SharePoint Services and Zillow combine to provide an impressive value-added service to your client’s data. The common JScript functions provided by this sample help you accomplish this with minimal effort.

To learn more about the Web services offered by Windows SharePoint Services, download the Windows SharePoint Services 3.0 SDK.

To learn more about which Windows SharePoint Services Web services are supported by Microsoft Office Live, read the Microsoft Office Live Developer Guide.

The Microsoft Office Live Developer Platform team

Are you looking to take your Web site to the next level with video? Here’s how you can embed a video player on your site by using the Microsoft Office Live HTML module.

First though some important points. When you add HTML to your Web pages, Microsoft Office Live doesn't check it, so if the code isn't correct your Web page may break. So, after you add code, be sure to access your Web site from the Internet and check that it appears correctly.

Also, please respect the rights of artists and creators. Content such as music, photos, and video may be protected by copyright, and people appearing in content may have a right to control the use of their image. You may not share other people’s content unless you own the rights or have permission from the owner.

Now, on to the fun part. You can embed one of several different video players in your Web page--the examples below show how to embed a YouTube or Google video player. If you need more information about how to use the HTML module or if you want more code examples, see the full article at Inserting HTML code into your site.

Add a YouTube video player

If you have a YouTube account, follow these instructions to add a YouTube video player to your Web site. Be sure to read and follow the YouTube terms of use.

1.     Write down the YouTube video ID number. For example, if you want to link to your video at http://www.youtube.com/?v=ABc12DEfGHi, the video ID number is "ABc12DEfGHi". If you don't know the number, go to your YouTube account, browse to your video, and then copy the number.

2.     In Microsoft Office Live, open the HTML module in the spot on your Web page that you want it to appear.

3.     Copy and paste the following code into the HTML module, and then replace both instances of "ABc12DEfGHi" with your video ID number.

4.     In the HTML module, click OK.

Add a Google video player

If you uploaded a video to Google Video, follow these instructions to add the Google video player. Be sure to read and follow the Google terms of service.

1.     Write down the Google Video ID number. For example, if you want to link to your video at http://video.google.com/videoplay?docid=1234567890123456789, your video ID number is "1234567890123456789". If you don't know your number, go to Google Video, browse to your video, and then copy the number.

2.     In Microsoft Office Live, open the HTML module in the location on your Web page where you want it to appear.

3.     Copy and paste the following HTML code into the HTML module, and then replace both instances of "1234567890123456789" with your video ID number.

4.     In the HTML module, click OK.

Enjoy! 

The Microsoft Office Live UA team

The Microsoft Office Live Team

Dean Nicolls