Wikipedia defines a mashup application as “a Web page or application that uses and combines data, presentation or functionality from two or more sources to create new services.”
The mashup application that’s shown in Figure 1 certainly fits this definition. This application lets users browse through customer records and associated orders, map a customer’s location, and display and rate videos that are submitted by customers. These are the kinds of capabilities that I’ll explore in this two-part series as I walk you through the process of creating mashup applications in SharePoint 2010.
Figure 1: Sample mashup application in SharePoint
Before I started to develop my sample mashup application, I defined the following goals for the application’s design and functionality:
- no page refreshes
- sandbox compatibility
- a flexible component-oriented design that permits easy modification and multiple configuration options
Throughout this article, I’ll point out how each of these goals was achieved.
Integrating External Data
The sample mashup application combines data from five different data sources. These are the Adventureworks SQL Server database, a comma-delimited text file, Bing maps, videos stored in a SharePoint Assets library, and ratings data stored in SharePoint’s social database. This article focuses on the first three data sources.
Figure 2: Customer Order Inspector Silverlight application components
The mashup application contains three main components. The first component is a Silverlight application that lets you examine customer data, as shown in Figure 2. I refer to this as the Customer Order Inspector Silverlight application. The out-of-the-box Silverlight Web Part displays the Customer Order Inspector Silverlight application on the SharePoint website. In this case, the Chrome Type property for the Web Part is set to None to hide the Web Part title (see Figure 3).
Figure 3: Setting the Chrome Type property in the Web Part tool pane
The customer data that is displayed in the Silverlight application is stored in the Adventureworks SQL database and also in the comma-delimited text file. You use a .NET Assembly Connector to retrieve the data from the separate data sources. The .NET Assembly Connector connects to both the Microsoft SQL Server database and the comma-delimited text file. It queries both data sources and merges the query results into a single entity in Business Connectivity Services. See my article “Business Connectivity Services Part 2: Advanced Data Access Techniques” to learn how to create the .NET Assembly Connector that’s used in the mashup application. Figure 2 illustrates how the data sources map to the UI and to all components that support the Silverlight application.
After you deploy the .NET Assembly Connector to the SharePoint server, create an external list based on the external content type that the .NET Assembly Connector defines. The Silverlight application uses the Silverlight SharePoint client object model to query the data in the external list. In the Silverlight application, the loadCustomers method executes when the Silverlight application is initialized.
Listing 1 shows this process in action. First, the GetByTitle method creates a list object that corresponds to the external list. The external list is based on the external content type defined in the .NET Assembly Connector. Then a CAMLquery is created to return the customer information from the external list. You may notice that this pattern is identical to the pattern that’s used to query data from a regular SharePoint list. The GetItems method uses the CAML query to return a ListItemCollection class that, in turn, is loaded into the ClientContext class. Finally, the success and failure callback methods are registered, and the ExecuteQueryAsync method invokes the operations on the SharePoint server.
Using this approach to query the external data maintains sandbox compatibility. You can also maintain sandbox compatibility by writing this component as a Web Part and leveraging the SharePoint managed client object model or the ECMA client object models to query the external list. In Part 2 of this series, I’ll demonstrate how this is done by using the ECMA client object model. You may also learn more about this pattern in my third BCS article, “Business Connectivity Services, Part 3: Building Custom UI Components.” Note that you can’t use the BDC runtime APIs to query the data in a sandbox-compatible solution. The BDC runtime APIs are not available in Silverlight applications. Additionally, they can be used only in Web Parts that run with full trust.
Adding Mapping Capabilities
The second component in the mashup application is the mapping component. I refer to this as the Silverlight Mapping application. You can see this application in Figure 4. Just as I did with the Customer Order Inspector Silverlight application, I use the out-of-the-box Silverlight Web Part to display the Silverlight Mapping application on the SharePoint website. For this piece of the mashup application, the Chrome Type property for the Silverlight Web Part is set to the default value. This makes the Web Part title, ”Silverlight Web Part (2),” visible. You can change the title in the Web Part tool pane. I set this Web Part’s Chrome Type property differently to help demonstrate the flexibility you have to define UI elements in the mashup application when you take this approach.
Figure 4: Mapping components in the mashup application