Introducing the embedded reports template application

It’s a pleasure to announce that the embedded reports app template is now available so, you can now create your own reports against the data saved inside Reviso.

Introduction

In Reviso, using the embedded apps concept, we give the possibility to create custom applications using arbitrary web technology; these applications will be shown within Reviso and will have access to all data of the current logged-in Reviso’s user.
The embedded reports template app follows this concept and allows you to create your custom reports in an easy way. Let’s see how.

How to get the application

To get the application, you have to clone this repository

git clone git@github.com:revisohq/embedded-reports-app.git
Once you have cloned the repository, follow the steps in the README.md file to install dependencies and run the application.

The corrispettivi report

Before we start to see how to create a report, let’s look at our Corrispettivi report to understand what are the main elements to create a new one.
If you navigate to /embedded-reports-template/EmbeddedReportsTemplate/client-app/app/corrispettivi
you find:

  • corrispettivi-report: is the angular component that defines the UI for the filters.
  • corrispettivi-content: is the angular component that defines the report body.
  • corrispettivi-data-provider: a typescript class that is responsible to collect the data from Reviso. These data will then be passed to the data-transformer.
  • data-transformer: a typescript class that is responsible to transform the data in a way that corrispettivi-content knows

How to create a new report

The main steps to create a new report, are the following:

  1. Create two angular components for the UI
  2. Create the endpoints to call Reviso’s REST endpoints
  3. Create a data provider to read and collect the data from your endpoints
  4. Create a data transformer
  5. Register the new report

How to create the report components

The first step for a new report is to create two angular components, one to define the filters UI, and the other one to define the report body UI. To do this:

  • Open the console and navigate to /embedded-reports-template/EmbeddedReportsTemplate
  • Run these two commands:
    ng generate component <filters-component-name>
    ng generate component <content-component-name>



As a result, you now have two new components in /embedded-reports-template/EmbeddedReportsTemplate/app

  • Open the .ts file of the component that define the filters. This component must implement
    the ReportBaseComponent
  • Open the .ts file of the component that define the content. This component must implement the ReportContentBaseComponent

Rest endpoint definition

Once you have defined your report components, you probably need to create your REST endpoint to read the data from Reviso.

  1. add your controller class in the Controllers folder to create your REST endpoint
  2. create an angular service to call the newly created endpoint. To do this:
    • navigate to /embedded-reports-template/EmbeddedReportsTemplate
    • run the command
      ng generate service services/you-service-name
  3. put the code to call the endpoint in the newly created service (as an example you can look at reviso-vat-accounts-service.ts).

DataProvider and DataTransformer definition

Now that we have the enpoint and the service to call that endpoint, we need to define a data provider. The data provider has the responsibility to collect the data using the services and pass these data to the DataTransformer. To create a data provider, simply create a typescript class that implements the IDataProvaider interface.
Once you have created the data provider, you can create the data transformer, a type script class that implements the IDataTransformer; this class has the responsibility to transform the data in a way that the content component can use to display them.

Let’s put it all together

Now that the main pieces are ready, let’s inform the main component about the newly created report.
If you navigate to /client-app/app, you find a component called reports-home. This is the main component for the reports app and has the responsibility to dynamically load the correct report.

  1. Open the report.service.ts under the /services folder
  2. Create a new Report istance providing all the necessary informations (see what we have done for the Corrispettivi report)
  3. Open the app-routing-module.ts under the /app folder and insert the path to open your report
  4. Run the app and insert the right url.

Leave a Reply