Wednesday, July 21, 2010

Dojo Tabbed Tables in XPages

Create an Xpage and copy paste the following code into the source tab of the same. Preview the XPage and you will tabbed tables created using dojo as displayed in the following figure.
 
 

Step 1. Enclose the following style imports to a style tag on the XPage
        @import "../resources/dojo.css"; @import
        "../dijit/themes/tundra/tundra.css";
    
Step 2: Add the inclusion of the dojo.xd.js to the XPage as mentioned below
    <script type="text/javascript" src="dojo.xd.js"  djConfig="parseOnLoad: true">
    </script>

Step 3: Associate the following script with 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 div tags on the page and preview the same. You will be able to see a nice good tabbed table on your screen
    <h1>Tab Container</h1>
    <div id="mainTabContainer" dojoType="dijit.layout.TabContainer"
        style="width:500px;height:100px">
        <div id="tab1" dojoType="dijit.layout.ContentPane"
            title="First Tab" selected="true" closable="true">
            First Tab
        </div>
        <div id="tab2" dojoType="dijit.layout.ContentPane"
            title="Second Tab" closable="true">
            Second Tab
        </div>
        <div id="tab3" dojoType="dijit.layout.ContentPane"
            title="Third Tab" closable="true">
            Third Tab
        </div>
    </div>

Note :  We can work with the tabbeb table through dojo code as well. Following is a simple way of selecting a particular tab
    var tabbedPanel = dojo.byId("mainTabContainer");
    tabbedPanel.selectTab("tab2");

Hope this helps :)

6 comments:

  1. Thanks a ton for posting this. I really didn't want to use the default tabbed table provided by x Pages as it hits the server every-time any tab is clicked. Thanks again really appreciate your post.

    ReplyDelete
  2. selectTab is not working. Is it a pre-defined function?

    ReplyDelete
  3. It has been a while since I have used it. I guess yes. Check with dojo docs to make sure of it. Cheers

    ReplyDelete
    Replies
    1. Have you tried using instead of di> for the tabbed table in xpages? I need to use xp:panel and selected=true is not available for xp:panel. It works only for div. I need to show the 2nd tab like the screenshot above.. but with xp:panel. If you have a ready answer, it will help.

      Delete
    2. You got to encode your html before replying since the page eats up HTML Markups. Guess u are asking if u can use <xp:panel> instead of <div>.

      try nesting the panel inside the div. Let me know if that helped

      Delete
    3. Nesting did not allow hide/when to work as expected. Fortunately I could convince the requester to change the tab order :-).. let the default work!

      Delete