Basics and Navigation for eRA Modules

For increased usability, eRA modules are gradually switching to a streamlined, modern, mobile-friendly look and feel for screens. The new look and the new navigation adjust dynamically for a variety of screen or font sizes, making your browsing experience more efficient on the device of your choice. New UI elements offer a consistent set of tools that you can use across modules. A new header and footer conserve space, leaving more work area for you to accomplish your tasks.

This topic explores the new navigation and UI elements that you might see on updated screens. All modules will eventually use the same framework for building the UI and navigation through screens. Older style screens will co-exist with updated screens during the transition to the new look and feel. Not all screen elements shown here will appear in all module.

Read this topic to learn about:

  • Header/footer for eRA modules
  • Navigation to and within modules
  • Actions column and how it might be replaced by an ellipsis (three-dot) dropdown in a row
  • Standard tools for tables

Header and Footer Navigation

A mixture of older and newer headers appears throughout screens in eRA Commons. During a period of transition, you will see both older and newer style screens in eRA Commons and eRA modules.

The new header and footer use symbols to save screen real estate and dynamically adjust to fit smaller screens.

Full eRA Header

The first icon from left is the Apps menu. The Apps menu shows all apps available to the currently logged-in user, shown below:

Expanded App Menu

Other Icons in Header

HHS Icon Links to the Department of Health and Human Services.

NIH Icon - Linked to grants.gov Link to grants.nih.gov.

Service Desk Icon Links to a general eRA Service Desk Support page.

Points of Contact Icon Links to eRA Points of Contact page.

Login Info Icon The person icon shows your login information, institution, a link to change your password, email preferences, and sign out link:

Login Info with Sign Out Link

Dynamic Header

Below, on a narrow screen, most items on the header are hidden, but they pop down when you click the grid icon in the upper right, circled below.

eRA Narrow Header

Narrow eRA Header Expanded

Redesigned Footer

The footer is clean and offers only essential information organized into columns.

eRA Footer

Navigating Within a Module

The module abbreviation, circled below left, lets you quickly see which module you are working in.

Module Name and Navigation

The sections of the modules are listed across the top, with the current section highlighted in gray, circled above.

To navigate to the screens available under each section, click the section name to see a dropdown that shows all screen names, as shown below.

Module Navigation with Dropdowns of Screen Names

If the screen size is small, all the app section names are collapsed under a three-line icon, shown below.

Module Navigation Collapsed when Narrow

When clicked, the three-line icon shows all module navigation in vertical form, below.

Module Navigation Expanded Vertically when Screen Narrowed

Actions Column Replaced by Ellipsis Menu

Actions that are available for each row in a table might be displayed under a three-dot ellipsis icon instead of an Actions column, as shown below. This happens if there are three or more actions to be displayed. If only one action item is listed, then the column will list that action as the header and have an ‘x’ in the body of the column.

Three-dot Ellipsis Menu Replaces Actions Menu

Standard Tools for Tables

Tables are sleeker with tools for showing the data you want to see.

Table tools and table heading

Filter

Entering filter text features instant filtering of the list as you type, with the number of found results updated as you type. The text you type in filter is highlighted in the table.

Filter Table Field with Number of Found Results

Selecting Rows/Bulk Action Tool

Use the bulk actions tool Bulk Actions Tool Lets you Show and Select Rows to select or deselect all, and to show selected rows only or all rows. Other bulk action tools might also let you mark or clear the checkboxes of all currently visible rows (such as those found by typing filter text).

Bulk Actions Tool Lets you Show and Select Rows

Check All marks all checkboxes regardless of the number of pages of records shown. In other words, if there are 10 pages of records available, with only the first page currently visible, Check All marks all enabled checkboxes on all pages. By contrast, Check All Visible marks only those enabled checkboxes on the currently visible page. See Page Navigation below for directions on how to navigate between pages of data.

Bulk Icon Tool example

Column Picker

Click to choose the visible columns in a table by selecting/deselecting their checkboxes. The column selection is only in effect until you navigate to another screen.

Column Picker icon

Expanded Column Picker

Column Sorting

Click column headers to sort by that column.

Columns in Tables Sort Indicators

Download and Print

Use the download tool Download Tool Lets you Print or Export to Excel or PDF, shown below, to export table data to Excel or PDF, or to print. Data from all columns is exported/printed even if only a subset of columns are visible.

Download Tool Lets you Print or Export to Excel or PDF

Rows Per Page

To help avoid scrolling, use the grid tool Grid Tool Lets You Choose Rows Displayed Per Page to specify how many table rows appear per page.

Grid Tool Lets You Choose Rows Displayed Per Page

Page Navigation

Navigate to each page of search results using the following tool:

Navigation Between Pages of Found Results

Instantly scroll back to the top of the page by clicking the Back to Top button, which appears on selected screens:

Back to Top button