28 August 2011

SharePoint: Remove link from list view title

Links can't be easily removed from list view titles (or web part titles, for that matter). That's where jQuery comes in handy:
$(document).ready(function () {

// Remove the link from the web part title and set its cursor to normal.
$('.ms-WPTitle > a').contents().unwrap().css('cursor','default');
$('.ms-WPTitle').css('cursor','default');
});
This is thanks to a tip from this post on StackOverflow.com. Note also that the code sets the cursor to default (instead of "hand").

23 August 2011

SharePoint: Automatic table of contents for a page's sections

If you have really long pages in SharePoint with lots of sections, you can use the nifty jQuery plugin from Rochester Oliveira to automate the creation of the table of contents (TOC). Note that this is different from the table of contents web part built into SharePoint; that tool only handles pages and sites, not content within pages.
  1. Ensure you've uploaded jQuery to your SharePoint site (or site collection); usually, these files will go into the Site Assets area so they're accessible to all sites. For example, http://mydomain.org/SiteAssets/js/jquery/jquery-1.6.2.min.js.

  2. Also place the jquery.stoc.js file necessary for this task in a similar location.

  3. Reference these two JS files from your master page, page layout, or content editor web part.

  4. Add some JavaScript to trigger the TOC creation (see code below). You'll also need an empty DIV tag that will have the TOC injected into it.

  5. Add the necessary CSS to style the TOC and the UL tags. Rochester Oliveira's plugin page has some great examples to get you started.

One other change is necessary for it to work correctly: For some reason, on SharePoint 2010, it was appending #undefined to all the table of contents items. So I modified the JS in the jquery.stoc.js to this:
if (id == "" || typeof id === "undefined") { //if it doesn't have only, of course

id = "h" + tagNumber + "_" + i;
cacheHN.attr('id', id);
}
Now if id is undefined, it will generate one. So you're ready to test. If you wish to get fancier, you can add a True/False dropdown to the page layout for editors to choose whether a page will have a TOC (for instructions on conditionally displaying the dropdown, please see this post). This code can generate the necessary JavaScript based on the page layout's custom content column EnableTOC value:
<%= (Microsoft.SharePoint.SPContext.Current.Item["EnableTOC"] == null ||

Microsoft.SharePoint.SPContext.Current.Item["EnableTOC"].ToString() == "False")? "" :
" "
%>
In the above code, if EnableTOC is set to True, we trigger the TOC plugin on the element with ID toc; the plugin will search the element main-content for tags of type H2 and H3 ("start: 2"), and generate the TOC based on that structure using UL tags. Also, the toc DIV tag is hidden by default; the code above changes its display property to block.

If you always want the TOC to be generated, take it out of the server-side code and make it entirely client-side. In addition, because of a bug in SharePoint 2010, named anchors might not work correctly; in other words, you might click an item in the TOC and not have the page go to that part of the document. In that case, you can add this code as well, courtesy of fcorbeil on the Microsoft MSDN forum:
<script type="text/javascript">

setTimeout(Reload,2000);
function Reload() {
window.location.hash=self.document.location.hash.substring(1);
}
</script>

16 August 2011

SharePoint: Icon doesn't show for Publishing Hyperlink

Ran into this today. Very strange problem. For whatever reason, the "Display icon" functionality of the Publishing Hyperlink field doesn't work on SharePoint 2010 Server for a site with Publishing enabled. Added URLs to a column of that type for PDF files, but no PDF icons appeared. In fact, the value for the "Display icon" field wasn't "sticky" -- it kept getting unchecked. This article saved the day, with a very easy, non-coding solution using only CSS attribute selectors.

I'm using a custom page layout in my publishing pages with an attached CSS file; in that file, I added the following items to correspond to the location of my icon files (inside SiteAssets); I also added .docx for Word 2007+ document types and .xlsx for Excel 2007+ docs:
a[href$='.pdf'] {

display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(/SiteAssets/icons/icon_pdf_16x16.gif) center left no-repeat;
}
a[href$='.doc'], a[href$='.rtf'], a[href$='.txt'], a[href$='.docx'] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(/SiteAssets/icons/icon_doc_16x16.gif) center left no-repeat;
}
a[href$='.zip'], a[href$='.gzip'], a[href$='.rar'] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(/SiteAssets/icons/icon_zip_16x16.gif) center left no-repeat;
}
a[href$='.xls'], a[href$='.csv'], a[href$='.xlt'], a[href$='.xlw'], a[href$='.xlxs'] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(/SiteAssets/icons/icon_xls_16x16.gif) center left no-repeat;
}
The CSS works by finding all anchor tags with an href attribute that ends (using the dollar symbol $) with the specified string; so for PDFs, it uses a[href$='.pdf'] and applies the style rules. And we're only interested in those 4 file types, so those are the ones that have icons in our CSS file.

Reloaded the page and viola! The icon appears to the left of the item as if by magic :)

Also, the article from psyked has links to some nice (and free) icon libraries. All in all, a very good solution. However, we still don't know what's causing the built-in "Display icon" functionality to not work.

Hope this helps others. Thanks.

Beyond app dev: Applying agile techniques to business

http://www.infoworld.com/t/agile-development/beyond-app-dev-applying-agile-techniques-business-169749

Agile, a term that has become associated with building software in short iterations, is making headway as a philosophy for running a business in general, with executives latching on to agile practices such as its heavy emphasis on flexibility and collaboration.

07 August 2011

SharePoint: Conditionally display content for authors and readers

For a current project, I needed to display an Article Date content field in a page layout. The author could pick a date when in Edit View; the reader would only see the value the author had selected, or nothing if no value had been picked.

To do server-side code blocks in a page layout, we'll first need to enable it from our app's web.config file; otherwise it'll throw an error saying "Code blocks are not allowed in this file," as described here. To enable code blocks, open your app's web.config and locate the PageParserPaths tag, which is empty, and modify it to look like this:


Note the VirtualPath; this needs to point to the location of your page layout (or ASPX) file.

Next, we'll use Bart McDonough's blog post to add the EditModePanel and AuthoringContainer; the nesting of these controls is well explained by Bart:











http://www.blogger.com/img/blank.gif
Note the DateTimeField element; that allows authors to edit the "Article Date" field.

Now we need to add some server-side code to determine if we can display the "Article Date," and to format it properly (this code is based on Johan Leino's blog post):
<%= (Microsoft.SharePoint.SPContext.Current.Item["Article Date"] == null) ? "" : 
"Last update on " + DateTime.Parse(Microsoft.SharePoint.SPContext.Current.Item["Article Date"].ToString()).ToString("d MMMM yyyy") +
"." %>
This code displays the text "Last update on 9 August 2011." if there's a value in the "Article Date" content field; otherwise, it displays nothing.