Category Archives: Best Practices

Easy Tabs: Bait them with Humor!

Posted on by

When Kerri contacted me with a technical question about the Easy Tabs, a detail in the screenshot she sent immediately caught my attention: an original way to drive user adoption! I asked her to tell us more about her idea.

Author: Kerri Abraham, Revenue Cycle Sharepoint Coordinator, Mercy Medical Center.

I always worry that my end-user isn’t going to “get it”. I know my staff, they need to be compelled to change, they tend to be timid with new concepts. That stands to reason of course, but it was a concern when I was debating about using the Easy Tabs solution. How do I make sure that they not only see the information, but that they regularly click on the tabs to see the gems hidden underneath? I bait them.

Recently I had an administrative mandate that required a rebuild of my divisional front page, it was dreary anyway and needed it, but I still had other information to display and this new mandate threatened to take up all of the real estate. About the same time I came across Christophe’s Easy Tabs. Wow, what a solution! I was able to build my mandated Communication Board even bigger than I had originally intended and still had plenty of space to add in ‘extravagant’ web parts like a Table of Contents! This was great, but did my staff see the tabs? Would they click them to see the important ‘News’ announcements underneath? Then Mark Miller posted Create a Weather Magnet for a SharePoint Dashboard. The timing was perfect because I had just caught the end of a History channel show on meteorology that stated most of a TV station’s budget goes into weather reporting because they know it is the #1 draw. Now I had my bait.

I placed my extra-sized weather magnet, per Mark’s instructions, in the middle of the tabs, and sent the message out to staff that it was there, with the link and a “Be sure to test it out.”

It took only a few minutes for the accolades and thanks to pour in, more even than from the normal responders, I heard from people who never say anything! Wow, the weather works, and I can be sure that they are checking that area regularly, it’s human nature to click around on things nearby, so I’m sure they are catching the ‘News’ as well!

Okay, so if I use the weather as a draw at my top site, I need new bait for the lower level team sites. I had been sent a comic that was ‘office topic’ related. So when I redid the page to include the Easy Tabs, I added it in a Content Editor Web part as a ‘Humor Me’ tab just to get staff’s attention. But static comics don’t keep them coming back for more. So with a little inspiration from Christophe, through a correspondence we had over the meaning of that ‘Humor Me’ tab, (it even hooked Christophe) I bulked it up to include a Dilbert widget. Exactly the same premise as the weather magnet and just what was needed to keep them clicking!

The Easy Tabs makes the most of front page real estate without that pesky page refresh, without the slightest hint of bogging down performance, and it allows me to provide my end-users with some extras that would normally take up too much space in that prime real estate area. These are the kinds of solutions that drive my sky rocketing end-user adoption. It’s fun and its easy – Easy Tabs that is! Thanks Christophe for your contributions to the Sharepoint community, they really are so very much appreciated!

Are the Easy Tabs security trimmed?

Posted on by

A question I received from Liz:

“I just downloaded your EasyTabs webpart and think it works great.  My question is: how does it work when you have different permissions on different webparts?  Is it security trimmed?”

Good question, and you definitely need to be clear about security implications when you start adding code to your Web pages.

What I explain in the online workshops is that customizations like the Easy Tabs (and most of my other scripts) simply add a presentation layer on top of existing SharePoint pages. As such:
– all the underlying SharePoint functionalities are maintained (in particular security and audience).
– the customization is non-destructive; if you decide to remove it later, you’ll be back to your initial SharePoint page.
– this approach follows a standard Web design pattern known as “progressive enhancement”. If for some reason the script cannot run in the browser, the user can still access the page content.

The “Big Picture”: CSS sprites in SharePoint 2010

Posted on by

I wanted to share this mosaic from the official SharePoint 2010 site, as an example of how Web design techniques are making their way into SharePoint 2010.

If you are familiar with Web design, you’ll recognize a CSS sprite. The principle: multiple images used throughout the Web page are combined into a “master image”. This reduces server requests and improves page load performance.

In the above example, the master image is used to populate the list ribbon (also a feature introduced in SP 2010):

Note that I already talked about CSS sprites a couple months ago, with this example designed to display inline pies in SharePoint lists: http://pathtosharepoint.com/Utilities/PieSprite50.png

Some references if you’d like to learn more and see other real life examples:
– CSS Sprites: Image Slicing’s Kiss of Death by Dave Shea March 2004
http://www.alistapart.com/articles/sprites 
Sprites are the extension of a technique called “sliding doors”, used to create button rollover effects.
– The Mystery Of CSS Sprites: Techniques, Tools And Tutorials
http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials

A great workshop!

Posted on by

Last Thursday, Mark Miller and I presented our last workshop of the year, dedicated to the SharePoint Gantt view.

As for previous workshops, I had prepared some customizations (7 to be precise), each packaged as a Web Part. As I was detailing them, I received some great feedback from Mark and the participants, on the usability of each solution. One advantage of these client side scripts is that the code is accessible and can be easily tweaked, so we were able to make changes in real time, that the participants tested immediately in their own sandbox.

After the workshop, I finalized the scripts and added a couple notes. I also added two more Web Parts, also based on the comments I had received. And one participant, Jeremy, shared another variation he had worked on after the workshop. What a teamwork!

Mark and I share the same view of what training should be. When we say live workshops, we mean it:
– live: the participants have their word to say, and their reactions drive the pace of the session.
– workshop: what is important is not what we show, but what the participant is able to accomplish.

Mark and I will team up again in January for a new series, and I am really looking forward to it!

If possible, I’d like to take the experience even further, and tune up the workshops content based on your feedback. We have already heard from several people that it would be good to have an introduction to jQuery for non-programmers, and we are working on this.

HTML Calculated Column: minor update… and some advice

Posted on by

I am publishing today a minor update (v 2.1.1) of the TextToHTML script:
http://www.pathtosharepoint.com/HTMLcc/default.aspx
You’ll find the updated files under the “download” tab.

Why this update?

First, I am responding to comments from readers on the EndUserSharePoint.com blog. Several months ago, Jim Bob Howard posted an example using my method. His post offers detailed step by step explanations, and is very popular. However, a few readers reported issues with the calendar week/day views, which didn’t render the colors in some configurations. The code I posted today aims at fixing this issue.

I am also taking the opportunity of this update to propose two separate scripts:
– a light version, for both SharePoint 2003 and 2007, that applies the rendering to displayed items only.
– a full version, SP 2007 only, that applies the rendering to displayed and hidden items (grouped views, preview pane, etc.). Be aware that this version encapsulates some of the SharePoint OOTB code.

Tell me again, what is this “HTML Calculated Column”?

If you are an end user, the HTML Calculated Column is a simple yet powerful method that allows you to enhance your SharePoint sites. Even if you don’t plan to use it, you should at least be aware of its capabilities. It many situations, it can replace or even do better than other SharePoint options, like the Data View Web Part, Excel Services or the KPIs available in MOSS. To give you an idea of what you can accomplish, take a look at these examples:
– indicators for lists
– color coded calendars
– KPI roll-up
– some other applications…

For more explanations, read the original article.

To be fair, the method also has its flaws. It leverages the OOTB calculated column, but also relies on a client side script to render the HTML on the page. If you don’t feel comfortable with the “hack” part (TextToHTML script), note that you can avoid it if you use the method with a Data View Web Part, a Content Query Web Part (see above link: KPI roll-up), or an XML source (RSS, URL protocol, Web Service).

Why two different file formats, .dwp and .txt?

I am releasing the code in two formats: Web Part (.dwp) and text (.txt).

The .dwp file is for your convenience, if you only use the method sporadically, or for the first time. Simply import the Web Part to your page and you’re good to go. It is just a Content Editor Web Part containing the script.

If you plan to use the method on a regular basis, you should grab the text file instead: store the code in a central location and point to it. This will greatly facilitate future updates. For more details on this “best practice”, read this article.

A couple reminders

– Remember that the Text to HTML script must be placed below the lists you need to modify.

– The HTML you create via the calculated column must follow the HTML standards. For example for calendar views you’ll need to use inline elements (“span” for example), not block elements (like “div”).

What’s next?

I am currently working on version 3 of the script, which will make the method work on column filters, and headers of grouped views. Some people have already received intermediary versions, and I am waiting for their feedback.
I am also listening to feedback on the current version (big thanks to the readers who shared their findings!). For example, the use of the method in discussion lists, blogs or wikis will require more investigations.

How can I be informed of upcoming releases?

The preferred way is to subscribe to the RSS feeds, either for this blog or for my SharePoint downloads library. If you don’t use RSS, feel free to contact me, and I’ll send you an e-mail when v3 is out.

Online Workshop – Easy Tabs for Project Dashboard

Posted on by

ETdashboard

This Thursday, Mark Miller and I will be delivering our second “Easy Tabs interface” online workshop. One of the examples we’ll review is the use of tabs in dashboards.

In our online workshops, each participant receives his/her own sandbox. Access to the sandboxes is restricted, so to give you a taste of the demos I have created a mockup of the project dashboard:
http://www.pathtosharepoint.com/Calendars/Pages/ProjectDashboard.htm

Note that the original page is built on a standard wss site, using only the SharePoint UI (no SharePoint Designer, no server access).

There are multiple approaches to dashboards, depending on the story to tell and the audience. I am not claiming that tabs are a best practice, I am just suggesting them as one more option in our toolkit.

Tabs allow you to create layers. In my example, the first layer is dedicated to visual indicators, allowing you to assess at a glance the health of the project. At the same time, thanks to the tabs, additional information is not far behind, and can be reached without the need to leave the dashboard or even refresh the page. Under each tab, you can find more details, for example data or analyses supporting the charts. Or on the contrary you can filter information, allowing to focus on specific items (e.g. My Tasks, My Issues).

Interested in the Easy Tabs? Then register for our online workshop this Thursday. See you there!

Credit goes to Craig Lowrie for the color coded Gantt, and Claudio Cabaleyro for the pie chart. An HTML calculated column was used to create the bar chart.

Case study: KPI roll-up in MOSS (Part I)

Posted on by

Eric Proshuto is a Sr. Application Engineer for Siemens PLM Software, where he manages the intranet/extranet MOSS farm. He has been supporting SharePoint since early 2000 using SharePoint Team Services.
A couple weeks ago, Eric posted a very useful tip on my blog. I have built a case study to show how to put it to work. I sincerely hope that Eric can share a more complete, real life case study after he implements this in his company.

Note that this case study relies on the Content Query Web Part, only available in MOSS.

The scenario

Let’s consider the case of a division in a large organization, with dozens of business units that report project status on a daily basis. The Management needs visibility across business units on certain critical projects.

The figure below shows the organization structure. The SharePoint sites structure replicates it, with “Division” as the top-level site in the site collection.

Site Collection Structure

To make everyone go to a central list to report projects health would make that list unwieldy at best. Instead, we’ll keep the reporting at the team level, and use SharePoint’s aggregation capabilities to build the Executive dashboard.

Update [6/27/2009] For more details on this information architecture choice, see this timely article from Bob Mixon:
SharePoint IA: Store Information Close to the Point of Ownership

Team dashboard

Team Dashboard
We are going to build a list template that each program or project team will use to report their project’s health. We’ll do this in 3 steps:
1/ Create site columns, at the site collection level
2/ Create the SharePoint list that hosts the dashboard
3/ Save the list as a template for reuse across the organization

Note: in a real life scenario, I would definitely consider using content types for added flexibility.

Site columns

For my example, I have chosen to track two indicators for each project: progress and health. In addition, we’ll have a column that precises the level of visibility of the project.

To reach the Site Column Gallery, follow this path:
Site Actions | Site Settings | Galleries | Site Columns

The % Complete column is already present in the list. Let’s add two choice columns:
– Health, with three options: (1) Red, (2) Yellow, (3) Green.
– Visibility, with three options: Team, Business Unit, Division.

And two calculated columns for the indicators:
– Progress, based on the % Complete:
="<div style='position:relative; width:50px; border: 1px solid;'><div style='background-color:"&CHOOSE(INT([% Complete]*10)+1,"red","red","OrangeRed","OrangeRed","DarkOrange","Orange","Gold","yellow","GreenYellow","LawnGreen","Lime")&"; width:"&([% Complete]*100)&"%;'> </div><div style='position:absolute; top:0px;'> "&TEXT([% Complete],"0%")&"</div></div>"

– Indicator, based on the Health:
="<img style='float:left;' src='/_layouts/images/KPIDefault-"&(3-RIGHT(LEFT(Health,2),1))&".gif' />"

SharePoint list

We’ll use a Tasks List type:

Site Actions | Create | Tracking | Tasks

The % Complete column is already there. Let’s add the 4 other site columns we created:
Settings | List Settings | Columns | Add from existing site columns.

The final touch is to add the script for the HTML calculated column (the instructions were initially posted here, but make sure you grab the updated version of the script). Your tasks list should now look like the above screenshot.

The list is ready, we can now save it as a template that all teams will use for their project:
Settings | List Settings | Save list as template

Note: the “Text to HTML” script will also be saved in the template.

In Part II, we’ll see how to roll up projects with executive visibility to the top level, and how the HTML calculated column plays well with the Content Query Web Part.