SharePoint Data View XSLT Tips and Tricks – Limit text field

SharePoint Data View XSLT Tips and Tricks – Limit text field

Here is an XSLT syntax used to limit the number of characters of a text column (in this example the title field), In case the text is more than 50 characters long this function will substring it from the start and up to its last occurrence of a white space and add 3 points after it –
{code type=html}

{/code}

If you don’t mind your text being cut off after the limited number of characters you could use this shorter XSLT syntax –
{code type=html}

{/code}


To count how many characters can fit your designated area you can use this nice online tool.

SharePoint Data View XSLT Tips and Tricks - Limit text field

Ellipsis

This is a cool trick to use, but if your text field should fit into one row only, you shouldn’t bother with it and it will be smarter to use this CSS Truncate String with Ellipsis technique which is supported in almost all browsers (even by IE8 believe it or not!).

Using PublishingRollupImage SharePoint column in Content Query or DataView XSLT

Using PublishingRollupImage SharePoint column in Content Query or DataView XSLT

Today I had to create a contact spotlight view in a content query web part, which included an image of the contact, my client wanted the contacts list to have a Publishing Rollup Image column, a SharePoint 2010 out of the box column which is friendly for end-users to use, or at least more friendly than the Hyperlink or Picture type column, since it allows users to upload an image directly from their computer into their list item.


But when using the @PublishingRollupImage column within an XSLT list data view or content query web it renders out a complete HTML markup which matches the following –
{code type=Html}

{/code}
Now if this html markup is okay with you all you need to do is add a “disable-output-escaping=yes” attribute to your XSL node and the XSL will render your image on the page:
{code type=Html}

{/code}
But this allows the end user to upload any size of image and it lacks the ability to set your image style attributes by yourself…
So to get to point – in order to get only the source URL (src attribute) of your Publishing Rollup Image column use the following syntax:
{code type=Html}
{@Title}
{/code}
Now the width and height attributes above are obviously changeable.
Hope this helps!