SharePoint: Web part title bar colors using jQuery

Challenge

How to set web part title bar colors so that different web parts have different colors?

Solution

With jQuery, you can set the web part title bar background color using two lines of code.

$('td[title^="WPTITLE"]').siblings().andSelf().addClass("WPTITLEPURPLE");
$('td[title^="WPTITLE"]>h3').addClass("WPTITLEPURPLE");

WPTITLE can be the full web part title, or just something from the beginning of the title. In this example jQuery starts with selector is used (^=) because the actual title attribute of the HTML contains also other text after the actual web part title. The color is set in a CSS class, which in this example is WPTITLEPURPLE.

Technorati Tags: SharePoint,jQuery

Technorati claim code: N48QKHDE2CM5

SharePoint: Append link to bottom of CQWP using jQuery

Task

Append link to the bottom of Content Query Web Parts that show articles from News subsite so that users can click the link to view more news articles of the specific category.

The picture below is in Finnish, but link at the bottom called “Lisää…” is the one added using jQuery. Also the CQWP style is quite heavily modified, but I’m sure you get the point.

Solution

Not being a fan of custom CQWP implementations for this purpose nor modifying the out-of-the-box XSL Style Sheets using SharePoint Designer, I decided to solve this using jQuery.

Add the following code to CEWP inside <script> tags:

$("#" + $('td[title^="WEBPARTTITLE"]').attr("id").replace("Title", "") + " ul").append("<li class='moreNews'><a href='/news/Pages/Forms/Article.aspx?TreeField=METADATACATEGORY&TreeValue=METADATAGUID'>More news...</a></li>");

Where WEBPARTTITLE is the title of CQWP. Note that you need to use the starts with selector (^=), as the actual HTML node title attribute contains also other text after the actual title you define in web part properties. For the style moreNews, you can define what you see best, I just added some padding around the link. For the link I redirect the user to a site pages library view that has metadata filtering enabled and visible on the left: this is done using the TreeField and TreeValue parameters.

Technorati Tags: SharePoint,jQuery

Automatically refresh SharePoint page, but not in edit mode!

Task

Task was to automatically refresh SharePoint page every 5 minutes. Simple task, but can frustrate content editors if not done properly.

Thoughts

Classic META REFRESH tag was out of the question, as it will refresh the page also when in edit mode. JavaScript examples floating around the web also seemed to ignore the requirement of not refreshing page when in edit mode.

Solution

Fortunately detecting the edit mode is a one liner in JavaScript, so just wrap your favorite page refresh JavaScript with the bold code below, save it in Content Editor Web Part, and you’re set! Happy refreshing!

<script type="text/javascript">
var reloadTimer = null;
var sURL = unescape(window.location.pathname);

function setReloadTime(secs)
{ if (arguments.length == 1)
   { if (reloadTimer) clearTimeout(reloadTimer);
       reloadTimer = setTimeout("setReloadTime()", Math.ceil(parseFloat(secs)*1000));
   }
   else
   { reloadTimer = null;
     location.reload(true);
     window.location.replace( sURL );
   }
}

var inDesignMode = document.forms[MSOWebPartPageFormName].MSOLayout_InDesignMode.value;

if (inDesignMode != "1")
{
     setReloadTime(300);
}
</script>

Original refresh JavaScript (the one not in bold) was borrowed from Drew’s blog article.

Technorati Tags: SharePoint

Media Center Status Application update is out!

Fixed in this version (0.6.4) are the following issues.

• Facebook login dialog wasn’t displayed in all scenarios, so use couldn’t login to Facebook after starting Media Center
• Amazon media query was completely broken due changes in Amazon service

Download here

 

Technorati Tags: Media Center,Twitter,Facebook

SharePoint: New Group Calendar missing Schedule content type

Issue

In SharePoint Online (haven’t tested with on-premise), when creating new Group Calendar, the created calendar list doesn’t include the required Schedule content type.

Steps to reproduce

1. Start to create new list, select Calendar, and click More Options button

2. Input Name for the calendar, and in the Group Calendar Options, select Yes to make this calendar a group calendar. Then click Create button at the bottom.

3. Start to create new event in the calendar and you will note that the Content Type used is incorrect.

4. Go to List settings of this new list and you will see that there is only Event content type defined.

 

Solution

Reason for this is that when you define a calendar as a Group Calendar at the time of calendar creation, it will not include the required content type called Schedule. In order to get the Schedule content type visible, do this:

1. In List Settings screen of your new group calendar, select “Title, description and navigation”

2. Set Use this calendar to share member’s schedule to No, and click Save

3. Go back to “Title, description and navigation”

4. Set Use this calendar to share member’s schedule to Yes, and click Save

5. TADAA! The missing Schedule content type is now visible and you’re good to go!

Technorati Tags: SharePoint,Calendar

New version of Media Center Status Application released!

Brand new version of the Media Center Status Application has been released that will guarantee you a peaceful Media Center session with your favorite TV show or movie without annoying Twitter tweet popups.

In this latest version 0.6.3, you can suspend Twitter tweet dialogs for a specified number of minutes. Configuration is done using the Configuration application and you can enable Suspend button on tweet dialogs, as well as a time in minutes for how long tweet dialogs are suspended.

Media Center Status Application will ignore all tweets that have been made during the suspend period so you will not receive a spam of tweet dialogs after the suspend period has ended.

Download the latest version here

 

Technorati Tags: Windows Media Center,HTPC

SharePoint Designer: Search Web Part ‘Use Location Visualization’ breaks layout of search results

Problem

When using people search results web part, and wanted to modify the look and feel of the search results, one needs to uncheck the “Use Location Visualization” setting in Web Part properties.

When Location Visualization was checked, search results looked like this:

After unchecking the Location Visualization using SharePoint Designer, and without touching the XSL definition, search result looks like this:

As you can see, layout is far from what it should be.

Thoughts

Comparing the HTML of the two scenarios one can see that ID’s of several elements used in search results are different.

In correct layout scenario, IDs look like this:

However, in the broken scenario, IDs have some strange string appended to them:

Solution

As you might have guessed from my subtle highlighting, SharePoint Designer is causing this. When you uncheck the “Use Location Visualization” and save the page in SPD, SPD apparently notices that you have xsl:for-each loop that will end up in having multiple HTML elements with same ID. It then modified the ID fields and appends a generate-id() function to them.

You have two options:

1. Only uncheck the “Use Location Visualization” using a browser and don’t modify the page with SPD after that.
2. Modify the XSL after SPD has modified it and replace generate-id() with your custom variable, say $SPDRules, and define that as a parameter together with other parameters at the top of your XSL: <xsl:param name="SPDRules" />.

 

Technorati Tags: SharePoint