Posts Tagged ‘ Design ’

Learn how to brand SharePoint

In two weeks I am headed to sunny Anaheim California to teach my SharePoint Branding Bootcamp.  There are still seats available and I would love to have you join me for a week (April 27 – May 1st) learning how to effectively brand the SharePoint interface.

A lot of my materials have been updated to include the latest tips and tricks I have discovered.  This class covers more than just where SharePoint CSS files are or how to create a theme, we delve into master pages, WCM page layouts, customizing the content display and how to brand all the various components of SharePoint that are not otherwise caught by a master page change. We also go outside technical aspects and discuss how to start your branding process and gotchas for SharePoint design.

This class is for designers, developers, business managers with technical skills and anyone who needs to understand how to change the SharePoint interface.  We use SharePoint Designer (SPD) to complete all tasks so you will additionally get a lot of time and experience with SPD.

Also in Anaheim will be Dustin Miller teaching the Original SharePoint Bootcamp and Matt Passannante teaching the SharePoint Administration Bootcamp. You will have access to both of these great guys to ask random SharePoint questions or just about anything in general.  :-)   We have a great time together, and hey we are staying inside of Disneyland!

To learn more about our classes, check out the web site: http://www.sharepointbootcamp.com/

  • Share/Bookmark

Styling SharePoint with Attribute Selectors and IE6

I recently posted some methods for styling SharePoint web parts using attribute selectors. I heard back from several people about how they can’t use this option due to IE6’s lack of support for attribute selectors. I was aware of this at the time of the post but neglected to point it out in the post text.

IE6 usage is steadily dwindling (Jan ‘09 – 18.5% browser market share; source: W3). I know there is also internal use of IE6 throughout organizations, but this is also slowly receding.

CSS is usually about form, not necessarily about function.  I encourage people to focus on the most common denominator and not the least common denominator when testing and styling web pages for browser support. If attribute selectors or any other type of method works for the mass majority of your users, then use it.   Don’t make development harder and more time intensive for the sake of a smaller percentage of users. Having your web pages downgrade gracefully does not mean the web page has to look exactly the same in every browser.  You do have to decide what must match visually across all browsers, but ultimately the focus is displaying the content and not what color the text is, etc.

You can also use conditional comments in IE to provide JavaScript or CSS files that are targeted for IE, or even a specific IE version.  Learn more about conditional comments here. This method can be used in workarounds and styling differences or even providing a simpler interface for IE6 users.

There are a few posted workarounds for attribute selectors and IE6:
Simulating Attributes Selectors in IE6
CSS + Javascript Workaround for Styling Form Inputs in internet Explorer (IE)

One last comment before the angry mob hits, I understand that there are situations out there where you have to support IE6. They are the mass majority of users for your site, etc.  Attribute selectors aren’t the only solution, just an option.  Meanwhile, keep encouraging those sites/projects/people to leave analog and join the digital age before we toss their computer monitors out.  ;-)

  • Share/Bookmark

Adding an ‘Up Folder’ button to a SharePoint List View Webpart

WindowsLiveWriter/AddinganUpFolderbuttontoaSharePointListV_13FDE/image_thumb.png” width=”239″ align=”left” border=”0″> A little while ago I was asked if it was possible to add an ‘Up Folder’ button so that users could navigate back to the parent folder in a ListView webpart. I knew you could easily add a button to the ListView toolbar and adding the functionality to go to to the parent folder couldn’t be that difficult so I said yes. However, it wasn’t as straight forward as I would have hoped.

 

Adding the toolbar button

Adding the button to the toolbar is pretty straight forward, you just need a feature with a CustomAction, which in turn adds the button…

<CustomAction Title="Up Folder"
              Location="ViewToolbar"
              Id="TheKid.UpFolder"
              Sequence="100"
              RegistrationType="ContentType"
              RegistrationId="0×01"
              Description="Navigates up a folder in a ListView Webpart"
              ControlAssembly="TheKid.CustomActions.Backup, Version=1.0.0.0, Culture=neutral, PublicKeyToken=919ab618f7ce98cf"
              ControlClass="TheKid.CustomActions.Backup.Action" />

This is using a class which inherits from SPLinkButton and displays the button on the ListViewWebPart toolbar. This works no problem and we can then write some code to navigate the ‘Up Folder’ functionality.

NOTE: In the CustomAction above we are using RegistrationType=’ContentType’ and RegistrationId="0×01". This is going to register this button for every content type (essentially every list & document library), so if you want to restrict this functionality you can by changing these values.

WindowsLiveWriter/AddinganUpFolderbuttontoaSharePointListV_13FDE/image_thumb_1.png” width=”427″ border=”0″>

Formatting the link

The ListViewWebPart uses post-backs to change the folder displayed, in particular it uses a javascript function called EnterFoler to perform the postback. This function takes one parameter which is the formatted URL for the folder to which you wish to navigate. The URL should be the current URL with three parameters, the RootFolder, the Folder Content Type ID and the View Guid.

So to format the link we need to know the parent folder URL, which you would have thought you could get in code no problem…apparently not. I could not find anything which would give me access to the current folder of the ListView in order to workout the parent folder. Unfortunately I had to resort to reflection to get this information, not something I generally like doing and I wouldn’t recommend it…but when needs must!!

The ListViewWebPart contains a private variable called ‘rootFolder’ that contains the current folder the webpart is displaying, as this was exactly what I needed I used that…

private static object GetPrivateFieldValue(object obj, string fieldName)

{

    FieldInfo fi = obj.GetType().GetField(fieldName,

                            System.Reflection.BindingFlags.Instance | System.Reflection.BindingFlags.NonPublic);

 

    return fi.GetValue(obj);

}

This code can be used to obtain the value of the private variable contained within the ListViewWebPart. This I used to not only get the ‘rootFolder’, but also a variable called ‘folderCtId’ which holds the content type ID (it’s always been blank for me??).

With these two bits of information I was able to build the URL so that when the button was clicked it would navigate the ListView up to the parent folder…

string sCurrentUrl = HttpContext.Current.Request.Url.ToString();

if (sCurrentUrl.Contains("?")) sCurrentUrl = sCurrentUrl.Substring(0, sCurrentUrl.IndexOf("?"));


string
sCTID = (string)GetPrivateFieldValue(lv, "folderCtId");

 

string sStart = ((sNewRootFolder == "") ? "?" : SPHttpUtility.EcmaScriptStringLiteralEncode(sCurrentUrl
                 + "?RootFolder=" + sNewRootFolder) + "&");

sStart = SPHttpUtility.EcmaScriptStringLiteralEncode(sCurrentUrl + "?RootFolder=" + sNewRootFolder) + "&";

 

string sNavigateUrl = sStart

                      + "FolderCTID=" + SPHttpUtility.EcmaScriptStringLiteralEncode(sCTID)

                      + "&View=" + SPHttpUtility.EcmaScriptStringLiteralEncode(lv.ViewGuid)

                      + "&Key=" + lv.StorageKey.ToString();

 

return "javascript:EnterFolder(‘" + sNavigateUrl + "’);return false";

Here you see the URL being constructed with the required QueryString parameters. You will also see that I have added a ‘Key’ parameter, this was to ensure the button would work on a page with multiple ListViewWebParts. This ‘Up Folder’ button will work even when there are multiple webparts for the same document library…

WindowsLiveWriter/AddinganUpFolderbuttontoaSharePointListV_13FDE/image_thumb_2.png” width=”608″ border=”0″>

Download and Install

You can download the full source for the project, or you can download the WSP to deploy directly onto your site.

  • Share/Bookmark

SharePoint 2007 Design Tip: Hide search on all application screens

Application screens (a.k.a. “_layouts” screens) usually don’t display the search in the header. There does appear to be a few screens out there that do, and depending on your design for application screens, this may throw a wrench in how your page looks.  To stop the search from showing in any application screen, add the following CSS style to your theme or alternate CSS file:

.ms-searchform {
     display: none
}

 

  • Share/Bookmark