In this article I will describe how to implement and use the jQuery plugin Trunk8. “trunk8 is an intelligent text truncation extension to jQuery. When applied to a large block of text, trunk8 will cut off just enough text to prevent it from spilling over.”
Demonstration
The XPages integration of Trunk8.js is demonstrated here
Download
The demonstration database can be downloaded from the link above or from here
Trunk8.js
Introduction
Trunk8 is a really neat and simple jQuery plugin which can neaten up your XPages and provide a truncated paragraph of text and can turn large sections of text into something a little more manageable and easier on the eye:
How does it work
We add the jQuery library and the trunk8.js library file to the database by adding them to the Web-Contents folder accessible via the package explorer. (Window–>Show Eclipse Views–>Package Explorer) and drag and drop the two libraries from your computer into the “js” folder.
We add the libraries to our XPages like this in the source panel
<script type='text/javascript' src='/xomino/jQinX.nsf/jquery-1.7.1.min.js'></script> <script type='text/javascript' src='/xomino/jQinX.nsf/js/trunk8.js'></script>
The trunk8.js plugin comes with a number of parameters which can help control how the plugin interacts with your page and how it displays the resulting trunk8ed text.
settings = {
fill: '<a href='#'> read more </a>', //this is what is inserted into the text as placeholder
lines: 1, //the number of lines of orginal text displayed
side: 'right', //the placement of the 'read more' left center right
tooltip: true, //show a tooltip of the original text
width: 'auto' // style the final text to fit the container.
}
We then apply the plugin to the page via a selector. In this example is I am going use the same viewPanel as, and this can be seen as an alternate to my original blog post regarding Dynamically expanding viewPanel rows.
We are going to select the 4th column in the viewPanel1 table
the jQuery selector for this is shown below – we select the viewPanel1 table by id an within that table we select the TR table rows and then within those the 4th TD table cell (i.e. the 4th column)
$('[id$='viewPanel1'] tr td:nth-child(4)')
and then to that we apply the trunk8 method and its parameters
<script>
XSP.addOnLoad(function(){
$('[id$='viewPanel1'] tr td:nth-child(4)').trunk8({
fill: '<a href='#'> read more </a>', //this is what is inserted into the text as placeholder
lines: 3, //the number of lines of orginal text displayed
side: 'right', //the placement of the 'read more' left center right
tooltip: true, //show a tooltip of the original text
width: 'auto' // style the final text to fit the container.
});
})
</script>
And we get the following – much neater and easier on the user
Flexible
The parameters are fairly self explanatory and allow you to control the way the output looks. What I like about this plugin over others of a similar vein is that the width is dynamically calculated correctly and always fills the container. With a little more imagination you could have the “read more” link to a better tooltip or even click to open a dialog – because you can insert your own HTML the choice is yours – love it!
Conclusion
Every time I see a new plugin like this it just re-enforces to my why I evangelize using jQuery in XPages so much. It took me less than 10 minutes to implement the demonstration and took longer to write up this article. This is a real business requirement which is met with no effort at all on the part of the XPage developer. It’s a no brainer!
Demonstration
The XPages integration of Trunk8.js is demonstrated here
Xomino 
Hi, I’m Rick, the creator of trunk8. Thanks for the excellent write-up and the great use-case! Cheers!
Hello Mark,
Trying to figure out trunk8. I got an error and dont know what I am missing.
Error is : Line: 2 Error: Syntax error, unrecognized expression: #[id$=’viewPanel1′] tr :nth-child(9)
I used jquery1.8 and just included trunk8.js file also block. but got an error on load.
Do you have any idea or is there any dependent file to include on xpage.
Hey Ferhat 🙂
Two things I noticed with your error: 1) you need to use $ and not # at the start of the jQuery expression (this is not XPage SSJS) and 2) you are selecting the 9th row (incorrectly) and need to change tr :nth to be tr td:nth.
I hope that helps – Ping me on twitter if you need more help 🙂
Mark, I felt myself like an idiot 🙂 Thanks 🙂
Internet Explorer (using IE8) shows the error message like that 🙂 Click on it and you will see what I see (http://www.bestcoder.net/wp-content/uploads/2012/09/TrunkError.png)
I didnt understand first line of code. What is the format of this line ? I also looked http://jrvis.com/trunk8/ but element id is killer on Xpage. (id1:….)
Actual codes and error messages (I tried with tag also.)
<![CDATA[XSP.addOnLoad( function() {
$("#[id$='viewPanel1'] tr td:nth-child(4)").trunk8({
fill : ' read more ‘,
lines : 1,
side : ‘right’,
tooltip : true,
width : ‘auto’
});
});]]>
Syntax error, unrecognized expression: #[id$=’viewPanel1′] tr :nth-child(4) jquery-1.8.0.min.js, line 2 character 56618
Object doesn’t support this property or method xspViewDuyuruGenel.xsp, line 383 character 3
Mark; working with jQuery 1.7.2. Not working with latest version of jjquery 1.8.x …
By the way, great job man. Thanks a lot for these great samples. Nice work.
thank you 🙂
Hello Mark,
This may be of use…I had unwanted markup (span tags) in the tooltip and also could not get this to work in ie9…so…
Using jq 1.7.1 and trunk8 1.3.2
Got this working in IE9 by doing this…$(“#[id$=’viewPanel1′] tr td:nth-child(4) span”)
The addition of the ‘span’ got rid of the markup, it now plays nicely in ie9 and the lines param also palys nice in FF and IE9.
Thanks for the great demo of this plug-in you did on Ni9.
regards,
Alan
Thanks Alan for posting the helpful tip and comments – much appreciated 🙂
hello Mark
I wonder how to integrate the plugin with a dataView instead of a viewPanel. I need to apply the plugin to the content of a computed field in the detail of the dataView. Any help very much appreciated
regards
Stephane
Stephane – I have not tried it with a dataView (I don’t use them) but I think the greatest issue you will have is reapplying the plugin after every partial refresh. You can create a selector to replace the one I use in the example above to get all data grid tables and the column you are looking for. But if you expand/collapse a category or use paging the new data will not have the plugin applied. I suggest looking for an onComplete event which you can key into on the data grid and see if you can apply it there.
Hope that is of some help – Mark
Hi Mark,thanks for your articles and amazing examples, I’m new guy to xpages and jquery, I have to say ur examples really save my time to study it…then I have some questions about the demo db and examples,
well, first, i need say your db style is great, I do like it…
then…I just need the some features from your db, sorry for that, anyway, I tried to create brand new xpages in your db to test, and I find interesting things, that I have to add these code in it
otherwise,I CAN’T SEE any changes…
for example, I have to use these in the brand new xpages:
then my question why I can’t use these?
the 2nd is why I can’t use “jquery-1.7.1.min.js” directly, cause if I change it, there have no any effects either…
and the 3rd one is to this example, I find this trunk8 only works on chrome but not explorer….have no idea?
thanks angin for your amazing work, appreciate it~
Sean
OH…no…the code disappeared。。。I need change
Hi Mark,thanks for your articles and amazing examples, I’m new guy to xpages and jquery, I have to say ur examples really save my time to study it…then I have some questions about the demo db and examples,well, first, i need say your db style is great, I do like it…then…I just need the some features from your db, sorry for that, anyway, I tried to create brand new xpages in your db to test, and I find interesting things, that I have to add these code in it
/*
//////
///////
////////
////////
////////
////////
*/
otherwise,I CAN’T SEE any changes…
for example, I have to use these in the brand new xpages:
/*
////////
////////
////////
////////
////////
////////
////////
////////
////////
*/
then my question why I can’t use these?
/*
////////
////////
////////
////////
*/
the 2nd is why I can’t use “jquery-1.7.1.min.js” directly, cause if I change it, there have no any effects either…
and the 3rd one is to this example, I find this trunk8 only works on chrome but not explorer….have no idea?
thanks angin for your amazing work, appreciate it~
Sean
….sorry I DON’T KNOW IT CANT’S PASTE CODE HERE, CAN I SEND MAIL TO YOU?
this is the last time i try to paste code here… = = hope works
/*
headTag tagName=”script”
this.attributes
xp:parameter name=”type” value=”text/javascript” /
xp:parameter name=”src” value=”js/jquery-1.7.1.min.js” /
xp:this.attributes
xp:headTag
*/
otherwise,I CAN’T SEE any changes…
for example, I have to use these in the brand new xpages:
/*
xp:this.resources
xp:headTag tagName=”script”
xp:this.attributes
xp:parameter name=”type” value=”text/javascript” /
xp:parameter name=”src” value=”js/jquery-1.7.1.min.js”
xp:this.attributes
xp:headTag
xp:script src=”js/trunk8.js” clientSide=”true” xp:script
xp:this.resources
*/
then my question why I can’t use these?
/*
xp:this.resources
xp:script src=”js/jquery-1.7.1.min.js” clientSide=”true” xp:script
xp:script src=”js/trunk8.js” clientSide=”true” xp:script
xp:this.resources
*/
the 2nd is why I can’t use “jquery-1.7.1.min.js” directly, cause if I change it, there have no any effects either…
and the 3rd one is to this example, I find this trunk8 only works on chrome but not explorer….have no idea?
thanks angin for your amazing work, appreciate it~
Sean
Sean – thank you for your kind comments, I am glad you like the database and examples.
The reason you cannot use it is a straight resource is because dojo interferes with the loading of the trunk8 code. It has been mentioned a number of times in the XPages community – the solution is described here by Sven – http://hasselba.ch/blog/?p=1181. Ferry posted an alternate solution here in the XSnippets – http://openntf.org/xsnippets.nsf/snippet.xsp?id=hack-to-use-jquery-amd-widgets-and-dojo-together – in his example he uses select2, replace that for the jquery and trunk8 script codes and it should work for you.
Let me know if that helps (and if I have understood your question properly) – I have your email address from the comment so if need be I can contact you directly.
Hi Marky, thanks for ur response so~~~ quickly, u r my super man,LOL 🙂
Btw which version of IE does it not work on – and do you have compatibility mode set on?
Hi marky
I’m using ie11, and there have no warn to turn on the “compatibility mode”, the strange thing is when I just refresh the page, it did appeared 1 second…mabye, then the 4th column disappeared, it’s blank~ but when I put my mouse on it, it still can load the contents…but it’s no problem in chrome and safari (on iphone)
and the other question is why I can’t use the newest version of jquery? should I use the 1.7.1 as my first choose?
The default for the db is that version of jquery – I suggest you check out the trunk8 site itself and see which version he supports 🙂