Learn Goal 3 - Part 6: Simplify your screen with tabs

Document created by Kedar on Dec 10, 2014Last modified by communitymanager on May 12, 2015
Version 26Show Document
  • View in full screen mode

When you start to build your own solutions — and get excited about all the potential features you can add — be careful not to let your layouts become cluttered or confusing.

Tab controls provide a good way to add content while keeping your layout clean and organized. They allow you to switch among different windows of information in the same space.

Let’s add four large tabs for Contracts, Work Overview, Work Orders, and an Hours Summary. This will provide two benefits:


  • It effectively quadruples that content space

  • It gives visual priority to Contracts, which is displayed by default, while the other tabs are hidden unless needed. If you decide that Contracts should be more private, you can make one of the other tabs the default instead.




Add a tab control with four tabs for customer-specific content.




  1. Make sure you are viewing your Customer Detail layout.

  2. Choose the View menu > Layout Mode  ⌘L

  3. Select the Tab Control tool.
    tab tool.png

  4. Drag a large rectangle to take up the entire right hand-side of your layout.

    A Tab Control Setup dialog box appears, with a blinking insertion point in the Tab Name field.
    adding the tab control.png

    Let's create your first tab:

  5. Enter the word Contract into the Tab Name field

  6. Click the Create button.

    Your first tab is created. You should see its name appear in the Tabs window of the dialog box.

  7. Repeat steps 5 and 6 to create a second tab called Work Overview.

  8. Repeat steps 5 and 6 to create a third tab called Work Orders.

  9. Repeat steps 5 and 6 to create a third tab called Hours Summary.

  10. Change the Tab Justification dropdown from “Left” to “Full”.
    tab justification full.png

  11. Click the OK button in the lower right corner of the dialog box.

    The Tab Control Setup dialog box disappears.

  12. Click in an empty space on the layout to save your changes.

    You’ve successfully added an empty tab control. 

    Your layout should now look like this:
    customer detail tab control progress.png