neo-reporting

Back to Index

This project contains the client code for the neo reporting server.

Adding Reporting to a Neo React App

Neo Reporting Client relies on Neo Reporting Server. Make sure you have added Neo Reporting Server to the backend services before adding the client side libraries.

• Add neo-reporting to packages

• Add this to your package.json file dependencies (use latest version number):

    "@singularsystems/neo-reporting": "0.10.15",

Add styles to App.tsx:

    import "@singularsystems/neo-reporting/styles/reporting.scss";
    import "@singularsystems/neo-canvas-grid/styles/";

Register the ReportingModule in AppSetup.ts:

    import { ReportingModule } from '@singularsystems/neo-reporting';

    appService.registerModule(ReportingModule); // Neo Reporting Module

Setup the Reporting Config

• Add a notification config property to your app config:

import { IReportingConfig } from '@singularsystems/neo-reporting';

...

    public get reportingConfig(): IReportingConfig {
        return {
            basePath: this.ReportingApi.BasePath,
            apiPath: this.ReportingApi.ApiPath,
            notificationDuration: 4,
            showPIIDownloadWarning: true,
        }
    }

• Customize the above code to your own applications needs. Make sure the base path and api path are setup correctly to point to your reporting api. showPIIDownloadWarning determines whether a warning popup is displayed before a file download. If this is left out, then the default behaviour is to display the warning.

• Register the config with DI:

import { ReportingTypes } from '@singularsystems/neo-reporting';

...

// Where AppConfig is your main app config model. You may have named this differently.
container.bindConfig(ReportingTypes.ConfigModel, (c: AppConfig) => c.reportingConfig);

Setup your projects own Reporting Module

• Neo Reporting needs reports. Reports will need to be added on server side. Check the server side readme.

• Once you have some server side reports, you will need to build client side versions of them to build the criteria controls and customize layouts.

• Depending on the size of your project you might be building a modular front end app, or a simple app (only suitable where very few modules). There are slight differences to where the following reporting services are added.

Modular App

• Add a Reporting folder to your src folder to contain the reporting module and add a new ReportingModule.ts file to that.

• Add a Services folder to your Reporting folder and add a ReportingService.ts and ReportingTypes.ts to that.

• Add a Reports folder to your Reporting folder. In this folder you should create a folder per report in your project as you need them.

• Add a Security folder to your Models folder and add a Roles.ts file to that. You should be able to use the Neo TS Tools to update your roles from your server side roles, don't customize this file, security always starts on server side.

• Add a ReportCategory.ts file to your Reports folder. This will be an enum of the report categories you want to support. Your reports can be grouped into these categories on the front end.

Your folder structure should look like the following:

Reporting/
├─ Models/
│  ├─ Security/
│  │  ├─ Roles.ts
├─ Reports/
│  ├─ ExampleReportName/
│  │  ├─ ExampleReport.ts
│  │  ├─ ExampleReportCriteria.ts
│  ├─ ReportCategory.ts
├─ Services/
│  ├─ ReportingService.ts
│  ├─ ReportingTypes.ts
├─ ReportingModule.ts

• Add the neo-reporting reporting types to your AppTypes in AppTypes.ts.

import { ReportingTypes } from '@singularsystems/neo-reporting';

...

const Types = {
    ApiClients: {
    },
    Services: {
        AppLayout: new AppServices.ServiceIdentifier<IAppLayout>("Services.AppLayout"),
        RouteService: new AppServices.ServiceIdentifier<RouteService>("Services.RouteService"),
    },
    Config: AppServices.NeoTypes.Config.ConfigModel.asType<AppConfig>(),
    Neo: NeoReactTypes,
    Reporting: ReportingTypes
};

• ReportingModule.ts example

// Reporting Module
// DI and Route Setup
import { Routing, AppServices } from '@singularsystems/neo-core';
import { ReportingTypes } from '@singularsystems/neo-reporting';

import { ReportingView, ReportView } from '@singularsystems/neo-reporting';

import ReportingService from './Services/ReportingService';

import * as Roles from '../Models/Security/Roles';

// Modules
const reportingAppModule = new AppServices.Module("Reporting", container => {

    // Services
    container.bind(ReportingTypes.Services.ReportingService).to(ReportingService).inSingletonScope();

});

const reportingTestModule = new AppServices.Module("Reporting", container => {
    // bind any test types here
});

// Routes
const ReportingRoute : Routing.IMenuRoute = 
    { name: "Reporting", path: "/reporting", component: ReportingView, role: Roles.General.Access };
    
const ReportRoute : Routing.IMenuRoute = 
    { name: "Report", path: "/report", component: ReportView, role: Roles.General.Access };
    
const ReportingPureRoutes = [ ReportRoute ];

export { 
    reportingAppModule, 
    reportingTestModule, 
    ReportingRoute,
    ReportingPureRoutes
} 

• ReportingTypes.ts example

• This makes it more convenient for your reports to use other services to build the criteria (such as lookup lists, caches etc.).

import AppTypes from '../../App/Types/AppTypes';

import { AppService } from '../../App/Services';

export { AppService, AppTypes as Types };

• ReportingService.ts: example

import { NeoModel } from '@singularsystems/neo-core';
import { ReportingServiceBase } from '@singularsystems/neo-reporting';
import { injectable } from 'inversify';

// Import reports
// import ExampleReport from '../Reports/ExampleReport/ExampleReport';

@injectable()
@NeoModel
export default class ReportingService extends ReportingServiceBase {

    public getReports() {
        return [
            //// Add your reports here
            // ExampleReport
        ];
    }
}

• ReportCategory.ts: example

export enum ReportCategory {
    ExampleReports = "Example",
    RandomCategory = "Random"
}

• Once your module exists, in your AppSetup.ts make sure you register it after you have registered the Neo reporting module (already done in the previous steps):

appService.registerModule(ReportingModule); // Neo Reporting Module
appService.registerModule(reportingAppModule); // ShareTrust Reporting Module

• Make sure you add the ReportingRoute to your menu routes and ReportingPureRoutes to your pure routes in RouteService.ts file (these can be imported from your ReportingModule).

Simple App

• Add a Reports folder to your Reporting folder. In this folder you should create a folder per report in your project as you need them.

• Add a Security folder to your Models folder and add a Roles.ts file to that. You should be able to use the Neo TS Tools to update your roles from your server side roles, don't customize this file, security always starts on server side.

• Add a ReportCategory.ts file to your Reports folder. This will be an enum of the report categories you want to support. Your reports can be grouped into these categories on the front end (see example above).

• Add a Services folder to your Reporting folder and add a ReportingService.ts.

Your folder structure should look like the following:

Reporting/
├─ Models/
│  ├─ Security/
│  │  ├─ Roles.ts
├─ Reports/
│  ├─ ExampleReportName/
│  │  ├─ ExampleReport.ts
│  │  ├─ ExampleReportCriteria.ts
│  ├─ ReportCategory.ts
├─ Services/
│  ├─ ReportingService.ts
├─ ReportingModule.ts

• Add the neo-reporting reporting types to your AppTypes in AppTypes.ts. Example:

import { ReportingTypes } from '@singularsystems/neo-reporting';

...

const Types = {
    ApiClients: {
    },
    Services: {
        AppLayout: new AppServices.ServiceIdentifier<IAppLayout>("Services.AppLayout"),
        RouteService: new AppServices.ServiceIdentifier<RouteService>("Services.RouteService"),
    },
    Config: AppServices.NeoTypes.Config.ConfigModel.asType<AppConfig>(),
    Neo: NeoReactTypes,
    Reporting: ReportingTypes
};

• Add the DI container binding for your ReportingService in AppModule.ts.

import ReportingService from './Services/ReportingService';
...

container.bind(Types.Reporting.Services.ReportingService).to(ReportingService).inSingletonScope();

• Make sure you add the routes for the reporting view to your menu routes and the report view to your pure routes). Example:

            {
                name: "Reporting", path: '/reporting', component: ReportingView, icon: "scroll", allowAnonymous: false
            }

            {
                path: "/reporting/report", component: ReportView, allowAnonymous: false
            },

• TODO - REST OF SETUP FOR OWN REPORTS.