In this article I will demonstrate a technique for dynamically expanding and contracting viewPanel rows. This provides a nice clean interface for the user and allows content to be made visible as necessary. This article also highlights many of the core jQuery capabilities.
When moving from a notes client application to the web often times view columns can be large and unwieldy
A boring notes view
Unwieldy data view on an XPage
What we are going to do is not only neaten up the display but provide some simple user interactivity to allow access to data as needed. Here is a quick video of the capability in action.
You can see a working example of the capability on the xomino site. In Firefox and Chrome the fade effect look just fine but due to issues with alpha filters fade does not work consistently in IE.
How does it work?
As you can see from the pictures above, once we put our view into an xPage and display it on the web, the entire contents of the data field are displayed on the page. This can make for an irritating session with customer who don’t want to have to scroll page after page to find their information but want the same view to be available through the notes client.
Once solution would be to determine the medium through which your data is being viewed and truncate it accordingly. But I went another route and made a compromise where the data is available if the users wants it (adding functionality to the page without them having to click and open the document) but does not take up a large amount of space.
I added jQuery and jQueryUI (CSS not code) to my database through the WebContent folder and to my XPage like this
Select all the 4th column Table cells in the viewPanel and cycle through each of them
//select all elements (one in this case) where the id ends with (id$=) viewPanel1
//within that select all rows (tr)
//within that select all the table cells (td)
//within that select only the cells which are the 4th child element (:nth-child(4))
//cycle through each of them (.each(function(i)) where i is the nth item in the cycle
$("#[id$='viewPanel1'] tr td:nth-child(4)").each(function (i)
Because we have fixed the column width we are able to accurately ascertain the height of the cell contents on the page
As we then cycle through the viewPanel TD cells we determine if the cell contents are larger than 100pixels. If they are then we surround the contents with a wrapper with a fixed height.
//$(this) means each jQuery object (representing the TD as we cycle through the column
//.append is as it sounds - append to the end this SPAN (with the arrow in it)
//.children(:first) selects the first SPAN within the TD we are working on and
//.wrap means surround the SPAN with the DIV
$(this).append('<span class="ui-icon ui-icon-arrowthick-1-s"></span>').children(":first").wrap('<div class="wrapper" />')
ok trying to visualize what is going on we start with something which looks like this
We .append() another span
We then .wrap() the :first Child of the TD with a Div
And there you have it. We have looked at a broad range of jQuery capabilities and brought them all together to create a great looking interface for the end user. All these capabilities are part of the jQuery core and I only used jQueryUI to get the cute up and down arrows. If you wanted to use an icon there is nothing stopping you removing the jQueryUI dependency.
We have looked at jQuery Selectors
attribute selector $(“#id$=
class selector $(‘.wrapper
We have looked at DOM traversing and manipulation techniques
We have looked at attaching events to DOM elements
We have looked at object properties
We have looked at multiple visual manipulation capabilities
Going to MWLUG 2014? Buy Dave Leedy a beer
Sun, Aug 24th 2014 5:37p Mark Roden Yeah I know I have rattled on about this before but it holds as true today as it does any other day before.
Here is a list of reasons you should buy Dave Leedy a beer in case you were wondering…
1) really? You need a list?? Shame on you….
2) NotesIn9 has helped you – One of those videos by Dave, John, John, Brian, Chris, Graham, Jeremy, Mark, Mark, Paul, Peter, Steve, Tim, Chris, Paul, Josh, Dan, Niklas, Michael, Russ, Serdar, Sean, Mark, Brad, Frederick, Steve, Richard, Kathy, [read] Keywords: ibm
Chart Directives and Dynamic Binding – MWLUG 2014 preview
Wed, Aug 20th 2014 7:13p Mark Roden Although not directly related to the purpose of the presentation I am going to demonstrate how to use an Angular.js chart directive to bind to the application service data and create dynamic charting within the application.
Changing the Zip for 1 Marky not only updates the data displayed – but also because of the data bind – auto-magically updates the chart
While this in itself does not directly relate to the write once and run anywhere nature of the presentation – it d [read] Keywords: application
Accessing the original element when using Select2-focus
Sun, Aug 17th 2014 7:36p Mark Roden In the application we are currently working on I wanted to add an ajax call to a JSON service, but only for certain fields. Rather than go through the application and add the code to every element I used a delegated focus event for the field with an attribute of “help_fieldName”. The following HTML represents the code on the form:
The following jQuery code makes it work. The getHelp function shows/hides [read] Keywords: ajax
Angular in XPages #8 – Directives (did someone say plugins?)
Sun, Aug 10th 2014 8:08p Mark Roden In this article I will discuss Angular Directives and why they are near and dear to my heart
Directives in Angular are modular pieces of functionality which in some cases are very analogous to plugins in jQuery. According to the Angular documentation…
“At a high level, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS’s HTML compiler ($compile) to attach a specified behavior to that DOM element or [read] Keywords: xpages application
Working on my MWLUG2014 presentation
Wed, Aug 6th 2014 8:04p Mark Roden Just wanted to show a work in progress – screenshots of what I am working on for MWLUG2014. Part of the presentation is showing how to make your Angular applications portable.
My sample app will be the one I created as part of the Angular in XPages series.
I will walk through the code and demonstrate how I can take this stand alone application
and insert it into this bootstrap demo dashboard application
creating this fully functional component capability within the dashboard
With [read] Keywords: xpages application
Angular.js in XPages #7 – Writing better code using Services
Sun, Aug 3rd 2014 6:01p Mark Roden In this article I will discuss a better programming practice for Angular.js than was demonstrated in the previous articles within this series. I have mentioned before, part of the purpose this blog is very much a “learning in progress” for me. Without going through the previous articles I would not have been able to get to this point and write “better code”. Hopefully with that understanding, those of you who have been along for the ride will appreciate this and grow w [read] Keywords: agent
Taking back productivity in Domino Designer (a NotesIn9 production)
Tue, Jul 29th 2014 3:27p Mark Roden Yeah it has been a while (over 18 months) since the last time I did a NotesIn9 video but it finally happened again.
NotesIn9 149: Database Resources and Design Definition
Doesn’t sound very exciting does it? Dave needs to work on his attention grabbing heading show names. I would have called it something more like this – but then who am I to complain – it is not my show after all ;)
NotesIn9 149: Taking back productivity in Domino Designer
This video revolves around som [read] Keywords: domino