(Example) Custom Menu in Page Builder

This example shows how to create a custom menu in Page Builder.

Background and Setup

Examples

Prerequisites

Good to Know

  • This example shows how to create a custom menu that uses an example from AgilePoint NX as the use case.
  • This is a simple example. It is not intended as a real-world use case.

Step 1: Create a Menu

How to Start

  1. Click Build Pages Build Pages icon.

    Build Pages
  2. Click Library Library icon.

    Home Page Library
  3. On the Library screen, do one of these:
    • In the left pane, click Menu > Ellipses (...) > Add Menu Add Menu icon.
    • In the left pane, click Menu.
      • In the right pane, click Add Menu Add Menu icon.
  1. On the Add New Menu, in the Display Name field, enter AgilePoint.

    Add New Menu screen
  2. Click Add.

    The AgilePoint menu is added to the Menu library.


    Custom Menu Item

Step 2: Create Menu Items

  1. Click Edit Edit icon.

    Menu Item screen
  2. Click Add Menu Item Add Menu Item icon.

    Add Menu Item option
  3. On the Add Menu Item screen, enter Products.

    When you click the Internal Name field, this field completes by default based on the value you enter in Display Text field. You can also specify your own internal name. After the internal name is created, you can not change it.


    Add Menu Item screen
  4. In the URL field, enter https://agilepoint.com/products/.

    Add Menu Item URL field
  5. Click Save and New.

    Save New Menu Item

    The menu item Products is added to the AgilePoint menu and Add Menu Item screen opens to add a new menu item.


    New Menu Item
  6. On the Add Menu Item screen, enter Pricing.

    Add Menu Item Pricing field
  7. In the URL field, enter https://agilepoint.com/pricing/.

    Add Menu Item URL
  8. Click Add.

    The menu item Pricing is added to the AgilePoint menu.


    Menu Item
  9. Click Commit Commit icon.

    Commit Menu Item

Step 3: Add Menu to a Custom Page

This example shows how to add a Horizontal Menu widget on a custom page.

How to Start

  1. Do one of these:
  2. On the Custom Page Design screen, click Add Row

    Custom Page screen
  3. Click Add Widget.

    Custom Page Design screen

Procedure

  1. On the Pick A Widget screen, click the Layout tab.

    Layout Tab
  2. On the Layout tab, click Horizontal Menu Horizontal Menu icon.

    Horizontal Menu Widget
  3. On the New Widget - Horizontal Menu screen, in the Menu list, select AgilePoint.

    New Widget  Horizontal Menu
  4. Click Add.

    The Page Builder shows a Horizontal Menu widget on the custom page.


    Custom Page screen
  5. Click Save.

    Save Custom Page

Step 4: Publish the Custom Page

  1. On the Custom Page Design screen, click Check In Check In icon.

    CheckIn Custom Page
  2. Click Publish.

    Publish Custom Page
  3. On the Publish screen, click Publish.

    Publish screen

    The Page Builder shows the published custom page screen.


    Published Custom Page screen

Step 5: View the Published Page

  1. On the right side of a page, click Ellipses (...) > Publish History Publish History icon

    Publish History
  2. On the Publish History screen, click Ellipses (…) > View View icon

    View Custom Page

    Your custom page opens in a new browser tab.

    This view gives the production URL for the page. You can copy this URL to use in other locations, such as menus or links on other web sites.


    Published Menu Item