Category Archives: navigation

Live demo: “Full Screen” tab

Posted on by

I am considering adding two new options to the Easy Tabs: Full Screen and Print. This is the result of ongoing discussions with Kerri Abraham.

The “Full Screen” option is similar to the usual overlay/lightbox solutions. Only my solution is lighter, and doesn’t require an external library like jQuery for example. Check out the live demo and let me know what you think!

The Print – or Printer Friendly – option is very similar to the Full Screen one, with maybe a couple additions:
– print job automatically launched on click, to print the current tab or all tabs.
– page break after each Web Part.

Let me know if you find these options interesting, and what in your opinion should be the expected behavior.

Update [June 18, 2010]: the live demo now displays a “Printer Friendly” tab. When you click on it, the tab is replaced with a “Back to Page” tab. If you select print preview in your browser, you’ll see a page break before each printed Web Part.

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.

Easy Tabs Lite, version 4.0 beta

Posted on by

Today I am releasing a new, beta version of the Easy Tabs:
http://www.pathtosharepoint.com/sharepoint-user-toolkit/Pages/Easy-Tabs-Lite.aspx

For a live demo, go to the Path to SharePoint home page.

Why Lite?

I am maintaining two flavors of the Easy Tabs. This one is public, written in plain JavaScript. There’s another one written with jQuery, which allows to include some additional effects. The jQuery version is made available to the participants of the Easy Tabs online workshop.

Why a copyright?

As I explained in a previous post, original content published on the Web is copyrighted, even if the copyright notice is not displayed. It means that you are not supposed to reuse it without the author’s consent.
By including a license, I explicitly grant you the right to use the script without having to ask me first.

Why beta?

The new version has several new options, and testing all the variations on various browsers is time consuming. A beta version allows me to accelerate the release process and benefit from your input.
To report an issue, leave a comment below, or send an e-mail to Christophe@PathToSharePoint.com.

Will it work in SharePoint 2010?

No, version 4.0 is for SharePoint 2007 only. I am working on a SP 2010 compatible version.

No documentation?

The page is still under construction, and I’ll add more information in the weeks to come. I decided to publish it today to benefit from your feedback as soon as possible, both on the script itself and on the interface.
For information on the options, see the descriptions below and hover over the help icons on the form.

What’s new in v4.0?

Inline script

The script now runs in the flow of the page, instead of waiting for the page to be loaded. This avoids the flashing effect that some users reported.
To make the new script work, you’ll need to place it at the bottom of the Web Part zone.

Web Parts without a title

The previous version triggered an error if the zone contained a Web Part without title. The new version will simply ignore such Web Parts.

Multiple Easy Tabs in a page

The new script is “widgetized”, you can include several Easy Tabs in the same page without having to tweak the code.

Split option

If you check the Split option, the tabs will be distributed across two rows.

Expand all

This option will add to the tabs row an option to make all Web Parts visible.

Web Part headers

Choose to show the Web Part headers if you want to keep the title hyperlink and the Web Part edit menu on the screen.

Autoplay

With this option, the focus will automatically switch to the next tab after a certain amount of time. This can be useful to build a simple slide show for example.

Minified script

For better performance, the new script is compacted. Its size remains similar to the previous version, despite all the added features.

How to get the script?

Go to the Easy Tabs page, 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.
– all the options are included in the script you download. You can later modify the variables directly in the script, without having to come back to the form.
– keep in mind that this is a beta version, for evaluation purposes.

Preview: new version of the Easy Tabs Lite

Posted on by

An update for the Easy Tabs Lite – version 4.0 alpha – should be ready in a week or so.

The new version will handle cases when a Web Part has no title (it will simply ignore it, instead of triggering an error in the current version). Also I have “widgetized” the script, which means that you won’t need to tweak the code anymore to get two Easy Tabs on a same page.

A couple options come with v4:
– Split (tabs spread across two rows)
– Display all/Expand all (make all the Web Parts visible)
– Autoplay: automatically switch to the next tab after a certain amount of time. This can be useful to build a simple slide show for example.

You can experiment with the Expand all and Autoplay (8 sec/tab) options on my home page:
http://www.pathtosharepoint.com

FAQ: Easy Tabs and third party Web Parts

Posted on by

While my Easy Tabs work perfectly in SharePoint 2007 with OOTB Web Parts, I often hear complaints from users that their don’t work with third party Web Parts. Why is that?

The Easy Tabs rely on each Web Part following a standard pattern (see a simplified diagram on this page, “behind the scene” tab). This gives the Easy Tabs a straightforward way to scan a Web Part zone and identify for each Web Part:
– the title (will be converted into a tab)
– the content (will be displayed or hidden depending on the selected tab)

When the Easy Tabs come across a Web Part that doesn’t follow the standard structure, they don’t know how to deal with it.

How can we move forward on this issue? Tweaking my script will only help for a specific third party application. Here is my proposal:
– if your third party Web Parts work with the Easy Tabs,  use the comments section to let everybody know.
– if they don’t work, you could let the vendor know that their Web Parts don’t adhere to the standard structure. It may be an easy step for the vendor to fix it.

Easy Tabs: multiple tab rows

Posted on by

I am falling behind in my schedule, and several posts will only be published in the beginning of next year. However, I didn’t want to postpone this one as this is by far the number one request: how to split the tabs row, on my Easy Tabs solution.

This post explains how you can tweak the Easy Tabs v2 to achieve this. The option will be included in the next public release of the Easy Tabs Web Part.

To split the tabs row into two, follow these steps:

– include the Easy Tabs Web Part in your page. This is a Content Editor Web Part that contains a script.

– edit it, using the source editor of the CEWP.

– find this line of code:
activateTab(ActiveTab);

– replace it with:

var splitdiv = document.createElement("div");
var index = Math.floor(TabsTD.childNodes.length*0.5);
TabsTD.insertBefore(splitdiv,TabsTD.childNodes[index]);
activateTab(ActiveTab);

Basically, what we’re doing is simply add a “line break” in the middle of the tabs row (hence the 0.5 in the script).

You can of course add more than one line break, for example:

var splitdiv1 = document.createElement("div");
var index1 = Math.floor(TabsTD.childNodes.length*0.7);
TabsTD.insertBefore(splitdiv1,TabsTD.childNodes[index1]);
var splitdiv2 = document.createElement("div");
var index2 = Math.floor(TabsTD.childNodes.length*0.3);
TabsTD.insertBefore(splitdiv2,TabsTD.childNodes[index2]);
activateTab(ActiveTab);

Adjust the split values (0.3 and 0.7 in the above example) to your own needs.

Hope this helps!

Note: if you attended the Easy Tabs workshop, the split option is included in your Easy Tabs version (3.1). If you need more than two rows, here is a solution I have already posted on the Stump the Panel forum:

This is the current split function in v 3.1 (written in jQuery):

//split
if (ET001_split == "Yes") {
var splitindex = Math.floor($(ET001_TabContainer).children().length*0.5-1);
$(ET001_TabContainer).children().eq(splitindex).after("<div style='font-size:0px;'></div>");}

splitindex is the index at which the row will be split. If you have 16 tabs, then:
splitindex = 7 (indexing starts at 0 in JavaScript)

You can change this calculation to include more splits, for example:

//split
if (ET001_split == "Yes") {
var splitindex = Math.floor($(ET001_TabContainer).children().length*0.3-1);
$(ET001_TabContainer).children().eq(splitindex*2).after("<div style='font-size:0px;'></div>");
$(ET001_TabContainer).children().eq(splitindex).after("<div style='font-size:0px;'></div>");}

Or you can force your own values:

//split
$(ET001_TabContainer).children().eq(5).after("<div style='font-size:0px;'></div>");
$(ET001_TabContainer).children().eq(11).after("<div style='font-size:0px;'></div>");

And if your users ask for too many rows…switch to a Quick Menu Web Part!

Easy Tabs: any issues to report?

Posted on by

This is a checkpoint. Before I publish more tips on how to customize the Easy Tabs, I’d like to hear from you if you have issues to report.

The most frequently reported issue so far: tabs are visible in edit mode, but not in view mode. I have published the explanation here.

I have also received comments about the tabs not working with Data View Web Parts that include filters, but I am unable to replicate the issue. Everything works fine in my case. If you have an example that doesn’t work, I suggest that you save your Web page (html format) and send it to me. Remember to precise your SharePoint version (wss or MOSS).

Also, note the following restrictions:
– the Easy Tabs work on a site’s home page and on Web Part pages you create (Site actions > Create > Web Part page).
– the Easy Tabs won’t work if you are using a custom Web Part or Master page that doesn’t follow the standard SharePoint structure.
– I am restricting my tests to these browsers: IE7, IE8, Firefox 3, Safari 4 and Chrome 3.

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.