GrapeCity ActiveReports for .NET 14.0J
Webデザイナの作成
ActiveReportsユーザーガイド > 概念 > ActiveReports Webデザイナ > Webデザイナの作成

このトピックでは、Webデザイナの設定方法について説明します。

全般

index.html
コードのコピー
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Webデザイナ</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <!-- 必須 -->
    <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">
    <!--------------->
    <!-- 追加のオプション:レポートの保存/名前を付けて保存ダイアログ -->
    <link rel="stylesheet" href="file-dialog.css" />
    <!-- 追加のオプション:プレビュー -->
    <link rel="stylesheet" href="viewer-container.css" type="text/css">
    <!-- 追加のオプション:データセットの追加 -->
    <link rel="stylesheet" href="data-set-picker.css" />
    <!-- 追加のオプション:ファイルビュー -->
    <link rel="stylesheet" href="file-view.css" />
    <!-- 追加のオプション:データソースエディタを使用してデータソースの追加/編集 -->
    <link rel="stylesheet" href="ar-datasource-editor.css" />
    <!-- 必須 -->
    <link rel="stylesheet" href="web-designer.css" />
</head>
<body>
    <!-- 必須 -->
    <script src="vendor/js/jquery.js"></script>
    <script src="vendor/js/bootstrap.min.js"></script>
    <!--------------->
    <!-- 追加のオプション:開く/名前を付けて保存ダイアログ -->
    <script src="file-dialog.js"></script>
    <!-- 追加のオプション:プレビュー -->
    <script src="viewer-container.js"></script>
    <!-- 追加のオプション:データセットの追加 -->
    <script src="data-set-picker.js"></script>
    <!-- 追加のオプション:ファイルビュー -->
    <script src="file-view.js"></script>
    <!-- 追加のオプション:データソースエディタを使用してデータソースの追加/編集 -->
    <script src="ar-datasource-editor.js"></script>
    <!-- 必須 -->
    <script src="baseServerApi.js"></script>
    <script src="web-designer.js"></script>
    <!--------------->
    <!-- 必須 -->
    <div id="designer-id" style="width: 100%; height: 100%;"></div>
    <!-- 追加のオプション:ファイルビュー -->
    <div id="file-view-id" style="width: 100%; height: 100%; display: none;"></div>
    <!-- 追加のオプション:プレビュー -->
    <div id="viewer-container-id" style="width: 100%; height: 100%; display: none;"></div>
    <!-- 追加のオプション:名前を付けて保存ダイアログ -->
    <div id="save-as-dialog-id" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: none;z-index: 9999;"></div>
    <!-- 追加のオプション:開くダイアログ -->
    <div id="open-dialog-id" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: none;z-index: 9999;"></div>
    <!-- 追加のオプション:データセットの追加 -->
    <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>
    <!-- 追加のオプション:データソースエディタを使用してデータソースの追加/編集 -->
    <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';
        /* 実装方法については、以下の内容を参照してください。 */
        /* 必須:デザイナのオプションを作成します。 */
        var designerOptions = GrapeCity.ActiveReports.WebDesigner.createDesignerOptions(baseServerApi);
        /* 追加のオプション:保存 */
        designerOptions.saveButton.visible = true;
        designerOptions.onSave = onSaveImpl;
        /* 追加のオプション:名前を付けて保存 */
        designerOptions.saveAsButton.visible = true;
        designerOptions.onSaveAs = onSaveAsImpl;
        /* 追加のオプション:開くダイアログ */
        designerOptions.openButton.visible = true;
        designerOptions.onOpen = onOpenImpl;
        /* 追加のオプション:ファイルビュー */
        designerOptions.openFileView = openFileViewImpl;
        /* 追加のオプション:プレビュー */
        designerOptions.openViewer = openViewerImpl;
        /* 追加のオプション:データセットの追加/編集/削除 */
        designerOptions.dataTab.dataSets.canModify = true;
        /* 追加のオプション:データセットの追加 */
        designerOptions.dataSetPicker.open = openDataSetPickerImpl;
        designerOptions.dataSetPicker.close = closeDataSetPickerImpl;
        /* 追加のオプション:データソースの追加/編集/削除 */
        designerOptions.dataTab.dataSources.canModify = true;
        /* 追加のオプション:データソースエディタを使用してデータソースの追加/編集 */
        ARDataSourceEditor.init(dataSourceEditorDialogId);
        designerOptions.openDataSourceEditor = openDataSourceEditorImpl;
        /* 必須:デザイナアプリケーションを描画します。 */
        GrapeCity.ActiveReports.WebDesigner.renderApplication(designerId, designerOptions);
    </script>
</body>
</html>  

                

実装方法

共通関数

javascript
コードのコピー
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 || {});
}

onSave関数

javascript
コードのコピー
/* 追加のオプション:保存 */
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
            });
        });
};

onSaveAs関数

javascript
コードのコピー
/* 追加のオプション:名前を付けて保存 */
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();
        },
    });
};

onOpen関数

javascript
コードのコピー
/* 追加のオプション:開く */
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();
        },
    });
};

openFileView関数  

javascript
コードのコピー
/* 追加のオプション:ファイルビュー */
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);
};

openViewer関数 

javascript
コードのコピー
/* 追加のオプション:プレビュー */
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();
    });
};

openDataSetPicker関数/closeDataSetPicker関数 

javascript
コードのコピー
/* 追加のオプション:データセットの追加 */
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();
};

openDataSourceEditor関数

javascript
コードのコピー
/* 追加のオプション:データソースエディタを使用してデータソースの追加/編集 */
var openDataSourceEditorImpl = function (options) {
    ARDataSourceEditor.open(makeOptions(options, {
        serverApi: {
            testConnection: baseServerApi.testDataSourceConnection,
        },
    }));
};