Field Grouping Across Tabs: A How-To Guide

Overview

Website tabs are a clever way to show chunks of content on demand at the click of a button. What makes them clever, though, is how they can condense what would be a very busy page into field groupings that are easier to read. By grouping related fields into named Tabs, we can even expand the information on each Tab (that was likely condensed in the legacy design to fit the page.) Even more clever, however, is exactly how that is accomplished.

Although there are multiple approaches to this, the site often loads all the content from all the pages at once, then simply hides or displays certain information depending on which tab the user selects. It’s like a magic trick that allows for many single-page web applications to be possible.

Once you understand the technique, you will want to take advantage of it and transform your application into a whole new experience.

For the purpose of this example, we will take one of the busiest pages in SunFarm Application: “Orders” and simplify it with the use of Website tabs.