Creating Breadcrumbs

Breadcrumbs provide users with hierarchical navigation. A breadcrumb is a hierarchical list of links that display using templates. You can display a breadcrumb as a list of links or as a breadcrumb path.

Topics in this section include:

See Also:

"Creating a Theme" and "Breadcrumb Templates"

About Breadcrumbs

A breadcrumb trail indicates where the user is within the application from a hierarchical perspective. In addition, users can click a specific breadcrumb link to instantly view the page. You use breadcrumbs as a second level of navigation at the top of each page, complementing other user interface elements such as tabs and lists.

Description of menu.gif follows
Description of the illustration menu.gif

How to Create Breadcrumbs

You can create breadcrumbs while creating a page, or manually by running the Create Breadcrumb Wizard.

Topics in this section include:

Creating a Breadcrumb While Creating a Page

To create a breadcrumb while creating a page:

  1. Run the Create Page Wizard to add a new page. See "Managing Pages in an Application". You can access this wizard by:

    • Clicking Create Page on the Application home page

    • Clicking Create on the Page Definition

    • Clicking the Create link on the Developer toolbar

    During the wizard, a Breadcrumb list appears. The actual page on which this list displays depends upon the type of page you are creating.

  2. From the Breadcrumb list, select Breadcrumb.

    The Create Breadcrumb Entry form appears.

    Description of breadcrum_creage_pg.gif follows
    Description of the illustration breadcrum_creage_pg.gif

  3. In Entry Name, enter a name for the breadcrumb.

  4. For Parent Entry:

    • To specify a parent, select a parent page from the Select Parent Entry list.

    • If this breadcrumb does not have a parent, select No parent breadcrumb entry.

  5. Follow the on-screen instructions.

Creating a Breadcrumb Manually

To create breadcrumbs manually, you need to add a breadcrumb to each page in your application as follows:

  1. Create the breadcrumb by running the Create/Edit Breadcrumb Wizard from either the Shared Components page or the Page Definition.

  2. Add entries to it.

  3. Add the breadcrumb to a page by creating a region.

Creating Breadcrumbs from the Shared Components Page

To create breadcrumbs from the Shared Components page:

  1. On the Workspace home page, click the Application Builder icon.

  2. Select an application.

  3. On the Application Builder home page, click Shared Components.

  4. Under Navigation, click Breadcrumbs.

    The Breadcrumbs page appears.

  5. Click Create.

  6. Enter a name and click Create.

Creating Breadcrumbs from a Page Definition

To create breadcrumbs from a Page Definition:

  1. Navigate to the appropriate Page Definition. See "Accessing a Page Definition".

  2. Under Shared Components, scroll down to Breadcrumbs and click the Create icon.

  3. For Create, select Breadcrumb and click Next.

  4. Enter a name and click Create.

After you create a breadcrumb, you add entries to it.

Adding Breadcrumb Entries

To add a breadcrumb entry:

  1. Navigate to the Breadcrumbs page:

    1. Navigate to the Workspace home page.

    2. Click the Application Builder icon.

    3. Select an application.

    4. On the Application Builder home page, click Shared Components.

    5. Under Navigation, click Breadcrumbs.

      The Breadcrumbs page appears.

  2. Select a breadcrumb to add entries to.

  3. Click Create Breadcrumb Entry.

  4. Under Breadcrumb, specify the page where this breadcrumb entry will display.

  5. Under Entry:

    1. Sequence - Indicate the order in which breadcrumb entries appear.

    2. Parent Entry - Identify the parent of this entry.

    3. Short Name - Specify the short name of this entry (referenced in the breadcrumb template).

    4. Long Name - Specify the long name of this entry (referenced in the breadcrumb template).

  6. Under Target, specify the target location. The information that appears on the page depends on the branch type you selected:

    1. If the target location is a URL, specify the following:

      • Target is a - Select URL.

      • URL Target - Enter a URL. For example:

        http://www.yahoo.com

    2. If the target location is a page, specify the following:

      • Target is a - Select Page in this Application.

      • Page - Specify the target page number.

        You can also select reset pagination for this page. Selecting this option causes the page to return to the first set of data meeting a user's new query.

      • Request - Specify the request to be used.

      • Clear Cache - Specify the page numbers on which to clear cache.

    3. To set session state (that is, give a listed item a value):

      • Set these items - Enter a comma-delimited list of item names for which you would like to set session state.

      • With these values - Enter a comma-delimited list of values for the items your specified.

        You can specify static values or substitution syntax (for example, &APP_ITEM_NAME.). Note that item values passed to f?p= in the URL cannot contain a colon. Additionally, item values cannot contain commas unless you enclose the entire value in backslashes (for example, \1234,56\).

    4. Click Next.

  7. To make the breadcrumb conditional:

    1. Make a selection from the Condition Type list.

    2. Enter an expression in the fields provided.

  8. Under Authorization, you can specify an authorization scheme.

    This authorization scheme must evaluate to TRUE in order for this component to be rendered or otherwise processed.

  9. Under Configuration, you can select a build option for this component.

    Build options are predefined settings that determine whether components within an application are enabled.

  10. When you are finished defining menu attributes, click Create at the top of the page.

Repeat these procedures for each breadcrumb entry you need to create.

Adding a Breadcrumb Region

A region is an area on a page that serves as a container for content. Once you create a breadcrumb and a breadcrumb template, the next step is to create a region. Once you create a region, you can add a breadcrumb to a page.

See Also:

"Creating a New Template" and "Breadcrumb Templates" for information about changing menu display

To create a breadcrumb region:

  1. Navigate to the appropriate Page Definition. See "Accessing a Page Definition".

  2. Under Regions, click the Create icon.

    The Create Region Wizard appears. Note that each wizard page displays a series of blocks on the left, representing the sequence of steps. The highlighted block indicates the step you are performing.

  3. For the region type, select Breadcrumb and click Next.

  4. For Breadcrumb Container Region:

    1. Region Title - Enter a title for this region.

    2. Region Template - Select a region template.

    3. Display Point - Select a Display Point.

      Regions are organized by position (or Display Point). To determine the appropriate region position, click the flashlight icon. A graphical representation appears.

    4. Sequence - Enter a number for the sequence.

    5. Click Next.

  5. For Breadcrumb:

    1. Breadcrumb - Select the breadcrumb to be associated with this region.

    2. Breadcrumb Template - Select a template.

    3. Click Next.

  6. For Breadcrumb Entry, identify the breadcrumb entry used to identify this page:

    1. Breadcrumb Entry Label - Enter a label for the breadcrumb entry.

    2. Parent Entry - Select the appropriate hierarchical parent.

    3. Click Next.

  7. Click Finish.

Repeat these procedures for each page where you would like to add breadcrumb navigation.

About Creating Dynamic Breadcrumbs

To give users more exact context, you can include session state in breadcrumbs, making your breadcrumbs dynamic. For example, suppose a page in your application displays a list of orders for a particular company and you want to include the following breadcrumb:

Home > Orders > Orders for ACME Inc

In this example, ACME Inc not only indicates the page a user is on but also the navigation path. The Application Express engine stores the value of ACME Inc. in session state.

To create this type of dynamic menu, you must include a reference to a session state item in the breadcrumb's short name or long name. For example:

&COMPANY_NAME.

Editing Breadcrumbs

Once you create a breadcrumb, you can edit it on the Breadcrumbs page.

To edit a breadcrumb:

  1. Navigate to the Workspace home page.

  2. Click the Application Builder icon.

  3. Select an application.

  4. On the Application Builder home page, click Shared Components.

  5. Under Navigation, select Breadcrumbs.

    The Breadcrumbs page appears.

    You can change the appearance of the page by making a selection from the View list and clicking Go:

    • Icons (the default) displays each breadcrumb as a large icon. To edit a breadcrumb, click the icon.

    • Details displays each breadcrumb as a line in a report. To edit a breadcrumb, click the appropriate name.

  6. Select a breadcrumb.

  7. Select the appropriate breadcrumb entry name.

    The Create/Edit Breadcrumb Entry page appears.

  8. Edit the appropriate attributes.

    Tip:

    To learn more about a specific item on a page, click the item label. When Help is available, the item label changes to red when you pass your cursor over it and the cursor changes to an arrow and question mark. See "About Field-Level Help".

  9. (Optional) In the Breadcrumb Entry list on the right side of the page, you can select the Synchronize Breadcrumb With Page Name and Title option.

    Selecting this option makes changing the name of a page and breadcrumb a one-step process. The information you provide for breadcrumb names is used to update the referenced page name and title.

  10. Click Apply Changes.

About Navigation Alternatives

The Create/Edit Breadcrumb Entry page is divided into the following sections: Breadcrumb, Entry, Target, Conditions, Authorization and Configuration.

You can access these sections by scrolling down the page, or by clicking a navigation button at the top of the page. When you select a button at the top of the page, the selected section appears and all other sections are temporarily hidden. To view all sections of the page, click Show All.

Reparenting Breadcrumb Entries

You can select a new parent for selected breadcrumb entries on the Reparent Entries page.

To reparent breadcrumb entries:

  1. Navigate to the Breadcrumbs page:

    1. Navigate to the Workspace home page.

    2. Click the Application Builder icon.

    3. Select an application.

    4. On the Application Builder home page, click Shared Components.

    5. Under Navigation, select Breadcrumbs.

      The Breadcrumbs page appears.

  2. Select a breadcrumb.

    The Breadcrumb Entries page appears.

  3. From the Tasks list, click Reparent Entries within this Breadcrumb.

    The Reparent Entries page appears.

  4. Use the navigation bar to edit or filter the view:

    • Breadcrumb - Identify the breadcrumb you want to edit and click Go.

    • Start With - Make a selection to restrict your view to a subset of the breadcrumb hierarchy and click Go.

  5. From Reparent to, select the new parent.

  6. Select the breadcrumbs entries you want to move and click Reparent Checked Entries.

Accessing Breadcrumb Reports

You can view the Breadcrumb Utilization and Breadcrumb History reports by clicking the appropriate tab at the top of the Breadcrumbs page.

Note:

The Utilization and History buttons only appear after you create a breadcrumb.

To access the Breadcrumbs page:

  1. Navigate to the Workspace home page.

  2. Click the Application Builder icon.

  3. Select an application.

  4. On the Application Builder home page, click Shared Components.

  5. Under Navigation, select Breadcrumbs.

Breadcrumb Utilization Report

Click Utilization to access the Breadcrumb Utilization report. This report lists breadcrumbs by page. Click the page number to go to a specific page.

Breadcrumb History Report

Click History to view the Breadcrumb History report. This report lists recent changes to breadcrumbs.