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

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

 

Advertisements

Trick or treat? Group items by month

OrderedMonthsIt’s that time of the year again when the unnatural becomes the norm, so let’s continue the tradition started last year with the SPELL program. Our goal today will be to display list or library items grouped by month, as shown in the screenshot.

The deal is that we don’t want any custom code or workflow here, just the regular out of the box UI features. We’ll be creating two calculated columns, called Year and Month, where we’ll insert the appropriate formulas. I chose the “Modified” column for my sample formulas, but of course any other date column would work too.

The YEAR and MONTH functions

YearNumber

A quick review of the SharePoint date functions gives you YEAR and MONTH that should fit the bill:

Year:  =YEAR(Modified)
Month: =MONTH(Modified)

The result is less than satisfactory though (see screenshot), as the year is displayed with a thousands separator. and months are displayed as numbers.

The magical TEXT function

MixedMonthsFurther exploration will take you to the TEXT function. It is not very well documented in SharePoint, fortunately you can rely on the Excel documentation and come out with the following formulas:
Year:  =TEXT(Modified,"yyyy")
Month: =TEXT(Modified,"mmmm")

Still not happy with the result? Right, the months are displayed in alphabetical order, not sequential order, not yet an ideal experience for our end user.

So let’s pull our last trick, and use the following formula for the calculated month:
Month: =REPT(" ",13-MONTH(Modified))&TEXT(Modified,"mmmm")

You can see the final result live on this page.

What’s the trick? We are still relying on the out of the box alphabetical sorting, but to force the order, we are adding a bunch of white spaces before the month name. The calculated Month actually contains the following values (each _ represents a white space):
____________January
___________February
__________March

__November
_December

Now, why don’t we see these spaces on the Web page? What makes the magic work is that when you insert multiple spaces in a Web page, the html specification says that

user agents should collapse input white space sequences

That’s it!

If you want to get really fancy, you could even use the zero-width space character. The best part is that people who edit your formula won’t even understand the trick, as the zero-width space won’t be visible (there’s however a good chance that they break your cool formula).

To take this further

You can apply this trick to other situations. A typical example is a color code. The alphabetical order will give you Green-Red-Yellow or Amber-Green-Red, you can address that by adding the appropriate leading spaces.

Be careful with this technique though: even if the rendering looks fine, the spaces are indeed stored in the field, and this might break other customizations. So this trick is better kept in a calculated column that will be exclusively used for rendering purposes.

Quick Demo: Process Navigation for SharePoint Forms

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 Nav, the successor of the Easy Tabs

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

Workaround for the SP 2010 calendar resize bug

In SharePoint 2010, the calendar views are rendered via a script on the client side. This is a significant improvement over the heavy calendars of the previous versions (2003 and 2007), and in the 2013 version client side rendering has been extended to all list views.

Unfortunately, the SP 2010 calendar also came with a bug that I reported a couple years ago. It is made of two layers – one for the grid and one for the events – and when the calendar gets resized the two layers get out of sync. Really annoying! As far as I know, Microsoft has never fixed this. I keep receiving reports of this bug from users, especially as it occurs when calendar views are combined with the Easy Tabs.

If you have to deal with this annoying behavior, here is a simple workaround: go to the Web Part settings and give the Web Part a fixed width.

Hope this helps!

Teaser: real time Business Intelligence in SharePoint

StatesMap

I am making progress on my SPELL project. Its main component, the SPELL JavaScript library ($P), recently reached version 0.6 and has been implemented on a couple sites. I expect to reach version 0.7 by the end of the month and version 1 by the end of the year.

To showcase some of the capabilities of the SPELL library, I have set up a live demo featuring airline ontime statistics. In this demo, you can explore data across 3 dimensions: State (first level), Month and Carrier (second level). The third level are the list items themselves.

The first level is rendered via Google GeoCharts (for v1 SPELL will have other map options). The second level – matrix view – is a custom SPELL solution that mimics an Excel pivot table (much simpler though). You saw it in the slides if you read my previous post.

“Real time” refers to the fact that data is directly pulled from the SharePoint list. The charts always read the latest updates, as opposed to traditional BI patterns where data transfers are done at regular intervals. And there is no need for intermediate storage, as would be the case for Excel Services for example.

Note: for practical reasons the demo takes some shortcuts. For example the map doesn’t collect data directly from the list.

 I collected the airline data  (January to July 2012) from the Bureau of Transportation Statistics, I’ll add August as soon as it becomes available. Obviously interacting with more than 3 million items would not be reasonable, so I have done some pre-processing to aggregate the data by month and state. This brings the number of items down to ~500/month, for a total of 3,500 since the beginning of the year.

This is the downside of this solution: because it directly interacts with lists, it is subject to SharePoint’s usual limitations, for example the 5000 item threshold on views in SP 2010. Technically the tool could work with much bigger data sets, but this would require some adjustments and might not be desirable.

The solution showcased here has no ambition to compete with well established tools like PerformancePoint, SSRS or even Excel, but rather to offer a lightweight alternative. It presents a number of advantages that make it attractive :

  • Compatible with SharePoint 2007, 2010, Office 365 (evaluation of SP 2013 in progress)
  • Can easily be implemented by an experienced end user. No server side install, files are simply uploaded to a document library.
  • Direct, real time access to the SharePoint data (which means for example that it follows site, list and item level permissions).
  • Pure html (no Flash or Silverlight), accessible from both desktop and mobile devices.

This could for example be the ideal tool for a mid-size matrix organization, with multiple teams working on multiple programs. Managers could monitor the organization health, use the matrix view to analyze trends (what brings my organization up/down, a specific project or a specific team?), and finally access the items themselves.

A dynamic website built on Office 365

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.