Getting Started

27 Nov 20187 minutes to read

This section explains briefly about how to integrate a Report Designer control in your application with Angular.

Getting started with SystemJS

Run the below commands to clone the repository for SystemJS starter and install required dependency packages.

  • JAVASCRIPT
    • > git clone https://github.com/syncfusion/angular2-seeds/ -b systemjs

    > cd angular2-seeds

    > npm install

    The following steps describe how to add report designer control with above cloned seed application:

    Report Designer control source configuration and sample creation

    • Create reportdesigner folder inside src folder.

    • Create reportdesigner.component.html view file inside src/reportdesigner folder and render ejReportDesigner Angular component using the below code snippet.

  • HTML
    • <ej-reportdesigner></ej-reportdesigner>
    • Create reportdesigner.component.css file inside src/reportdesigner folder and you can add required styles in the reportdesigner.component.css file.
  • HTML
    • ej-reportdesigner {
    height: 550px;
    display: block;
}
    • Create reportdesigner.component.ts model file inside the folder src/reportdesigner and create sample component using the below code snippet.
  • TS
    • import { Component } from '@angular/core';

@Component({
    selector: 'ej-app',
    templateUrl: 'src/reportdesigner/reportdesigner.component.html',
    styleUrls: ['src/reportdesigner/reportdesigner.component.css']
})

export class ReportDesignerComponent {
        //..
}

    Configuring the routes for the router

    • Now, we are going to configure the route navigation link for created ReportDesigner sample in src/app.component.html file.
  • HTML
    • <div>
    <ul class="nav navbar-nav">
        . . . .
        <li><a data-toggle="collapse" data-target="#skeleton-navigation-navbar-collapse.in" href="#reportdesigner" [routerLink]="['/reportdesigner']">ReportDesigner </a></li>
    </ul>
</div>
<main>
    <router-outlet></router-outlet>
</main>
    • Import the ejReportDesigner sample component and define the route in src/app.routes.ts file.
  • JAVASCRIPT
    • import { Routes } from '@angular/router';
    . . . .
    import { ReportDesignerComponent } from './reportdesigner/reportdesigner.component';

    export const rootRouterConfig: Routes = [
        { path: '', redirectTo: 'home', pathMatch: 'full' },
        . . . .
        { path: 'reportdesigner', component: ReportDesignerComponent }
    ];
    • Import and declare the Syncfusion source component and ejReportDesigner sample component into app.module.ts as shown in the below code snippet.
  • JAVASCRIPT
    • import { NgModule, enableProdMode, ErrorHandler } from '@angular/core';
        . . . . . 
        import { EJAngular2Module } from 'ej-angular2';
        import { AppComponent } from './app.component';
        . . . . .
        import { ReportDesignerComponent } from './reportdesigner/reportdesigner.component';

        import { rootRouterConfig } from './app.routes';
        . . . . 
        @NgModule({
        imports: [BrowserModule, FormsModule, HttpModule, EJAngular2Module.forRoot(), RouterModule.forRoot(rootRouterConfig, { useHash: true })],
        declarations: [. . . . , ReportDesignerComponent],
        bootstrap: [AppComponent]
        })
        export class AppModule { }

    Add Scripts, Styles and Control in HTML Page

    Open the index.html file from the root path angular2-seeds/index.html and add the scripts and CSS references mentioned in the following code example.

  • HTML
    • <!DOCTYPE html>
<html>
<head> 
	<link href="node_modules/syncfusion-javascript/Content/ej/web/material/ej.reportdesigner.min.css" rel="stylesheet" />	
     <!--  code miror theme  -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/codemirror.min.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/addon/hint/show-hint.min.css" rel="stylesheet" />
    <!-- Angular related script references -->
    <!-- 1. Load libraries -->
         <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!--  code miror script  -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/codemirror.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/addon/hint/show-hint.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/addon/hint/sql-hint.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/mode/sql/sql.min.js" type="text/javascript"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
<ej-app>
		<div class="splash">
			<div class="message">Angular Syncfusion Components App</div>
			<div class="spinner"></div>
		</div>
	</ej-app>
</body>
</html>

    NOTE

    In the above code, ej.web.all.min.js script reference has been added for demonstration purpose. It is not recommended to use it during deployment, as it contains all the widgets, which results in deploying large script file. Instead, you can use [CSG](http://csg.syncfusion.com/# “”) utility to generate a custom script file with the required widgets for deployment purpose.

    Initialize and configure the control

    1.Add the below code snippet in reportdesigner.component.html page.

  • HTML
    • <ej-reportdesigner id="reportdesigner_Control" [serviceUrl] = "serviceUrl">
    </ej-reportdesigner>

    2.Open a typescript file reportdesigner.component.ts and add the below code snippet.

  • TS
    • import { Component } from '@angular/core';

    @Component({
        selector: 'ej-app',
        templateUrl: 'src/reportdesigner/reportdesigner.component.html',
        styleUrls: ['src/reportdesigner/reportdesigner.component.css']
    })

    export class ReportDesignerComponent {
        public serviceUrl: string;  

        constructor() {
            this.serviceUrl = 'https://js.syncfusion.com/demos/ejServices/api/ReportDesigner/';        
        }
    }

    In the report designer service url, need to mention the controller name of the reporting service. To create reporting service for report designer follow the steps explained in the following link Reporting Service .

    Run the Application

    Execute the below command in the command prompt.

    • npm start

    The application gets opened in the browser automatically and now, navigate to the ReportDesigner tab to view the ReportDesigner output on the page as displayed in the following screenshot.

    Report Designer Demo