| title | Getting Started in AngularJS Reportdesigner Control | Syncfusion |
|---|---|
| description | Learn here about getting started with Syncfusion Essential AngularJS Reportedesigner Control, its elements, and more. |
| platform | AngularJS |
| control | Reportdesigner |
| documentation | ug |
| keywords | ejReportDesigner, ReportDesigner, js ReportDesigner |
This section explains briefly about how to create a ReportDesigner in your web application with AngularJS.
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,
The external AngularJS script file angular.min.js can also be accessed from the following installed location.
- (installed location)\Syncfusion\Essential Studio{{ site.releaseversion }}\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{{ site.releaseversion }}\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.
{% highlight html %}
<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>{% endhighlight %}
Create a new HTML file and include the below initial code.
{% highlight html %}
<title> </title>{% endhighlight %}
Add the scripts and CSS references to your HTML file within the head section as shown in the following code example.
{% highlight html %}
<title>Getting Started - Report Designer</title> <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> <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="http://cdn.syncfusion.com/js/assets/external/angular.min.js"></script> <script src="http://cdn.syncfusion.com/{{ site.releaseversion }}/js/web/ej.web.all.min.js"></script> <script src="http://cdn.syncfusion.com/{{ site.releaseversion }}/js/web/ej.reportdesigner.min.js"></script> <script src="http://cdn.syncfusion.com/{{ site.releaseversion }}/js/common/ej.widget.angular.min.js"></script>{% endhighlight %}
N> 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.
The ng-app directive explains the root element ( or 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.
{% highlight html %}
{% endhighlight %}
N> 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 sample application and the report designer control will render as like in the following screenshot.
