SharePoint Conference - Building a SharePoint Designer Mashup (Part 1)

SharePoint Conference - Building a SharePoint Designer Mashup (Part 1)

Rate This
  • Comments 30

Greg Hi folks. This is Greg Chan, Program Manager in the SharePoint Designer team. For those of you who attended the SharePoint Conference last month in Seattle, you may remember me as the speaker for the session - "Building a SharePoint Designer 2007 Mashup". I promised you guys that I would post a blog about the demos I gave during the presentation. So here it goes! For those of you who missed out on that session, you should definitely check this out as well!

Everyone loves mashups. Why? They're fun, they're useful and they're slick, and being able to build one gives you instant street cred! :) So, how do we build one in SharePoint? Let me show you. Below are the 2 demos I gave on mashups:

  • Building an advanced form with a related-item view and the Windows Live Map control
  • Building an advanced view with ASP.NET calendar control, data view and the MSN Weather RSS Feed. (Covered in Part 2)

(I also gave a quick demo around workflow, but that won't be covered in this post.) 


Background info on the demos

Some of the content in this demo will be similar to things covered in previous blogs. For those of you who have been keeping up with all the SharePoint Designer blogs, you may already be an expert at this. 

For both demos, I used this scenario - you run a golf course and a golf shop and you want to use SharePoint to help manage this business. You start out with just a basic team site with some data filled in. There's the "Golf Equipments" list that tracks all the Golf Equipment you sell at the store. There's a "Suppliers" list that shows the suppliers for each of the golf equipment. And, there's a standard "Calendar" list, that shows the scheduled tee times for the golf course.


Demo #1 - Building an advanced form with a related-item view and the Windows Live Map control

In the first demo, I customized the display form of the "Suppliers" list to show more helpful information.

1) Created a related-item view that shows all the golf equipment supplied by the current supplier
2) Created a map view that shows the location of the current supplier.


For the related-item view of golf equipments

Here are the steps:
1) Open the DispForm.aspx page for Suppliers in SharePoint Designer.
2) In main menu go to Task Panes->Data Source Library.
3) In the Data Source Library, drag and drop the "Golf Equipments" list into the page, below the list form web part.
4) Click the OOUI button in the data view to bring up the Common Data View Tasks menu.
5) (optional) You can pick "Edit Columns" to modify the columns to display.

*Note - We have now inserted a data view showing us all the golf equipments in the list.  But that's actually not what we want. We want to filter this view to show only golf equipments supplied by the current supplier. To do this, we need to filter the view.

6) Click "Filter" option.
7) Set Field Name=Supplier, Comparison=Equals
8) For Value, select "Create a new parameter" option.
9) Create a new parameter
- Parameter Name = "SupplierID"
- Parameter Source = Query String
- Query String Variable = ID
-
Default Value = 1 (or whatever default value you like)

screen

- Hit OK until you get back to design view

* Note - This is the ID parameter that is always in the query string section of the URL of any standard SharePoint form (New/Edit/Display forms). Each ID maps to a unique item in the list and that is what we'll use to filter our view. 

screen 

*Note - Now you'll notice that the data view actually doesn't show anything. The reason is, the "Supplier" field in the Golf Equipments list is a lookup field. By default, the value of the lookup field is returned as a text string. But in our scenario, we actually want to use the ID value of the lookup to drive our filtering, and not the text string. In order to have the lookup field return the ID value, there's a great advance step you can do. 

10) Switch over to Code View
11) Go to the top of the document and do a find for "SupplierID"
12) You will be taken to the <SharePoint:SPDataSource...> tag, which is the markup that defines the data source for the data view. In there is an attribute called "selectcommand" which basically tells the data source what fields to return. The markup inside looks a little messy, but that's only because all the <, > and quotes are escaped. So, don't be scared! In there you'll find the FieldRef for the Supplier field. All you need to do is add this extra attribute in there - LookupId='TRUE'. This will tell the data source to return the Supplier lookup value as an ID instead of text.

For example:

<SharePoint:SPDataSource runat="server" DataSourceMode="List" UseInternalName="true" selectcommand="&lt;View&gt;&lt;Query&gt;&lt;Where&gt;&lt;Eq&gt;&lt;FieldRef LookupId=’TRUE’ Name=&quot;Supplier&quot;/&gt;&lt;Value Type=&quot;Text&quot;&gt;{SupplierID}&lt;/Value&gt;&lt;/Eq&gt;&lt;/Where&gt;&lt;/Query&gt;&lt;/View&gt;" id="Golf_x0020_Equipments1">

Ok, now you're done. If you switch back to design view, you'll see the data view displaying all the golf equipments supplied by the current supplier. 

screen 

Don't forget to save the page and check it out on the browser :)


For the map view displaying the location of the current supplier

I actually already covered this topic in a previous blog post on this a few months ago.  Check out - http://blogs.msdn.com/sharepointdesigner/archive/2007/06/15/how-to-integrate-virtual-earth-maps-with-a-sharepoint-list.aspx. The scenario and steps are almost identical.


To be continued:

Alright, you should now have a pretty nifty mashup as your display form that shows you both the golf equipment supplied by the current supplier and an interactive Windows Live Map view that displays the location of the supplier. See how easy that was to turn a standard (and dare I say boring...) form into an advanced mashup?!

Within the next couple of weeks, I will post a blog on the 2nd demo - Building an advanced view with ASP.NET calendar control, data view and the MSN Weather RSS Feed. Stay tuned!

Greg

  • Thanks Greg.

    I attended your mashup session and found it very useful & relevant. Cheers.

  • This is really cool and useful! Usually what I was doing is to have two lookup fields (one looking up title, other ID) and then sync them using javascript while editing. I was about to make a blog post about this in my blog, but this is way better!

  • This is working in List filtering. Can you use this also in XSLT filter?

  • This is absolutely great! I've been looking forever for this kind of solution everywhere, and all I could find solutions that needed Visual Studio and a working knowledge of .NET programming. This really makes parent-child relationships in SharePoint very easy.

    One question that I have though is, how do I change the list item names into links to show the individual displays (dispForm.aspx of the individual list items)? newbie here, thanks!

  • Thanks for reading the post.  Part 2 is coming soon :)

    For the data view, in order to create a link that points to that item's Disp Form, you need to follow these general steps in SharePoint Designer:

    1) Open up the site and the page with the data view

    2) In the data view, click on one of the values in the column that you wish to add the link to  (ie. Title)

    3) Bring up the OOUI menu for that value

    4) Click on the 'Format As' dropdown and select Hyperlink

    5) You'll get a warning message, if you trust the source of the data, click Yes.

    6) In the hyperlink dialog, change the address to this - http://<site-name>/lists/<list-name>/DispForm.aspx?ID={@ID}.

    7) For the "Text to display" input field at the top, make sure it's still - {@Title}

    8) Hit OK to get out of the hyperlink dialog

    Now you have a link created that will point you to the DispForm of that current item.

    Greg

  • I am wondering about many to many relationship. Do you have any idea about that?

  • Great Article.  I love the part where you can create an item from the display form and pass the ID to the new form of the other list.  Quick question though:  How can I get the form to return to the display view instead of to the all items list view after the new item is created?

  • Hello Greg

    Thanks a lot for providing this great article. I need your help to set up a navigation toolbar which contain following options

    First - If user click it will be redirected to first record with the checking of beging of File record with a message i.e. "Begining of File"

    Previous  - If user click it will be redirected to previous record with the checking of beging of File record with a message i.e. "End of File"

    xx of xxxx - record counter display like 12 of 239

    Next - If user click it will be redirected to next record with the checking of End of File with a message i.e. "End of File"

    Last  - If user click it will be redirected to last record with the checking of End of File with a message i.e. "End of File"

    A text box with go button - Where if user enter record no and click on go button, it will be redirected to entered record no?

    Is this possible, if yes give me some idea

    Ashish

    If want to give

  • That's  a great post! :)

    But still I have a problem. I have the same lists and page . I have another part at the end of the page which lets user add a new"Golf equipment". I Used your method of filtering to set my new golf equipment->supplierID to ID, but with no success.  actually new equipment will be added but th e supplierID is set to blank. When I add "LookupId=’TRUE’" line of code  an the page will encounter an error of "an unhandled exception has occurred. object reference not set to an instance of an object".

    would you please help me dolve the problem?!

  • Hi Greg,

    Great post, thanks.

    I wonder if you could help me with my problem. Essentially I think it has the same concept, but it did not work.

    I have a document library for employee's contracts, where employee name is a people and group lookup field (people only, no multiple entries). I also have a custom list with Personal info about employees.

    What I am trying to achieve is whenever someone views employee's record in a custom list, on the bottom of the page they can see relevant documents from the document library.

    I tried your solution, it does not display anything. Is there a special function for "People and Groups" lookup?

    Thanks in advance.

    Natalija

  • Hi folks. This is Greg Chan, Program Manager in the SharePoint Designer team. For those of you who attended the SharePoint Conference last month in Seattle, you may remember me as the speaker for the session - &quot; Building a SharePoint Designer 2007

  • Hi folks. This is Greg Chan, Program Manager in the SharePoint Designer team. For those of you who attended the SharePoint Conference last month in Seattle, you may remember me as the speaker for the session - &quot; Building a SharePoint Designer 2007

  • Hi folks. This is Greg Chan, Program Manager in the SharePoint Designer team. For those of you who attended the SharePoint Conference last month in Seattle, you may remember me as the speaker for the session - &quot; Building a SharePoint Designer 2007

  • It's now the middle of June.  When will part 2 be out?

  • Any update on the 2nd part? I really would have liked to see your calendar magic :) End of July now :)

Page 1 of 2 (30 items) 12
Leave a Comment
  • Please add 5 and 2 and type the answer here:
  • Post