Join Simon Allardice for an in-depth discussion in this video Creating master/detail pages, part of SharePoint Designer 2010: Creating Data-Driven Web Pages.
Creating web pages with web parts that connect to multiple data sources is also easy. I'm going to create a new Web Part page in my Site Pages library. This time around, I'm going to select one which actually has multiple levels to it, so I'll select this third one here, and I'll call this masterDetail. I'm going to make this connect to different data sources. Now what I have gone ahead and done is in my Data Sources section I've created a couple of new database connections to other tables on Northwind.
These were created exactly the same as my connection to products was. So I'm not even messing with external content types here. So back into Site Pages, I'll edit that masterDetail, and we've actually got three sections to it here. Now, occasionally, these can be a bit difficult to grab when you're in SharePoint, particularly the small ones, so I'm just actually just going to insert a few letters in each one to make sure that I keep track of where they are.
In the first section, what I'm going to go ahead and do is jump up to my Insert tab and insert a data view for Orders on Northwind. That's a little bit too much information here. I don't really need a RequiredDate, nor do I need EmployeeID, so with that highlighted, I'll jump in and remove those columns. EmployeeID is gone, and RequiredDate is gone and click OK.
Then I'll come down and in the second section here, I'll just hit the Enter key to give myself some space, and I'll insert another data view. This time around, it will be Order Details. Now there is no connection between the two right now as far as SharePoint is concerned. We will make that ourselves in just a minute. And then over here, I'm going to do the third one, which is inserting a data view for Products on Northwind, the one we have already used quite a few times. And this one, I don't need quite so many pieces of information either, so with that web part highlighted, I'll jump into Add/Remove Columns and get rid of Quantity and Category and SupplierID and click OK.
At this point, I could even get rid of the extra letters that I'd added to keep placeholders there. So I have three web parts showing up. Now what I need to do is go ahead and connect them. Before I do, I'm just going to hit Save, just in case we run into any problems here. So what I want to do is connect from the orders information to the order details information, and then from order details, which has a ProductID, I want to connect to products. So we will start from the top. Selecting orders, I'll click Add Connection.
It's going to ask, do you want to send a row of data? Yes, I do. I want to send that order ID down to order details and get all the details for this order. So, we jump ahead. We click Next. Yes, I am connecting to a web part on this page. Next again. That's even taken a guess. Is it order details? Yes, it is, and yes, I want to get filter values from, I click Next once more. This is where I have to describe the connection between the two, and what we want is that OrderID on the top web part is connecting to OrderID on the lower web part.
So let's find OrderID here and make sure that it maps to OrderID on the top one. You would have all sorts of weird and interesting results if you mapped up the different columns--definitely not what you want. Here it's asking how do we select the item in the top web part? And yes, creating a hyperlink on OrderID will be just fine. I'm going to also check this, which allows us to highlight the column to indicate which row is selected. So I'm saying I'd like to highlight the OrderID.
It doesn't automatically do that, even though it will create a link. So click Next and Finish, and it even kind of shows you the highlighted, or in-bold, version there. Now if you notice, the OrderID itself is actually just equivalent of text, 10248. It's actually trying to be a little bit too helpful here and formatting this for me. I don't really want it formatted as a number. So if I mouse over this, I'm going to get this little pop-up. It says, do I want this to format as a number? No, I don't. I'd like to just format it as text, no commas involved.
When you're editing on the data form web part, which is what I'm doing here, you'll actually find this is much easier to edit than the more powerful XSLTViewWebPart. So if you're looking at an XSLTViewWebPart, you probably won't find that quite as easy to change from a number to text. Well, I'm going to go ahead and create the second connection, which is going to be from order details to the products web part. So with that one highlighted, I'm also actually going to format its product ID here, which shouldn't be a number; it should just be text.
Highlight the web part. Jump to Add Connection. Yes, we want to send a row of data, and yes, we're connecting to a web part on this page. It's taken a guess that we want to go to orders, but no, we want to go downstream. We want to go to products web parts and yes, we want to, say get filter values from. Click Next again. This is where we have to match up the two. Well, I should have a ProductID in both web parts here. So here's product ID on the products web part, and I want to map this to Product ID here and click Next again.
It says, do we want to create a hyperlink on OrderID? No, we don't; we want the ability to select a product and find the information about that product. So I'll say no. Let's do it on ProductID. And I will indicate that current selection by highlighting ProductID. Now, if this is not quite clear right now, it should be much more obvious when I go ahead and do this in just a second. So I'm going to finish, I'm going to save, and then I'm going to hit F12 and open this up. So we have orders on Northwind.
By default, the first row of everything is hooked up, so Order 10248 is being highlighted right now, which tells me that Order 10248 had three products in it, 1142 and 72, and with 11 highlighted, that was Queso Cabrelas. If I jump ahead to say the order 10253, I can see that was made up of three order details, which was 31, 39, and 49. And if I wanted to know what product 49 was, I just select that and find that it was Maxilaku, or whatever the devil that is.
So very easy to hook up all these web parts, no code involved. It just allows us to do it all through SharePoint Designer. And you could use exactly the same model to connect between data sources that were databases and web services. As long as they're old validly connect to each other, they would work just fine.
- Creating new web pages
- Working with existing lists and libraries
- Reading data from an XML file, external database, or web service
- Using Business Connectivity Services (BCS)
- Working with Data View and Data Form web parts
- Filtering, sorting, and grouping data
- Creating master/detail pages
- Displaying richer data with formatting and formulas
- Creating custom forms