Skip to main content

Sample reports

FA provides sample report .jsrexport packages you can download and import to your jsreport 3.x environment. You can use them as is or customize them to your liking.

Note that you first need to import the sample-sharedFolders.jsrexport file to your root directory in the jsreport UI. This file contains general components used by reports, such as their header and footer, as well as localizations for different languages.

Report structure

The root directory contains (after importing the sample-sharedFolders.jsrexport file to jsreport) several different files and folders.

  • The headerAndFooter report template file is reused in all PDF reports. Edit this template to change the header and footer of all PDF sample reports.

  • The img directory contains images used in reports, such as the logo in the header and footer template. You can, for example, replace the logo.png in this directory to change the picture in the header and footer of all sample reports.

  • The localization directory contains .json files with key-value pairs of language translations. The reports access these files to find a specific string for the chosen language/locale.

Then, for each sample report, there is a specific report directory. For example, the Positions report (see Positions report (PDF)) has its own directory. Like the root directly, the report directory contains several different files and folders.

  • The report template file, for example Positions (Sample), is where you define the report content (using HTML and Handlebars). The template file also embeds a script section. Most number and date formatting applied to the report is put directly into that embedded section.

  • The sampleData directory contains one or more .json files with dummy response data from FA's GraphQL API. These files can be used during development instead of live data. This way, you do not have to send an API request every time you want to run your report directly in the jsreport UI, and you can avoid hardcoding API request parameters.

  • The styles directory contains the report-specific .css file(s) with the CSS that is applied to the report template.

  • The scripts directory contains script (.js) files. These files are used, for example, to invoke FA's GraphQL API to fetch live data and potentially to transform the received data before it is put into the report. At least one script file in this directory is by default linked to the report template file, and will be invoked when the report is run.

In this section: