Playing with CSS and ListView Toolbar

English:
(This articles has already been posted in
www.msd2d.com. Now I post it again in my own blog.)

Ever trying to explore %root\Program Files\Common Files\Microsoft Shared\web server extensions\60\Template\1033 (figure-1)? You will found where the magic of SharePoint template’s coming from. Every time you create new site in SharePoint, you must define which site style you’re going to make, and every site style has predefined template in these directories. For example, if you make News site, then the corresponding template directory will be SPSNEWS etc. And you guess what? If you want to play with ListView toolbar in all hosted sites, then you must search and edit all .XML schema which holds the definition of the listview.

image001

Lets take situation where you don’t want to make “Edit in Datasheet” appear in any of the lists view in your site. Doing new list definition in Schema.XML will force you to go through all available template sites and all available list definition in every template sites, a lot of work and time spent. (At least for now, I haven’t found any other way when doing Schema.XML redefinition)
Fortunately, the stylesheet can come to help and will resolve your situation in less than a minute.

What a joke?
From my own perspectives SharePoint has come with lot of magic and plenty of hidden tricks; JavaScript (refer to my other tips) and also the style-sheet (.css) which will be our topic today. We will gain the advantage of those magic, if we tricky enough with them. Ok, stop talking and let’s do the job!
SCHEMA.XML, which is defined in any list template definition (figure-2), is responsible for list behaviors. This is the file where SDK suggest to modify when you don’t want “Edit in Datasheet” appear in list view.

image003

In SCHEMA.XML you can found the definition that will solve your problem (figure-3). Of course if you delete this part, then your problem is gone, but only for a list in a site style. If your situation persists and you must remove “Edit in Datasheet” from all list view in your site, then the problem begins.

image005

Here comes CSS
Examine again the SCHEMA.XML part (figure-3). The suggested part is implementing “ms-toolbar” class with “diidEditInGridButton” id. Creating new CSS class for this part won’t resolve the problem, because you still have to replace all occurrences of “ms-toolbar” in “diidEditInGridButton” part. Then, we must have other approach the “CSS index selector”.
Index selector in CSS works by matching HTML component ID with style name definition. In order to make CSS works in such way, the style name must be same with desired ID name and prefixed with “#”.
(Listing-1)

<style>
#selectedText
{
background: Yellow;
}
</style>

<span id=”selectedText”> Background for this text will be yellow </span>

Listing-1 is style-sheet definition which will apply automatically to any object with “selectedText” as its id. Looking back into SCHEMA.XML then our job is to define new style for “diidEditInGridButton” id, that is (listing-2)(Listing-2)

<style>
#diidEditInGridButton
{
display: none;
}
</style>

But wait, since the “diidEditInGridButton” is implementing “ms-toolbar” class then we must inherit from the class to make the style works (listing-3)

<style>
ms-toolbar #diidEditInGridButton
{
display: none;
}
</style>

Put listing-3 in %root\Program Files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE\LAYOUTS\1033\STYLES\Ows.css to make it available throughout your site’s list view or include it into any of your custom list view to make it available only for single list view.

Last word
Even a CSS can make our job easier than editing whole .XML. And the same concept can be done for any other component in SharePoint.

About

Riwut Libinuko, experienced Architect. Currently working with Credit Agricole CIB, responsible for SharePoint platform in Asia Pasific. . Certification: SharePoint 2013, SharePoint 2010, SharePoint 2007, ITiL v3

Posted in Microsoft Sharepoint

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: