Adding an Item to the Main Menu

Adding menu items involves three files:

The actionModel file for the menu item.
The properties file that labels the menu item.
An action file that handles events for the menu item.

This example adds a special menu item so that MyCompany employees can easily find their accounts reports.

1. Edit the file <js-webapp>/WEB-INF/actionModel-navigation.xml. Locate the actionModel for the View menu near the beginning of the file.
<!--context for view option on primary menu-->
<context name="main_view_mutton" test="!banUserRole">
  <selectAction labelKey="menu.repository">
    <option labelKey="" action="primaryNavModule.navigationOption"
      <option labelKey="NAV_028_ACCOUNTS" action="primaryNavModule.navigationOption" actionArgs="accounts"/>
2. Add a separator tag and an option tag for the menu item. The option tag has attributes to specify the label key and the name of the action to perform.
3. Open one of these files. The name of the properties file depends on your edition of JasperReports Server:

Commercial Editions:


Community Project:


The names of the keys are slightly different depending on the file. The following example is based on the contents of the commercial edition

NAV_004_LOGOUT=Log Out
NAV_027_SEARCH=Search Results
NAV_028_ACCOUNTS=MyCompany Accounts
4. Add the line for the NAV_028_ACCOUNTS property with an appropriate value, in this case MyCompany Accounts.
5. If you support multiple locales, add the same message key to the other language bundles.
6. Create a working directory where you can edit and optimize JavaScript files, as described in Customizing JavaScript Files.
7. Edit your working copy of the file <js-webapp>/scripts/bower_components/jrs-ui/src/actionModel.primaryNavigation.js.
var primaryNavModule = {
  NAVIGATION_MENU_CLASS : "menu vertical dropDown",
  ACTION_MODEL_TAG : "navigationActionModel",
  CONTEXT_POSTFIX : "_mutton",
  NAVIGATION_MUTTON_DOM_ID : "navigation_mutton",
  NAVIGATION_MENU_PARENT_DOM_ID : "navigationOptions",
  JSON : null,
    * Navigation paths used in the navigation menu
  navigationPaths : {
    library : {url : "flow.html", params : "_flowId=searchFlow"},
    home : {url : "home.html"},
    logOut : {url : "exituser.html"},
    search : {url : "flow.html", params : "_flowId=searchFlow&mode=search"},
    report : {url : "flow.html", params : "_flowId=searchFlow&mode=search&
    accounts : {url : "flow.html", params : "_flowId=searchFlow&mode=search&

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

8. Add a URL and parameters to load the target page of the new accounts menu item. In this example, the action is to perform a search for all reports with the word account in their name or description.
9. Optimize the JavaScript files in your working directory and copy the output back to JasperReports Server as described in Customizing JavaScript Files.
10. Save the modified files and reload the web app in the app server to see the changes (see Reloading the JasperReports Server Web App).
11. When the web app has reloaded, log into JasperReports Server as joeuser. You'll see the View > MyCompany Accounts menu item was created and, when you select it, it performs a customized search. The following figure shows both the menu item and the search results on the same page.

Custom Menu Items and Corresponding Action