Getting Started

21 Sep 20184 minutes to read

This section explains briefly about how to create a ReportDesigner in your web application with AngularJS.

Script/CSS Reference

To get start with the report designer control in AngularJS framework, the following list of external dependencies are mandatory which are available in the following link,

jQuery - 1.7.1 and later versions
jsRender - to render the templates
AngularJS

The external AngularJS script file angular.min.js can also be accessed from the following installed location.

(installed location)\Syncfusion\Essential Studio\21.1.35\JavaScript\assets\external

An another mandatory script is ej.widget.angular.min.js, which can be accessed from the below specified location.

(installed location)\Syncfusion\Essential Studio\21.1.35\JavaScript\assets\scripts\common

External Dependency - Code Mirror

In report designer to edit the SQL queries with syntax highlighter need to refer the below code mirror scripts and themes.

HTML

<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" />

<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>

Create a new HTML file and include the below initial code.

HTML

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" ng-app="syncApp">
    <head>
        <meta charset="utf-8" />
        <title> </title>
    </head>
    <body>
    </body>
</html>

Add the scripts and CSS references to your HTML file within the head section as shown in the following code example.

HTML

<head>
    <meta charset="utf-8" />
    <title>Getting Started - Report Designer</title>
    <link href="http://cdn.syncfusion.com/21.1.35/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
    <link href="http://cdn.syncfusion.com/21.1.35/js/web/flat-azure/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" />
    <!--  jquery script  -->
    <script src="http://cdn.syncfusion.com/js/assets/external/jquery-3.0.0.min.js"></script>
    <script src="http://cdn.syncfusion.com/js/assets/external/jsrender.min.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>
    <!-- Essential JS UI widget -->  
    <script src="http://cdn.syncfusion.com/js/assets/external/angular.min.js"></script>
    <script src="http://cdn.syncfusion.com/21.1.35/js/web/ej.web.all.min.js"></script>
    <script src="http://cdn.syncfusion.com/21.1.35/js/web/ej.reportdesigner.min.js"></script>
    <script src="http://cdn.syncfusion.com/21.1.35/js/common/ej.widget.angular.min.js"></script>
</head>

NOTE

In the above code, ej.web.all.min.js script reference has been added for demonstration purpose. It is not recommended to use this for deployment purpose, as its file size is larger since it contains all the widgets. Instead, you can use CSG utility to generate a custom script file with the required widgets for deployment purpose.

Initialize and configure the control

The ng-app directive explains the root element (<html> or <body> tags) of the application. You will assign a name to the ng-app directive, then you must create a module with that name. In this module, you will have to define your directives, services and configurations.

Add the following code example in the <body> tag in the HTML page. Set the desired serviceurl to ReportDesigner.

HTML

<div ng-controller="ReportDesignerController">
    <div id="container" ej-reportdesigner e-serviceurl="serviceurl" style="width:100%;height:680px;"> </div>
</div>

<script type="text/javascript">
    angular.module('syncApp', ['ejangular']).controller('ReportDesignerController', function ($scope, $interval) {
        $scope.serviceurl = "http://js.syncfusion.com/demos/ejservices/api/ReportDesigner"
    });
</script>

NOTE

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

Run the sample application and the report designer control will render as like in the following screenshot.