Category Archives: Easy Tabs

FAQ: How to Remove “Show All”, “Hide All” and “Full Screen” in the SPELL Tabs Gratis Version

Posted on by

TabsSections

 

 

Haven’t tried out the gratis version of the SPELL Tabs yet? Fill out the contact form with your company information, and you’ll receive the solution within 48 hours.

The SPELL Tabs interface includes 3 sections:

  • tabs for inline content (bound to Web Parts, similar to the Easy Tabs)
  • tabs for links (navigate to other pages)
  • controls

When I started sharing samples from the SPELL program, last year, the most frequent question I got was: “How can I remove the link to Path to SharePoint from the tabs?”. That’s right, one of the tabs was a link to this blog (cf. above screenshot), a friendly reminder that I brought the solution to your home.

Not so friendly as it turned out, as seeing that tab systematically in any tabbed interface was more than a user can bear. Lesson learned, when I released the gratis version 1.1 earlier this year, I made sure the Path to SharePoint link was removed.

To date, more than 200 companies have adopted or are evaluating v1.1, and I am not getting questions about links anymore… here’s what I get now: “I don’t need the Show All (+), Hide All (-) and Full Screen ([ ]) controls, how can I remove them?”.

 

Why these controls?

First, let me explain the main reason why I added these controls in the first place: printing. Users sometimes like or need paper or pdf copies of the zone content. In such cases, they usually need to make all the Web Parts visible, and sometimes hide the rest of the page. In some cases, I have implemented custom interfaces where the user can pick which Web Parts he/she wants to print. Such implementations are usually combined with stylesheets that include media types.

So think about it before deciding to remove the controls!

 

How to modify or remove the controls?

In the full version, you can manage the controls via the Tabs editor. In the gratis version however, you need to do it manually:

1. Follow the general instructions in the documentation. You’ll end up with a URL that looks like this:

SPELL1.1.0TabsGratisVersion.aspx

SPELL1.1.0TabsGratisVersion.aspx#css.activeBackground=Orange

2. Append the custom control settings

SPELL1.1.0TabsGratisVersion.aspx#controls.viewAll=;controls.hideAll=;controls.fullScreen=

SPELL1.1.0TabsGratisVersion.aspx#css.activeBackground=Orange;controls.viewAll=;controls.hideAll=;controls.fullScreen=

 

Instead of removing the controls, you can also change their look, for example:

SPELL1.1.0TabsGratisVersion.aspx#controls.viewAll=Expand;controls.hideAll=Collapse

 

Quick Demo: Process Navigation for SharePoint Forms

Posted on by

ProcessSteps

This month I am releasing version 1.1 of the SPELL library, with two major module rewrites. One of them is the SPELL Form module, which allows to enhance the out of the box SharePoint forms, and now includes features such as cascading selections and inline navigation. I’ll have more code to share next month, but for now let me just share a quick demo.

When we refer to inline navigation, we usually think tabs, like what we’ve been accustomed to with the Easy Tabs. The SPELL Nav and SPELL Form modules will render tabs by default, but beyond that they also have the ability to integrate other designs. For today’s demo, I have chosen a type of navigation often found in forms, and usually referred to as “process navigation” or “process steps”, where each “tab” is displayed as an arrow.

Click here for the live demo. Note that such designs rely on css properties that might not work in older browsers.

For the record, I had to fake the form, as you cannot display the out of the box forms on an Office 365 public site (!).

SPELL Tabs: commercial and free versions now available

Posted on by

This week, the SPELL framework is reaching version 1.0.0, and I am releasing the first component of this new version: the SPELL Tabs, successor of the Easy Tabs.

SPELL is not just about new or upgraded scripts, it also introduces a new way for end users to manage their solutions. In the past, the advertised, end-user friendly way to include solutions in a page was to link to code through a Content Editor Web Part. This is still an option in SPELL, but the default method is now to use… a Page Viewer Web Part! This offers end users a no-code experience, where each solution behaves like an “app” and comes with its own, client side edit menu.

Here is what the SPELL Tabs edit menu looks like:

TabsEditMenu

The commercial version is distributed by User Managed Solutions LLC. SPELL is a tentacular program, so feel free to contact me with your questions or to schedule a call. For now, SPELL is still in “early adopter” mode, and the final blocks – shopping cart, forum, videos – will be added in the next 2 months (early adopters naturally benefit from an extended subscription period).

For those who are migrating to SharePoint 2013 and are just looking for a way to fix the broken Easy Tabs, I am also making an entry level version of the SPELL Tabs available at no charge. As you might expect, features, terms of use and support are limited compared to the full version. If you are a subscriber of the SPELL newsletter, you’re already familiar with it, as it is the evaluation version you’ve been playing with in the past few weeks!

SPELL Nav, the successor of the Easy Tabs

Posted on by

The SPELL library is reaching version 0.8 this month. My main achievement in this release is the completion of the “Inline Navigation” module.

SPELL supports SharePoint 2007, 2010, 2013 and Office 365, and to demonstrate it I have updated all my sites:

All pages run the same version of SPELL, and the look of each menu is controlled via options. The idea is the same as with the original Easy Tabs – reuse the Web Part titles to automatically generate the navigation – but the code has been completely refactored. It is now more solid, for example when it comes to synchronization with the rest of the page, styling, print preview, and inclusion in wiki pages. It also offers more features:

  • Option to have more than one Web Part per tab
  • Compatible with display forms (this is especially useful if like me you are a fan of the “Related Items” feature)
  • Direct link to activate a specific tab (for example access the SharePoint Hosting section on the UMS home page)
  • Can be implemented in the middle of a zone, not necessarily at the top
  • Can include hyperlinks to external page (see the demos)
  • etc.

If you have subscribed to the SPELL interest list, you’ll receive a code sample by the end of this month.

As I have already mentioned, I consider that the Easy Tabs code is obsolete and I won’t update it. Also, it has become more and more time consuming to support such UI widgets because of the increasing number of SharePoint versions, browsers and supported devices (for example tablets and mobile), so I am more careful than before when it comes to releasing such tools.

That said, I understand that not everybody is willing to subscribe to the SPELL program. To allow end users to enjoy a smooth upgrade to SP 2013, in the next couple months I’ll publish in the SharePoint User Toolkit a lightweight version of the SPELL Nav that will cover most of the features offered by the current Easy Tabs.

[Update] SPELL Tabs: commercial and free versions now available

No Easy Tabs v6 in 2012

Posted on by

This is not the most exciting post ever, but I had to write it for the sake of transparency.

In the past 6 months, I have been working on a new version of the Easy Tabs. I have also tried my best to answer the many requests I received in this blog or by e-mail.

In parallel, I have been working on the SharePoint User Toolkit, to clarify its purpose.

My conclusion is that the new version of the Tabs is becoming too complicated for the Toolkit.

I am not keeping the new version of the Tabs secret. It has actually been running on my site in the past few months, under various forms. I also shared an alpha version on LinkedIn some time ago. But the new features introduce several edge cases that I cannot afford to support for free, and that I believe cannot be left in the hands of users without detailed instructions.

Instead of publishing more complicated versions, my choice this year is to expand the scope of the Toolkit to provide more discovery options. This is the sense of the recent addition, Pie and Bar charts (Google connector). Expect a couple more in the coming months, like a RSS reader and a simple poll.

At the same time, I hope to open my services to a larger audience. I am currently working on a subscription service, an ambitious project that should offer better value than the current workshops and one-on-one sessions.

There will be a next version of the Easy Tabs, just not this year. The plan is now to release v6 for SharePoint vnext – just like v5 was released for SharePoint 2010. For now, the current version is robust and works well on both SP 2007 and SP 2010.

A new location for the SharePoint User Toolkit

Posted on by

This week, the SharePoint User Toolkit has officially moved to its new home:

http://usermanagedsolutions.com/SharePoint-User-Toolkit/

It is now located in my company site. The site is still under construction, but you’re welcome to visit the home page to read about our upcoming offering: solutions, coaching, Web design and SharePoint hosting. As you would expect, the home page right hand menu is a variation of the Easy Tabs.

In a future post, I’ll explain how I redirected the pages from my old SP 2007 to the new place in a snap!

Tutorial: build a simple slideshow with the Easy Tabs

Posted on by

Environments: SharePoint 2007 (wss, MOSS), SharePoint 2010 (Foundation, MSS), Office 365

Audience: Power user.

Permission level: design or full control.

Estimated time: 10 minutes.

Last year, I added to the Easy Tabs an Autoplay feature. It seems that not many people use it, so today let me show you how it can help you build a simple slideshow.

1- Add your images to your SharePoint page

2- Add the Easy Tabs

3- Looking for fancier slides?

4- A warning about performance

1- Add images to your SharePoint page

Adding images to your SharePoint page is easy with Image Web Parts. Each Web Part will become a slide in our slideshow. The Web Part title will become a tab, so if you want to create an index simply use  a number – 1, 2, 3, etc. – as your Web Part title. Make sure you place all your Image Web Parts in the same Web Part zone.

Your images can reside anywhere, not necessarily in the same library, or on the same server, not even on SharePoint. Just make sure that your users have read permissions to the images location.

2- Add the Easy Tabs

The Easy Tabs are added at the bottom of the Web Part zone, following the usual procedure. For detailed instructions, check out the SharePoint User Toolkit. For our slideshow, we’ll check the “Autoplay” option and enter the interval in seconds between two slides.

3- Looking for fancier slides?

Maybe you’d like something more sophisticated than a simple image per slide? In this case, instead of an Image Web Part you can use a Content Editor Web Part or a Form Web Part, and enter your own html code.

For example, to show images with a caption overlay, follow this tutorial. If you need more detailed instructions let me know!

4- A warning about performance

Images can significantly impact the load time of your page.

If your images are stored in a SharePoint picture library, remember to take advantage of the Web friendly formats that SharePoint automatically generates for you.

If you have more than 5-10 images in your slideshow, you should consider using an Image Rotator instead. The image rotator will offer better performance, as the images are loaded on demand, one at a time.

It’s All About the Grades-Tracking Schedules,Assignments, and Grades on a School Site (Part III)

Posted on by

Trudy HutzlerGuest Author:  Trudy Hutzler

Welcome to the third installment of the series on my School Site and how we put it all together.  In this post we will walk through how we track the grades, because at the end of the day all it is all about the grades.  For tracking grades, the school interface was often inaccurate with some classes included assignments not yet due as zeros until an actual grade was entered; others would be late but not counted until an actual 0% was entered, and so on.  We needed a way to track and calculate her grades so we could monitor her progress.  Not just tracking the grade for the individual assignments, but for the class average, the grades for the grading period and the year overall.  Finally we wanted to make it easy for us, as parents, to get the update on her grades at a glance.Now before we go any further, my daughter has asked me to again state that no actual grades were used in the making of this demo.  All grades and classes have been changed to protect the innocent.

Home Page

The All Grades tab shows the grades for each class in one place.  Any assignment that is past its due date is grouped by Class and the assignment grades for each class are averaged.  Although, since some assignments are weighted heavier than others this is not entirely accurate it does give us an overall idea of how she is doing grade wise.

All Grades Tab on Home Page

All Grades Tab on Home Page

To see the class grade average and individual assignment grades, you know for deciding if she can go out with her friends, or take a mental health day, you click on the Class to expand the node.

The Math, English, History, PE, and Science tabs, on the home page, simply list out all the assignments for that class, for the current quarter.  When my daughter is working in a particular subject she can see everything that was assigned and work on it all at once to save time.

Science Tab on Home Page

Science Tab on the Home Page Displays Current Grades for this Class

I also added a Legend at the bottom of the page to help other users, like my Husband, to know what all the different colors and symbols mean.

Lists

All of the final assignment grades are recorded in the Assignment List.  The problem was we had decided we would only track one quarters worth of assignments at a time to keep the assignment lists from being an overwhelming mess of information.  So I needed a way to track the final grades for each class for each quarter, semester, and the year overall.  To do this I created a new list called Grades.

Grade List

Grades list shows all final grades for the year to date

I explained above that some grades are more heavily weighted than others and so the grade average was not exactly correct, but at some point needed to track the actual final grades.

I enter in her final scores from her report card, and the list calculates the rest averaging the two quarter grades to get the semester grade, and all quarters to get the year overall.  Now you won’t need to track grades in your workplace, but what about other performance indicators, percentage of tasks completed on time, or percentage of returned or defective parts?  You can use your own imagination on how something like this might work for you.

Finally to keep everyone in the loop on where my Daughters grades stand I post an abbreviated view of the grades on the home page for quick reference.

Image Rotator and Grade Summary

The image rotator and grade summary view from the homepage

Now did you notice the picture of the waterfall above the grades summary view for the homepage?  It is a picture of the Kent State University campus.  Kent is one of the colleges my daughter is considering. We also wanted the site to be as attractive in form, and it was useful in function so we added the image rotator solution to the home page.

I created a picture library to hold the pictures I wanted to show in the image rotator web part, and every 5 seconds the image changes to display the next picture in the library.  Now for this demo I used pictures of the Kent State campus, but my daughter can change these and show pictures of friends, cartoons or comics, whatever she wants.  This just gives the page a little visual appeal.  I have been known to place Calvin and Hobbes Snowmen comics in a rotator part during periods of time when we are having a lot of snow storms, or other holiday cartoons, and so on.  This helps to draw users to the page, and gets them clicking around and using the site.  So never underestimate the power of visual appeal.

Well now you have seen our School Site, and seen how we combined individual solutions to make a user-friendly, visually appealing solution.  From here we are going to roll up our sleeves and get down to the nitty-gritty of exactly how we created each part of the solution.

My hope is that something that I have done will help spark your imagination and start you thinking about ways that you can use these solutions in new and exciting ways.