Using an EXTJS RowExpander in XPages

If you are an XPages Developer, or better put, a Web Developer who creates world class applications using XPages, then you should either be using EXTJS or it should be on your radar.  If you want to see a comprehensive blog series on EXTJS then start here on Mark Roden's blog.  Mark also gave a presentation at IBM Connect 2014 that showed off some of the really cool things you could accomplish with EXTJS.

Of the features that Marky very briefly touched on during his Connect session was the ability to add a RowExpander to display more information about the row above.  This feature is great when you have more information to display than the available screen real estate will allow.   In this post, I will show how I used a Row Expander in an EXTJS grid within an XPage.

The Problem

In my Purchase Order application, I needed to display Line Item information in a grid.  At a minimum the line items had 11 columns, and some types had 15 columns.  In addition, I also needed to display the quantity that each store ordered, as well as something called "Shippers" which are tied to individual line items. Shippers are a box that contains a variety of different product UPC's in case you are wondering.  I did not want force the user to have to click on each line item and open another page just to see this information.

The Solution

I used the Row Expander plug in to display my store quantity and shipper information.   The Row Expander simply adds a column with a +/- that allows you to display additional information.  The table in brown, shows store quantity, and the table in blue shows Shippers.  (All of this will be immediately apparent to users of this system)

The Finished Result
(The second line item contains Shippers, the first does not)

How I did it

To use the Row Expander, you can only provide it straight HTML, no facets here.  You have to build the HTML yourself, and then make sure it is dynamic.  It is sort of like the way that you did things using traditional Domino web development.  I designed both tables differently due to the fact that 'Shippers" are separate documents, and the Store Quantities are part of the line items.  

Building Store Quantity Table

Think of the Store Quantity as information that I couldn't have fit in the columns due to space.  This is the table with the Brown headers above.  In this case I built that table using JSFiddle until it looked how I wanted it.  The actual numbers are pulled from a view using the REST service, just as you would for any column.  Note:  I used a Rest Service of type "ViewJsonService" that uses a categoryFilter to only pull data relating to the current document.

 

Columns used in the table are read from the REST Service

Once the data is pulled from the view into the Rest Service, you can read into the table you created by placing the name is curly braces.  Don't judge me on the use of the <style> tag for this usage.  The data is always fresh because it pulls from the view at runtime.

All of this code builds the first table, with the exception of the last fourth of the final row.

Building the Shipper Table

Think of the Shipper table as any other data you want to put in the row expander.  In my case, the Shipper is a separate document, so the contents of each are not included on the Line Item documents.  I guess I could have built some multi-value fields and place the shipper details in those fields, but that sounded really painful. What I decided was that after the creation/editing of the Shippers, I would dynamically build the table and save it to the related Line Item.  

Upon completion of a new or edited Line Item, I run a java method I wrote that is shown below to created the table and write it to the parent document.   I then display the table HTML in the view that the Rest Service pulls from.   I then pull the column in the Rest Service, and display it in the Row Expander.  In the above screenshot, the column is "ShipperHTML".

There is nothing really hard about the java code to created the table.  I will point out that I used StringBuffer to build the table, which is more efficient than using a String.  The rest of the code should be straightforward, even if you don't know java well.  This method lives in a managed bean that I use to track the progress of the each Line Item as it is being created or edited.  I call the createShipperTable() method from the method that saves the Line Item to the backend document.

Java method to build Dynamic Table

Conclusion

The Row Expander is just one of the many useful features of EXTJS.  I hope this post is helpful if you ever need to use it.  I also hope my need to use application specific references didn't take away from the understand of how it works. 

My Thoughts on IBM Connect 2014

As the snow falls where I am the day after arriving back, here are my thoughts on IBM Connect 2014.  If you read my pre-conference post, you will know that this was my first LS/Connect in 15 years.   Having missed the last 14 years I was very excited to get to go again. Despite the long gap, it was all very familiar.

My personal goals for this conference was to of course, learn about the latest and greatest in the world of Domino/XPages, but my primary goal was to meet as many people as possible.  In both respects, I think the conference was a big success.

Thoughts on the General Sessions

I have to admit that I hadn't heard of American Authors prior to knowing they were going to play at Connect. My wife is a fan of them, so she was excited I would get to see them.  They were great, I loved the energy, and I plan on buying their latest album.  

The next hour or so of the OGS, wasn't really all that interesting to me live, but that is not all bad. Twitter was abuzz with mockery and jokes, which made it all bearable.  I think Kathy Brown, and David Leedy cracked me up the most.  The OGS is not really for technical people like myself.  It did get a lot more interesting when Luis Benitez did his demonstration of the Mail next mail client.  

The best general session by far was on Tuesday.  I loved the message that Scott Adams presentted.  I have already watched it again with my wife and daughters. The direct link is here, kudos to IBM for making that available.

They made us wait until the end to see Scott of course, but I thought the speakers before that were really good.  The CEO of Kenexa was really good, and I plan to watch that one again too.  I also want to say that upon reflection, I really like the theme of the conference which was "Energizing Life's Work".  Personally I have had a similar philosophy especially in the last 18 months.  In hindsight, I think the best thing to have happened me was having trouble finding work in the summer of '12  It lit a fire under me that wouldn't have happened otherwise.  All that to say is that I approve of that message and do feel energized with the work I do.  We all have to work, I am blessed to be doing something I love.

Thoughts on Breakout Sessions

Here are the highlights of the sessions in which I learned the most (in no particular order).  

1)  XPages Performance and Scalability by Tony McGuckin and Martin Donnelly

I had been exposed to this material before, but in this session it began to really make more sense to me.  I took 4 pages of notes in this two hour session  Here are some hightlights:

• "XPages is much more feature rich than even the latest JSF" - Tony
• Performance and Scalability need to be built in from the start
• "You develop performance, you don't get it for free" - Martin
• Once a week use the XPages toolbox to profile your application
• Each control with a rendered property gets executed 4 times for every submit
• Consider using the Dynamic Content control for hide-when functionality
• For best scalability, keep pages on disk, this is the new default in 9.0.1

2) Be Open, REST services and Web Services by Bernd Hort

In this hour long session, Bernd covered lots of great info on these two topics with highlights being

• Java 6 built into designer has all you need to use Web Services
• Host your own WSDL files in case the provider moves or put security on them
• RESTclient is a very useful Firefox add-on
• "Jersey" is a utility to map json to objects

3)  ExtJS in XPages by Marky Roden

In this session, Marky opened developers eyes to the possibilities that are available using ExtJS.  Even though I have used ExtJS for six months, I still came away have learned some really cool tricks

• Show the user something is happening when loading large amounts of data, use a progress bar
• Using HTML5 local storage, you can poll the server for updates and cache results and only update results if data changed <- AWESOME
• Use a Buffered Reader, which builds and destroys grid set and you can't tell it is happening.

4) Bootstrap4Xpages by Mark Leusink and Phillipe Riand

I almost didn't go to this session, since I have used bootstrap extensively but I am really glad that I did. Mark really built something that will make Bootstrap easier to implement for XPages developers

• This runs as a server plugin, so all applications on the server have access to it
• You can add your own components to what is 'out of the box'
• Includes a really awesome file upload control
• You should avoid using dojo controls when using this

5) XPages Mobile Development in 9.0.1 and Beyond by Tony McGuckin and Eamon Muldoon

The XPages team in Ireland had been working hard on improving mobile development.  

• The Single Page Application wizard makes the development process much easier. 
• The built-in managed bean called deviceBean gives you info on what device is accessing the app
• onOrientationChange() event that can run serverside code on every orientation change 
• onResize() event that also can run serverside code on every resize
• FUTURE:  Built-in support for Responsive Web Design
• FUTURE:  Support for Progressive Enhancement (gestures and behavior)

6) IBM Worklight: Going from XPages Mobile to Native Mobile Applications by John Jardin and Marky Roden

This session talked about the need for native applications.  They then did a demonstration of the features of Worklight until close to the end when some this amazing happened.  

They took a plain XPages mobile application and made it into a native mobile application.  John Jardin figured out that you can display the application in a iFrame and using Worklight you can have the application work as a native app on iOS or Android.  You can even use Worklight to bypass iTunes or Google Play. This is the single coolest thing I saw at IBM Connect 2014.  Kudos to John Jardin who figured this out. I wish that I stood up and clapped but it took me a few seconds to grasp what I had witnessed.  

7)  Meet the XPages Developer Birds of a Feather 

This was an hour long Q & A session with the Dublin XPages development team.   I learned quite a bit of what the community is asking for.  For example, I knew before that Designer used an older version of Eclipse, I just didn't realize how many people are really bothered by that.  I guess I never considered Designer to be a big problem, and I realize now that I am in the minority.  Besides that were lots of other good topics discussed.  I thought the IBM team handled things well, as did the audience.  I will say that I have a ton of respect for the team that gave us XPages and in addition I really respect them making themselves available in the way they did.     

Other noteworthy sessions that I attended and really liked:

• Localization of XPages by Brad Balassaitis and Kathy Brown
• Build Apps Rapidly by Leveraging IBM Collaboration by Henning Schmidt and Niklas Heidoff
• IBM Domino 2013 and Beyond 
• Xpages and the SBT by Martin Donnelly and Padraic Edwards
• IBM Worklight for XPages Developers by Mat Newman
• XPages 9 Circles by Paul Withers and Mike McGarrell
• Open Social - Extending your Arsenal by Ryan Baxter and Yun Zhi Lin
• Domino Designer by Kathy Brown and Julian Robichaux

What I didn't like about IBM Connect 2014

This will be a short section, because there wasn't much that I didn't like.  If I had to focus on one gripe it would be the scheduling of XPages related sessions.   There were some times, when there was nothing really of interest to me being presented, and other times, when there were two, and sometimes three interesting XPages/Mobile/App Dev sessions going on at the same time.   

Fulfilling My Primary Goal

When it comes down it, all of technical things I learned at the conference, I could have done on my own by hours of personal study.  My primary goal was to meet like minded people and turn online acquaintances into friends.  I am usually reserved but I promised myself to take every opportunity to reach out to everyone I came across but especially those I have followed online.  It was a little difficult at first, but after a few times it became second nature.  I met so many that awesome people that I can't list them all so I better not try. It was a limiting staying away from the Dolphin and Swan but I feel like I made the best of each chance I had. Despite being excited to see my family, I was sad to leave having made so many friends.  I hope to not have to wait 15 years to return.

It was great meeting Chris Toohey, and talking about things we had in common since I was raised in his native Pennsylvania 

Marky Roden, Brad Balassaitis, and Tim Tripcony at the PSC Party

Frank Santorelli and Mike Davis from Cincy who I enjoyed spending time with at Hollywood studios. Here we are in line for the Toy Story ride.