A common question to receive is on list items with a long body (eg. Announcements) and then show only X characters and optionally a ‘read more’ link. Many ways to solve this but I went for the following: a Custom Field Type that renders the short text with ellipsis using jQuery.
This is another example using the Advanced Computed Field in a creative way. The ACF allows you to create computed fields referencing other fields or data in your list and manipulating them through CAML or JavaScript. It has the advantage that this can be done from within the browser, however I admit CAML isn’t the easiest of things to comprehend in the SharePoint technology stack.
Ellipsis sample
This ellipsis displays the first 20 characters of the plain text version of the Announcement Body
<span style="display:none;" id="el_
_
">
</span>
<script type="text/javascript">
$(function()
{ var mySpan = $('#el_
_
');
var myShortText = $(mySpan).text().substring(0, 20);
if ($(mySpan).text().length > 20)
myShortText += '...';
$(mySpan).show().html(myShortText); });
</script>
Notes
- If you prefer to not escape the brackets you can use CDATA tags: hello]]>
- GetVar ‘WPQ’ returns the unique Web Part ID. This takes care of multiple List View Web Parts on the same page
- You could optimize the output by extracting most of the script and placing it in an externally referenced JavaScript file
- My JavaScript/jQuery skills aren’t the best. I’ll have to ask Jan for some jQuery pointers next time :)