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

How to get your Office 365 version number

Last week, the Office 365 home page of one of my customers suddenly turned blank.

In the past, my first reaction in this situation was to ask the user what they had changed, and fire the developer tools on IE or Chrome. I often work with power users, and as they say, they know enough about SharePoint to be dangerous!

These days however, my first move is to check the Office 365 version number.

In Office 365, Microsoft is now pushing minor updates on a regular basis, without your consent or even letting you know. Result: my customer’s Office 365 is different from my own Office 365, and also different from his neighbor’s Office 365.

What happened in my customer’s case is that he was on version 16.0.0.3002 while I and others were still on version 16.0.0.12xx. The page went back to normal within 24 hours, so I guess there was a bug with the release and Microsoft fixed it.

A similar case happened 3 months ago, when Marc Anderson reported on his blog a change in SharePoint pages that I couldn’t see. It turned out that here too the version he was using was different from mine.

With Office 365 rolling release model, such situations are becoming common, and when you report an issue to your advisor you should expect a “it works on my cloud” reply. So my recommendation, whenever something unexpected happens on your Office 365 pages, is to check the version number as part of the debugging process. How? Simply by appending /_vti_pvt/service.cnf to your SharePoint domain. In my case for example, to get my Office 365 version number, I would type the following url:

https://UserManaged.SharePoint.com/_vti_pvt/service.cnf

If you’d like to have that url handy on your site, simply add a link, for example in the quicklaunch, with /_vti_pvt/service.cnf as URL (no need to include your domain name).

If like me you work across multiple Office 365 sites, you can add a bookmarklet to your usual browser. In Chrome for example, go to the Bookmark Manager, add a page, and the URL field enter:

javascript:window.location.href=”/_vti_pvt/service.cnf”;

Side comment: I’d really like Microsoft to use us advisors, rather than the end users, as guinea pigs, and push Office 365 updates to us first!

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 (!).

HTML Calculated Column + Client-Side Rendering

Five years after the first release, the HTML Calculated Column remains the most popular topic on this blog.

The original page has been visited more than 200,000 times. It is definitely outdated, and in recent years I have pushed several new variations of this technique. The most popular is the color coding solution posted in the SharePoint User Toolkit, backed by this tutorial.

The most frequent issue reported by users has been the upgrade from SharePoint 2007 to SharePoint 2010. This is actually all taken care of in the above links… but you need to read the fine print.

I plan to rewrite the instructions, especially as in the meantime Microsoft has pushed another version of SharePoint, and the SP 2010 update… doesn’t work with SP 2013! Well, there’s actually a simple fix for SP 2013, and “Panoone” posted it as a comment a couple days ago (@Panoone: thanks again! And let’s get in touch to discuss this further).

But that’s not all. SP 2013 brings a bunch of new client side technologies, and one of them works very well in our case: Client-Side Rendering.

What is Client-Side Rendering?

JSLinkEditYou can use Client-Side Rendering (CSR) in SharePoint to manipulate the rendering process of list views. Does this sound familiar? That’s exactly what my HTML Calculated Column has been doing for years! Except that now it is an official component integrated with list views. When you edit a Web Part, the very last option is the JS Link placeholder (see screenshot).

It will certainly take several weeks before I find time to update the SharePoint User Toolkit, so for those of you who are already familiar with both CSR and the HTML Calculated Column, let me share the code for SP 2013.

In the code, Calculated is the name of the calculated column.

var ccContext = {
  Templates: {
    Fields: {
      "Calculated": {"View": "<#=STSHtmlDecode(ctx.CurrentItem.Calculated)#>"}
    }
  }
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ccContext);

So easy, just 200 characters! STSHtmlDecode() is a JavaScript function provided by SharePoint that allows the conversion of the html string.

Of course, you could avoid using a calculated column, and build the html directly in the JS Link file. But then each rendering would require a different file. The beauty of the HTML Calculated Column is that one single JS Link file can support all the views in your site.

A warning!

Some time ago, I wrote about security risks when you use the HTML Calculated Column. As far as I can tell, the same warning applies to Client-Side Rendering. Handle with care!

CSR references

When Microsoft released SharePoint 2013, the documentation on Client-Side Rendering was quite poor. Fortunately SharePoint bloggers stepped in and you can find some nice posts to get familiar with CSR. Wes Preston’s blog is an excellent start.

So is the old way dead in SharePoint 2013?

Not quite yet! Not every view accepts Client-Side Rendering, and for example you’ll still find my tutorial helpful for calendar views.

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