Search results

Integrate the component with Report Server

You can integrate Report Designer with Report Server to create, edit, browse and publish reports using the Report Server built-in API service.

  • The Report Designer requires the serviceAuthorizationToken to perform the API actions with Syncfusion Report Server. Create a token for the user by using the server RESTful API, the following code is used to generate the token.

    <script type="text/javascript">
            $(function () {
                var dataValue = "";
                var apiRequest = new Object();
                apiRequest.password = "demo";
                apiRequest.userid = "guest";
                $.ajax({
                    type: "POST",
                    url: "https://reportserver.syncfusion.com/api/get-user-key",
                    data: apiRequest,
                    success: function (data) {
                        dataValue = data.Token;
                        var token = JSON.parse(dataValue);
                        // Report Designer initialization.
                    }
                });
            });
    </script>
  • Set the Syncfusion Report Server built-in service URL to the serviceUrl property and assign the created token to serviceAuthorizationToken property. You can use the following complete code in your HTML page.

    <script type="text/javascript">
            $(function () {
                var dataValue = "";
                var apiRequest = new Object();
                apiRequest.password = "demo";
                apiRequest.userid = "guest";
                $.ajax({
                    type: "POST",
                    url: "https://reportserver.syncfusion.com/api/get-user-key",
                    data: apiRequest,
                    success: function (data) {
                        dataValue = data.Token;
                        var token = JSON.parse(dataValue);
    
                        $("#designer").ejReportDesigner(
                            {
                                serviceUrl: "https://reportserver.syncfusion.com/ReportService/api/Designer",
                                serviceAuthorizationToken: token["token_type"] + " " + token["access_token"]
                            });
                    }
                });
            });
    </script>

Run the application

Build and run the application. Preview and edit the result using the following.

index.html
index.js
   <body style="overflow: hidden; position: static; margin: 0; padding: 0; height: 100%; width: 100%;">
    <div id="designer" style="position: absolute; height: 100%; width: 100%;"></div>
    <script src="index.js"></script>
   </body>
var isSubmit = true;
$(function () {
    $(document.body).bind('submit', $.proxy(formSubmit, this));
    $(window).bind('beforeunload', $.proxy(windowUnload, this));
    var dataValue = "";
    var apiRequest = new Object({
        password: "demo",
        userid: "guest"
    });

    $.ajax({
        type: "POST",
        url: "https://reportserver.syncfusion.com/api/get-user-key",
        data: apiRequest,
        success: function (data) {
            dataValue = data.Token;
            var token = JSON.parse(dataValue);

            $("#designer").ejReportDesigner(
                {
                    serviceUrl: "https://reportserver.syncfusion.com/ReportService/api/Designer",
                    serviceAuthorizationToken: token.token_type + " " + token.access_token
                });
        }
    });
});

function formSubmit(args) {
    isSubmit = false;
}

function windowUnload(args) {
    var designer = $('#designer').data('ejReportDesigner');
    if (designer && designer.hasReportChanges() && isSubmit) {
        return 'Changes you made may not be saved';
    }
    isSubmit = true;
}