This documentation supports the 21.3 version of Smart Reporting.To view an earlier version, select the version from the Product version menu.

Customizing Smart Reporting headers and footers

You can integrate BMC Helix ITSM: Smart Reporting(Smart Reporting) into existing or new applications by removing or replacing the Header and Footer panels. Furthermore, you can build your own navigation into customized panels.

You can customize the standard Smart Reporting Header and Footer in the following ways:

  • Simple—Replace images and make changes to the CSS files used by the header or footer (without writing a panel). Generally, this option is used for quick "mock-ups" but not the final restyled product.
  • Complete—Write a custom file to replace the header or footer panel. This method requires more time and technical knowledge.

To mock up or temporarily change the header or footer

  1. Replace the following images in the SmartReportingInstallDir\appserver\webapps\ROOT\customimages directory with your customized versions:
    • header_logo.gif
    • logoFooter.png
  2. Clear your browser cache to see the new images.

Note

The images you want to use as replacements must have the same name as the files listed above. Because the images are in the customimages directory, they are not overwritten during an upgrade process.

To customize the header and footer

  1. Save your custom Header and Footer files in the SmartReportingInstallDir\appserver\webapps\ROOT directory.
    A sample header file (CustomHeaderExample.jsp) is available as a starting point in the SmartReportingInstallDir\development\examples directory. 

    The included HTML should be a fragment, suitable for including inline within another HTML page, rather than being a full HTML document itself. That is, the included HTML should not contain <HTML>, <HEAD>, or <BODY> tags. Any links inside the HTML are relative to the Smart Reporting page, so you should use absolute HTML links.

    Note

    Header provides only one link for a user to log out of the system. If you are replacing the header and you want to provide this link, include the following code:

    javascript:on_submit(‘logoff’);
  2. Save any required images in the SmartReportingInstallDir\appserver\webapps\ROOT\customimages directory.
    When replacing the standard images, use the same name so that the page can pick them up. Because the images are in the customimages directory, they are not overwritten during an upgrade process.
  3. Update any CSS files used, or add new ones to the SmartReportingInstallDir\appserver\webapps\ROOT\customcss directory.
  4. In Smart Reporting, navigate to Administration > Configuration.
  5. Click the Integration icon (IntegrationIcon.png).
  6. Specify the locations of your custom files.
    • On the Page Header panel, select Custom, and specify the URL of the file.
    • On the Page Footer panel, select Custom, and specify the URL of the file.
      The Custom URL is a link to the html fragment that is included at runtime every time a page is loaded. The link can be located on any server that the Smart Reporting service can access, but for best performance it should be hosted on the same server. In this example, the file is in the Smart Reporting ROOT directory (reportingInstallDir\appserver\webapps\ROOT\header.jsp and can then be found via header.jsp.
  7. Click Save.

Tip

To find your custom files more easily, create a new folder in SmartReportingInstallDir\appserver\webapps\ROOT and store them there.

 

Tip: For faster searching, add an asterisk to the end of your partial query. Example: cert*