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


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


Comments (30)

  1. Jamie says:

    Thanks Greg.

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

  2. 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!

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

  4. Karl del Val says:

    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!

  5. Greg Chan says:

    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

  6. Jooeun Jang says:

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

  7. audrie says:

    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?

  8. Ashish says:

    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

  9. Layla says:

    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?!

  10. Natalija says:

    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

  11. Dating says:

    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

  12. Weddings says:

    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

  13. 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

  14. Joel says:

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

  15. Yearning for SPD says:

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

  16. Andre says:

    THANKS A LOT :D  it really helped me i’ve been searching for this, for 2 days

  17. Justin says:

    Part 2?? It’s now Labor Day!  I’d love to see the rest…the anticipation is killing me.  :)

  18. Sera says:

    Thanks Greg,  Although I fully recognize the appeal of Share Point as the enterprise mashup tool I wonder if there is a way to change the default look of SharePoint?

    You have to admit that some of the appeal of the mashups is in ability to create the unique look.

  19. Tony says:

    Thank you SO much for this article. Some how I found it, and it’s exactly what I wanted to achieve. And it doesn’t involve hacking SharePoint to pieces. So really great practical advice, thanks.

  20. Peter N says:

    Cool article, any word on part 2?

  21. The LookupId isn’t working. If I try to insert that code in the selectcommand it returns me the error. I’ve also tried to convert the quotation marks to &quot; and still no result. Either an error in the webpart or no data returned. What am I doing wrong?

  22. Figured this one out. If anyone is having the same problems with the LookupId, then make the two following corrections to the code

    1. replace single quotes with &quot;

    2. replace Value Type=&quot;Text&quot;  with Value Type=&quot;Counter&quot;

    That magically does the trick :)

  23. Ilias says:

    Ok. that’s a good one… but what if I would like to build a complete solution with Visual Studio, using vsewss?

  24. Mark says:

    THANK YOU!

    I have been looking for that for a week now!

  25. Iammontoya says:

    Great article! In my case, however, I have a DFWP with a button that says ‘Register". When they click on the button I want to pass the values of the row plus the ID or username of the person clicking on Register (basically the person viewing the page). Am I off base with your approach above?

  26. Bill says:

    hey , I wonder if you could help me with my problem , I’ve used list box instead of dropdown list and i want to filter the data view by select multi values from the list box ,

    I want to select more than 1 value from the list box and filter the data view according the selected values from the list box .

    if you have a solve to this matter please advice

    i am really thanks for your help and support .

  27. Nathan Howard says:

    This was very helpful advice for filtering, but can’t seem to get this to work for creating a link for the lookup item to its display form when in a list.  The link keeps adding the list id instead of the id of the lookup item.  Any suggestions?

  28. Jimbo Alba says:

    What an elegant solution to my problem. Very helpful indeed.

    What I did instead of pasting LookupId=’TRUE’

    I pasted LookupId=&quot;TRUE&quot;

    Thanks Greg

  29. fakhteh says:

    THANKS A LOT ! It was really helpful

  30. Leo says:

    Hi Greg,  

    Thanks for the article.  Don’t know if you are able to answer this one but, do you know how I can use a text field in my parent list to filter by a text field in my child list rather than using a lookupfield?

    Cheers,

    Leo