ActiveReports 14
ActiveReports 14 User Guide / Concepts / ActiveReports Web Designer / Set up Web Designer
In This Topic
    Set up Web Designer
    In This Topic

    This document provides information on how to set up the Web Designer.

    General

    index.html
    Copy Code
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
    
        <title>ActiveReports Web Designer</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
    
        <!-- Mandatory -->
        <link rel="stylesheet" href="vendor/css/materialdesignicons.min.css" media="all" type="text/css" />
        <link rel="stylesheet" href="vendor/css/bootstrap.min.css" />
        <link rel="stylesheet" href="vendor/css/font-awesome.min.css">
        <link rel="stylesheet" href="vendor/css/ionicons.min.css">
        <link rel="stylesheet" href="vendor/css/fonts-googleapis.css" type="text/css">
        <!--------------->
    
        <!-- Optional: Open-Report/Save-Report-As Dialogs -->
        <link rel="stylesheet" href="file-dialog.css" />
    
        <!-- Optional: Preview Report -->
        <link rel="stylesheet" href="viewer-container.css" type="text/css">
    
        <!-- Optional: Add Data Sets using Data Set Picker -->
        <link rel="stylesheet" href="data-set-picker.css" />
    
        <!-- Optional: File View -->
        <link rel="stylesheet" href="file-view.css" />
    
        <!-- Optional: Add/Edit Data Sources using Data Source Editor -->
        <link rel="stylesheet" href="ar-datasource-editor.css" />
    
        <!-- Mandatory -->
        <link rel="stylesheet" href="web-designer.css" />
    
    </head>
    <body>
    
        <!-- Mandatory -->
        <script src="vendor/js/jquery.js"></script>
        <script src="vendor/js/bootstrap.min.js"></script>
        <!--------------->
    
        <!-- Optional: Open-Report/Save-Report-As Dialogs -->
        <script src="file-dialog.js"></script>
    
        <!-- Optional - Preview Report -->
        <script src="viewer-container.js"></script>
    
        <!-- Optional: Add Data Sets using Data Set Picker -->
        <script src="data-set-picker.js"></script>
    
        <!-- Optional: File View -->
        <script src="file-view.js"></script>
    
        <!-- Optional: Add/Edit Data Sources using Data Source Editor -->
        <script src="ar-datasource-editor.js"></script>
    
        <!-- Mandatory -->
        <script src="baseServerApi.js"></script>
        <script src="web-designer.js"></script>
        <!--------------->
    
        <!-- Mandatory -->
        <div id="designer-id" style="width: 100%; height: 100%;"></div>
    
        <!-- Optional: File View -->
        <div id="file-view-id" style="width: 100%; height: 100%; display: none;"></div>
    
        <!-- Optional - Preview Report -->
        <div id="viewer-container-id" style="width: 100%; height: 100%; display: none;"></div>
    
        <!-- Optional: Save-Report-As Dialog -->
        <div id="save-as-dialog-id" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: none;z-index: 9999;"></div>
    
        <!-- Optional: Open-Report Dialog -->
        <div id="open-dialog-id" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: none;z-index: 9999;"></div>
    
        <!-- Optional: Add Data Sets using Data Set Picker -->
        <div id="data-set-picker-dialog-id" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: none;z-index: 9999;background-color: #dedede;"></div>
    
        <!-- Optional: Add/Edit Data Sources using Data Source Editor -->
        <div id="data-source-editor-dialog-id"></div>
        <script>
    
            var designerId = 'designer-id';
            var viewerContainerId = 'viewer-container-id';
            var fileViewId = 'file-view-id';
            var saveAsDialogId = 'save-as-dialog-id';
            var openDialogId = 'open-dialog-id';
            var dataSetPickerDialogId = 'data-set-picker-dialog-id';
            var dataSourceEditorDialogId = 'data-source-editor-dialog-id';
    
            /* Implementation Details - See the section below. */
    
            /* Mandatory: Create Designer Options */
            var designerOptions = GrapeCity.ActiveReports.WebDesigner.createDesignerOptions(baseServerApi);
    
            /* Optional: Save Report */
            designerOptions.saveButton.visible = true;
            designerOptions.onSave = onSaveImpl;
    
            /* Optional: Save Report As */
            designerOptions.saveAsButton.visible = true;
            designerOptions.onSaveAs = onSaveAsImpl;
    
            /* Optional: Open Report */
            designerOptions.openButton.visible = true;
            designerOptions.onOpen = onOpenImpl;
    
            /* Optional: File View */
            designerOptions.openFileView = openFileViewImpl;
    
            /* Optional: Preview Report */
            designerOptions.openViewer = openViewerImpl;
    
            /* Optional: Add/Edit/Remove Data Sets */
            designerOptions.dataTab.dataSets.canModify = true;
    
            /* Optional: Add Data Sets using Data Set Picker */
            designerOptions.dataSetPicker.open = openDataSetPickerImpl;
            designerOptions.dataSetPicker.close = closeDataSetPickerImpl;
    
            /* Optional: Add/Edit/Remove Data Sources */
            designerOptions.dataTab.dataSources.canModify = true;
    
            /* Optional: Add/Edit Data Sources using Data Source Editor */
            ARDataSourceEditor.init(dataSourceEditorDialogId);
            designerOptions.openDataSourceEditor = openDataSourceEditorImpl;
    
            /* Mandatory: Render Designer Application */
            GrapeCity.ActiveReports.WebDesigner.renderApplication(designerId, designerOptions);
    
        </script>
    </body>
    
    </html>                   
    

    Implementation Details

    Supplementary Functions

    javascript
    Copy Code
    var dialogs = [
        saveAsDialogId, openDialogId,
        dataSetPickerDialogId, dataSourceEditorDialogId,
    ];
    
    var showElement = function (id) {
        if (!id) return;
        ($('#' + id)).css('display', 'block');
    };
    
    var hideElement = function (id) {
        if (!id) return;
        ($('#' + id)).css('display', 'none');
    };
    
    var hideDialogs = function () {
        dialogs.forEach(hideElement);
    }
    
    var showDesigner = function () {
        var info = GrapeCity.ActiveReports.WebDesigner.api.getReportInfo();
        var isDirty = GrapeCity.ActiveReports.WebDesigner.api.isReportDirty();
        document.title = info.name + (isDirty ? ' *' : '');
        showElement(designerId);
        GrapeCity.ActiveReports.WebDesigner.focus();
    };
    
    var makeOptions = function (baseOptions, additionalOptions) {
        return $.extend({}, baseOptions || {}, additionalOptions || {});
    }
    

    On Save Implementation

    javascript
    Copy Code
    /* Optional: Save Report */
    var onSaveImpl = function (options) {
        baseServerApi
            .saveExistingReport({ id: options.reportInfo.id, content: options.reportInfo.content })
            .then(function (saveResult) {
                options.onSuccess({
                    id: saveResult.Id,
                    name: options.reportInfo.name
                });
            });
    };
    

    On Save As Implementation

    javascript
    Copy Code
    /* Optional: Save Report As */
    var onSaveAsImpl = function (options) {
        showElement(saveAsDialogId);
    
        fileDialog.createSaveReportAsDialog(saveAsDialogId, {
            locale: options.locale,
    
            api: {
                getReportsList: function () {
                    return baseServerApi.getReportsList().then(function (reportsList) {
                        return reportsList.map(function (reportInfo) {
                            return { path: reportInfo.Name };
                        });
                    });
                },
                saveReport: function (saveOptions) {
                    return baseServerApi.saveNewReport({ name: saveOptions.path, content: options.reportInfo.content }).then(function (saveResult) {
                        return { id: saveResult.Id };
                    });
                },
            },
            reportInfo: {
                path: options.reportInfo.name,
            },
            onSuccess: function (saveResult) {
                hideElement(saveAsDialogId);
                options.onSuccess({ id: saveResult.id, name: saveResult.path });
            },
            onClose: function () {
                hideElement(saveAsDialogId);
                showDesigner();
            },
        });
    };
    

    On Open Implementation

    javascript
    Copy Code
    /* Optional: Open Report */
    var onOpenImpl = function (options) {
        showElement(openDialogId);
        var loadedReportList = null;
    
        fileDialog.createOpenReportDialog(openDialogId, {
            locale: options.locale,
    
            api: {
                getReportsList: function () {
                    return baseServerApi.getReportsList().then(function (reportsList) {
                        loadedReportList = reportsList;
                        return reportsList.map(function (reportInfo) {
                            return { path: reportInfo.Name };
                        });
                    });
                },
                openReport: function (openOptions) {
                    return new $.Deferred(function (def) {
                        var reportInfo = (loadedReportList || []).find(function (r) {
                            return r.Name === openOptions.path;
                        });
                        if (!reportInfo) return def.reject();
                        GrapeCity.ActiveReports.WebDesigner.api.openReport({
                            reportInfo: {
                                id: reportInfo._id,
                                name: reportInfo.Name,
                                permissions: ['all'],
                            },
                            onFinish: function () {
                                def.resolve({ id: reportInfo._id });
                            },
                        });
                    });
                },
            },
            onSuccess: function (openResult) {
                hideElement(openDialogId);
            },
            onClose: function () {
                hideElement(openDialogId);
                showDesigner();
            },
        });
    };
    

    Open File View Implementation  

    javascript
    Copy Code
    /* Optional: File View */
    var openFileViewImpl = function (options) {
        hideElement(designerId);
        showElement(fileViewId);
    
        var fileViewOptions = makeOptions(options, {
            onClose: function () {
                if (options.onClose) options.onClose();
                hideElement(fileViewId);
                showDesigner();
            },
            serverApi: {
                getReportsList: baseServerApi.getReportsList,
                getReportRevisions: baseServerApi.getReportRevisions,
                getDataSetsList: baseServerApi.getDataSetsList,
                getTemplatesList: baseServerApi.getTemplatesList,
                getTemplateContent: baseServerApi.getTemplateContent,
                getTemplateThumbnail: baseServerApi.getTemplateThumbnail,
            },
            createReport: GrapeCity.ActiveReports.WebDesigner.api.createReport,
            openReport: GrapeCity.ActiveReports.WebDesigner.api.openReport,
            saveReport: GrapeCity.ActiveReports.WebDesigner.api.saveReport,
            ignoreCase: true,
            delimiter: '/',
        });
    
        fileView.renderFileView(fileViewId, fileViewOptions);
    };
    

    Open Viewer Implementation 

    javascript
    Copy Code
    /* Optional: Preview Report */
    var openViewerImpl = function (options) {
        hideElement(designerId);
        showElement(viewerContainerId);
    
        var viewerContainerOptions = makeOptions(options, {
            makeViewerUrl: function () {
                var baseUrl = 'http://localhost:58723/preview/';
                var reportId = encodeURIComponent(options.reportInfo.id);
                var language = options.locale;
                return baseUrl + reportId + '?lng=' + language;
            },
        });
        viewerContainer.renderViewerContainer(viewerContainerId, viewerContainerOptions, function () {
            var isTemporaryReport = options.reportInfo.isTemporary;
            if (isTemporaryReport) {
                var reportId = options.reportInfo.id;
                baseServerApi.deleteTemporaryReport({ id: reportId });
            }
            hideElement(viewerContainerId);
            showDesigner();
        });
    };
    

    Open/Close Data Set Picker Implementation 

    javascript
    Copy Code
    /* Optional: Add Data Sets using Data Set Picker */
    var openDataSetPickerImpl = function (options) {
        var openInPanel = options.mode === 'Panel';
        if (!openInPanel) {
            hideDialogs();
            showElement(dataSetPickerDialogId);
        }
        dataSetPicker.renderDataSetPicker(openInPanel ? options.elementId : dataSetPickerDialogId, makeOptions(options, {
            serverApi: {
                getDataSetsList: baseServerApi.getDataSetsList,
                getDataSourcesAndDataSets: baseServerApi.getDataSourcesAndDataSets,
            },
            onClose: function () {
                options.onClose();
                if (!openInPanel) hideElement(dataSetPickerDialogId);
                dataSetPicker.dispose();
            }
        }));
    };
    var closeDataSetPickerImpl = function () {
        dataSetPicker.dispose();
    };
    

    Open Data Source Editor Implementation

    javascript
    Copy Code
    /* Optional: Add/Edit Data Sources using Data Source Editor */
    var openDataSourceEditorImpl = function (options) {
        ARDataSourceEditor.open(makeOptions(options, {
            serverApi: {
                testConnection: baseServerApi.testDataSourceConnection,
            },
        }));
    };