Moab Viewpoint
Home Up Previous Next
Customizing Navigation Components

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).

Navigation components
Click to enlarge

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>

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>

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

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>

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>

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
Home Up Previous Next