Pages

Thursday, October 21, 2010

Opening Documents from Views in a different tab on the same XPage

I happened to perform an R&D on how to open up documents on new tabs with in the same XPage when you click on links in XPage views.

I searched for ideas over the net and I got the idea of using Dojo tabs as Dojo is shipped with XPages.

After an exhaustive search for the resources on web I arrived at the desired results.

Following is an abstract of how I got the same to work on XPages.

Create a Form, map it to a View and  create a few documents.
Now Create an XPage and bind the same to your form and map all the test fields that you have on your form to the xpage
Now Create an other XPage and put the following code into it

  Step 1: Enclose the following style imports to an XPage
        @import "../resources/dojo.css"; 
        @import "../dijit/themes/tundra/tundra.css";

  Step 2: Include the dojo.xd.js into the XPage using the following script tag
    <script type="text/javascript" src="dojo.xd.js"
        djConfig="parseOnLoad: true">
    </script>
   
  Step 3: Add the following scripts to the XPage
        dojo.require("dojo.parser");
        dojo.require("dijit.layout.ContentPane");
        dojo.require("dijit.layout.TabContainer");
        dojo.require("dijit.form.Button"); dojo.require("dojo.widget");       


Step 4: Put the following html on the page
    <h1>Tab Container </h1>
    <div id="mainTabContainer" dojoType="dijit.layout.TabContainer"
        style="width:500px;height:500px">
        <div id="tab1" dojoType="dijit.layout.ContentPane"
            title="Open Docs in New Tab" selected="true">
        </div>
        <div id="tab2" dojoType="dijit.layout.ContentPane"
            title="Normal Way">
        </div>
    </div>

Now DRAG AND DROP your View into the DIV WITH ID "tab1".



Now switch to the data tab of the same column and key in the following code, as shown in the following figure,

-----------------------------------
"<a href='#' onclick='addTab(\""+rowData.getColumnValue("Name")+"\",\""+
rowData.getUniversalID()+"\")'>"+rowData.getColumnValue("Name")+"</a>"

-----------------------------------

Now create a Server script library by the name, commonFunctions and include the same on to your XPage.
Put the following function into that script library and save the same.

------------------------------------

function addTab(tabTitle,unid){

    var url="http://andromeda/dojo/XPageDojoTabsTest.nsf/openform.xsp?documentId="+    unid +"&action=editDocument";
    var tabs = dijit.byId("mainTabContainer");
   
    var pane = new dijit.layout.ContentPane({
        title:tabTitle,
        content:"<iframe border='0px solid #ffffff' frameborder='0' src='"+url+"'> </iframe>",
        closable:true
    });
   
    tabs.addChild(pane);
    tabs.selectChild(pane);
}

------------------------------------

Once this is complete you are good to go... Preview your XPage on the Browser or the Notes Client and click on the links that appear in the view.
When you click on the links you can visuallize the documents getting opened on new tabs,
There you go, a POC...

Hope this helps :)

5 comments:

  1. Hi

    Before you reinvent the wheel, the Extension API lib has a control for that :) xe:djTabContainer If you download the extlib, the sample application has a sample in the Xpage Core_DynamicTabs.xsp

    ReplyDelete
  2. We use this extensively in our apps ... some tips, add an subscribe to watch for the close of the tab, and set the url of the iframe to javascript:true before removing the iframe, prevents some memory leaks. Also, depending on how the tab is closed, it may not actually get deleted from the HTML or the javascript object deleted from memory. In the same watch subscription of the tab, I specifically get a hold of the tab object, remove from the tab controller, and delete the object. Also, you may have to be careful with dijit objects and any connects/subscribes that get created on the new tab or in the iframe make sure to disconnect or delete them ... otherwise through extended use, you'll see memory get gobbled up by the browser, leading to an eventual crash. With our apps, I've done quite a bit of optimization watching for memory leaks and making sure all connects/subscribes get correctly undone, and and dijit objects get destroyed properly. I don't mean to make it sound scary if it does, its not that bad, and may not be an issue worth diving into if you arent creating many dijit objects, or the user will be in and out of the application with the tabs frequently enough to allow the browser to do proper garbage collection.

    ReplyDelete
  3. Hi

    I am not able to figure out the Extension API lib you are speaking about.Can you plz elaborate on this. Where can I find this extlib

    Thanks for the comment :)

    ReplyDelete
  4. @Jeremy: Thank you for the good advice.

    For some reason, your comment ended up as a spam and I found it just not and marked it as "not a spam". Well this is not something usual.

    :)

    @RK : Thanks a lot :)

    ReplyDelete