Category Archives: jQuery

A dynamic website built on Office 365

Posted on by

I mentioned it on twitter a couple weeks ago, Bradshaw & Weil has launched its new public website based on Office 365: http://www.bradshawweil.com

In an article last year, I expressed my frustration with the current Office 365 public sites, for which building dynamic pages requires more effort than it should. Well, it doesn’t mean that it cannot be done, and Bradshaw & Weil is one of these sites that take advantage of both the traditional list management capabilities of SharePoint and the features specific to Office 365.

The site content is managed by the site admins in SharePoint lists. For example, when you open Topics.aspx?Menu=For%20Individuals SharePoint will filter the Topics list to only display the topics tagged “For Individuals”. Topics.aspx?Menu=For%20Individuals&Topic=Motorcycle%20Insurance will only display the information related to motorcycle insurance, and will pull from the Insurance Carriers library only the logos of the carriers that offer this specific service. Thanks to the dynamic behavior and the use of querystrings in the URL (“Menu” and “Topic”), a single page handles all the topics, where with a static site 20 pages would be needed. And if a new topic gets added to the Topics library, this will automatically create a new entry in the menu.

Besides content management, the site gets all the benefits from working with Office 365. The business users have a convenient interface, the Site Design tool, to customize the header, footer and layout of the pages, without having to call a SharePoint consultant for every minor change. And the gadgets allow them to include convenient features like contact forms that would be hard to implement on a regular SharePoint site.

The site also gets help from jQuery. Note in particular:

All these plugins pull content from SharePoint lists and libraries (menu items, images, logos, phone numbers, website links). Here again, no need to call the designer every time a logo gets added or a phone number changes!

For this project, I worked directly with Jared Morgan, vice president. This was a great experience, as the company has been using SharePoint for several years, and Jared knew exactly what to aim for.

As you explore the site, feel free to post your comments or questions below, and Jared and I will be happy to post additional details.

And if your company is interested in a test drive of Office 365, drop me a line and I’ll be happy to send you an invitation for a free trial.

Two new projects: SPrest and SPELL

Posted on by

I have developed a sudden interest for Codeplex, Microsoft’s open source project hosting web site.

It started last week with a post on Marc Anderson’ blog, about JSON, REST, and his infamous SPServices. In a follow up conversation, Marc pointed me to the related discussion on Codeplex. In less than 48 hours, I registered to Codeplex, posted a dozen comments, began following two existing projects, and started two projects myself.

The discussion on SPServices and JSON led me to take a closer look at the jQuery documentation, and discover several features that came with version 1.5. We’ll see how it goes, but the use of “converters” looks promising and should make Marc’s library even more powerful.

As for the two new projects, I’ll post more information as I progress, for now here is a short description.

SPrest

The purpose of SPrest is to abstract the SharePoint 2010 REST services, the same way Marc abstracted Web Services. I had long been thinking about adapting Marc’s library to REST, so this Codeplex discussion was an opportunity to get started. After a long conversation with Marc, our conclusion was that including REST into the existing SPServices didn’t bring much value, so I chose to branch out and create a dedicated project called SPrest.

To be honest, it is not clear whether such a project has real value. REST is more straightforward than Web Services, as demonstrated for example in this article by Jan Tielens. Well, we’ll see…

SPELL

SPELL stands for SharePoint Progressive Enhancement Lightweight Library (just keep in mind I did all of this in less than 48 hours…). Its purpose it to put together some utility functions I often reuse in my customizations, for example identifying the Web Parts present in a page. I’ll explain what I mean by “progressive enhancement” in a future article (it was the main theme of my presentation at the San Diego SharePoint User Group meeting in March).

Here is what I have so far for the SPrest library (questions and feedback welcome, as usual):

<script type="text/javascript">
(function($){

$.extend({

SPrest:{

listData:function(options){

var CRUDtype={"Create":"POST","Read":"GET","Update":"POST","Delete":"DELETE"};
var CRUDheader={"Create":"PUT","Update":"MERGE","Delete":"DELETE"};

// Note: Default settings can be set globally by using the $.ajaxSetup() function.
// Note: simple handling of options for this first draft

$.ajax({
         type: CRUDtype[options.type],
         headers:(options.action=="Read")?{}:{'X-HTTP-Method-Override':CRUDheader[options.action]}, // Header for POST operations (Create, Update, Delete)
         url: options.site+"/_vti_bin/listdata.svc/"+options.listName+"?"+options.query,  // Note: escaping is currently missing in the url
         cache:false,
         dataType:"json",
         error:options.error,
         success:options.success
       });

}  // End ListData

}  // End SPrest

}) // End extend

})(jQuery);
</script>

An example, return the content of the Site Assets library in the Lab site:

<script type="text/javascript">
 $.SPrest.listData ({
site:"/Lab",
listName:"SiteAssets",
success: function(data, textStatus, jqXHR){ alert(jqXHR.responseText);},
error: function(){ alert("error");}
});
</script>

Cross-Site List Snapshot, version 2.0 beta

Posted on by

Last year I published a simple method to display a SharePoint list in another site. I am releasing today version 2.0 beta of the jQuery script:
http://sp2010.pathtosharepoint.com/sharepoint-user-toolkit/Pages/Cross-Site-List-Snapshot.aspx
[09/15/2010: link updated to the new Toolkit location]

I have renamed it “snapshot”, to better reflect its (limited) capabilities. The snapshot created on another site doesn’t have all the features of the original view, for example context menus or expand/collapse buttons will not work. But at least this allows you to view the list items, and preserves the hyperlinks.

The main improvements in version 2:
– the script now works for both lists and calendars
– there won’t be any conflict if you place several scripts on the same page
– a form helps you select your options, and includes a debugging utility

How to get the script?
Fill out the form, and click on the “Save to Disk” button. Once you have your script, you can add it to a SharePoint page via a Content Editor Web Part (preferred solution: upload the text file containing the script to a SharePoint library, then link to it from the CEWP).

Notes:
– if you don’t have Flash 10 installed, you won’t see the “Save to Disk” button. In this case, just copy and paste the code displayed in the text area.
– the target Web page needs to be on the same domain as the original view. If the view is on http://www.domain1.com, you can display a snapshot on any page that belongs to http://www.domain1.com, but not on http://www.domain2.com for example.
– keep in mind that it is a beta version, for evaluation purposes.

 To report an issue, leave a comment below, or send an e-mail to Christophe@PathToSharePoint.com.

Why this script?
SharePoint doesn’t offer a convenient way to display information from a site in another site. This script gives you a workaround to accomplish this.
Other solutions:
– the Page Viewer Web Part (but doesn’t give a clean layout)
– Data View Web Part and Content Query Web Part (for advanced users, and only work within the same site collection)
– Web services and URL protocol (also for advanced users, and only work in authenticated environments)
– RSS feeds (requires you to rebuild the view on the target page)

Where can I find instructions?
The page is still under construction. For now, see last year’s article, and the context help available on the form. I’ll publish a tutorial later this month.

This week’s workshops: visualization, Gantt and Sparklines

Posted on by

I am presenting three live online workshops this week, with Mark Miller from EndUserSharePoint.com. As usual, each participant receives a sandbox to try out the solutions we provide.

March 23, 2010 – Inline Visualizations in SharePoint
An entry level workshop where you’ll learn how to add color and other effects to your SharePoint lists. Here is a live demo:
http://www.pathtosharepoint.com/Lists/TasksVisualization/AllItems.aspx

March 24, 2010 – SharePoint Gantt Chart Enhancements
The participants will receive 6 snippets of code. The centerpiece is the dynamic timescale (month/week/day), as demonstrated on this mockup:
http://www.pathtosharepoint.com/Pages/GanttTimeScale.aspx

March 25, 2010 – Dynamic Feedback through SharePoint and Sparkline Charts
Sparklines are a fascinating, relatively new way to communicate. More compact than traditional charts, richer than traditional indicators, they are very popular in dashboards that require to synthesize large amounts of data.
jQuery and Google will come to the rescue to help us integrate these mini-charts in SharePoint. But of course we’ll also share some homemade recipes!

For more information and to register, follow this link:
http://eusp-chartsandgraphs.eventbrite.com

A workshop to get started with jQuery

Posted on by

Over the past year, the use of jQuery to enhance the SharePoint interface has exploded. Maybe you were tempted to take the plunge, but as an end user you were intimidated by this technology you know little (or nothing) about?

Well, this coming Monday is your chance to get on the bandwagon. Mark Miller and I will be hosting a new workshop: Get Started with jQuery in SharePoint.

Your goal is of course not to become a jQuery expert. But still, by the end of the workshop:
– You’ll have written – and tested – your first jQuery script
– You’ll know the key domains in which jQuery shines
– You’ll be aware that jQuery is not always the best option, and that you should not grab every script you find on the Internet

As usual we’ll provide concrete examples that you’ll test live in your own sandbox.

For more information and to register:
http://series-jquery.eventbrite.com

Smart TextToHTML

Posted on by

First things first: if you don’t know what I mean by “TextToHTML “, you won’t get much from this post. In this case, I recommend that you start with this introduction.
In short, the TextToHTML script has two roles:
1/ find HTML strings in a SharePoint page
2/ Convert these strings into actual HTML

Yesterday, I came across a discussion between @EUSP, @webdes03 and @ebrackley on Twitter:
“TextToHTML can be a bad performer when tasked with lots of HTML; also research DVWPs”

This is a timely comment, as I am about to present at SharePoint Saturday EMEA. Let me expand on this, and provide a few hints on how to better use the HTML Calculated Column.

Remember: TextToHTML is not the only way

Right, most of the examples you’ll find on my blog rely on the TextToHTML script, embedded in a Content Editor Web Part. But there are other ways to render the HTML. In particular, the Data View Web Part, used in crosslist mode, or the Content Query Web Part can directly do the rendering. For more information, see these series:
– for MOSS
KPI roll-up in MOSS
– for SharePoint 2007 (applies to both wss and MOSS):
KPI roll-up in SharePoint (Part I)
KPI roll-up in SharePoint (Part II)

The latter will be the theme of my presentation at SharePoint Saturday.

Get a faster browser

Not always a choice, but if you can, upgrade your browser to the latest version. These days, browsers are improving by leaps and bounds, with Google leading the charge.
My tests show that the TextToHTML script is four times faster in IE 8 than in IE 7. That’s huge! Some other browsers offer even better response time.

Faster TextToHTML

If you are using the TextToHTML script, you’ve certainly got the current version from the download section. What I am making available over there is a generic script, for both SharePoint 2003 and 2007. If you are on SharePoint 2007, you can make it more specific and thus faster.

Focus on the main content

As is, the script will scan the whole page to find table cells (TD elements):

TextToHTML(document.getElementsByTagName("TD"),regexpTD);

This is a waste of time, as you just need the main content, excluding header and Quicklaunch. You can easily do this by replacing the above line with the following code:

var theMainContent = document.getElementById("MSO_MainContent");
TextToHTML(theMainContent.getElementsByTagName("TD"),regexpTD);


Use selectors

Instead of grabbing all the cells in the document, try to restrict your scope to the cells that may contain HTML Calculated Columns.

For example, Paul Grenier proposed a jQuery version of my script, which allows you to grab only certain cells. If HTML Calculated Columns are only in List View Web Parts on your page, the simple $(“td.ms-vb2”) selector should be enough. For better performance, you may want to combine it with my first advice, and focus on the main content: $(“#MSO_MainContent td.ms-vb2”).

Here again, a modern browser will give you better performance (for example if it has native tools to find elements by class name).

Place your script close to the point of consumption

Imagine that you are displaying 10 lists on your page, but only the third one is using HTML calculated columns. If you place the CEWP that contains TextToHTML at the bottom of the page, the script will go through the 10 lists. If you place the script right below the third list: when the script runs, it will be faster as it only sees 3 lists, the 7 others being displayed later.
btw placing the scripts close to the point of consumption is a good practice that also applies to other scripts, not just here. In traditional Web design, you would find all the scripts under the head section of the page, but this practice has evolved now that pages are more dynamic.

If you have other ideas, feel free to share them with me and the other readers! I’ll push some of these performance improvements in the next release of the TextToHTML script. I am also looking for volunteers to test the beta versions…

Gantt demos – Update

Posted on by

Update [12/8/2009]: due to the recent events at EndUserSharePoint.com, we are postponing the live online workshop. The Gantt workshop is now scheduled on Thursday, December 17 at 1 pm EST.

I have updated the Gantt demos on my SharePoint site. All the featured customizations will be detailed in Thursday’s live online workshop. Each participant will get a sandbox and the parts needed to build the views below.

Demo 1:
http://www.pathtosharepoint.com/Pages/GanttTimeScale.aspx

This demo is based on the OOTB Gantt view, to which I have added some customizations (cf. my previous post):
– month time scale
– variable scale, adjusted via a slider. Three ways to adjust the scale: move the handle / click on the slider bar / use the arrows on your keyboard.
– overdue tasks in red
– [new] on the fly filtering of tasks: tasks will be filtered based on the text you enter in the input field (placed above the task titles).
– [new] tooltip displaying task title, start and end dates: hover over a blue bar to view it.

Demo 2:
http://www.pathtosharepoint.com/Gantt/default.aspx

The second demo shows a method to add color coding to the OOTB Gantt view. The color is based on the level of priority. More details here.

Demo 3:
http://www.pathtosharepoint.com/Gantt/Lists/Project%20Tasks/cc-Gantt.aspx

The third demo offers a completely different approach: the Gantt view is built from scratch, in a standard SharePoint list view. This provides more flexibility (color coding, annotations, tooltip, etc.), and benefits from the OOTB list features (like grouping).
See this post for more details.

Live demo: dynamic time scale for the Gantt view

Posted on by

After this week’s live online workshop dedicated to sparklines, next week will be the turn of the Gantt view.

I am still working to finalize the customizations, but here is a preview to show you what you can expect:
http://www.pathtosharepoint.com/Pages/GanttTimeScale.aspx 

On this mockup, play with the slider to change the time scale. There are three levels: the default day and week levels, plus a custom month bar. The day and week levels are only displayed when the scale is big enough (x10 for weeks, x15 for days).

You’ll also notice a red bar in the Gantt, this is to indicate an overdue task (not completed, and due date before today).

Anything else you’d like to see on Gantt charts? Let me know!