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.
Try it!
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.
Example 3
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
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).
JavaScript
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.
CSS
The same principle applies to styles. An example on this blog: a tiny calendar.
Iframe
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.
Try it!
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.
Other methods
I have certainly omitted a couple ones. To mention one more, querystrings are a common way to push data to a Web page.
Try it!
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.
15 comments
Comments feed for this article
November 3, 2008 at 8:38 pm
Links for November 3, 2008 « Steve Mullen’s Blog
[...] to SharePoint post No assembly required expands on Joel Oleson’s Webpart and Widget No Assembly Required [...]
November 6, 2008 at 2:13 pm
Greg O
Interesting post – would love to see the concepts explored in more details. I hugely enjoyed the HTML calculated columns series and the URL method posts. Would love to see a series about integrating sharepoint lists with charts or using an iframe combined with JavaScript to pull data from another site…
Love your blog.
Greg
November 7, 2008 at 12:31 am
Christophe
Greg, my initial plan was to write a series on charts, but I dropped this idea when I realized I had little to add to Darren Johnstone’s blog. Maybe I’ll just publish an example based on his code.
I have some cool stuff to show with iframes, but I first need to finish what I have started. I am only half way in the HTML calculated column series…
November 13, 2008 at 5:25 pm
larry
For a long time I have searched for a simple solution to populate images in my issue log without editing root pages. As everyone claims this was put together well and easy to understand. Another issue I have been searching a solution for is the referring URL. In my issue log it is usually open from another page and is used to report corrections or changes of this page. When I was using .NET I could post the referring URL. Using SharePoint I can not figure out how to write the referring URL to a list field. Is there an easy way to do this? Possibly using the CEWP and with javascript write the URL to one field or list item? I have written the URL to the page, but have not successfully figured out how to capture this in the SharePoint form.
Thanks
November 14, 2008 at 1:45 am
Christophe
Larry: one way is to access a form field by its title. I suggest that you search the Web using these keywords:
“Referencing SharePoint form fields with JavaScript”
Be careful to validate the code, there are a couple traps. I plan to write an article on this topic…next year.
May I ask you how you grab the referrer URL?
For the record, the trick to insert scripts in the edit form is explained here:
http://pathtosharepoint.wordpress.com/2008/08/10/the-content-editor-web-part/
November 17, 2008 at 6:15 pm
larry
Christophe,
Thanks so much for the quick reply. Those key words were perfect. What I cant figure out is how to fire off the function. I am using the _spBodyOnLoadFunctionNames.push() but it wont fire. I have tried multiple ways of putting it on the page.
I have added the script to the CEWP. I placed the CEWP at the top of NewForw.aspx and at the bottom of NewForm.aspx. I have also added it directly to the page after the tag [asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server"]
I ever tried to get an alert to run and it does not like this:
[script type="text/javascript"]
_spBodyOnLoadFunctionNames.PUSH(“LHP”);
function LHP() {
alert(‘Hello Larry’);
}
[/script]
Can you see if I missed something?
November 17, 2008 at 11:13 pm
Christophe
Larry, Javascript is case sensitive – try “push” instead of “PUSH”.
November 17, 2008 at 11:36 pm
larry
Christophe,
Thanks a million. That was one of the first things I tried. I must have missed something else. I am not sure what but I finally got this to work.
Keep up the great work. When your ready to write this post if you want any of my work I would be happy to share it.
thanks
November 19, 2008 at 7:05 pm
larry
I’m back. Okay, I have been playing with hiding columns/fields/controls. One thing I noticed is that wss 3.0 does not offer the Target Audience functionality of MOSS. So I want to make this some what dynamic say by groups or permissions.
If (groupName != “Admins”) {
…hide control;
}
or
If (PermissionLevel != “Full Control”)
…hide control;
}
Can we do this with javascript?
here is the hide script
[script language="JavaScript" type="text/javascript"]
_spBodyOnLoadFunctionNames.push(“hideFields”);
function findacontrol(FieldName) {
var arr = document.getElementsByTagName(“!”);//get all comments
for (var i=0;i 0) {
if (arr[i].innerHTML.indexOf(‘FieldName=”‘ + FieldName + ‘”‘) > 0) {
return arr[i];
}
}
}
function hideFields() {
var control;
// name of control – for each
control = findacontrol(“FieldName”);
// Hide control – for each
control.parentNode.parentNode.style.display=”none”;
}
[/script>
December 3, 2008 at 4:22 am
larry
I have been playing with the above script to add some other functionality.
using the last line of code
control.parentNode.parentNode.style.display=”none”;
I have been able to add titles
control.parentNode.parentNode.title=”This is tooltip text”;
and I got an alert to fire off. What I am actually going for is a tooltip. The title attribute is a quick display, I was hoping for something more robust. I have tried to fire off a new window writing the elements on the fly but no luck.
Any one with any ideas?
December 22, 2008 at 9:04 pm
larry
New post. Some time back there was a webpart hide elements. This worked in WSS 2.0 and it was a dynamic way to select the elements you wanted to hide on a page. I have had multiple requests when setting up sites and intakes to hide specific elements. The hide elements webpart does not work in WSS 3.0. During my many ventures I have gathered a bunch of CSS and little script that will hide everything on the page but the web parts or list parts. Draw back is it’s not dynamic. I have been trying to put into a function, but this is classnames not element IDs. I want to have some simple check boxes if checked, .classname{display:none}
Putting the classes into a CEWP every thing becomes hidden, any ideas how to do this dynamically with a function for the different parts?
[sample code]
[style]
/* CSS Hide */
/* Search Form and oth parts */
.ms-searchbox{display: none;}
.ms-searchform{display: none;}
.ms-pagetitle{display: none;}
.ms-titlearealeft{display: none;}
.ms-titleareaframe{display: none;}
.ms-rightareacell{display: none;}
.ms-titlearea{display: none;}
#ctl00_placeholderpageimage_onetidtpweb1{display: none;}
.ms-sitemapdirectional{ display: none;}
.ms-pagebreadcrumb{ display: none;}
/* Top Image */
.ms-globalTitleArea{
padding-top:0px;
/*background-color: #;
background-image: url(“”);*/
height:px;
background-position: top left;
background-repeat:no-repeat;
.ms-globaltitlearea{display: none;}
.ms-titleimagearea{display: none;}
.ms-sitemapdirectional{display: none;}
.ms-globalbreadcrumb{display: none;}
.ms-sitetitle{display: none;}
/* Left Nav */
.ms-navframe { display: none;}
/* Navigation Tabs */
.ms-topnavcontainer{display: none;}
[/style]
[script language="JavaScript"]
document.getElementById(‘onettopnavbar1002-1′).style.visibility=’hidden’; document.getElementById(‘onettopnavbar1002-2′).style.visibility=’hidden’; document.getElementById(‘onettopnavbar1002-3′).style.visibility=’hidden’; document.getElementById(‘onettopnavbar1002-4′).style.visibility=’hidden’;
[/script]
[/sample code]
December 23, 2008 at 2:03 am
Christophe
Larry, see if this recent article from Paul Grenier helps:
http://www.endusersharepoint.com/?p=1075
January 2, 2009 at 2:44 pm
larry
Perfect, Thanks!
January 22, 2009 at 11:40 am
A simple method to display a list in another site « Path to SharePoint
[...] already mentioned that the iframe was part of my toolbox, so let’ s put it to work. As you’ll see, there are several limitations to my method, [...]
May 3, 2009 at 10:26 pm
Sham
Christophe
I use the code below to open an infopath form in a cewp. I want to display the list item data in the form when the form opens; for this, I need the itemid, which i need to include at the end of the url. Are you able to help me with this code?
Thanks
Sham