SharePoint and Popfly integration -- yes, really!
Since Microsoft Popfly was announced about a week ago, the buzz about it has continued to grow. In fact, Popfly got a huge boost from being part of the Facebook Platform announcement yesterday. Since Facebook’s aspiration for being the “social OS” for the Web reflects some aspects of what SharePoint has already achieved within the enterprise as a collaborative application platform or as Mary Jo Foley opined, the “missing link between personal productivity and line-of-business applications,” the natural question to ask is, “So, what can SharePoint do with Popfly?”
The short answer is, “Quite a lot.” The longer answer is provided here by Mike Gannotti, a Microsoft Technology Specialist for SharePoint based in Raleigh, NC.
<Lawrence />
With the ability to create rich mashups of information for display in a web page, Popfly presents a great opportunity for SharePoint users to create new exciting data presentations within SharePoint. When looking at possible synergies and points of integration between the two there are two primary areas of focus. These are; Popfly consumption and display of SharePoint driven content, as well as SharePoint consumption and display of Popfly delivered content. In this write-up I will walk you through both of these approaches with the hope that it will prepare you to begin creating your own dynamic renderings of Popfly coupled with SharePoint on the Internet.
Using SharePoint as a Popfly Data Source
With its libraries and lists, often tailored with custom content to meet organizational needs, SharePoint instantiations potentially have a wealth of data that can be served up, and rendered by, Popfly. The primary means of data delivery today that can be taken advantage of is SharePoint RSS. SharePoint serves up all of its library and list data as RSS by default, and Popfly is built to take advantage of this out of the box.
Popfly uses a construct known as blocks to capture and consume data as well as to render it. In the case of SharePoint RSS feeds, the block of choice is easy to single out: It is simply titled RSS. You can drag and drop one or more RSS blocks to grab RSS data from SharePoint, as well as from other RSS sources.
Once you have your block(s) on the Popfly canvas, you can then set them to pull your RSS feeds of choice. Click on the wrench to open the attributes interface and then type or paste the RSS feed in the given box. For example: I can copy the URL to my blogs RSS feed for my posts as seen below (note that I have left the default Operations options to getItems rather than getFeed).
You can do this for up to three feeds, and the information consumed can be varied (for examples of different types of RSS data and their uses, see my Popfly – SharePoint Integration screencast). If we are only tying to a single feed, then we are ready to go about setting up the presentation of our data. However, if we have chosen more than one feed, then we need to combine them into a single source of data for our presentation layer. Luckily for us, this is easily accomplished with the Combine block.
The Combine block allows us to combine two or three feeds into a single data feed. Doing this is also very simple. First, drag the Combine block onto your Popfly canvas. Click on the first RSS block and then move your mouse cursor over the Combine block and click again. This will cause there to be a push connection from the RSS block to the Combine block. You should now see a resulting blue bar indicating the connection as well as a yellow warning triangle in the Combine block. Repeat this procedure for each remaining RSS block. [Update 05/30/2007: While you can use up to 3 feeds per Combine block, you can increase the number of feeds by using multiple Combine blocks and then combining them together.]
To get rid of the warning triangle and to prepare our data for rendering, we need to edit the Combine block by clicking on the “wrench” icon. Under Operations, we can setup the Combine block for two or three data sources. Then for each feed, we will go through in turn and select the RSS block under Source and then [entire RSSItem object] under Value. Repeat for each desired RSS block.
Once finished, the yellow warning triangle will disappear and you are ready to set up your information’s visual appearance and delivery.
Setting Up the Visual Delivery of Your SharePoint Data
Now that our SharePoint RSS feed(s) are setup, our next step is to determine how we will display that information and deliver it. If we have geotagging information as part of the feeds, then we may want to display our data on a map. If we simply want to display text content we can do so in a reader. For our purposes here, we will select and illustrate the latter.
Having decided to display our data in a reader, we will find the News Reader block and drag it on to our canvas.
We will click on the Combine block and then on the News Reader block to create a connection much in the same manner as we did earlier with the RSS blocks to the Combine block. Once our connection is set, the next step is to edit the News Reader block’s properties by clicking on its “wrench.” Upon doing so, we will be greeting with settings for headline, date, content, and fullStoryURL. Under Source, we will select Combine for each of the dropdowns. This will in turn automatically set the attributes for display under Value.
We can now preview our resulting application by selecting Preview at the top of the Popfly canvas. After previewing, click Customize at the bottom of the screen to return to the canvas. If we wanted to pretty up our Reader, we could add custom HTML code and continue to preview and rework until we were totally satisfied with the results.
Next, we save project and then select the option to Share it. This will allow us to easily embed the project as mashup in a SharePoint site (or another website) as well as to have it used as a Windows Vista Gadget! That’s right, we can combine SharePoint’s RSS feeds through a Popfly mashup and expose it as a Windows Vista Gadget on the desktop with any coding!
Rendering Popfly Mashups in SharePoint
Now that our Popfly mashup is done, how can we embed it, or any other Popfly mashup for that matter, on a SharePoint site? Luckily for us, the Popfly folks have made this very simple. We will be taking advantage of their Embed It functionality in combination with SharePoint’s Content Editor web part.
Our first step will be to grab the embed code from Popfly. To do this, from our Projects page, we will select Embed It under the desired mashup and copy the exposed code.
On the desired SharePoint page, we will add the Content Editor web part where we want to place our mashup. Once the web part is in place, we will edit the web part, naming it as desired, and setting the Chrome Type to None. Optionally, we can go into the Rich Text Editor view and add text, links, or pictures. In the Source Editor view, we will simply paste the embed code copied from Popfly. We can play around with the height and width settings as necessary either in the Popfly code or in the Content Editor web part to achieve our desired look.
That’s it! We’re done, and our mashup is now rendering through SharePoint. We can now export our Content Editor web part if desired and reuse it on another SharePoint site by simply importing it.
The same content can now be available as a Gadget on our desktop as well if desired as mentioned previously. Quick, easy, and very cool!
Conclusion
Popfly and SharePoint can be used in tandem to provide rich mashups against a number of data types including SharePoint RSS feeds. Information can be pulled from SharePoint into Popfly, served up from Popfly to SharePoint, and even re-exposed as a Windows Vista Sidebar gadget. All of this can be done literally in a few minutes by users with little or no programming skills and easily shared with others.
You can see more examples of Popfly content rendering in SharePoint on my Silverlight Showcase page.
I have also created a Popfly – SharePoint Integration screencast in which I walk through the creation of several different types of mashups to include mapping features, image rendering, and more.
I hope that you’ve enjoyed this blog entry and that you will start creating your own mashups in Popfly very soon. Let your imagination fly – Popfly that is! :-)
Michael Gannotti, TSP SharePoint
Microsoft Greater Southeast District
