Quality vs. quantity Microphone
Home Who We Are What We Do What We've Done Why Work For Us Blog Contact Us

    Congratulations REDSpace!

    Jenn Priske - January 17 2014

    So, about 2 months ago, our colleagues in the REDSpace division got what I thought was the coolest thing ever! It was a personally autographed picture of Commander Chris Hadfield, the first Canadian to walk in space and the first to command the International Space Center!  He had sent it to them as a thank you for the great work they did on the National Film Board’s Space School site that was used to showcase his space mission last year.

    Image:Congratulations REDSpace!

    This week, more great recognition for these superstar technologists!  They have been nominated by the Academy of Canadian Cinema & Television in the category of best original interactive production produced for digital media.

    This news has gotten them featured in the Halifax Chronical Herald and, just today, the CTV Atlantic’s reporter Alyse Hand invaded our offices to interview the CEO of the REDSpace!  Finally, they are recognized for the superstars they are!  (Rumour has it they might even offer Wes a job as anchorman!)

    The Notes Division of TeamSpace would like to take this opportunity to congratulate our REDSpace brothers and sisters on such an awesome nomination!  We are honoured to be a part of TeamSpace with you and wish you the best of luck at the upcoming ceremony!

    Image:Congratulations REDSpace!
    Image:Congratulations REDSpace!

    Using jQuery resizable and draggable with fixed position pop up

    Monica Mora - October 22 2013

    For our purposes, we needed a pop-up that would stay in the viewable section of a web page and allowed the user to move and resize it using jQuery.

    Now at this point, most of you are thinking, just use a jQuery dialog right? That's what I thought too! Draggable and resizable are built in....don't reinvent the wheel, use what's there right? So, I build the pop-ups using dialogues, and set obj.draggable () and obj.resizable(). Simple right? One would think so....

    Under "normal" conditions this would be the case, set the two properties and move on to the next set of code.

    So I set the dialogue to draggable, and life is good. The user can move the dialogue all over the viewable section of the page and all is not lost if the user scrolls.

    Now, I add resizable property and test resizing the dialog on initial load of the page, and it works  beautifully.

    I move on to the next scrollable section to test another dialog call and here's where it breaks. The dialog loads fine, drags fine, but upon resize, the dialog disappears. Wonderful. I look at the calls, compare the dialog functions verify everything is using the correct calls, etc.

    After many hours of combing through function calls, checking firebug for errors, console log statements and yes, even alerts, I've come to the conclusion that there are no errors and no differences in code.

    I move to the top of the page, it works. I scroll the page, it disappears.  So at this point, I do what all good developers do, I use a different function. If the jQuery dialog won't conform to my needs, I'll write my own pop-up!

    So, here we go, rewriting every "dialog" call...using a fixed position div and visibility. Of course, I test the new pop-up with simple styles and no resizable or draggable properties. Everything works similarly to the dialog. Great!

    Now, I think, let's add the draggable, and viola....perfect!

    Last test. At this point, I'm confident all will work as I want it to. I'm feeling maybe a touch superior,  I've bent this code to my will! I am the developer king! I can do anything!

    Then, I add the draggable and what do you think happens? Of course, same behavior as the dialog. Are you kidding me?? Seriously!!!???

    At this point, I do what all good developers do and  I refrain from throwing my computer out the window and walk away. I clean the house, do some laundry, cook dinner and stew over the fact that this code SHOULD work.

    I'm thinking what could be breaking it. What on earth could "resizable" be doing that is so finicky??

    Then it hits me. BAM. I go back to the computer and check my theory.

    I scroll to the middle of the page, activate the pop-up, drag it and then resize it. At this point, I scroll BACK TO THE TOP of the page, and what to my wondering eyes appear? There it is, my resized pop-up sitting at the top of the page.

    Of course!  Nothing I do ever fits the mold of "normal".  In this case, we have a long scrolling page with distinct "sections" the user can navigate to via a set of navigation buttons. This being the case, the pop-ups needed to be set to a "fixed" position, thus keeping the pop up in view should the user decide to scroll the page behind it.

    jQuery resizable is smart enough to reset the position of my pop-up for me. Why thank you jQuery, your so kind...and NOT cool!

    Yes, what happened was my beautifully styled, FIXED position div has been hijacked!!! jQuery has now set my position to absolute with exact left/top positions.

    Curse you jQuery! And your little dog too!!!

    The obvious solution here, or so it seems, is to simply add a "!important" to the fixed position css style definition.  Typically, "!important" would , in fact, solve this issue, given that the top and left definitions were non-changing and the page wasn't long enough to scroll. While this provided partial relief, my needs were a little more complicated than that of a "normal" page, and this lone solution left me with a "jumpy", erratic and unpredictable behavior, not the smooth resize one might expect.

    After a few more hours, I decide to set the position to fixed, and  set the top and left position in the javascript.  This seems like a simple solution that would come to any developer and again, I'm confident.

    Upon testing, not so much. Again, hacked by jQuery! Curses! How can I get my calls to sit "below" their calls...and not make the pop-up look "jumpy"....????

    Now, I've resorted to google...and it seems I'm not alone. I'm not the only person that has ever needed to set a fixed position pop-up to be resizable.

    In combing through many posts...the answers are redundant. They all say "jQuery resizable does not support fixed positioning". WHAAAAAAAT??? Seriously???

    In the end, I found a few solutions posted that suggest resetting the position to fixed post resizing. Well I've already tried this.

    It finally hits me. I need to set the position to fixed DURING the event, not after! Viola...Success, I feel like Julie Andrews in "The Sound Of Music"! It works. It doesn't jump. It doesn't "move". It does exactly what I want it to do!

    So now, for those of you that are less "visual" than I, here is the actual code solution:

    First, 2 functions that will resize my iFrame and container:

    function resizeURLBox(){
      //size outer box to window
      var uBox=$('#urlBox')
      var divWidth = Math.min($(window).width() - 25, 1000);
      uBox.height(($(window).height() - 130) + 'px');
      uBox.width(divWidth + 'px')

    function resizeURLFrame(){
      //size inner frame to outer box
      var uFrame = $('#urlFrame');
      uFrame.height(($('#urlBox').height() - 28) + 'px');
      uFrame.width($('#urlBox').width()-2 + 'px');

    Then, during the pop-up call, in the 'draggable' parameters I added the fixed position to the start event:  

    var uBox=$('#urlBox')
      uBox.draggable({handle:'#urlDrag', scroll: false});
              handles: 'n,s,e,w,ne,se,nw,sw',
              start: function(e, ui) {
              uBox.css('position', 'fixed')
              uBox.css('top', (60)+'px');
              $(window).off('resize', resizeURLBox);  //cancel window resize event s
              $(window).off('resize', resizeURLFrame);
              var d = $("<div class='iframeCover' style='zindex:99;position:absolute;width:100%;top:0px;left:0px; height:" + $('#urlBox').height() + 'px'></div>');
              resize: function(e, ui) {
              resizeURLFrame()  // resize the inner iFrame as the container is resized
              stop: function(e, ui) {
                      $(window).resize(resizeURLBox); //add window resize events back

    VIOLA! I now have a pop-up that will bend to my will, and even resize itself on browser resize. It does it all!

    My Managed Bean Conundrum - Part 2

    Bob Laing - April 22 2013

    Continuing on from Part 1 in this series it is now enough of copying someone else's code -- it's time to write my own code.  I'm going to create a bean called AppUtils - the purpose will be store code that will be portable to other databases/applications and provide generic methods to access and retrieve data from Domino objects (typically documents).  To create this bean I'll follow much the same process as when creating the SystemUtils bean.  From Designer under Code and then Java I click New Java Class and fill in the Package of and the Name of AppUtils and then click Finish.  This creates an empty Java class as in the following screen shot:

    Image:My Managed Bean Conundrum - Part 2

    The next step is to make the bean serializable.  This means the bean can have persistence, or able to store information to be retrieved at a later point.  To enable serialization, add the text "implements Serializable" after public class Apputils as in the following screen shot:

    Image:My Managed Bean Conundrum - Part 2

    Notice the red x on the left side.  Click once on that and you'll see an explanation of the error and suggestion on how to resolve.

    Image:My Managed Bean Conundrum - Part 2

    Double click on Import 'Serializable' (  This will add an import statement at the top of the bean which imports the Serializable Java Class into this bean.  This will eliminate the hard error that will prevent the  bean from being saved, but now you'll see a yellow warning.  If you click once on this you'll be prompted to Add generated serial version ID.  This is a long unique id number which helps keeps track of version of the bean.

    Image:My Managed Bean Conundrum - Part 2

    Double click the Add generated serial version ID which will add a long variable with a unique value.  Next we're going to add a constructor.  A constructor has a solitary purpose and that is to create an instance of a class.  Add the code highlighted in the following screenshot.

    Image:My Managed Bean Conundrum - Part 2

    Now we're done with the preliminary stuff and ready to write some code.  The method I started with for my bean will take as input a lookup value, a lookup view and a field name.  The method will lookup the value in the first column of the view and return the field value from the first document that matches the lookup value.  Copy the following code (not including the line numbers) into the bean after the public AppUtils() {} and I'll explain what it does.

    1        public static Vector<String> getKeywordList(String kwCategory, String kwView, String kwField) {
    2                Vector<String> kwList = new Vector<String>();
    3                try {
    4                        Database curDb = SystemUtils.getDb();
    5                        if (curDb.isOpen()) {
    6                                View kwLookupView = curDb.getView(kwView);
    7                                if (null != kwLookupView) {
    8                                        Vector<String> v = new Vector<String>();
    9                                        v.addElement(kwCategory);
    10                                        Document doc = kwLookupView.getDocumentByKey(v, true);
    11                                        if (null != doc) {
    12                                                kwList = doc.getItemValue(kwField);
    13                                        }
    14                                }
    15                        }
    17                } catch (NotesException e) {
    18                        e.printStackTrace();
    19                }
    20                return kwList;
    21        }

    Line 1 identifies the method name which is getKeywordList.  This method is public, which means it is visible outside of this class and it is static which means the method can be called directly.  The method receives three parameters:  kwCategory, kwView and kwField.  All three parameters are identified as String variables.

    Line 2 identifies the Vector which will hold the values that will be returned from the method.  A Vector is a Java object that can hold multiple values.  A Vector in this case will return the values contained in a multi-value field in a  Domino document.  The type of the Vector needs to be identified, in this case the Vector will hold values.

    Line 3 starts the standard Java try/catch block.  Java tries code, and if it fails for any reason, the processing falls to the catch statement which can take whatever action is necessary.  In this case the catch will print the error message to the console(line 18)

    Line 4 uses the SystemUtils bean to get the current database object.  This database object contains the same properties that a database object would contain in Lotusscript

    Line 5 checks to verify the database object is valid and open -- looks just like Lotusscript doesn't it ?

    Line 6 and 7 get a view object from the current database and checks to see if the view object exists.  The view is obtained using the kwView parameter that was passed to the method.

    Line 8 declares a new vector that will be used as the lookup key to get a document in the view.  Line 9 adds the kwCategory value to the vector.

    Line 10 and 11 get a document using getDocumentByKey and verify that a document was found.

    Line 12 gets the value contained in the kwField and stores it in the kwList vector.  This vector will then be returned from this method in line 20.

    I've been coding Java agents in Domino for years so my perspective may be a littie warped, but I see very little in this method that differs from Lotusscript.  The syntax is a little different, but the Domino objects are the same regardless what language is manipulating them.

    To see this bean in action, I've created a simple XPage that returns the value retrieved to a combobox control.  That code follows:

          value="getKeywordList Test(Platform KW): "

                  <xp:this.value><![CDATA[#{javascript:getAppUtils.getKeywordList("STATUS", "KeywordsLU", "value");}]]></xp:this.value>

    In the comboBox, the following code  javascript:getAppUtils.getKeywordList("STATUS", "KeywordsLU", "value"); calls the method getKeywordList and passes as parameters "STATUS" which serves as the lookup key in the "KeywordsLU" view which then gets the matching document and returns the contents of the "value" field in the document.  This then results in the comboBox looking like this:

    Image:My Managed Bean Conundrum - Part 2

    So all is good right ?  I have a bean, and I can use it in an XPage to retrieve the values I want.  What's the conundrum ???  I was doing some searching and reading on managed beans and I saw a post that mentioned that managed beans contain getters and setters(which my bean does not) and if there are no getters and setters then the managed bean actually is just a plain old Java method.  So do I have a managed bean here or do I just have a Java object ?  I'm really not sure - weigh in if you have an opinion…

    My Managed Bean Conundrum - Part 1

    Bob Laing - April 19 2013

    I attended Connect 2013 a few months ago and the first session I sat in on was Russ Maher's Jumpstart:  JMP402 Master Class: Managed Beans and XPages: Your Time is Now.  Excellent session.  And I'll acknowledge up front and probably a few more times that I used code from Russ' sample database in this blog post.

    One of the messages in Russ' Jumpstart session was that Managed Beans provide several benefits in an XPages application (performance is one) and Java is the direction that IBM is heading with Domino/XPages so no better time than now to start writing Managed Beans.

    With the post Connect/Lotusphere buzz still ringing in my head, once I got back to the real world of work I decided to try to build a Managed Bean into one of the applications that I'm currently working on.  As I've blogged about before (, one of the common actions that I use in many databases is to grab a value from a configuration document and populate some type of control such as a combobox or listbox.  The blog post I made previously used SSJS to accomplish that, which works well and is relatively portable in that it can be plugged into other databases without much (or any) tweaking of code.  So I set out to recreate that same functionality in a Managed Bean - and I was successful, however upon doing some further reading on Managed Beans now I wonder if I've actually created a bean, but more on that in a bit.

    As I mentioned previously, Russ Maher provided excellent sample code with his Connect 2013 session and I used his SystemUtils bean verbatim.  It worked as it was supposed to and provided a jumpstart for me.  The slides from Russ' session can be found here: and the sample code and database can be found here:  Both the slides and sample code are provided with Russ' permission.

    I started by loading Russ' SystemUtils bean into the database.  To accomplish this, from Designer under Code and then Java I clicked New Java Class and received this dialog box:

    Image:My Managed Bean Conundrum - Part 1

    I entered for the Package and SystemUtils for the name.  The package is used to group Java classes and should be all lowercase.  You should put whatever is appropriate as a package name, although you can use if you wish.  The name will be the name of the Java Class and should be descriptive of what the bundle of code does and also start with an uppercase letter.  Clicking finish will present an empty Java Class.  From this point I copied the contents of Russ's SystemUtils bean into the empty shell I just created and then saved.

    The next step to make this bean available to the the application is to update the faces-config.xml file.  This file is found under Package Explorer, the WebContent folder and then the WEB-INF folder as in the following screen shot:

    Image:My Managed Bean Conundrum - Part 1

    Edit this file by double-clicking on it, and I added the following lines to the file:

    Image:My Managed Bean Conundrum - Part 1

    The entry identifies that managed bean information will follow.  The entry provides a name to reference the bean in your XPage or Custom Control.  The is a combination of the package and class name that you entered when creating the bean and the entry identifies the scope of the bean - in this case the bean will last the life of the session.

    Save and close this file and that's all that I did to get Russ's SystemUtils bean to work.  This bean contains numerous utility classes to get objects such as the current database, a document given UNID, or a NotesSession.  There is nothing specific to the application in this bean, but many classes that return common objects that any Domino developer will use when building an application.

    Check back Monday for part 2 in this blog post where I post code that will look up and return a value from a document that is not a data source on the XPage.

    Using XPages to develop complex reports - Part 3

    Roy Rumaner - March 12 2013

    Continuing on from Part 1 and Part 2 in this series, I once again will explore the intricacies of advanced reporting with XPages. Furthering my example from previous posts, once again the client asked for something else to be added to the XPage. They now want to be able to see the data that these calculations were created from.  It was decided that the easiest way to do this was to add a view panel (Figure 10) which contained all the fields they required.

    Figure 10: Overview panel
    Image:Using XPages to develop complex reports - Part 3

    The next thing that was needed was a way to determine which data they wanted to look at. The obvious answer was to show it by the row of the report so I created a panel with four buttons, one for each row. (Figure 11)

    Figure 11: View selection buttons

    Image:Using XPages to develop complex reports - Part 3

    The code behind each of these buttons was a single line of code (Code Sample 15) that corresponded to each row in the report.

    Code Sample 15: View selection button code

    viewScope.put("Program", "Program 2")

    A Partial Update forced the refresh of the view (Figure 12), which in turn forced the view to refresh and display the data based on the filter. (Figure 13)

    Figure 12: Partial refresh

    Image:Using XPages to develop complex reports - Part 3

    Figure 13: View data source

    Image:Using XPages to develop complex reports - Part 3

    The computed value is a set to use the viewScope that was set when the button was clicked. (Figure 14)

    Figure 14: Filter by column value


    I also added a checkbox to toggle the view panel on and off. The number of rows was set to 999 at the client’s request to eliminate the need for a pager.

    Figure 15: View panel
    Image:Using XPages to develop complex reports - Part 3

    Add in some CSS to clean up the tables and the final result after putting all the pieces together is very useful. (Figure 16)

    Figure 16: Final result
    Image:Using XPages to develop complex reports - Part 3

    Surprisingly the time to refresh the data each time the date is changed is less than a second in a database with over 10K documents.

    I hope you got some value over these series of posts. The real salient point here is that XPages is a powerful tool for so many aspects of business if employed correctly. Please feel free to comment here about any specific questions or drop us a line via the Contact Us page above.