Shoutout to John Holliday - great extension of the idea to make tabbed navigation work in-view, instead of using a separate view for each tab. Great walkthrough here:
Another clever way to organize a view with lots of content is to use an approach similar to HTML in-page anchors with a table of contents on top; Tim Pash describes it in detail in this article:
I've got a similar implementation to John Holliday's example above, but instead of a single field under each tab I've got a section control... the entire section control shows or hides itself based on rules bound to the tab-buttons. (IP2007)
That's cool as it allows me to have distinct content and multiple controls under each tab... but I've run across an annoying "feature".
If you put content (simple text, images, etc) in the section, it's fine, looks and works great.
If you put simple input controls in the section (a text box, date picker, etc), also fine.
If you nest a simple section control in the section... also fine.
HOWEVER, if you nest a repeating section, repeating table, or optional section... you get some weird mouseover behavior on the entire "parent" section... anytime you mouse anywhere over the parent, it gets blessed with a dotted outer border.
If you click anywhere in the parent section, it will be highlighted in the system highlight color.
If you right-click anywhere in the parent section, you get 2 surprises... you can "copy", which grabs all the static txt content to the clipboard... or you can INSERT a new instance of your optional/repeating control! Even if you're not clicking anywhere near the boundaries of the optional/repeating child control, you still get the option to add it via the contextual menu.
This only happens when placing an optional/repeating control inside a section. It's important to note this doesn't have anything to do with the use of tabs ro no tabs, but the nesting of repeating/optional controls in a section. Haven't found a workaround for it yet... rather annoying when using a form. =/
is this tab function browser-enabled?
Yes - this design will work in the browser as well. Just keep in mind, this is "simulating" a tab control using buttons. So each click of a "tab" (button) will cause a server postback to occur - in other words, a trip to the server.
Not that this is a concern - I just wanted you to be aware.
Small question... Has anyone else had the same problem already?
When I draw the table and remove the border underneath the selected tab, then switch to another view and then switch back again, Infopath has redrawn the entire border again... And whatever I do, I can't get the border to not to reappear again.
It does work for the first tab though, it only doesn't for the "in between" ones....
Any ideas would be great! Thanks in advance!
I am also having this problem and haven't been able to find a reason or a solution for it.
However, I have developed a work around that is working for me in most of the multi-viewed forms I write.
If your "active" tab and the main window content cell are the same color, then you can set the bottom border of the "active" tab to that color (the background color).
When you look at your views in infopath, the entire top border of the content cell will now appear removed, but if you do a preview, then it should show up correctly as only removed under the "active" tab.
Hope this helps.
Perfect - even understood by a beginner like me. I used images previously but they loaded slowly. This was much easier to do and maintain. This post was doubly useful as M Lanpier had a good suggestion on fixing the reappearing border problem
Can you expound on how you "add some images inside a few more table cells around each button to provide rounded corners". I want the tabs to be rounded but I don't know how.