jump to navigation

Enterprise Mashups with SharePoint Designer 2010, Bing map services, and Restful web services: From SPC09 Las Vegas October 21, 2009

Posted by willhlaw in jQuery, SharePoint, Sharepoint Designer, SPC09.
Tags: , , , , ,

Enterprise Mashups with SharePoint Designer 2010, Bing map services, and Restful web services

This is an overview during a live presentation at SPC09, the biggest SharePoint Conference of the year, possibly ever. The session is quite good. There were good examples of the different web parts and interaction in Shareponit Desinger 2010, bringing in RSS feeds from Twitter and MSN Weather, stylesheets to turn a list into a Bing map, and the underlying code to render the pushpins. Great job Microsoft.

[Update] The jPoint team is creating a Bing script solution. Check back later this evening to get the hyperlink to the example!

[Update #2] The jPoint team, within hours, has created the Bing solution at http://sharejPoint.com/examples.

[Update #3] Hector Ruiz has blogged about Experimenting with jPoint and Bing Maps here.

Demo 1, connecting with recruits using Twitter and MSN Weather

  • In SharePoint Designer 2010 (SPD2010), data sources can be RSS, Rest, Server Scripts. That is how Twitter and MSN Weather were added as data sources. From each website, the RSS feed URL was grabbed.
    • Twitter’s feed is /show.xml?…
  • RecruitDetails.aspx
    • MSN Weather feed was added into a new ASPX page as a DataFormWebPart by selecting Data View -> MSN Weather.
    • Twitter feed was using Twitter’s API, which is not reliable, and it did not work. But presenter prepared the audience for this failure.
    • For MSN Weather DFWP, a web connection was created to get parameters from the query string.
    • After establishing the TwitterID as a query string parameter, the presenter tried to drag in the Twitter DFWP again. It worked!
    • An XsltListViewWebPart that is hooked up to a recruiter’s list is connected to the Twitter web part.
  • RecruitMap.aspx
    • Recruits list is added to the page without any formatting.
    • The recruit list is added again to the page. Hmmm…where are they going with this?
    • The presenter turns the second webpart, an XsltListViewWebPart, and adds a reference to an XSL stylesheet called g11.xsl. This stylesheet magically turns the XLVWP into a Bing map! Pretty cool, but I’d like to see that g11.xsl! This gets the audience’s first clappter!
    • Wow, they go into the XSL stylesheet. There is a little bit of javascript to send the addresses to the map services. Actually, they have code placeholders, so I have no idea how much work was involved. I have done this with Google Maps, OpenLayers, and Google Earth Enterprise (which has a slightly different API than Google Maps public, which is always a slight pain).

Demo 2, rentals mashup

  • Same pattern is going to be followed as the first demo, by starting with creating a RentalDetails.aspx page.
  • RentalDetails.aspx
    • First step is to go into code and define the layouts
    • Presenter pops over to view the list. It is standard information about a rental unit (bedrooms, baths, etc)
    • Back to the code view in SP2010, a rentals-gallery div and rentals-detail div is created.
    • To show just one list item, change the DataFormWebPart of the rentals list to only show 1 item, a nice way to style a detailed view.
    • The attachment column is at the top of the list. These attachments are going to be pictures attached to each rental item. Since this will be useful later, it is tagged in the content by typing “@Marker” in the field next to the label “Attachment” for the DFWP.
    • The DFWP control inserts a table with id of idAttachmentTable which will be used later to show the pictures.
    • A filter is added to only show the rental item whose “title = Title” where Title is a query string parameter.
    • The page refresh did not filter properly. Somebody in the audience helped the presenter out by telling him he made the variable a server variable rather than a query string param.
    • The page still did not filter properly. It is still showing the first item in alphabetical order. The presenter tried to pull the file from a saved location, but that did not seem to work. So now, he is rebuilding the solution from scratch. This rebuild is fast! Uh-oh. Still a problem. Somehow, it is just magically NOT working. So, the presenter pulls up a totally new “backup” page so that the demo can move on.
    • This brd.aspx page uses jQuery to show an image slide show. That’s what I’m talking about. I see several people in the audience skoot to the edge of their seats.
    • In the brd.aspx page, he references a local jquery.min.js and a jquery.slideshow.js as well as a jquery.slidshow.css file.
    • Within the page itself, there is some more custom script that clones the idAttachmentTable and prepends the rentals-gallery.
    • Then, $(“#rentals-gallery”).slideshow() creates the slideshow with parameters dictating the speed and location of the images. He glanced over these details because the code will be provided “later”. I have always wondered how much later and how will we be notified? Well, once I find out, I will update each pertinent blog entry on my site.
  • To create the map, _spBodyOnLoadfunctionNames.push(“Initialize”)
  • And several variables to define; var mapDivId, mapZoom, mapListName, mapPinTitle, maplistQueryFields (columns from list), maptargetDetailsPage=”brd.aspx”, mapTargetDetailsPageParam, mapTargetDetailsPageValue = mapPinTitle;
  • Functions include:
    • mapGetItemaddress(i)
    • mapGettemHTML(i)
    • Initialize -> this calls mapInitialize() and then spGetData();
    • mapListQuery() -> builds the fields in CAML query.
    • mapInitialize()
      • mapTheMap = new VEMap(mapDivId);
      • maptheMap.LoadMap();
      • mapResetCenterCalculation();
    • spGetData()
      • This function uses the Javascript Client Object Model. Again, the presenter touts the consistency across client side models (.NET, Silverlight, and Javascript). For more information on the Client Object Model, see my blog post.
      • A context is created and then ctx.get_web().get_lists().getByTitle(mapListName);
      • Then, a CAML query is created.
      • After some more setup calls, then ctx.executeQueryAsync(mapAsyncQueryWorks(mapListItems))
        • He starts talking about javascript closures. Wow, this is the first time I’ve HEARD someone talk about closure, as opposed to just writing about it. However, he skims over this topic and really does not explain it. Too bad. I thought he would be able to educate the audience since closures is a really tough topic for people to grasp.
      • mapAsyncQueryWorks(mapListItems)
      • mapCallback(title, photo_url, shareHTML)
        • A VEShape is created for the pushpin and latlong location.

Roadblocks to Mashups in the Enterprise

  • Technical roadblocks
    • Security, authorization, authentication
    • Identity Management
    • Single Sign-On
    • Credential propagation
    • Data trustworthiness -> Research has shown when users see data on a map (or in a report), they believe it to be TRUE.
    • Web services readiness
  • Management roadblocks
    • Web services changes
    • Data source dependencies
    • Mashup lifecycle
    • Component lifecycle
    • Policy Management and Governance
    • Privacy
    • Compliance

That’s it. The session ended with an apology for the failed demo, but a reminder that they had a backup ready. Unfortunately, there was no time for questions. If you find my live blogging useful, let me know. Also, add my blog as a feed as I will update it once I find out when the code samples are available.



1. SharePoint Designer 2010 – Building Composite Apps: From SPC09 Las Vegas « Will Lawrence's Blog - October 22, 2009

[…] Enterprise Mashups with SharePoint Designer 2010, Bing Map Services, and REST web services […]

2. [In Progress!] SharePoint Designer 2010 – Building Composite Apps: From SPC09 Las Vegas « Will Lawrence's Blog - October 22, 2009

[…] Enterprise Mashups with SharePoint Designer 2010, Bing Map Services, and REST web services […]

3. A Busy Week in the SharePoint World « The SharePoint Mechanic - May 12, 2010

[…] SPC09 – Enterprise Mashups with SharePoint Designer 2010, Bing map services, and Restful web s… – Courtesy of Will Lawrence […]

4. Ed - May 31, 2011

Hi there,
Any updates on the Bing map and Sharepoint integration. I am trying to use javascript, dataview and content editor webpart to do the pushpin on a Bing map. No luck yet. I was hoping you ahve something more that actually works.

5. Federico - May 17, 2013

Hi, after reading this remarkable paragraph i am also cheerful to
share my familiarity here with colleagues.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: