In this post I am going to show you step by step how to create an Item Style [...]]]> There are tons of blog posts about using the Content Query Web Part to show for example news from an Announcement list. I myself learned a lot from this Heather Solomon post a couple of years ago.

In this post I am going to show you step by step how to create an Item Style for your CQWP that displays an announcements image, title, date and the first 250 characters of the description. This works for Sharepoint Server 2010, and unlike 2007 you don’t have to export the CQWP and change the code – no notepad this time!

1. For best practise, I created my own Content Type inheriting from the Announcement Content Type. Lets call this CompanyAnnoucement. To CompanyAnnoucement I added an existing site colum: Rollup Image. Add CompanyAnnoucement to the list(s) you want. If lots of people needs direction on this step, I’ll make a blog post about it.

2. Open your top-level site in Sharepoint Designer, click “All Files – Style Library – XSL Style Sheets – ItemStyle.xsl” and click Edit (Also, make a copy here before you make any changes, if you break this file, e.g. have a typo, none of your CQWP’s will work and display this error message:

Unable to display this Web Part. To troubleshoot the problem, open this Web page in a Microsoft SharePoint Foundation-compatible HTML editor such as Microsoft SharePoint Designer. If the problem persists, contact your Web server administrator.

3. In the top of the file, add this line so we can format the date further down the road:

xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime"

4. Copy the Default Template (This is the “Image on Left” style).  Change the first line to

<xsl:template name="CompanyAnnouncement" match="Row[@Style='CompanyAnnouncement']" mode="itemstyle">

5.  Add this at the bottom of the variables section:

<xsl:variable name="Created"> <xsl:value-of select="ddwrt:FormatDateTime(string(@Created) ,1033 ,'dd.MM.yyyy')" /></xsl:variable>

6. Change the title-part (the xsl:value-of select=”$DisplayTitle”-section to:

<strong><xsl:value-of select="$DisplayTitle"/> - <xsl:value-of select="$Created"/></strong></a>
<div> <xsl:value-of select="substring(@Description,1,250)" disable-output-escaping="yes" /><xsl:if test="string-length(@Description) &gt; 250">...</xsl:if></div>

This displays the created-date in your previously specified format, and the first 250 characters of the description, and ... if there are more text in the description than being displayed.
Save and remember to publish ItemStyle.xsl!

7. Add a CQWP where you want it. In the CQWP settings, set the Source under Query as you like.

Under Presentation – Styles – Item style, choose CompanyAnnouncement that you should see here now.

Under Fields to display, set Image to “Rollup Image;”, Title to “Title” (both should already be set), and Description to “Body;”.

Click OK and you’re set to go:



And yes – you are free to style this more beautiful than I can:)

If you don’t want to enter Sharepoint Designer and do this without code (and without being able to style the output yourself and including date, you can take a look at this blog post.

Update: complete code below

Here is the code in part 3), starting from the absolute top of ItemStyle.xsl:

<xsl:stylesheet   version=”1.0″
exclude-result-prefixes=”x d xsl msxsl cmswrt”
xmlns:ddwrt=”http://schemas.microsoft.com/WebParts/v2/DataView/runtime”
xmlns:x=”http://www.w3.org/2001/XMLSchema”
xmlns:d=”http://schemas.microsoft.com/sharepoint/dsp”
xmlns:cmswrt=”http://schemas.microsoft.com/WebParts/v3/Publishing/runtime”
xmlns:xsl=”http://www.w3.org/1999/XSL/Transform”
xmlns:msxsl=”urn:schemas-microsoft-com:xslt”>

And here is the code in part 4)-6), starting just below the closing tag of the Default template. In my ItemStyle this is line 82.

<xsl:template name=”CompanyAnnouncement” match=”Row[@Style='CompanyAnnouncement']” mode=”itemstyle”>
<xsl:variable name=”SafeLinkUrl”>
<xsl:call-template name=”OuterTemplate.GetSafeLink”>
<xsl:with-param name=”UrlColumnName” select=”‘LinkUrl’”/>
</xsl:call-template>
</xsl:variable>
<xsl:variable name=”SafeImageUrl”>
<xsl:call-template name=”OuterTemplate.GetSafeStaticUrl”>
<xsl:with-param name=”UrlColumnName” select=”‘ImageUrl’”/>
</xsl:call-template>        </xsl:variable>        <xsl:variable name=”DisplayTitle”>
<xsl:call-template name=”OuterTemplate.GetTitle”>
<xsl:with-param name=”Title” select=”@Title”/>
<xsl:with-param name=”UrlColumnName” select=”‘LinkUrl’”/>
</xsl:call-template>
</xsl:variable>
<xsl:variable name=”Created”>
<xsl:value-of select=”ddwrt:FormatDateTime(string(@Created) ,1044 ,’dd.MM.yyyy’)” />
</xsl:variable>
<div>
<xsl:if test=”string-length($SafeImageUrl) != 0″>
<div>
<a href=”{$SafeLinkUrl}” onclick=”return OpenDialog(‘{$SafeLinkUrl}’);”>
<xsl:if test=”$ItemsHaveStreams = ‘True’”>
<xsl:attribute name=”onclick”>
<xsl:value-of select=”@OnClickForWebRendering”/>
</xsl:attribute>
</xsl:if>
<xsl:if test=”$ItemsHaveStreams != ‘True’ and @OpenInNewWindow = ‘True’”>
<xsl:attribute name=”onclick”>
<xsl:value-of disable-output-escaping=”yes” select=”$OnClickTargetAttribute”/>
</xsl:attribute>
</xsl:if>
<img src=”{$SafeImageUrl}” title=”{@ImageUrlAltText}”>
<xsl:if test=”$ImageWidth != ””>
<xsl:attribute name=”width”>
<xsl:value-of select=”$ImageWidth” />
</xsl:attribute>
</xsl:if>
<xsl:if test=”$ImageHeight != ””>
<xsl:attribute name=”height”>
<xsl:value-of select=”$ImageHeight” />
</xsl:attribute>
</xsl:if>
</img>
</a>
</div>
</xsl:if>
<div>
<xsl:call-template name=”OuterTemplate.CallPresenceStatusIconTemplate”/>
<a href=”{$SafeLinkUrl}” title=”{@LinkToolTip}” onclick=”return OpenDialog(‘{$SafeLinkUrl}’);”>
<xsl:if test=”$ItemsHaveStreams = ‘True’”>
<xsl:attribute name=”onclick”>
<xsl:value-of select=”@OnClickForWebRendering”/>
</xsl:attribute>
</xsl:if>
<xsl:if test=”$ItemsHaveStreams != ‘True’ and @OpenInNewWindow = ‘True’”>
<xsl:attribute name=”onclick”>
<xsl:value-of disable-output-escaping=”yes” select=”$OnClickTargetAttribute”/>
</xsl:attribute>
</xsl:if>
<strong>
<xsl:value-of select=”$DisplayTitle”/> –  <xsl:value-of select=”$Created”/></strong> </a>
<div>
<xsl:value-of select=”substring(@Description,1,250)” disable-output-escaping=”yes” />
<xsl:if test=”string-length(@Description) &gt; 250″>…</xsl:if>
</div>
</div>
</div>
</xsl:template>

In this complete version I have also added functionality to open the announcement in a modal dialogue, and I am using Nowegian Date formatting (1044) instead of English (1033).

Sharepoint 2010 (Server or Foundation) is installed, and you also have installed one or more language packs.

You update the SPWeb web.Title programmatically (web.Title = “New Title”, web.Update();) in C#, but the title is not updated in your browser. This will happen if your Sharepoint installation for example is English (1033), and your site is [...]]]> Scenario:

Sharepoint 2010 (Server or Foundation) is installed, and you also have installed one or more language packs.

You update the SPWeb web.Title programmatically (web.Title = “New Title”, web.Update();) in C#, but the title is not updated in your browser. This will happen if your Sharepoint installation for example is English (1033), and your site is created in Norwegian (1044). It doesn’t matter if the installation language isn’t activated as a possible display language for your site, your updated title will only show when you choose the installation language as Display Language.

If you debug, you will se that the property web.Title is updated, but this is not what is shown in the browser. If you search further through the site’s properties when debugging, you will find a property called m_strTitle that holds your original title and obviously needs to beed updated. But, you cannot update this property directly.

So, how do you update the title in all Display Languages of the site?

SPUserResource resource = web.TitleResource;
foreach (CultureInfo culture in web.SupportedUICultures)
{
Thread.CurrentThread.CurrentUICulture = culture;
resource.Value = "New Site Title";
}

This also applies to for example web.Description, but not web.Name (which also is basis for the Site’s URL).

Remember to call web.Update, and ofcourse to do a web.Dispose if you are not using Using:)

& ~ # %  * ? / + | ” . _ { } \ : < >

Underscore is to be avoided as the first character in the name, and multiple consecutive periods should be avoided. In [...]]]> When naming your files, folders (but you usually don’t want folders anyway) and sites, avoid these characters:

& ~ # %  * ? / + | ” . _ { } \ : < >

Underscore is to be avoided as the first character in the name, and multiple consecutive periods should be avoided. In columns and document library names I also prefer to avoid Norwegian letters like æ,ø and å, and spaces. I rather rename the column or document library afterwards, getting a nice looking name combined with a coder-friendly URL (I get no sleep when I see URL’s like bad%20url.)

I have previously written a walk-through about how to implement a relationship between two columns:

http://www.uccorner.com/54/sharepoint/cascading-drop-down/

My friend and excellent SharePoint-er Jasmine Garry found ut that under [...]]]> Update: Marc D. Anderson has now updated the Jquery files, so if you use the latest version this won’t be an issue anymore and you can disregard this post.

I have previously written a walk-through about how to implement a relationship between two columns:

http://www.uccorner.com/54/sharepoint/cascading-drop-down/

My friend and excellent SharePoint-er Jasmine Garry found ut that under certain circumstances, this approach did not work. To be more precise, if your site is in another language than English, and your column in the list where the relationship is (i.e. “Vacation Plans”) allows for multiple select, you get this error:

Message: Column not found on page

The reason for this is that the Jquery file uses hard-coded English terms to create a string that works with multiple select.

Solution:

First, in the code for your custom NewForm (the page where you are getting the actual error), look for a select tag and find the one where title=”City possible values”. Possible values will be in your own language. Now open the jquery.SPServices-0.4.8.min.js-file (or the version you are using), replace all occurrences (there are several) of possible values with the equivalent from your own language that you just found in the source code for the page.

Now, do the same procedure for “selected values” and you are good to go.

This is a workaround, and is expected to be fixed in a later release of the Jquery file by Marc D. Anderson.

Thanks to Jasmine Garry and Marc D. Anderson for figuring this out: http://spservices.codeplex.com/Thread/View.aspx?ThreadId=85478

Update: This also works in Sharepoint Foundation (2010). I have created a new post for 2010 here.