dominoGuru.com
Your Development & Design Resource
XPages: Default Tab Selection via QueryString Parameters
07/11/2011 09:17 AM by Chris Toohey
While working on the Web Browser Client version of Remote Console HD last
night, I ran into a rather simple situation where with a little more attention
being applied to an often overlooked area of any application, I think I will be
able to deliver some real-world gains in the user experience.
Simply put, I took less than 1 minute to write a simple SSJS-based URL QueryString Parameter check, and in doing so can now support defining the default launch tab for a tabbedPanel Control:
<xp:tabbedPanel
id="main">
<xp:this.selectedTab><![CDATA[#{javascript:context.getUrlParameter("tab")}]]
></xp:this.selectedTab>
<xp:tabPanel id="home">
<xp:this.label><![CDATA[#{javascript:preferences[preferences['language'] +
'_label_home']}]]></xp:this.label>
</xp:tabPanel>
<xp:tabPanel id="servers">
<xp:this.label><![CDATA[#{javascript:preferences[preferences['language'] +
'_label_servers']}]]></xp:this.label>
</xp:tabPanel>
<xp:tabPanel id="databases">
<xp:this.label><![CDATA[#{javascript:preferences[preferences['language'] +
'_label_databases']}]]></xp:this.label>
</xp:tabPanel>
<xp:tabPanel id="groups">
<xp:this.label><![CDATA[#{javascript:preferences[preferences['language'] +
'_label_groups']}]]></xp:this.label>
</xp:tabPanel>
</xp:tabbedPanel>
Since it's so simple you might have missed it, here's the SSJS in question:
<xp:this.selectedTab>
<![CDATA[#{javascript:context.getUrlParameter("tab")}]]
>
</xp:this.selectedTab>
Thus, I can now use the following syntax to launch a specific tab on my XPage:
http://server/rchd.nsf/index.xsp?tab=servers
This, of course, launches the Servers tab.
And even more brilliantly, if you supply a mismatch (ie., ?tab=foo) or there is no tab parameter in the URL QueryString, the tabbedPanel Control's selectedTab Parameter fails back to the default tab.
... which made me wonder, I can't be the only one to think that this is useful. I mean, imagine having to send someone to a specific subsection within an application. The tab QueryString Parameter can act just like a hash anchor (#), but instead of jumping to a specific section within the form, simply surface that section (that panel, in this case) first.
Beyond sending someone to ?tab=groups to have them update an Group within the Domino Directory, think about the use of this practice in workflow applications.
Let's say your company CFO calls you asking how they approve a new request in this database you wrote for him. The conversation could be:
Email contains the following URL:
http://domino/db.nsf/request.xsp?action=editDocument&documentId=E6
78534123058D03852577F2007ED8B6
"Oh, you need to sign off on this section of content by clicking that 'Approve' button. Well click on that URL I just sent you. OK, now click on the second tab labelled 'Finance'. Now, click on the tab labelled 'Total Cost Summary'. No, it's one of the tabs on the 'Finance' part of the form. Yeah, scroll down. ... why don't I just come up to your office."
- vs. -
Email contains the following URL:
http://domino/db.nsf/request.xsp?action=editDocument&documentId=E678534123058D03852577F2007ED8B6&tab_main=finance&tab_sub=tcs
"Oh, you need to sign off on this section of content by clicking that 'Approve' button. Well click on that URL I just sent you. Yep, that's it! OK, let me know if you need anything else!
Me, I might just be lazy... but I'd prefer to have the latter conversation and not come across as if I'm trying to make the CFO jump through the form only to end up awkwardly standing in their office watching them just-as-awkwardly click on the wrong damned sections of the form despite you telling them "No, lower and to the left... like an inch. No, that was the back button. OK, let's start over again. Go back into your email...".
But enough of my real-world experiences, and back to the topic of this article.
The cool thing about this technique is that it's so simple. I dunno, it's just something that I can see becoming a no-brainer in UI/UX design. It's certainly something that'll make it's way into my applications.
What're you thoughts? Think this could be useful to the application audience, or will it be a feature that's never used. It is something that everyone is already doing and I'm just slow on the uptake, or is this an overlooked gem?
Let me know in the comments on the post!
About the author: Chris Toohey
Thought Leadership, Web & Mobile Application Development, Solutions Integration, Technical Writing & Mentoring
A published developer and webmaster of dominoGuru.com, Chris Toohey specializes in platform application development, solutions integration, and evangelism of platform capabilities and best practices.
More from dominoGuru.com
Latest Features
dominoGuru.com is powered by IBM Notes Domino XPages & hosted by Prominic.NET
Contact Us
Use our Contact / Feedback form or one of these email addresses:
Except where otherwise noted, dominoGuru.com by Chris Toohey is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.