Adding a New Main Menu

The following example shows two useful ways to add custom menu items:

You can add your own menus to the main menu bar.
You can add menu items to either existing or custom menus and link them outside the server.

This example creates a new menu named Accounts. It contains the internal search item created in the previous example and an external search with Google.

1. Edit the file <js-webapp>/WEB-INF/actionModel-navigation.xml. Add the menu definition with two menu items to the end of the file.
  <!--MyCompany custom menu-->
  <context name="main_custom_mutton" test="!banUserRole">
    <selectAction labelKey="NAV_801_ACCOUNTS">
      <option labelKey="NAV_802_SEARCH_IN"
      <option labelKey="NAV_803_SEARCH_OUT"

Each menu item has a label and an action defined, but no conditions. All users can access these menu items.

The internal search item is the same as the MyCompany Accounts example above. The external search item needs to have its own action, which you’ll define in another file.

2. Open the properties file for your edition of JasperReports Server:

Commercial Editions:


Community Project:


3. Add three simple labels, one for each key defined in the actionModel file.
NAV_802_SEARCH_IN=Accounts Reports
NAV_803_SEARCH_OUT=Google MyCompany Accounts
4. If you support multiple locales, add the same message key to the other language bundles.
5. To edit the JavaScript files, create a working directory where you can edit and optimize files, as described in Customizing JavaScript Files.
6. Edit your working copy of <js-webapp>/scripts/bower_components/jrs-ui/src/actionModel.primaryNavigation.js. Add the accounts navigation path if you didn’t do so in the previous procedure:
  navigationPaths : {
  accounts : {url : "flow.html", params : "_flowId=searchFlow&mode=search
  filterId=resourceTypeFilter&filterOption=resourceTypeFilter-reports&searchText=account"},<br />    ...

The accounts navigation path used in the previous example is the same as the one used in this example. It performs a search of reports in the repository containing the word account in their name or description.

Because of space limitations, the line is shown broken across two lines. In your application, make sure it is on a single line.

7. In the same copy of the <js-webapp>/scripts/bower_components/jrs-ui/src/actionModel.primaryNavigation.js file, add the external search handler function to the end of the file, outside of all other definitions:
var externalSearchHandler = function(qstring) {
  window.location.href = "" + qstring;
8. Optimize the JavaScript files and copy the output back to JasperReports Server as described in Customizing JavaScript Files.
9. Reload the web app in the app server to see the changes (see Reloading the JasperReports Server Web App).
10. When the web app has reloaded, log into JasperReports Server as joeuser. You'll see the new Accounts menu with Accounts > Google MyCompany opening a Google search. The following figure shows both the new menu and the external search results.

Creating a Custom Menu and an External Link

The menu shown is the one seen by joeuser. The actionModel automatically creates and places the new menu and its menu items. For jasperadmin who also sees the Manage menu, the Accounts menu would be closer to the metalinks; a second menu might overlap them. When creating custom menus whose visibility is based on roles, be sure to test different users to see the different UI layouts.

You may need to adjust other parts of the UI, such as the placement of the metalinks or search field. In this case you could use themes to avoid overlap with the search field.