Customizing Navigation Components

The navigation banner spans the top of the user interface and contains a number of configurable components that you can tailor to your specific needs. For example, you can customize branding (Branding Image), configure navigation menu bar options (Home Icon and Navigation Menu links), and links to other pages (Top links).

Use the core.xml configuration file to customize navigation user interface. The root-level element contains the following elements:

<default-home-page>
<top-links>
<nav-menu>

<navigation>
  <default-home-page>page://HomePage</default-home-page>
  <top-links>
    <top-link href='page://PendingActions' target='subFrame' label='Pending Actions'>
      <permission name="pending-actions.read" />
    </top-link>
    <top-link href='page://SendMail' target='subFrame' label='Contact Us'>
      <permission name="mail" />
    </top-link>
    <top-link href='page://ShoppingCart' label='Cart(s)'>
      <permission name="cart.read" />
    </top-link>
    <top-link href='page://AboutViewpoint' target='thisWindow' label='About'>
      <permission name="server.about" />
    </top-link>
    <top-link href='login?logout=true' target='thisWindow' label='Logout'>
      <permission name="nav.logout" />
    </top-link>
  </top-links>
  <nav-menu>
    <menu label="VPCs...">
      <link href='page://CreateVPC' target='subFrame' label='Request VPC'>
        <permission name="vpc.create" />
      </link>
      <link href='page://ManageEnvironment' target='thisWindow' label='Manage VPCs'>
      </link>
    </menu>
    <link href="page://ServerManagement" label="Servers">
      <permission name="node.read" />
    </link>
    <link href="page://Policies" label="Policies">
      <permission name="nav.policies" />
    </link>
  </nav-menu>
</navigation>

1.11.0.1 Default Home Page

To assign a default home page, specify a URL in the <default-home-page> element that adheres to the Viewpoint URL page protocol. For example, the create VPC page is a common home page and is defined in core.xml as follows:

<default-home-page>
  page://CreateVPC
</default-home-page>

1.11.0.2 Page IDs

To refer to a built-in Viewpoint page, use the page URL syntax. The list of available page IDs and associated pages follows (the IDs are case-insensitive):

AboutViewpoint - About page
CreateReservation - Create Reservations page
CreateVPC - Create VPC page
HomePage - Home page
JobManagement - Job Management page
NodeManagement - Node Management page
Policies- Manage Moab Policies
Reporting - Reporting page
ReservationManagement - Reservation Management page
SendMail - Contact Us page
ShoppingCart - Shows the active shopping cart
ShoppingCarts - The shopping carts table view (All shopping carts)
SubmitJob - Submit Job page
UserManagement - User Management page
VPCManagement - VPC Management page

1.11.0.3 Customizing the Navigation Top Links

With the <top-links> element, you can specify the links (using the child element <top-link>) that appear in the upper right corner. Additionally, you can associate images with these links.

Attributes and values for the <top-link> element are:

href- The href component works just like an HTML link. This can be a URL to an external source, or it can link to Viewpoint-specific functionality. Viewpoint-specific functionality is identified with the page:// protocol.
target - The target describes where the link should be opened. The possible values are:
- thisWindow - The thisWindow value exits the Viewpoint Web application and displays the new page in the same window as the link.
- newWindow - The newWindow value opens the link in a new window.
- subFrame - The subFrame value displays the link's contents in the Viewpoint application panel.
label - The label attribute is the display name of the menu or item.

Customizing the Navigation Menu

With the <nav-menu> element, you can specify the links (using the child element <link>) that appear in the navigation menu bar. The <nav-menu> element has the same attributes and values as the <top-link> element and also supports images the same way <top-link> does.

Below is an example of a menu with two menu items; CreateVPC and ManageVPC.

<nav-menu label='VPC'>
  <link href='page://CreateVPC' target='subFrame' label='Request...'>
  </link>
  <link href='page://ManageVPC' target='thisWindow' label='Manage...'>
  </link>
</nav-menu>

1.11.0.4 Permissions

Each link or menu item can be filtered based on a user's permissions when they log in. If the user does not have the permission associated with the navigation item, it is not displayed. To define a permission requirement, embed the <permission> element inside the associated item as a child element. You can assign arbitrary permissions so long as they are added to the user or role required. See Permissions for a list of predefined permissions.

In the example below, users that do not have the support.helpRequest permission cannot see the Support link. Users that do not have the manage.VPCs permission cannot see the ManageVPCs menu item. All users can see the Create VPC page.

<top-links>
  <top-link href='page://Support' target='subFrame' label='Support'>
    <permission name="support.helpRequest" />
</top-link>
<nav-menu label='VPC'>
  <link href='page://CreateVPC' target='subFrame' label='Request...'>
  </link>
  <link href='page://ManageVPC' target='thisWindow' label='Manage...'>
    <permission name="manage.VPCs" />
  </link>
</nav-menu>

1.11.0.5 Customizing Images and Icons

In the navigation banner, user interface components that are graphics or icons (with the exception of the menu bar) are configured using the <image> element. Additionally, you can customize the branding image and the home icon by replacing the original image files. To customize these user interface components, do the following:

To change the branding image, create an image that conforms to required dimensions (see table below), name it logo_small.png, and replace the original image at ${Viewpoint_webapps_directory}/Moab/images/logo_small.png.
To change the home icon, create an image that conforms to required dimensions (see table below), name it home.png, and replace the original image at ${Viewpoint_webapps_directory}/moab/images/home.png.
To associate an image with a link in the upper right corner, create an image that conforms to required dimensions (see table below) and specify the directory path to the image in the <image> element, which must be a child of the associated <top-link> element (this also applies to menus). For example:
```
<top-links>
  <top-link> href='page://SendMail' target='subFrame' label='Contact Us'>
    <image>moab/images/envelope.png</image>
  </top-link>
</top-links>
```

Use the following table as a reference for sizing and placement guidelines as you create components to customize your user interface. Height and width specifications are not configurable; Viewpoint will force resizing to predetermined specifications. For example, the branding image is presented in the user interface with pixel height and width dimensions of 64px x 128px. Keep these specifications in mind to preserve the appropriate aspect ratio.

Component Name	Height	Width	Position	Alignment
Branding Image	64px	128px	2px from top, 2px from left	centered vertically and horizontally
Navigation Menu Bar	24px	N/A	132px from left, 0px from bottom of navigation area, and 0 px from right	left
Home Icon	16px	16px	within the navigation menu bar	centered and anchored left
Top links	24px	N/A	0px from right, 0px from top	right
Top links Icon(s)	16px	16px	within the top links menu	left of top links item