Easy Tabs and accessibility

Adaptive Web Design is my topic of the day, with my RSS reader bringing me two articles on this theme: Responsive Layouts Using CSS Media Queries, by Kyle Schaeffer, and Now You See Me by Aaron Gustafson.

I am sure the Easy Tabs have a role to play in responsive layout, but today I’ll focus on the second article.

In this excerpt from his book, Aaron compares various methods to show and hide content – a standard pattern nowadays with tabbed interfaces, accordions and other widgets.

This gives me an opportunity to point out one of the changes I made to the Easy Tabs last year. In version 5, the show/hide behavior is now included in a stylesheet, in a class called “et-offscreen”. And the method I use is the one recommended by Aaron Gustafson: instead of changing the display to “none”, move the content off-screen. This way, users don’t see it anymore, but assistive technologies can still access it.

As we’re talking Web design, I should also mention that the Easy Tabs follow the progressive enhancement approach.

If you are not familiar with CSS, this post may just be as clear as mud. But the bottom line is that by adhering to the principles of accessibility and progressive enhancement, the Easy Tabs v5 are currently a solid solution to build tabbed interfaces.

A School Site to Track Schedules, Assignments and Grades (Part I)

Guest Author: Trudy Hutzler

Trudy currently works as a Senior Technical Architect for AT&T Hosting and Application Management, where she provides Windows Server and SharePoint support and administration.  She is also a contributing author for the new Mastering SharePoint Foundation 2010 book.

As a SharePoint Administrator I often get asked about adding visualizations and such to SharePoint to add that little something extra to the out of the box SharePoint experience.  As an avid follower of Path to SharePoint I find many of the solutions Christophe has provided are a great way to enhance the users SharePoint experience without requiring me, as the Administrator, to maintain a lot of code or customizations on the server.  As good as the solutions are on their own, when you begin to combine them and layer them you can create something that is user friendly and visually appealing.

To demonstrate this I am going to share with you a School Site that I created for my oldest daughter who attends school online.  Now obviously not everyone will have a need for a School Site to track classes, homework assignments, and grades, but if you replace classes with departments or projects, homework assignments with milestones or requirements, and grades with assessments or performance ratings, you can begin to see where this concept can be applied to many more business related activities.

To make this easier to follow I am going to break this down into several posts, the first few will be an overview of the site and what it looks like, and then later posts will cover how I created each part and tied them together.  When it is all said and done I hope to provide readers with a copy of my site, and all the formulas I used.  So let me start by giving you the nickel tour.

BACKGROUND

The high schools in our area are not all that great, so my oldest daughter attends a state chartered online school.  We love the way the classes themselves are conducted, but the homework and grade interface is difficult to navigate, confusing, and it is very easy to miss an important assignment simply because it is hidden deep in layers of folders.  After an entire year of missing and late assignments and a constant struggle to navigate the interface, my daughter came to me last summer and asked me to help her create a SharePoint site on my development farm I have at home that she could use instead.

What you are about to see is the current version of that site.  My daughter would like me to note that all names, classes, and grades have been changed to protect the innocent, and that no actual grades have been used in creating this demo.

This site is created on the Team Site template, and I am using SharePoint Foundation 2010, however most of the functionality will work on SharePoint 2007, with a few exceptions like calendar overlay which is only available with SharePoint 2010.

As we go through the series I will refer you back to the blog entries I used to create each feature, and make all of the formulas available.  I will also be adding them to a special document library I have added to the demo site which, with Christophe’s help, I hope to make a copy of the site available to the readers for their use.

ON THE HOME PAGE

The site itself has three main functions; track classes, track homework assignments, and track grades. In this post I will be walking through the parts of the site that we use to track classes.

For tracking classes, my daughter needed to know the days and times her classes were scheduled for and what each teachers fax number was for submitting work she was unable to submit in the drop boxes provided by the school.  She also needed to be able to keep control of her schedule by scheduling in time to do her assignments. As parents we needed to know when she was supposed to be attending her online classes, the name of her teachers and how to contact them if we had questions. We also needed to know when the grade periods started and ended, and when there was no school.  Most of all we needed a way for busy parents, as well as the student, to be able to track it all at a glance.  This is what we came up with.


 
On the home page of the school site we used Easy Tabs to create an easy way to organize and navigate through the information we wanted “at our finger tips”. Some of the views are for Mom and Dad’s information, others are for our daughter’s use, but it is all there in one spot.

This first tab “Class Calendar”, as seen above, is a view of her class schedule, but to make it even more informative we over laid her schedule and assignment calendar views to give it a more complete view.

Next we will look at the tabs pertaining to classes and schedules.  The Schedule tab, This Week tab, and the Today’s Schedule tab show a calendar view of the scheduled classes and events for the month, the week, or for the day.  This helps other family members know when she is busy attending her web classes and can’t be disturbed.  This actually comes in very handy on days when my other children have no school, like snow days, and they know when they need to be quiet and leave their Sister alone, however you can use something like this to tack meetings, or deadlines, schedule events, etc.

For this calendar we have added color coding so we can easily differentiate between scheduled classes, work time, and holidays.

The last tab is Print Preview click on one of the other tabs that you would like a printed version for, then click on the Print Preview tab and it will create a printer friendly view of that tab, click on your browsers print button to print.  Once you have printed out your page if you look at the Print Preview tab it now reads Back to Page.  Click on this tab and you will be returned to your regular view.

For us, this gives my daughter a printed copy to keep with her and refer to throughout the day, or a schedule to post of the refrigerator, or just a list of assignments to follow up on at the end of the day, but you can also use this feature to print out pages to add to a report or share with others who may not have access to your site.

LIBRARIES

We are using the Shared Documents library to keep copies of any downloaded forms, assignments, test, or home work she has written up and scanned to email to the teacher or upload to the Drop Box in the class web site.  This way if something doesn’t reach the teacher the work is handy and can be easily resubmitted.
She also has to keep an activity diary for PE, she didn’t want those getting mixed in with other assignments so we made a separate library for it.
Finally for this demonstration I added a third document library to hold text file copies of all the formulas and calculations used in creating this site.
                                             

 

LISTS

It is in the lists that the real action starts.  It is the Class Calendar, Assignments, Schedule, Contacts and Grades that are the real work horses for this site.  Since this post is all about organizing and tracking classes we will look at the Class Calendar and Contacts lists.

The Class Calendar is really just the Team Site Calendar renamed.  We added all her regularly scheduled classes in as events, and later over laid the Assignment Calendar, which is how my Daughter schedules in time to actually work on her assignments, to increase its impact and usefulness.


 
Next we needed to track information about the classes, teachers and contact information so we created a contact list.  We started with a basic contact list then removed fields that weren’t needed and were just cluttering up the place, and added a few custom fields till we got what we needed.


 
We kept the usual contact fields like First and Last Name, Phone Numbers, and such.  Then we edited the Category from your typical Work, Meeting, Phone Call, etc. to something more school oriented like Teacher, Advisor, School Staff, Student and Other.  Finally we added another Choice field and added in the name of her classes.

At this point my Daughter decided she needed a place to keep track of all her other dates and to schedule time to actual work on each assignment.  So we created another calendar called Schedule which, since it would track multiple types of events, we made into a color coded calendar.


 
This calendar color codes the entries by category.  When you create a calendar entry, along with all the usual fields like title, location, start and end time, all day event or reoccurring event check boxes you also have a category choice field.  The category you choose will determine the color of the calendar entry.


 
So now you can see how using calendar overlays, and color coded calendars, in conjunction with Easy Tabs can begin to create a very useful interface.  This same concept can easily be adapted to tracking projects, deadlines, meetings and other deliverables.  And you don’t have to be a code ninja to get the job done.

In my next post I will get into the real nitty gritty of what makes the School Site work when I show you how we are tracking, and scheduling homework and assignments.

Coming soon on Path to SharePoint

No post in more than a month, this had never happened since I started this blog in 2008! Yes, starting my new company, traveling across the US, and the tax return have taken their toll…

Mind you, the blog still remained very active, with more than a hundred comments posted in the past month. But now it’s about time I add new content. So what’s coming next?

My next tutorial will be about countdowns/countups. I already published a live demo in February. If you can’t wait, head out for the SharePoint User Toolkit, a first countdown-countup page is already posted there! (and remember to send me some feedback)

I am also working on the Easy Tabs v 5.1. One of the most common request is to have more branding options (colors, hover effects, etc.). I already made a leap forward between v4 and v5.0, and I hope to bring some more improvements soon. I already published an example of custom style (including a live demo), but the release of Internet Explorer 9 changes the game (for example IE 9 natively supports rounded corners, no need for workarounds).

In March, I spoke at the San Diego SharePoint User Group. After I clean up my slides, I’ll post them, along with some interesting Q&As from the session.

I also have a couple projects with my new company, User Managed Solutions LLC. In particular I am working on a new online training offer for this Fall – more details coming in May!

Last, but not least, I am honored to welcome guest blogger Trudy Hutzler for a series on creating a “school site”. Trudy is a Senior Technical Architect for AT&T Hosting and Application Management, and a contributing author for the Mastering SharePoint Foundation 2010 book. As this blog is user focused, she is not going to talk about her experience on SharePoint 2010 migrations, but about a custom site she built for her daughter who attends school online. Stay tuned!

Live demo: countdown/countup

Countdowns, and generally speaking comparisons with Today’s date,  have been a recurring theme on my blog.

SharePoint 2010 hasn’t brought much improvement to the “Today” issue, so the workarounds published on my blog in 2008 remain a good reference, either the one I wrote for Data View Web Parts or Alexander Bautz’ follow up article for list views.

A year ago, I blogged about two other solutions, one relying on jQuery, the other on Flash and ClockLink.com (the demos are not active anymore).

Today I am showing two new examples that are much simpler than the previous ones. The live demo is here:
http://sp2010.pathtosharepoint.com/Portfolio/Pages/Countdown.aspx

Why much simpler? Because the only thing you need in the page is my Text to HTML script – the exact same that is used for color coding calendars. The calculated column will take care of all the rest (for example the formula to calculate the difference between target date and Today, or the color selection).

Note that there’s a key difference between the two examples: the “Countdown” column relies on the local time of your computer, while the “TimeAndDate” column pulls today’s time from TimeAndDate.com. In the past, I have already highlighted this important choice (for example, don’t use the local computer time if you’re building an auctions site!).

The drawback of this new approach is redundancy – the current date is calculated for each item. So I would recommend to only use it for views with few items.

You’ll notice that the column filters also render the HTML (cf. above screenshot). That’s because the page uses a custom version of my Text to HTML. It is still work in progress, so please don’t copy this script!

Don’t take my solutions at face value!

Last week, I stumbled upon this comment on Twitter:

“I have used and love easy tabs, but I do need pretty on my current engagement”

What? Not pretty, my Easy Tabs? Let me set the record straight.

First, let’s make sure we are on the same page. The current version of the Easy Tabs is v5, compatible with both SharePoint 2007 and SharePoint 2010. You can build your own here:
http://sp2010.pathtosharepoint.com/SharePoint-User-Toolkit/Pages/Easy-Tabs-v5.aspx

By default, the form offers two styles: one taken from SP 2007, and the other taken from SP 2010. Note that both options work on both SharePoint versions (for example, you can pick the SP 2007 style for your SP 2010 site).

You don’t like the colors? Well, talk to Microsoft! I did not invent the styles, I am reusing the default ones you get when you create a team site. The significant advantage here is that you don’t have any external dependency, just add the Web Part to a page and it ‘ll work.

If you want other colors, feel free to pick your own. Click on the “Modify colors” option, and you’ll be presented with a color picker, allowing you to choose your own background and font colors.

Not satisfied yet? Well, you can take it one step further. Look at the Easy Tabs code, and you’ll see that it is made of two independent parts: the stylesheet (style tag) and the tab builder (script tag). Modify the stylesheet as you please to get the final look. As an example, I have built this demo that has it all (rounded corners, hover effects, gradient):
http://sp2010.pathtosharepoint.com/Portfolio/Pages/Styled-Easy-Tabs.aspx

The purpose of the SharePoint User Toolkit is to open the door to advanced designs. Don’t see these tools as final products, but rather as a startpoint to build your own solutions. The beauty of such “User Managed Solutions” is that you have full control on them, and can tweak them to fit your specific needs. I took the Easy Tabs as example, but I could have chosen the image rotator, or other solutions from the toolkit.

If you are interested, I’ll start offering in a couple weeks a new series of online workshops, where I’ll show how to make the most of these tools. Feel free to contact me now if you have specific needs.

If you are a Web designer, or a SharePoint pro, looking for solutions for your customers, I have many other tools in my drawers. Come talk to me about your requirements, and let’s start a collaboration! We can also discuss this on LinkedIn, in the SharePoint User Managed Solutions group. And if you are in San Diego, or the Bay Area, I’ll be there in a couple weeks and we can meet in person.

About Scripts, Web Parts and Urban Myths

Today, I came across conversations, initiated by Marc Anderson (@sympmarc on Twitter), about the Content Editor Web Part.

Reported by Marc on his blog:

One of the things I heard at SPTechCon several times was that in SharePoint 2010, it is no longer possible to put script into Content Editor Web Parts (CEWPs). Instead, I was told, you have to use the new HTML Form Web Part.

And on twitter:

sympmarc Just verified that you *can* put script in a #CEWP in #SP2010, contrary to what several people said at #SPTechCon . Urban myths can kill…

EUSP RT @sympmarc: Just verified that you *can* put script in a #CEWP in #SP2010 <- Problems with <form> tags in CEWP 2010.

sympmarc @eusp: Problems with <form> tags in CEWP 2010. -> Different issue. Some HTML tags may not work, but it looks like script does.

sympmarc @eusp Remember that basically the whole page is a form already. That may be the issue rather than SP2010.

 

Let me try and clarify how this works.

The Content Editor Web Part

It was August 2008, I had just started my blog, and I was already writing about the CEWP. At that time, I did not even mention the ability to link to external content. I only talked about this several months later, when I started promoting an architecture where scripts are stored in a central library.

In SharePoint 2007, the most advertised way to add scripts to a SharePoint page is via the “Source Editor” option of the CEWP. So no wonder people are lost when they start using SP 2010: no “Source Editor” button anymore!

It doesn’t mean that the feature has been removed though. As with many others, the option – renamed “Edit HTML source” – is now located in the ribbon, and becomes visible when you click on the content section of the CEWP (in edit mode), or select the “Edit Web Part” option:

In addition, SharePoint tries to help: it will screen the code you enter, and you’ll receive this notification:
“the HTML source you entered might have been modified”

The cool part is that SharePoint will never tell you whether anything was modified, you’re on your own to figure it out. Feel free to take a look at some examples I collected when I posted the question on SharePoint Overflow two months ago.

Another issue with the CEWP is that you cannot include form elements. This is not new to 2010, it has always been the case even with previous versions. As Marc explains in the above tweet, the reason is that the whole page is already a form. So here comes…

The HTML Form Web Part

Yes, you can use the HTML Form Web Part to include scripts in a page. Yes, it will also accept form tags, it’s its primary purpose. Yes, it has this “Source Editor” button everybody is looking for. And no, it is not a new Web Part, it was already present in SP 2007. It is actually one of the building blocks of my SharePoint User Toolkit, in both SP 2007 and SP 2010.

So why is everybody promoting the CEWP, if the HTML Form Web Part offers more?

For one, it seems that few people actually know about the capabilities of this Web Part (it is better known for its role in Web Part connections). But another reason is that it doesn’t have the “Content Link” option that I recommend as a good practice.

Other Web Parts

Can’t use the CEWP or the Form Web Part on your site? There are still other Web Parts available (not to mention the option to add scripts outside Web Parts). Although they are not as convenient as the CEWP and the HTML Form Web Part, they can help in specific cases.

For example, back in SP 2003, forms (new, display, edit) were not as easy to edit as today. I used to rely on a Page Viewer Web Part, which allowed me to modify scripts without editing the form page itself. Come talk to me if you need more details!

Quick tip: the view selector in SharePoint 2010

In SharePoint 2007, default list views offer a selector in the top right corner, allowing you to switch between views of a same list:

The view selector is also present in SharePoint 2010, but not as easy to spot as in the previous version. It is actually available in two locations:

– In browse mode: click on the down arrow next to the list/library name

– in the ribbon, under List Tools (or Library Tools)

Hope this helps!

“SharePoint User Managed Solutions” group – Quick update

A smooth start for the LinkedIn group I launched on Monday: SharePoint User Managed Solutions (SUMS). We are now 60 people in the room, and have started 3 discussions:
– lightweight charting solution
– how to manage SharePoint recurring meetings from Outlook
– best practices / solutions for wiki navigation

I’d like to see more solution providers join the group, So I have added a bait 🙂 :
The ultimate jQuery call

For more information about the purpose of the SharePoint User Managed Solutions group, see my previous post.