Breadcrumb

    About

    You can use Tabs and the Region Display Selector within your application pages to improve navigation, flow and usability of your pages. These components are grouped together as they provide similar functionality, but have different implementations and use cases. This page will outline the three distinct methods you can use to apply these components to your page.

    Region Display Selector

    The Region Display Selector is a Region component that provides a page level navigation control for other regions on the with the Region Display Selector property set to Yes. It can be configured to work in two modes:

    • View Single Region Show regions as tabs. Selecting a tab will make the corresponding region visible and hide the other selections.
    • Scroll Window Always display all the regions on the page. Selecting a tab will scroll your window to the corresponding region.

    Follow the instructions below to add a Region Display Selector to your own pages:

    Step 1 Create a Region Display Selector region and place it in the Breadcrumb region position on your page.

    Step 2 Modify the other regions on the page and set the Region Display Selector property to Yes for the regions you want to appear in the Region Display Selector.

    Tip: You can find examples of how to use the Region Display Selector in several of the Packaged Apps bundled with Application Express.

    Tabs Region

    The Tabs Container Region Template can be used to create a set tabs within your page. Simply place sub regions within the Tabs Container and they will appear as a tab.

    This control is useful when you want to display different regions or information, but utilise the same space on a page.

    Follow the instructions below to add a tabs component your own pages:

    Step 1 Create a new Static Content region and set the Template to Tabs Container.

    Step 2 Create or move sub regions into the Tabs Container, one for each tab you want to have.

    Tip: You can easily nest tabs by creating another Tabs Container region within a sub region of an existing Tabs Container region.

    Example 1

    Tab 1

    Content 1

    Tab 2

    Content 2

    Tab 3

    Content 3

    Region Template Options

    • Use DefaultYes
    • Tab StyleSimple

    Example 2

    Tab 1

    Content 1

    Tab 2

    Content 2

    Tab 3

    Content 3

    Nested Region A

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore accusamus quidem saepe in voluptate ad ea quis maxime consectetur voluptatum eos, laboriosam voluptates cupiditate atque obcaecati numquam fuga, explicabo illo.

    Nested Region B

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique ducimus, rerum illo ea provident a. Veniam voluptates sed quidem incidunt, dolores vel eveniet. Vel officiis facere, totam fuga voluptatum obcaecati!

    Region Template Options

    • Use DefaultYes
    • Tab StylePill
    • Tabs SizeLarge

    Template Options

    • General

      • Use Template Defaults
      • Remember Active Tab

    • Layout

      • Default
      • Fill Tab Labels

    • Tab Style

      • Simple
      • Pill

    • Tabs Size

      • Default
      • Small
      • Large
    • Advanced

      Item Padding

      Sets the padding around items within this region.

      • Default
      • Slim Padding
        Reduces form item padding to 4px.
      • Remove Padding
        Removes padding between items.
    • Advanced

      Item Size

      Sets the size of the form items within this region.

      • Default
      • Large
      • X Large
    • Advanced

      Item Width

      Sets the width of the form items within this region.

      • Default
      • Stretch Form Fields
    • Advanced

      Label Alignment

      Set the label text alignment for items within this region.

      • Right
      • Left
        Align form labels to left.
    • Advanced

      Label Position

      Sets the position of the label relative to the form item.

      • Inline - Default
      • Show Form Labels Above
        Show form labels above input fields.
    • Advanced

      Top Margin

      Set the top margin for this region.

      • Default
      • None
        Removes the top margin for this region.
      • Small
        Adds a small top margin to the region.
      • Medium
        Adds a medium top margin to the region.
      • Large
        Adds a large top margin to the region.
    • Advanced

      Bottom Margin

      Set the bottom margin for this region.

      • Default
      • None
        Removes the bottom margin for this region.
      • Small
        Adds a small bottom margin to the region.
      • Medium
        Adds a medium bottom margin to the region.
      • Large
        Adds a large bottom margin to the region.
    • Advanced

      Left Margin

      Set the left margin for this region.

      • Default
      • None
        Removes the left margin from the region.
      • Small
        Adds a small left margin to the region.
      • Medium
        Adds a medium right margin to the region.
      • Large
        Adds a large right margin to the region.
    • Advanced

      Right Margin

      Set the right margin for this region.

      • Default
      • None
        Removes the right margin from the region.
      • Small
        Adds a small right margin to the region.
      • Medium
        Adds a medium right margin to the region.
      • Large
        Adds a large right margin to the region.

    Tabs List

    The Tabs List Template can be used to create a set tabs where each tab links to another page. This is especially useful for applications that require nested or complex navigation hierarchies.

    Follow the instructions below to add a tabs component your own pages:

    Set Tabs as the List Template

    Tip: You can add icons to these tabs simply by modifying the icon attribute of the list entry.

    Example 1

    List Template Options

    • Use DefaultYes
    • StyleSimple

    Example 2

    List Template Options

    • Use DefaultYes
    • IconsInline with Label
    • StyleSimple

    Example 3

    List Template Options

    • Use DefaultYes
    • SizeLarge
    • StylePill
    • IconsAbove Label
    • LayoutFill Labels

    Template Options

    • Size

      • Default
      • Small
      • Large
        Increases font size and white space around tab items.

    • Style

      • Simple
        A very simplistic tab UI.
      • Pill
        Displays tabs in a pill container.

    • Icons

      • No Icons
      • Inline with Label
      • Above Label
        Places icons above tab label.

    • Layout

      • Default
      • Fill Labels
        Stretch tabs to fill to the width of the tabs container.