Need to direct URL to second tab of tabbed table in xpages

Question

Background: XPage with tabbed table (from container controls) and multiple data sources, one for each tab. I was having issues with the save button creating duplicates if the users refreshes the page. To fix this I implemented this solution created by Tommy Valand. http://dontpanic82.blogspot.com/2010/06/xpages-avoid-saving-duplicate-documents.html

The issue is that when the user is on the second tab and saves the document using a full refresh (I have to have this due to attachments). The function works great except...

The problem: The redirect always takes the user to the first tab. This is a problem obviously for every tab except for the first.

I would like to know a way to direct the URL directly to the second tab. I have tried modifing Tommy's code to include a hash tag, but I haven't been able to get this to work. I am not even sure that the hash tags work with xpages. Thanks in advance for help with this issue.

 function redirectToCurrentDocument( switchMode:boolean, tab){
  try {
    if( typeof currentDocument === 'undefined' || viewScope.stopRedirect ){ return;       }
    // Gets the name of the XPage. E.g. /Person.xsp
    var page = view.getPageName();

    // Finds extra parameters, strips away XPages parameters/trims leading &
    var parameters = context.getUrl().getQueryString().substring(1);
    var extraParameters = parameters.replace( 
     /([&\?^]*_[a-z0-9=]+[&]{0,1})|(action=\w{4}Document[\&]{0,1})|(documentId=[\w]{32}[\&]{0,1})/ig, '').replace( /\&$/, '' );

    // Gets the unid of the current document
    //var unid = currentDocument.getDocument().getUniversalID();
    //var unid = document1.getDocument().getUniversalID();  //changed this line to make work with multiple data sources - SJZ
    var unid = document1.getDocument().getNoteID();  //also changed to use NoteID since it gave runtime errors for new documents - SJZ

    // Sets/changes the action according according to the mode the document is in
    var isEditable = currentDocument.isEditable();
    if( switchMode ){ isEditable = !isEditable; } // false -> true / true -> false

    var action = ( isEditable ) ? 'editDocument' : 'openDocument';

    // Open the current document via a get request
    var redirectUrl = page + '?documentId=' + unid + '&action=' + action;

    if( extraParameters ){ redirectUrl += '&' + extraParameters; }

    print("tab=" + tab)
    if(tab == "Invoices") { redirectUrl += '#tabPanel1'; }
    if(tab == "Credits") { redirectUrl += '#view:_id1:tabPanel2:editPanelCredits'; }
     print(redirectUrl);
    context.redirectToPage( redirectUrl );
  } catch(e){ /* Exception logging */ }
}

Use getComponent() to interact with the components, instead of '#view:_id1:tabPanel2:editPanelCredits'. Also a scoped variable to set which tab should be active. — Simon O'Doherty
Just a tip: use param (or anchor as you already do) in url and use OnPageLoad client script to invoke partial refresh to select tab. — Frantisek Kossuth

Sven Hasselbach Sven Hasselbach · Accepted Answer · 2012-12-03T12:21:47

You cannot use a #HashTag because the Server never receives this information from the browser.

Just modify yor tabbedPanel to open the selected tab by an URL parameter "tab":

<xp:tabbedPanel id="tabbedPanel1">
    <xp:this.selectedTab>
        <![CDATA[#{javascript:
            var p = context.getUrlParameter("tab");
            if(  p === "" )
                p = "Invoices";

            return p
        }]]>
    </xp:this.selectedTab>
    <xp:tabPanel label="New Tab" id="Invoices">
        TAB1 Invoices
    </xp:tabPanel>
    <xp:tabPanel label="New Tab2" id="Credits">
        TAB2 Credits
    </xp:tabPanel>
</xp:tabbedPanel>

Now you can control it by opening your XPage with http://example.com/db.nsf/Tab.xsp?tab=Credits.

The SSJS code above now can easily modified to this:

...
print("tab=" + tab)
redirectUrl += '&tab=' + tab;
print(redirectUrl);
....

The regex has to be modified this way:

var extraParameters = parameters.replace( 
 /([&\?^]*_[a-z0-9=]+[&]{0,1})|(tab=\w{0,}[\&]{0,1})|(action=\w{4}Document[\&]{0,1})|(documentId=[\w]{32}[\&]{0,1})/ig, '').replace( /\&$/, '' );

to remove the tab parameter from the URL.

Need to direct URL to second tab of tabbed table in xpages

1 Answers