Rendering Reports

After installing the SDK, you can import the reportlayer module into your application and render reports from your templates.

React

If your application is built using React, follow these steps. If not, skip to the instructions for JavaScript below.

1. At the top of one of your React component source files, import the DocumentView component:

import { DocumentView } from 'reportlayer/react';

2. In your component's render function, add JSX for a DocumentView component:

<DocumentView apiKey="playground" template="demo:packingSlip" />

When you run your application, you should see the report rendering into the DocumentView component.

Other JavaScript (with modules)

(If you followed the React instructions above, skip this section.)

1. At the top of one of your source files, import the ReportLayer SDK:

import reportlayer from 'reportlayer';

2. Add a container <div> element somewhere in your application that the report can be rendered into. For now, give this element the ID "report".

<div id="report" />

3. Somewhere in your application code, add the following code to render the template into the container:

reportlayer.init('playground');

reportlayer.render('#report', 'demo:packingSlip');

API Keys

Template IDs

To find the ID of a template to use it in your application:

In the Playground

The template ID is the short string of letters and numbers near the end of the URL, between the last two slashes (but before the version number) when you have a template loaded in the Playground.

In ReportLayer

Click the Deployment tab when you have a template loaded in ReportLayer. The API Key and template ID are shown on the right side of the tab.