A recent post on Joel Oleson’s blog caught my attention. Why? Because this is usually the approach I propose here, at Path to SharePoint: client side snippets that you just drop on your pages. No assembly required! Also, a significant advantage over other client side techniques, like using SharePoint Designer, is that it is non-destructive: just remove the snippet, and your page is back to its original state.
So let me take this opportunity to review the assembliless techniques I use to alter SharePoint pages, or to include content from external sources.
A centerpiece of this approach is the Content Editor Web Part (CEWP), which allows you to drop on your SharePoint pages HTML, styles or code.
Remember: to insert code, use either the source editor or the link option of the CEWP.
HTML: the OBJECT element
The OBJECT element is a powerful, generic solution that allows you to embed medias in your page. You connect with multiple services by simply inserting an object in the CEWP. This is the main example mentioned in Joel’s post.
Example 1: YouTube
Go to YouTube.com and choose a video. Next to the video, you’ll find an “Embed” field that contains the OBJECT element. Just paste this in a CEWP, and the video will be displayed on your site.
Example 2: application viewer
If you are an Outlook user: you’ll find several examples on this page (and that one too). Again, just paste one of the snippets in a CEWP, and you’ll be able to access Outlook on your SharePoint page. Cool stuff!
Another useful one is the Visio viewer, especially as you can connect Visio 2007 diagrams to SharePoint lists.
Go to a Web site that uses an object, like an internet radio station (for example pandora.com). View the source code of the page and search for the OBJECT element. Paste it in a CEWP, and the radio will be available on your site.
Web Services allow to connect to other applications across the Web. They offer a flexible approach, and combined with AJAXy methods bring interactivity to your Web page.
For us end users, it is also a powerful way to call SharePoint content from the client side, although it will usually require more programming efforts than other solutions listed here. Darren Johnstone has a very interesting post (including code) that can help you get started.
Similar techniques are REST methods, and the SharePoint URL protocol (for an example, see how to display a random picture).
A script in a CEWP will allow you to alter the HTML structure of your page or manage events.
The best SharePoint example I have seen so far is…mine :-): the “HTML calculated column” series (If you have found a better one, please let me know!).
Again, this method is non-destructive.
The same principle applies to styles. An example on this blog: a tiny calendar.
There is a well known way to display on your page the content from another Web Page: the HTML iframe element. As is, using an iframe may be seen as quick and dirty. But combined with a few lines of code it becomes a seamless solution: the external data is called by a hidden iframe, then a script pulls the information from the iframe and reuses it on the main page. SharePoint itself makes extensive use of this method.
One limitation: for security reasons, it is usually required that the content you pull be in the same domain. In the SharePoint context, it still means that iframes are a convenient way to share content across site collections on a same server.
I plan to publish an example on my blog: a cross-site (and cross-site collection) navigation. I have also mentioned iframes as a solution to improve the usability of SharePoint wikis (see the comments section here), and I hope to find the time to investigate it further.
SharePoint actually offers a built-in iframe, called the Page Viewer Web Part. Drop a PVWP on your page, and link it to any other page on your SharePoint farm.
Other SharePoint Web Parts
Apart from the CEWP, several other SharePoint Web Parts allow for seamless integration. The XML Web Part or the RSS Web Part for example will allow you to display RSS feeds.
I have certainly omitted a couple ones. To mention one more, querystrings are a common way to push data to a Web page.
Go to a SharePoint list, and use the filter option to filter on the title field. Then look at the URL: you’ll see that it has changed, and includes FilterField1 and FilterValue1 in the querystring.
You can of course combine several of these methods on the same page, and use SharePoint as a mashup tool.
For example combining Web Services and a Flash object will allow you to display charts, as explained in Darren’s post. I have used the same method myself with the free version of Fusioncharts. And you should be able to do the same with the Silverlight Visifire charts, although the only examples I have seen so far are based on the Data View Web Part.
I have also used a similar approach with the interesting Simile timeline.