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 :)