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="menu.search" action="primaryNavModule.navigationOption" actionArgs="search"/> ... <separator/>[/code] <option labelKey="NAV_028_ACCOUNTS" action="primaryNavModule.navigationOption" actionArgs="accounts"/> </selectAction></context>...[/code] |
| 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: | <js-webapp>/WEB-INF/bundles/pro_nav_messages.properties |
Community Project: | <js-webapp>/WEB-INF/bundles/jasperserver_messages.properties |
The names of the keys are slightly different depending on the file. The following example is based on the contents of the commercial edition pro_nav_messages.properties.
| 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. |
| 7. | Edit your working copy of the file <js-webapp>/scripts/bower_components/jrs-ui/src/actionModel.primaryNavigation.js. |
|
/** * 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& filterId=resourceTypeFilter&filterOption=resourceTypeFilter-reports&searchText="}, accounts : {url : "flow.html", params : "_flowId=searchFlow&mode=search& filterId=resourceTypeFilter&filterOption=resourceTypeFilter-reports&searchText=account"}, ...[/code] |
![warning-icon-ns_28x28.png.f85f681cc013de41e8b07476b3955586.png](https://community.jaspersoft.com/applications/core/interface/js/spacer.png) | 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. |
| 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 |
![js-Customization-ViewAccounts.png.d8e417d2d7237a9d15469670124e00af.png](https://community.jaspersoft.com/applications/core/interface/js/spacer.png) |
Recommended Comments
There are no comments to display.