ActiveReports for .NET 18.0J
プラグインAPIの使用
ActiveReportsユーザーガイド > 概念 > ActiveReports Webデザイナ > プラグインAPIの使用

ActiveReportsは、WebデザイナコンポーネントをWebアプリケーションに統合するための豊富なAPIを提供します。プロジェクトにWebデザイナコンポーネントを埋め込むには、WebデザイナのAPIを使用します。APIを使用することで、レポートを作成、設計、および保存でき、デザイナのロケールの定義、レポートアイテムのデフォルト設定のカスタマイズ、データタブとプロパティタブの管理、アプリケーション情報の変更などの追加機能を使用できます。以下は、ES、UMD、TypeScriptモジュールの使用例を説明しています。

export const arWebDesigner

以下は、WebデザイナのESモジュールによってエクスポートされる主なオブジェクトについて説明します。

create()

説明：指定されたDesignerSettingsオブジェクトを使用して、指定されたselectorを持つ<div>要素にWebデザイナコンポーネントを描画します。

パラメータ（型）：

selector: string
settings: DesignerSettings

戻り値：Promise<DesignerAPI>

必須：はい

サンプルコード
コードのコピー 
import { arWebDesigner } from './web-designer.js';
import { createViewer } from './jsViewer.min.js';
let viewer = null;
arWebDesigner.create('#ar-web-designer', {
    rpx: { enabled: true },
    appBar: { openButton: { visible: true } },
    data: { dataSets: { canModify: true }, dataSources: { canModify: true } },
    preview: {
        openViewer: (options) => {
            if (viewer) {
                viewer.openReport(options.documentInfo.id);
                return;
            }
            viewer = createViewer({
                element: '#' + options.element,
                reportService: {
                    url: 'api/reporting',
                },
                reportID: options.documentInfo.id,
                settings: {
                    zoomType: 'FitPage'
                }
            });
        }
    }
});

apiof()

説明：以前に作成されたWebデザイナコンポーネントのインスタンスのDesignerApiを返します。

パラメータ（型）：

instanceId: string

戻り値：DesignerAPI

必須：はい

サンプルコード
コードのコピー 
import { arWebDesigner } from './web-designer.js';
const designer = arWebDesigner.apiOf('ar-web-designer');

addLanguage()

説明：Webデザイナのすべてのインスタンスに言語リソースを追加します。

パラメータ（型）：

lng: string
resources: ResourceBundle[]

戻り値：void

必須：はい

サンプルコード
コードのコピー 
import { arWebDesigner } from './web-designer.js';
arWebDesigner.addLanguage('en', [
             {
                "ns": "app",
                "lng": "en",
                "resources": {
                    "about": {
                        "textAppTitleCompact": "",
                    },
                }
            },
]);

destroy()

説明：デザイナアプリケーションを破棄します。

パラメータ（型）：

selector: string（デザイナコンテナセレクター）
instanceId: string（DesignerSettings.instanceIdを使用してデザイナが作成された場合にのみ使用）                

戻り値：void

必須：はい

サンプルコード
コードのコピー 
import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#container-1', { ...settings, instanceId: 'instance-1' });
arWebDesigner.destroy('#container-1', 'instance-1');

GlobalDesignerAPI

web-designer.jsモジュールによってエクスポートされるGrapeCity.ActiveReports.Designerオブジェクトのタイプ。

create()

説明：指定されたDesignerOptionsオブジェクトを使用して、designerElementIdIDを持つ<div>要素にWebデザイナコンポーネントを描画します。

パラメータ（型）：

selector: string
settings: DesignerSettings

戻り値：Promise<DesignerAPI>

必須：はい

サンプルコード
コードのコピー 
<html>
 <head>
     <title>ActiveReports WebDesigner</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/bootstrap.css" />
    <link rel="stylesheet" href="vendor/css/fonts-googleapis.css" type="text/css">
    <!-- オプション。ブラウザのデフォルト スタイルをリセットします。これにより、Web デザイナーがページ全体を占有できるようになります。 -->
     <style>
         html, body { width: 100%; height: 100%; margin: 0; padding: 0 }
     </style>
    <!-- Webビューワに必要です。-->
     <link rel="stylesheet" href="jsViewer.min.css" />
     <link rel="stylesheet" href="web-designer.css" />
 </head>
 <body>
     <!-- Webビューワに必要です。 -->
     <script src="jsViewer.min.js"></script>
     <script src="web-designer.js"></script>
    <!-- デザイナのために定義されたサイズが必要です。 -->
     <div id="ar-web-designer" style="width: 100%; height: 100%;"></div>
    <script>
         /* Webビューワに必要です。 */
         var viewer = null;
         GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
             appBar: {
           
                 saveButton: { visible: false },          
                 saveAsButton: { visible: false }
             },
            data: {
                 dataSets: { canModify: true },
                 dataSources: { canModify: true }
             },
            server: {
                 url: 'api'
             },
            preview: {
                 /* Webビューワに必要です。 */
                 openViewer: ({ element, documentInfo: { id: documentId } }) => {
                     if (viewer) {
                         viewer.openReport(documentId);
                         return;
                     }
                    viewer = GrapeCity.ActiveReports.JSViewer.create({
                         element: '#' + element,
                         reportID: documentId,
                         renderFormat: options.preferredFormat || 'html',
                         reportService: {
                             url: 'api/reporting'
                         },
                         settings: {
                             zoomType: 'FitPage'
                         }
                     });
                 }
             }
         });
     </script>
 </body>
 </html>

apiof()

説明：以前に作成されたWebデザイナコンポーネントのインスタンスのDesignerApiを返します。

パラメータ（型）：

instanceId: string

戻り値：DesignerAPI | undefined

必須：はい

サンプルコード
コードのコピー 
const designer = GrapeCity.ActiveReports.Designer.apiOf('ar-web-designer');

addLanguage()

説明：以前に作成されたWebデザイナコンポーネントのインスタンスのDesignerApiを返します。

パラメータ（型）：

lng: string
resources: ResourceBundle[]

戻り値：void

必須：はい

サンプルコード
コードのコピー 
GrapeCity.ActiveReports.Designer.addLanguage('en', [
            {
                "ns": "app",
                "lng": "en",
                "resources": {
                    "about": {
                        "textAppTitleCompact": "",
                    },
                }
            },
]);

destroy()

説明：デザイナアプリケーションを破棄します。

パラメータ（型）：

selector: string（デザイナコンテナセレクター）
instanceId: string（DesignerSettings.instanceIdを使用してデザイナが作成された場合にのみ使用）

戻り値：void

必須：はい

サンプルコード with instanceId
コードのコピー 
GrapeCity.ActiveReports.Designer.create('#container-1', { settings, instanceId: 'instance-1' });
GrapeCity.ActiveReports.Designer.destroy('#container-1', 'instance-1');
サンプルコード without instanceId
コードのコピー 
GrapeCity.ActiveReports.Designer.create('#container-2', settings);
GrapeCity.ActiveReports.Designer.destroy('#container-2');

ResourceBundle

特定のロケールのローカリゼーション リソース。

lng

説明：バンドルの言語を示します。

戻り値：string

必須：はい

ns

説明：バンドルの名前空間を示します。

戻り値：string

必須：はい

resources

説明：ローカリゼーション リソースを示します。

戻り値：Record<string, any>

必須：はい

DesignerAPI

GlobalDesignerAPIの関数によって返されるオブジェクトのタイプ。

app

説明：アプリケーションに関連するAPIが含まれます。

必須：はい

about

説明：アプリケーションの名前またはバージョンに関する情報が含まれます。

必須：はい

»help

説明：デザイナに関するオンラインヘルプの名前とurlが含まれます。

必須：はい

general

説明：一般的なドキュメントを示します。

戻り値：{ text: string; url: string }

必須：はい

 

transformation

説明：レポート項目の変換情報を示します。

戻り値：{ text（オプション）: string; url: string }

必須：はい

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
     rpx: { enabled: true },
     appBar: { openButton: { visible: true } }
             }).then((designer) => {
     designer.app.about.help.general.text = 'help text';
     designer.app.about.help.general.url = 'http://myurl';
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
     rpx: { enabled: true },
     appBar: { openButton: { visible: true } }
             }).then((designer) => {
     designer.app.about.help.general.text = 'help text';
     designer.app.about.help.general.url = 'http://myurl';
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
     rpx: { enabled: true },
     appBar: { openButton: { visible: true } }
             }).then((designer: DesignerAPI) => {
     designer.app.about.help.general.text = 'help text';
     designer.app.about.help.general.url = 'http://myurl';
});

»applicationTitle

説明：Webデザイナの［製品情報］ダイアログで使用するアプリケーション名を指定します。

戻り値：string

必須：はい

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    rpx: { enabled: true },
    appBar: { openButton: { visible: true } }
}).then((designer) => {
    designer.app.about.applicationTitle = 'Title text';
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    rpx: { enabled: true },
    appBar: { openButton: { visible: true } }
}).then((designer) => {
    designer.app.about.applicationTitle = 'Title text';
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    rpx: { enabled: true },
    appBar: { openButton: { visible: true } }
}).then((designer: DesignerAPI) => {
    designer.app.about.applicationTitle = 'Title text';
});

»applicationTitleCompact

説明：スペースが足りない場合は、アプリケーション名が省略して表示されます。

戻り値：string

必須：はい

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    rpx: { enabled: true },
    appBar: { openButton: { visible: true } }
}).then((designer) => {
    designer.app.about.applicationTitleCompact = 'Example text';
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    rpx: { enabled: true },
    appBar: { openButton: { visible: true } }
}).then((designer) => {
    designer.app.about.applicationTitleCompact = 'Example text';
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    rpx: { enabled: true },
    appBar: { openButton: { visible: true } }
}).then((designer: DesignerAPI) => {
    designer.app.about.applicationTitleCompact = 'Example text';
});

»applicationVersion

説明：Webデザイナの［製品情報］ダイアログで使用するアプリケーションのバージョンを指定します。

戻り値：string

必須：はい

»coreVersion

説明：アプリケーションが基づいているデザイナのバージョンを指定します。

戻り値：string

必須：はい

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    rpx: { enabled: true },
    appBar: { openButton: { visible: true } }
}).then((designer) => {
    designer.app.about.coreVersion = '1.2.3';
    designer.app.about.applicationVersion = '3.4.5';
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    rpx: { enabled: true },
    appBar: { openButton: { visible: true } }
}).then((designer) => {
    designer.app.about.coreVersion = '1.2.3';
    designer.app.about.applicationVersion = '3.4.5';
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    rpx: { enabled: true },
    appBar: { openButton: { visible: true } }
}).then((designer: DesignerAPI) => {
    designer.app.about.coreVersion = '1.2.3';
    designer.app.about.applicationVersion = '3.4.5';
});

focus()

説明：Webデザイナにフォーカスを戻します。プラグイン要素または外部コンポーネントを開いたり閉じたりする場合は、フォーカスが失われます。Ctrl+Z（元に戻す）、Ctrl+Y（やり直し）などのショートカットキーを使い続けるために、フォーカスを戻すことが必要です。

戻り値：void

必須：はい

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    rpx: { enabled: true },
    appBar: { openButton: { visible: true } }
}).then((designer) => {
    designer.app.focus();
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    rpx: { enabled: true },
    appBar: { openButton: { visible: true } }
}).then((designer) => {
    designer.app.focus();
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    rpx: { enabled: true },
    appBar: { openButton: { visible: true } }
}).then((designer: DesignerAPI) => {
    designer.app.focus();
});

editor()

説明：レポートおよび選択されたアイテムで使用できる一般的なアクションに関する情報が含まれます。

必須：はい

フラグは、エディタが対応するアクションを実行できるかどうかを示します。これらのフラグの戻り値は「boolean」です。アクションは、フラグに関連付けられたアクションを示します。これらのアクションの戻り値は「void」です。

フラグ アクション

canUndo()

 undo()

canRedo()

 Redo()

canCut()

 Cut()

canPaste()

 Paste()

canCopy()

 Copy()

canDelete()

 Delete()

フラグを設定するサンプルコードと対応するアクションについては、次のセクションを参照してください。

»canUndo()/undo()

import { arWebDesigner } from './web-designer.js';
const designer = arWebDesigner.apiOf('ar-web-designer');
if (designer.app.editor.canUndo) designer.app.editor.undo();

const designer = GrapeCity.ActiveReports.Designer.apiOf('ar-web-designer');
if (designer.app.editor.canUndo) designer.app.editor.undo();

const designer = GrapeCity.ActiveReports.Designer.apiOf('ar-web-designer');
if (designer.app.editor.canUndo) designer.app.editor.undo();

»canRedo()/redo()

import { arWebDesigner } from './web-designer.js';
const designer = arWebDesigner.apiOf('ar-web-designer');
if (designer.app.editor.canRedo) designer.app.editor.redo();

const designer = GrapeCity.ActiveReports.Designer.apiOf('ar-web-designer');
if (designer.app.editor.canRedo) designer.app.editor.redo();

const designer = GrapeCity.ActiveReports.Designer.apiOf('ar-web-designer');
if (designer.app.editor.canRedo) designer.app.editor.redo();

»canCut()/cut()

import { arWebDesigner } from './web-designer.js';
const designer = arWebDesigner.apiOf('ar-web-designer');
if (designer.app.editor.canCut) designer.app.editor.cut();

const designer = GrapeCity.ActiveReports.Designer.apiOf('ar-web-designer');
if (designer.app.editor.canCut) designer.app.editor.cut();

const designer = GrapeCity.ActiveReports.Designer.apiOf('ar-web-designer');
if (designer.app.editor.canCut) designer.app.editor.cut();

»canCopy()/copy()

import { arWebDesigner } from './web-designer.js';
const designer = arWebDesigner.apiOf('ar-web-designer');
if (designer.app.editor.canCopy) designer.app.editor.copy();

const designer = GrapeCity.ActiveReports.Designer.apiOf('ar-web-designer');
if (designer.app.editor.canCopy) designer.app.editor.copy();

const designer = GrapeCity.ActiveReports.Designer.apiOf('ar-web-designer');
if (designer.app.editor.canCopy) designer.app.editor.copy();

»canPaste()/paste()

import { arWebDesigner } from './web-designer.js';
const designer = arWebDesigner.apiOf('ar-web-designer');
if (designer.app.editor.canPaste) designer.app.editor.paste();

const designer = GrapeCity.ActiveReports.Designer.apiOf('ar-web-designer');
if (designer.app.editor.canPaste) designer.app.editor.paste();

const designer = GrapeCity.ActiveReports.Designer.apiOf('ar-web-designer');
if (designer.app.editor.canPaste) designer.app.editor.paste();

»canDelete()/delete()

import { arWebDesigner } from './web-designer.js';
const designer = arWebDesigner.apiOf('ar-web-designer');
if (designer.app.editor.canDelete) designer.app.editor.delete();

const designer = GrapeCity.ActiveReports.Designer.apiOf('ar-web-designer');
if (designer.app.editor.canDelete) designer.app.editor.delete();

const designer = GrapeCity.ActiveReports.Designer.apiOf('ar-web-designer');
if (designer.app.editor.canDelete) designer.app.editor.delete();

panels

説明：メニューおよびサイドバーパネルへのアクセスが含まれます。panelsには、メニューとサイドバーの次のオブジェクトが含まれます。

menu

説明：メニューに関するAPI。

»open()

パラメータ（型）：
id: string

戻り値：void

»pin

戻り値：void

»close

戻り値：void

import { arWebDesigner } from './web-designer.js';
const designer = arWebDesigner.apiOf('ar-web-designer');
designer.app.panels.menu.open('document-explorer');

const designer = GrapeCity.ActiveReports.Designer.apiOf('ar-web-designer');
designer.app.panels.menu.open('document-explorer');

const designer = GrapeCity.ActiveReports.Designer.apiOf('ar-web-designer');
designer.app.panels.menu.open('document-explorer');

sidebar

説明：サイドバーに関するAPI。

»open()

パラメータ（型）：
id: string

戻り値：void

»close

戻り値：void

import { arWebDesigner } from './web-designer.js';
const designer = arWebDesigner.apiOf('ar-web-designer');
designer.app.panels.sidebar.open('propsTab');

const designer = GrapeCity.ActiveReports.Designer.apiOf('ar-web-designer');
designer.app.panels.sidebar.open('propsTab');

const designer = GrapeCity.ActiveReports.Designer.apiOf('ar-web-designer');
designer.app.panels.sidebar.open('propsTab');

documents

説明：このオブジェクトにはレポートを作成／開く／保存するための関数が含まれます。

戻り値：DocumentsAPI

必須：はい

notifications

説明：Webデザイナコンポーネントに組み込まれている通知システムを利用できるようにします。

戻り値：NotificationsAPI

必須：はい

DocumentsAPI

レポートの作成、編集、開く、保存、および保存されていないレポートに関する情報を取得するためのAPI。

hasUnsavedChanges()

説明：レポートに未保存の変更があるかどうかを示します。

戻り値：boolean

必須：はい

import { arWebDesigner } from './web-designer.js';
const designer = arWebDesigner.apiOf('ar-web-designer');
const val = designer.documents.hasUnsavedChanges(); if (val) console.log('編集中のレポートには未保存の変更があります。');

const designer = GrapeCity.ActiveReports.Designer.apiOf('ar-web-designer');
const val = designer.documents.hasUnsavedChanges();
if (val) console.log('編集中のレポートには未保存の変更があります。');

const designer = GrapeCity.ActiveReports.Designer.apiOf('ar-web-designer');
const val = designer.documents.hasUnsavedChanges();
if (val) console.log('Currently edited report has unsaved changes.');

isNew()

説明：レポートが少なくとも1回保存されたかどうかを示します。

戻り値：boolean

必須：はい

import { arWebDesigner } from './web-designer.js';
const designer = arWebDesigner.apiOf('ar-web-designer');
const val = designer.documents.isNew();
if (val) console.log('New document');

const designer = GrapeCity.ActiveReports.Designer.apiOf('ar-web-designer');
const val = designer.documents.isNew();
if (val) console.log('New document');

const designer = GrapeCity.ActiveReports.Designer.apiOf('ar-web-designer');
const val = designer.documents.isNew();
if (val) console.log('New document');

info()

説明：編集中のレポートに関する情報を返します。

戻り値：CurrentDocumentInfo      

必須：はい 

import { arWebDesigner } from './web-designer.js';
const designer = arWebDesigner.apiOf('ar-web-designer');
var reportInfo = designer.documents.info();
console.log(`Report "${reportInfo.name}" is currently edited.`);

const designer = GrapeCity.ActiveReports.Designer.apiOf('ar-web-designer');
var reportInfo = designer.documents.info();
console.log(`Report "${reportInfo.name}" レポートを編集しています。`);

const designer = GrapeCity.ActiveReports.Designer.apiOf('ar-web-designer');
var reportInfo = designer.documents.info();
console.log(`Report "${reportInfo.name}" レポートを編集しています。`);

create()

説明：指定したCreateReportOptionsオブジェクトを使用して、デザイナで編集する新しいレポートを作成します。

パラメータ（型）：

  1. options（オプション）: CreateDocumentOptions

戻り値：Promise<CreateDocumentInfo> 

必須：はい      

import { arWebDesigner } from './web-designer.js';
const designer = arWebDesigner.apiOf('ar-web-designer');
var reportInfo = designer.documents.create().then(function() {
console.log('An empty RDLX report is created.'); });

const designer = GrapeCity.ActiveReports.Designer.apiOf('ar-web-designer');
var reportInfo = designer.documents.create().then(function() {
console.log('空のRDLレポートが作成されました。');
});

const designer = GrapeCity.ActiveReports.Designer.apiOf('ar-web-designer');
var reportInfo = designer.documents.create().then(() => {
console.log('空のRDLレポートが作成されました。');
});

open()

説明：Webデザイナに［開く］ダイアログを表示します。

戻り値：void

必須：はい

import { arWebDesigner } from './web-designer.js';
var api = arWebDesigner.apiOf('designer-id');
api.documents.open();

var api = GrapeCity.ActiveReports.Designer.apiOf('designer-id');
api.documents.open();

var api = GrapeCity.ActiveReports.Designer.apiOf('designer-id');
api.documents.open();

openById()

説明：指定されたIDでWebデザイナコンポーネントに編集する既存のレポートを開きます。オプションで、レポート名とコンテンツを渡すことができます。そうしないと、サーバーから読み込まれます。

パラメータ（型）：

id: string
type: SupportedDocumentType
name（オプション）: string
content（オプション）: any

戻り値：Promise<OpenDocumentInfo>

必須：はい

import { arWebDesigner } from './web-designer.js';
var api = arWebDesigner.apiOf('designer-id');
api.documents.openById('MyReport.rdlx', { platform: 'rdlx', type: 'report', subType: 'msl'}).then(() => {
console.log('既存の「MyReport.rdlx」レポートを開きました。');
});
var reportContent = { Width: '6.5in', ReportSections: [{ Type: 'Continuous' as any, Name: 'ContinuousSection1', Body: { ReportItems: [ {Type: 'textbox', Name: 'TextBox1', Width: '5in', Height: '1in' } ] }}]};
api.documents.openById('NewReport.rdlx', { platform: 'rdlx', type: 'report', subType: 'msl'}, 'NewReport', reportContent).then(() => {
console.log('テキストボックスを持つ新しいレポートが作成されました。');
});

var api = GrapeCity.ActiveReports.Designer.apiOf('designer-id');
api.documents.openById('MyReport.rdlx', { platform: 'rdlx', type: 'report', subType: 'msl'}).then(() => {
console.log('既存の「MyReport.rdlx」レポートを開きました。');
});
var reportContent = { Width: '6.5in', ReportSections: [{ Type: 'Continuous' as any, Name: 'ContinuousSection1', Body: { ReportItems: [ {Type: 'textbox', Name: 'TextBox1', Width: '5in', Height: '1in' } ] }}]};
api.documents.openById('NewReport.rdlx', { platform: 'rdlx', type: 'report', subType: 'msl'}, 'NewReport', reportContent).then(() => {
console.log('テキストボックスを持つ新しいレポートが作成されました。');
});

const api = GrapeCity.ActiveReports.Designer.apiOf('designer-id');
api.documents.openById('MyReport.rdlx', { platform: 'rdlx', type: 'report', subType: 'msl'}).then(() => {
console.log('既存の「MyReport.rdlx」レポートを開きました。');
});
const reportContent = { Width: '6.5in', ReportSections: [{ Type: 'Continuous' as any, Name: 'ContinuousSection1', Body: { ReportItems: [ {Type: 'textbox', Name: 'TextBox1', Width: '5in', Height: '1in' } ] }}]};
api.documents.openById('NewReport.rdlx', { platform: 'rdlx', type: 'report', subType: 'msl'}, 'NewReport', reportContent).then(() => {
console.log('テキストボックスを持つ新しいレポートが作成されました。');
});

save()

説明：編集中のレポートをWebデザイナコンポーネントに保存します。レポートを新規作成した場合は、［名前を付けて保存］ダイアログを開きます。

戻り値：void

必須：はい

import { arWebDesigner } from './web-designer.js';
var api = arWebDesigner.apiOf('designer-id');
api.documents.save();

var api = GrapeCity.ActiveReports.Designer.apiOf('designer-id');
api.documents.save();

var api = GrapeCity.ActiveReports.Designer.apiOf('designer-id');
api.documents.save();

saveAs()

説明：Webデザイナで［名前を付けて保存］ダイアログボックスを開きます。

戻り値：void

必須：はい

import { arWebDesigner } from './web-designer.js';
var api = arWebDesigner.apiOf('designer-id');
api.documents.saveAs();

var api = GrapeCity.ActiveReports.Designer.apiOf('designer-id');
api.documents.saveAs();

var api = GrapeCity.ActiveReports.Designer.apiOf('designer-id');
api.documents.saveAs();

saveById()

説明：指定されたIDを使用して、編集中のレポートをWebデザイナコンポーネントに保存します。

パラメータ（型）：

戻り値：Promise<SaveDocumentInfo>

必須：はい

import { arWebDesigner } from './web-designer.js';
var api = arWebDesigner.apiOf('designer-id');
api.documents.saveById('MyReport.rdlx');

var api = GrapeCity.ActiveReports.Designer.apiOf('designer-id');
api.documents.saveById('MyReport.rdlx');

var api = GrapeCity.ActiveReports.Designer.apiOf('designer-id');
api.documents.saveById('MyReport.rdlx');

saveByName()

説明：指定された名前を使用して、編集中のレポートをWebデザイナコンポーネントに保存します。

パラメータ（型）：

name: string

戻り値：Promise<SaveDocumentInfo>

必須：はい

import { arWebDesigner } from './web-designer.js';
var api = arWebDesigner.apiOf('designer-id');
api.documents.saveByName('MyReport.rdlx');

var api = GrapeCity.ActiveReports.Designer.apiOf('designer-id');
api.documents.saveByName('MyReport.rdlx');

var api = GrapeCity.ActiveReports.Designer.apiOf('designer-id');
api.documents.saveByName('MyReport.rdlx');

RpxReportDocumentType

セクションレポート。

type RpxReportDocumentType = { platform: 'rpx'; type: 'report' };

RdlxFplReportDocumentType

ページレポート。

type RdlxFplReportDocumentType = { platform: 'rdlx'; type: 'report'; subType: 'fpl'};

RdlxMslReportDocumentType

複数レイアウトのRDLレポート。

type RdlxMslReportDocumentType = { platform: 'rdlx'; type: 'report'; subType: 'msl'};

RdlxMslDashboardDocumentType

ダッシュボード。

type RdlxMslDashboardDocumentType = { platform: 'rdlx'; type: 'report'; subType: 'msl'};

RdlxMasterMultiReportDocumentType

RDLレポート。

type RdlxMasterMultiReportDocumentType = { platform: 'rdlx'; type: 'master'; subType: 'msl'};

RdlxReportDocumentType

ページ、RDLレポート、またはダッシュボード。

有効な値
コードのコピー 
RdlxFplReportDocumentType | RdlxMslReportDocumentType | RdlxMslDashboardDocumentType | RdlxMasterMultiReportDocumentType;

SupportedDocumentType

Webデザイナでサポートされているレポートの種類。

有効な値
コードのコピー 
RpxReportDocumentType | RdlxReportDocumentType;

NotificationsAPI

ユーザーのアクション、エラー、警告などを通知するためのAPI。

send()

説明：キャプションとコンテンツを含む、指定されたレベルの通知を送信します。

パラメータ（型）：

level: 'info' | 'warning' | 'error'
caption: string
content（オプション）: string
  1. levelは通知レベルを指します。通知に使用される色とアイコンを決定します。
  2. captionは、通知のキャプションを指します。デフォルトでは、通知がポップアップするときに表示され、通知の詳細ビューでタイトルとして使用されます。
  3. contentは、通知内容を指します。通知の詳細が開いている場合にのみ表示されます。

戻り値：void

必須：はい

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
     storeUnsavedReport: false
}).then((api) => {
     api.notifications.send('info', 'My information');
});

const designer = GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
     storeUnsavedReport: false
}).then((api) => {
     api.notifications.send('info', 'My information');
});

var designer: DesignerAPI = GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
     storeUnsavedReport: false
 }).then((api: DesignerAPI) => {
     api.notifications.send('info', 'My information');
});

info()

説明：ユーザーのアクションが完了したときに通知するために使用できる、一般的な通知を送信します。

パラメータ（型）：

caption: string      
text (optional): string

戻り値：void

必須：はい

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
     storeUnsavedReport: false
}).then((api) => {
     api.notifications.info('Notification');
});

const designer = GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
     storeUnsavedReport: false
}).then((api) => {
     api.notifications.info('Notification');
});

var designer: DesignerAPI = GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
     storeUnsavedReport: false
 }).then((api: DesignerAPI) => {
     api.notifications.info('Notification');
});

error()

説明：エラー通知を送信します。

パラメータ（型）：

caption: string
errorText (optional): string

戻り値：void

必須：はい

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
     storeUnsavedReport: false
}).then((api) => {
     api.notifications.error("Application error");
});

const designer = GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
     storeUnsavedReport: false
}).then((api) => {
     api.notifications.error("Application error");
});

var designer: DesignerAPI = GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
     storeUnsavedReport: false
}).then((api: DesignerAPI) => {
     api.notifications.error("Application error");
});

warning()

説明：警告を送信します。

パラメータ（型）：

caption: string
warningText（オプション）: string

戻り値：void

必須：はい

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
     storeUnsavedReport: false
}).then((api) => {
     api.notifications.warning('Warning');
});

const designer = GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
     storeUnsavedReport: false
}).then((api) => {
     api.notifications.warning('Warning');
});

var designer: DesignerAPI = GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
     storeUnsavedReport: false
}).then((api: DesignerAPI) => {
     api.notifications.warning('Warning');
});

dismissAll()

説明：すべての通知を閉じます。

戻り値：void

必須：はい

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
     storeUnsavedReport: false
}).then((api) => {
     api.notifications.dismissAll();
});

const designer = GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
     storeUnsavedReport: false
}).then((api) => {
     api.notifications.dismissAll();
});

const designer = GrapeCity.ActiveReports.Designer.apiOf('ar-web-designer');
designer.notifications.dismissAll();

Font

label

戻り値：string

必須：はい

value

戻り値：string

必須：はい

FontHeader

header

戻り値：string

必須：はい

Color

R

戻り値：number

必須：はい

G

戻り値：number

必須：はい

B

戻り値：number

必須：はい

A

戻り値：number

必須：オプション

MenuCssIcon

type

戻り値：css

必須：はい

class

戻り値：string

必須：はい

MenuIcon

Webデザイナコンポーネントのメニューのアイコン。

Acceptable Value
コードのコピー 
MenuCssIcon

DesignerSettings

デザイナの設定に関するAPI。

instanceId

説明：Webデザイナインスタンスの一意の識別子を示します。1つのページに複数のWebデザイナインスタンスがある場合に役に立ちます。

戻り値：string

必須：はい

サンプルコード
コードのコピー 
const designer = GrapeCity.ActiveReports.Designer.apiOf('ar-web-designer');

language

説明：説明: Webデザイナコンポーネントに使用する言語を指定します。値が指定されていない場合は、ブラウザの設定に応じて言語が使用されます。Webデザイナは次の言語で利用できます：
'en'、'ja'、'zh'。

サンプルコード
コードのコピー 
designerSettings.language = 'zh';

戻り値：string

必須：はい

fonts

説明：デザイナのフォントプロパティのドロップダウンに表示されるフォントのリストを指定します。フォントが明示的に指定されていない場合、デフォルトのフォントリストが使用されます。
'Arial'、'Arial Black'、'Comic Sans MS'、'Courier New'、'Geneva'、'Georgia'、'Helvetica',  'Impact'、'Lucida Console'、'Meiryo'、'Meiryo UI'、'MingLiU'、'MingLiU-ExtB'、'MS Gothic'、'MS Mincho', 'MS PGothic'、'MS PMincho'、'MS Song'、'MS UI Gothic'、'NSimSun'、'Osaka'、'PMingLiU', 'PMingLiU-ExtB'、'SimSun'、'SimSun-ExtB'、'Song'、'Tahoma'、'Times New Roman'、'Trebuchet MS'、'Verdana'、'Yu Gothic'。

戻り値：(string | Font | FontHeader)[]

必須：はい

サンプルコード
コードのコピー 
GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
   fonts: [{ header: 'Questionable Choice' }, { label: 'Pretty Font', value: 'Comic Sans MS' }, { header: '' }, 'Arial', 'Courier New', 'Times New Roman']
});

themes

default

説明：適用されるデフォルトのテーマ。

戻り値：string

必須：はい

選択できる組み込みテーマは、activeReports、activeReportsDark、defaultDark、darkOled、highContrast、highContrastDarkです。

import { arWebDesigner } from './web-designer.js';
 arWebDesigner.create('#ar-web-designer', {
       themes: { default: 'defaultDark'}
 });

const designer = GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
      themes: { default: 'defaultDark'}
});

const designer = GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
      themes: { default: 'defaultDark'}
});

list

説明：ユーザーが選択できる利用可能なテーマの配列。組み込みのテーマ名を使用するか、テーマオブジェクトを渡すことができます。テーマオブジェクトは次を使用して作成できます。

戻り値：(string | Record<string, string | Color | boolean>)[];

必須：はい

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
     themes: { list: ['default','defaultDark']}
});

const designer = GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
      themes: { list: ['default','defaultDark']}
});

const designer = GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
      themes: { list: ['default','defaultDark']}
});

detectDarkTheme

説明：デザイナがシステム設定に基づいてダークテーマを自動的に検出して切り替えるかどうかを示します。デフォルトでは、「false」に設定されています。

戻り値：boolean

必須：はい

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
     themes: { detectDarkTheme: true }
});

const designer = GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
     themes: { detectDarkTheme: true }
});

const designer = GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
     themes: { detectDarkTheme: true }
});

picker

説明：利用可能なすべてのテーマをリストするテーマピッカーをUIに表示します。デフォルトでは、「true」に設定されています。

戻り値：boolean

必須：はい

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
     themes: { picker: { enabled: false }
});

const designer = GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
     themes: { picker: { enabled: false }
});

const designer = GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
     themes: { picker: { enabled: false }
});

dateFormats

説明：サポートされる日付形式のリストを指定します。カスタム日時形式文字列の詳細については、Microsoft社のドキュメントを参照してください。

戻り値：string[]

必須：はい

サンプルコード
コードのコピー 
GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
   dateFormats = ['yyyy/MM/dd HH:mm:ss', 'yyyy/MM/dd', 'HH:mm:ss', 'tt hh:mm:ss']
});

imageMimeTypes

説明：Webデザイナコンポーネントでサポートされている画像のMIMEタイプのリストを指定します。

戻り値：string[]

必須：はい

units

説明：デザイナで使用されるデフォルトの寸法の単位を指定します。デフォルトの単位はインチ（in）です。

戻り値：'in' | 'cm'

必須：オプション

サンプルコード
コードのコピー 
GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
  storeUserPreferences: false,
  units: 'cm'
});

lockLayout

説明：lockLayoutを有効にすると、既存のレポートアイテムの変更が可能です。新しいレポートアイテムを追加するや、既存のアイテムを削除するなどのレポートのレイアウトを変更することができません。デフォルトでは、無効になっています。

戻り値：boolean

必須：はい

サンプルコード
コードのコピー 
const designer = GrapeCity.ActiveReports.Designer.apiOf('ar-web-designer');
designer.lockLayout = 'true';

document

戻り値：{ id: string; type: SupportedDocumentType; };

必須：オプション

storeUnsavedReport

説明：storeUnsavedReportを有効にすると、ブラウザタブまたはブラウザ自体が誤って閉じられた場合、未保存レポートを復元します。storeUnsavedReportを無効にすると、未保存レポートを復元することができません。デフォルトでは、有効になっています。

戻り値：boolean

必須：はい

サンプルコード
コードのコピー 
GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
            storeUnsavedReport: false
});

storeUserPreferences

説明：storeUserPreferencesを有効にすると、ユーザー設定はブラウザに保存されます。storeUserPreferencesを無効にすると、ユーザー設定はブラウザに保存することができません。デフォルトでは、有効になっています。

戻り値：boolean

必須：はい

サンプルコード
コードのコピー 
GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
            storeUserPreferences: false
});

disableFocusTimer

説明：disableFocusTimerを有効にすると、フォーカスされた要素（ボタンなど）は、Tabキーが押された後、短時間だけ強調表示されます。disableFocusTimerを無効にすると、ボタンのフォーカスハイライトタイマーが無効になります。デフォルトでは、有効になっています。

戻り値：boolean

必須：はい

サンプルコード
コードのコピー 
GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
            disableFocusTimer: true
});

disableSystemClipboard

説明：システムクリップボードの使用を無効にします。デザイナインスタンス間のコピー＆ペーストは、同じドメインの同じブラウザでのみ機能します。

戻り値：boolean

必須：はい

サンプルコード
コードのコピー 
GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
            disableSystemClipboard: true
});

filterProperties

説明：記述子を再配置する必要がある順序でフィルタリングされた記述子の配列を返します。

パラメータ（型）：

descriptors: PropertyDescriptor[]

item: Record<string, any>

platform: 'rdlx' | 'rpx'

戻り値：PropertyDescriptor[]

必須：オプション

サンプルコード
コードのコピー 
GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
  filterProperties: (descriptors, item, platform) => platform === 'rpx' ? [] : descriptors,
});

editor

説明：Webデザイナコンポーネントのエディタで使用できる設定。

必須：はい

rulers

説明：Webデザイナコンポーネントのルーラーの設定を指定します。

必須：オプション

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
   editor: {
       rulers: {
           visible: true
       }
   }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
   editor: {
       rulers: {
           visible: true
       }
   }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
   editor: {
       rulers: {
           visible: true
       }
   }
});

»visible

説明：Webデザイナにルーラーを表示するかどうかを指定します。デフォルトでは表示されません。

戻り値：boolean

必須：はい

»snapStep

説明：snapStepの値を指定します。デフォルト値は{ in: 0.25, cm: 0.5 }です。

戻り値：{ in: number; cm: number; };

必須：オプション

gridSize

説明：Webデザイナの［グリッドの幅］エディタのサイズを指定します。デフォルトでは、「in」が使用されます。

戻り値：string

必須：オプション

showGrid

説明：Webデザイナの［グリッド］トグルを表示するかどうかを指定します。

戻り値：boolean

必須：オプション

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
   editor: {
       showGrid: true
   }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
   editor: {
       showGrid: true
   }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
   editor: {
       showGrid: true
   }
});

snapToGrid

説明：ステータスバーに［グリッドにスナップ］オプションを表示するかどうかを指定します。デフォルト値は、falseです。

戻り値：boolean

必須：オプション

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
   editor: {
       snapToGrid: true
   }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
   editor: {
       snapToGrid: true
   }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
   editor: {
       snapToGrid: true
   }
});

snapToGuides

説明：ステータスバーに［ガイドにスナップ］オプションを表示するかどうかを指定します。デフォルト値は、falseです。

戻り値：boolean

必須：オプション

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer',
   editor: {
       snapToGuides: true
   }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
   editor: {
       snapToGuides: true
   }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
   editor: {
       snapToGuides: true
   }
});

appBar

説明：Webデザイナでメニューバーの設定。

必須：はい

visible

説明：Webデザイナでメニューバーを表示するかどうかを指定します。デフォルトでは表示されます。

戻り値：boolean

必須：はい

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
        appBar: {
            visible: false
        }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
        appBar: {
            visible: false
        }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
        appBar: {
            visible: false
        }
});

saveButton

説明：Webデザイナの［保存］ボタンの設定。

必須：はい

»visible

説明：［保存］ボタンを表示するかどうかを指定します。デフォルトでは表示されません。

戻り値：boolean

必須：はい

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    appBar: {
        saveButton: { visible: true }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    appBar: {
        saveButton: { visible: true }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    appBar: {
        saveButton: { visible: true }
    }
});

saveAsButton

説明：Webデザイの［名前を付けて保存］ボタンの設定。

必須：はい

»visible

説明：［名前を付けて保存］ボタンを表示するかどうかを指定します。デフォルトでは表示されません。

戻り値：boolean

必須：はい

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
        appBar: {
           saveAsButton: { visible: false}
        }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    appBar: {
        saveAsButton: { visible: false}
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    appBar: {
        saveAsButton: { visible: false}
    }
});

openButton

説明：Webデザイナの［開く］ボタンの設定。

必須：はい

»visible

説明：［開く］ボタンを表示するかどうかを指定します。デフォルトでは表示されません。

戻り値：boolean

必須：はい

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    appBar: {
        openButton: { visible: true }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    appBar: {
        openButton: { visible: true }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    appBar: {
        openButton: { visible: true }
    }
});

insertTab

説明：Webデザイナの［挿入］タブの設定。

必須：はい

»visible

説明：リボンの［挿入］タブを表示するかどうかを指定します。ツールボックスと挿入タブを交換できます。デフォルトでは表示されません。

戻り値：boolean

必須：はい

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    appBar: {
        insertTab: { visible: false}
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    appBar: {
        insertTab: { visible: false}
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    appBar: {
        insertTab: { visible: false}
    }
});

homeTab

説明：Webデザイナの［ホーム］タブの設定。

必須：はい

»visible

説明：Webデザイナのアプリケーションバーに［ホーム］タブを表示するかどうかを指定します。デフォルトでは表示されます。

戻り値：boolean

必須：はい

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    appBar: {
        homeTab: { visible: false}
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    appBar: {
        homeTab: { visible: false}
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    appBar: {
        homeTab: { visible: false}
    }
});

contextActionsTab

説明：Webデザイナの［レポート］タブの設定。

必須：はい

»visible

説明：Webデザイナのアプリケーションバーに［レポート］タブを表示するかどうかを指定します。デフォルトでは表示されます。

戻り値：boolean

必須：はい

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    appBar: {
        contextActionsTab: { visible: false}
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    appBar: {
        contextActionsTab: { visible: false}
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    appBar: {
        contextActionsTab: { visible: false}
    }
});

parametersTab

説明：Webデザイナの［パラメータ］タブの設定。

必須：はい

»visible

説明：Webデザイナのアプリケーションバーに［パラメータ］タブを表示するかどうかを指定します。デフォルトでは表示されます。

戻り値：boolean

必須：はい

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    appBar: {
        parametersTab: { visible: false}
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    appBar: {
        parametersTab: { visible: false}
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    appBar: {
        parametersTab: { visible: false}
    }
});

scriptTab

説明：Webデザイナの［スクリプト］タブの設定。

必須：はい

»visible

説明：Webデザイナのアプリケーションバーに［スクリプト］タブを表示するかどうかを指定します。デフォルトでは表示されます。

戻り値：boolean

必須：はい

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    appBar: {
        scriptTab: { visible: false}
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    appBar: {
        scriptTab: { visible: false}
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    appBar: {
        scriptTab: { visible: false}
    }
});

toolBar

説明：Webデザイナのツールバーの設定。

必須：はい

visible

説明：Webデザイナのアプリケーションバーにツールバーを表示するかどうかを指定します。デフォルトでは表示されます。

戻り値：boolean

必須：はい

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    toolBar: { visible: false }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    toolBar: { visible: false }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    toolBar: { visible: false }
});

menu

説明：Webデザイナコンポーネントのメニューの設定。

必須：はい

visible

説明：Webデザイナコンポーネントでメインメニューを表示するかどうかを指定します。デフォルトでは表示されます。

戻り値：boolean

必須：はい

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    menu: { visible: false }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    menu: { visible: false }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    menu: { visible: false }
});

logo

説明：Webデザイナのメニューのカスタムロゴの設定を指定します。

必須：オプション

»visible

説明：メニューにロゴを表示するかどうかを指定します。

必須：オプション

戻り値：Boolean

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    menu: {
        logo: { visible: false }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
   menu: {
       logo: { visible: false }
   }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
   menu: {
       logo: { visible: false }
   }
});

»custom

説明：メニューに表示されるカスタムロゴを設定します。

必須：オプション

戻り値：MenuIcon

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    menu: {
       logo: { custom: { type: 'css', class: 'my-custom-icon' }; }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
   menu: {
      logo: { custom: { type: 'css', class: 'my-custom-icon' }; }
   }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
   menu: {
      logo: { custom: { type: 'css', class: 'my-custom-icon' }; }
   }
});

toolBox

説明：Webデザイナの［ツールボックス］の設定。

必須：はい

»visible

説明：左側にある［ツールボックス］を表示するかどうかを指定します。デフォルトでは表示されます。

戻り値：boolean

必須：はい

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
  menu: {
     toolBox: { visible: false }
  }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
  menu: {
     toolBox: { visible: false }
  }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
  menu: {
     toolBox: { visible: false }
  }
});

documentExplorer

説明：Webデザイナの［エクスプローラ］ボタンの設定。

必須：はい

»visible

説明：［エクスプローラ］ボタンを表示するかどうかを指定します。デフォルトでは表示されます。

戻り値：boolean

必須：はい

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
  menu: {
      documentExplorer: { visible: false }
  }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
  menu: {
      documentExplorer: { visible: false }
  }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
  menu: {
      documentExplorer: { visible: false }
  }
});

groupEditor

説明：Webデザイナコンポーネントの［グループエディタ］ボタンの設定。

必須：はい

»visible

説明：［グループエディタ］ボタンを表示するかどうかを指定します。デフォルトでは表示されます。

戻り値：boolean

必須：はい

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    menu: {
       groupEditor: { visible: false }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
   menu: {
      groupEditor: { visible: false }
  }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    menu: {
      groupEditor: { visible: false }
   }
});

layerEditor

説明：Webデザイナコンポーネントの［レイヤー］ボタンの設定。

必須：はい

»visible

説明：［レイヤー］ボタンを表示するかどうかを指定します。デフォルトでは表示されます。

戻り値：boolean

必須：はい

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
  menu: {
      layerEditor: { visible: false }
  }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
  menu: {
      layerEditor: { visible: false }
  }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
  menu: {
      layerEditor: { visible: false }
  }
});

statusBar

説明：Webデザイナコンポーネントのステータスバーの設定。

必須：はい

visible

説明：ステータスバーを表示するかどうかを指定します。デフォルトでは表示されます。

戻り値：boolean

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
  statusBar: { visible: false }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
  statusBar: { visible: false }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
   statusBar: { visible: false }
});

toggleUnitsButton

説明：Webデザイナの［寸法の単位］ボタンの設定。

必須：はい

»visible

説明：Webデザイナのステータスバーに［寸法の単位］ボタンを表示するかどうかを指定します。デフォルトでは表示されます。

戻り値：boolean

必須：はい

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    statusBar: {
        toggleUnitsButton: {
            visible: true
           }
       }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    statusBar: {
        toggleUnitsButton: {
            visible: true
        }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    statusBar: {
        toggleUnitsButton: {
            visible: true
        }
    }
});

toggleGridButton

説明：Webデザイナの［グリッド］トグルの設定。

必須：はい

»visible

説明：Webデザイナのステータスバーに［グリッド］トグルを表示するかどうかを指定します。デフォルトでは表示されます。

戻り値：boolean

必須：はい

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    statusBar: {
        toggleGridButton: {
            visible: true
        }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    statusBar: {
        toggleGridButton: {
            visible: true
        }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    statusBar: {
        toggleGridButton: {
            visible: true
        }
    }
});

gridSizeEditor

説明：Webデザイナの［グリッドの幅］エディタの設定。

必須：はい

»visible

説明：Webデザイナの［グリッドの幅］エディタを表示するかどうかを指定します。デフォルトで表示されます。

戻り値：boolean

必須：はい

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    statusBar: {
        gridSizeEditor: {
            visible: true
           }
       }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    statusBar: {
        gridSizeEditor: {
            visible: true
        }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    statusBar: {
        gridSizeEditor: {
            visible: true
        }
    }
});

rulersButton

説明：Webデザイナコンポーネントのルーラーボタンの設定。

必須：はい

»visible

説明：Webデザイナでルーラーボタンを表示するかどうかを指定します。デフォルトでは表示されます。

戻り値：boolean

必須：はい

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    statusBar: {
        rulersButton: {
            visible: true
           }
       }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    statusBar: {
        rulersButton: {
            visible: true
        }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    statusBar: {
        rulersButton: {
            visible: true
        }
    }
});

propertiesModeButton

説明：Webデザイナコンポーネントの［プロパティモード］ドロップダウンの設定。

必須：はい

»visible

説明：［プロパティモード］ドロップダウンを表示するかどうかを指定します。デフォルトでは表示されます。

戻り値：boolean

必須：はい

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    statusBar: {
        propertiesModeButton: {
            visible: true
           }
       }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    statusBar: {
        propertiesModeButton: {
            visible: true
        }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    statusBar: {
        propertiesModeButton: {
            visible: true
        }
    }
});

propertyGrid

説明：Webデザイナのプロパティグリッドの設定。

必須：はい

propertiesTab

説明：Webデザイナの［プロパティ］タブの設定。

必須：はい

»visible

説明：［プロパティ］タブを表示するかどうかを指定します。デフォルトでは表示されます。

戻り値：boolean

必須：オプション

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
   propertyGrid: {
       propertiesTab: {
           visible: true
       }
   }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
   propertyGrid: {
       propertiesTab: {
           visible: true
       }
   }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
   propertyGrid: {
       propertiesTab: {
           visible: true
       }
   }
});

mode

説明：使用可能なプロパティモードを指定します。

戻り値：'Basic' | 'Advanced'

必須：オプション

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
   propertyGrid: {
       propertiesTab: {
           mode: 'Basic'
       }
   }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
   propertyGrid: {
       propertiesTab: {
           mode: 'Basic'
       }
   }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
   propertyGrid: {
       propertiesTab: {
           mode: 'Basic'
       }
   }
});

sort

説明：Webデザイナで使用可能なプロパティの並べ替え（ソート）方法を指定します。

戻り値：'categorized' | 'alphabetical'

必須：オプション

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
   propertyGrid: {
       propertiesTab: {
           sort: 'alphabetical'
       }
   }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
   propertyGrid: {
       propertiesTab: {
           sort: 'alphabetical'
       }
   }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
   propertyGrid: {
       propertiesTab: {
           sort: 'alphabetical'
       }
   }
});

collapsibleCategories

説明：WebデザイナコンポーネントのcollapsibleCategoriesの設定。

Required: Optional

»enabled

説明：trueに設定すると、プロパティモードのカテゴリが折りたたみ可能になり、カテゴリとエディタの展開または折りたたみ状態が保存されます。

戻り値：boolean

必須：オプション

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
   propertyGrid: {
       propertiesTab: {
           collapsibleCategories: {
               enabled: false
           }
       }
   }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
   propertyGrid: {
       propertiesTab: {
            collapsibleCategories: {
                enabled: false
            }
       }
   }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
   propertyGrid: {
       collapsibleCategories: {
           enabled: false
       }
   }
});

saveExpandEditorsState

説明：WebデザイナコンポーネントのsaveExpandEditorsStateの設定。

Required: Optional

»enabled

説明：trueに設定すると、エディタの展開または折りたたみ状態が保存されます。

戻り値：boolean

必須：オプション

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
   propertyGrid: {
       propertiesTab: {
            saveExpandEditorsState: {
                enabled: false
            }
       }
   }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
   propertyGrid: {
       propertiesTab: {
            saveExpandEditorsState: {
                enabled: false
            }
       }
   }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
   propertyGrid: {
       propertiesTab: {
            saveExpandEditorsState: {
                enabled: false
            }
       }
   }
});

documents

説明：WebデザイナコンポーネントのドキュメントAPIの設定。

必須：はい

fileView

説明：Webデザイナコンポーネントの［ファイル］タブの設定。

必須：はい

»visible

説明：リボンの［ファイル］タブを表示するかどうかを指定します。デフォルトでは表示されます。

戻り値：boolean

必須：はい

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
        documents: {
            fileView: {
                visible: false,
            }
        }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
        documents: {
            fileView: {
                visible: false,
            }
        }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
        documents: {
            fileView: {
                visible: false,
            }
        }
   }
});

handlers

必須：はい

»onBeforeSave()

説明：非同期ハンドラであり、falseが返された場合は「保存」処理をキャンセルします。

パラメータ（型）：

  1. info: SaveDocumentInfo

戻り値：Promise<boolean>

必須：オプション

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
        documents: {
            fileView: {
        handlers: {
            onBeforeSave: (info) => {
                return new Promise((resolve, reject) => {
                    resolve(false);
                });
            }
        }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    documents: {
        handlers: {
            onBeforeSave: (info) => {
                return new Promise((resolve, reject) => {
                    resolve(false);
                });
            }
        }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    documents: {
        handlers: {
            onBeforeSave: (info: SaveDocumentInfo) => {
                return new Promise((resolve, reject) => {
                    resolve(false);
                });
            }
        }
    }
});

»onAfterSave()

説明：保存処理が完了したときに呼び出されるハンドラ。

パラメータ（型）：

  1. info: SaveDocumentInfo

戻り値：void

必須：オプション

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    documents: {
        handlers: {
            onAfterSave: (info) => {
                if (!info.success) throw new Error(`Report saving error`);
            }
        }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    documents: {
        handlers: {
            onAfterSave: (info) => {
                if (!info.success) throw new Error(`Report saving error`);
            }
        }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    documents: {
        handlers: {
            onAfterSave: (info) => {
                if (!info.success) throw new Error(`Report saving error`);
            }
        }
    }
});

»onBeforeOpen()

説明：非同期ハンドラであり、falseが返された場合は「開く」処理をキャンセルします。

戻り値：Promise<boolean>

必須：オプション

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    documents: {
       handlers: {
            onBeforeOpen: () => {
                return new Promise((resolve, reject) => {
                    resolve(false);
                });
            }
       }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    documents: {
       handlers: {
            onBeforeOpen: () => {
                return new Promise((resolve, reject) => {
                    resolve(false);
                });
            }
       }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    documents: {
       handlers: {
            onBeforeOpen: () => {
                return new Promise((resolve, reject) => {
                    resolve(false);
                });
            }
       }
    }
});

»onAfterOpen()

説明： 「開く」処理が完了したときに呼び出されるハンドラ。

戻り値：void

必須：オプション

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    documents: {
       handlers: {
           onAfterOpen: () => {
                console.log('New report opened successful.')
            }
       }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    documents: {
       handlers: {
           onAfterOpen: () => {
                console.log('New report opened successful.')
            }
       }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    documents: {
       handlers: {
           onAfterOpen: () => {
                console.log('New report opened successful.')
            }
       }
    }
});

»onBeforeCreate()

説明：非同期ハンドラであり、falseが返された場合は「作成」処理をキャンセルします。

戻り値：Promise<boolean>

必須：オプション

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    documents: {
       handlers: {
           onBeforeCreate: () => {return false}
       }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    documents: {
       handlers: {
           onBeforeCreate: () => {return false}
       }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    documents: {
       handlers: {
           onBeforeCreate: () => {return false}
       }
    }
});

»onAfterCreate()

説明：「作成」処理が完了したときに呼び出されるハンドラ。

戻り値：void

必須：オプション

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    documents: {
       handlers: {
          onAfterCreate: () => {
                console.log('New report created successful.')
            }
      }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    documents: {
       handlers: {
          onAfterCreate: () => {
                console.log('New report created successful.')
            }
      }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    documents: {
       handlers: {
          onAfterCreate: () => {
                console.log('New report created successful.')
            }
      }
    }
});

»onInfoUpdate()

説明：レポート名が更新されたときに呼び出されるハンドラ。

戻り値：void

必須：オプション

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    documents: {
      handlers: {
          onInfoUpdate: (options) => {
                console.log(`name changed ${options.name}`);
            }
        }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    documents: {
      handlers: {
          onInfoUpdate: (options) => {
                console.log(`name changed ${options.name}`);
            }
        }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    documents: {
      handlers: {
          onInfoUpdate: (options:
               {
                   name: string,
                   id?: string,
                   type: SupportedDocumentType['type'],
                   platform: SupportedDocumentType['platform']
               }) =>
                    {console.log(`name changed ${options.name}`);}
        }
    }
});

»onDocumentChanged()

説明：レポートのコンテンツが変更されたときに呼び出されるハンドラ。
この関数は、次の2つのプロパティを含むオブジェクトを引数として受け取ります。

  • document：変更されたドキュメントの更新バージョンが含まれます。
  • hasUnsavedChanges：ドキュメント内に未保存の変更があるかどうかを示すブール値です。

戻り値：void

必須：オプション

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    documents: {
      handlers: {
            onDocumentChanged: (options) => {
                if (options.hasUnsavedChanges) console.log('Currently edited report has unsaved changes.');
            }
        }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    documents: {
      handlers: {
            onDocumentChanged: (options) => {
                if (options.hasUnsavedChanges) console.log('Currently edited report has unsaved changes.');
            }
        }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    documents: {
      handlers: {
          onInfoUpdate: (options:
               {
                   name: string,
                   id?: string,
                   type: SupportedDocumentType['type'],
                   platform: SupportedDocumentType['platform']
               }) =>
                    {console.log(`name changed ${options.name}`);}
        }
    }
});

 

data

dataTab

説明：Webデザイナコンポーネントの［データ］タブの設定。

必須：はい

»visible

説明：［データ］タブを表示するかどうかを指定します。デフォルトでは表示されます。

戻り値：boolean

必須：はい

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    data: {
        dataTab: {
            visible:false
            }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    data: {
        dataTab: {
            visible:false
            }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    data: {
        dataTab: {
            visible:false
        }
    }
});

dataSources

説明：［データ］タブの［データソース］セクションの設定。

必須：はい

»visible

説明：［データ］タブに［データソース］セクションを表示するかどうかを指定します。デフォルトでは表示されます。

戻り値：boolean

必須：はい

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    data: {
        dataSources: {
            visible:false
            }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    data: {
        dataSources: {
            visible:false
            }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    data: {
        dataSources: {
            visible:false
        }
    }
});

»canModify

説明：データソースを変更（追加／削除）できるかどうかを指定します。デフォルトでは、無効になっています。

戻り値：boolean

必須：はい

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    data: {
        dataSources: {
            canModify: true
            }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    data: {
        dataSources: {
            canModify: true
            }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    data: {
        dataSources: {
            canModify: true
        }
    }
});

»shared

説明：Webデザイナで共有データソースを有効にするかどうかを指定します。［データソースエディタ］ダイアログでは、種類を［共有参照］として選択すると、共有データソースが表示されます。

戻り値：boolean

必須：はい

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    data: {
        dataSources: {
             shared: {
                  enabled: true
             }
        }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    data: {
        dataSources: {
              shared: {
                  enabled: true
             }
        }
     }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    data: {
        dataSources: {
              shared: {
                  enabled: true
             }
        }
     }
});

»options

predefinedProviders

説明：データソースエディタで使用可能な事前定義されたデータプロバイダのリストを指定します。デフォルトでは、事前定義されたすべてのプロバイダが使用可能です。

戻り値：('SQL' | 'OLEDB' | 'ODBC' | 'JSON' | 'CSV' | 'XML')[]

必須：はい

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    data: {
        dataSources: {
            options: {
                predefinedProviders: ['SQL', 'JSON']
            }
        }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    data: {
        dataSources: {
            options: {
                predefinedProviders: ['SQL', 'JSON']
            }
        }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    data: {
        dataSources: {
            options: {
                predefinedProviders: ['SQL', 'JSON']
            }
         }
     }
});

oleDbProviders

説明：データソースエディタで使用可能なOleDBプロバイダのリストを指定します。デフォルトでは、「Microsoft.Jet.OLEDB.4.0」、「SQLOLEDB.1」、「MSDataShape.1」、および「MSDASQL.1」を使用できます。

戻り値：string[]

必須：はい

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    data: {
        dataSources: {
            options: {
                oleDbProviders: ['Microsoft.Jet.OLEDB.4.0', 'SQLOLEDB.1']
            }
        }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    data: {
        dataSources: {
            options: {
                oleDbProviders: ['Microsoft.Jet.OLEDB.4.0', 'SQLOLEDB.1']
            }
        }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    data: {
        dataSources: {
            options: {
                oleDbProviders: ['Microsoft.Jet.OLEDB.4.0', 'SQLOLEDB.1']
            }
        }
    }
});

customProviders

説明：データソースエディタで使用可能なカスタムデータプロバイダのリストを指定します。デフォルトでは、利用可能なカスタムデータプロバイダはありません。

戻り値：{key: string; name: string;}[]

  1. key：データプロバイダ識別子であり、DataSource.ConnectionProperties.DataProviderプロパティに使用されます。
    name：データプロバイダーのラベル。UIでデータプロバイダのラベルとして使用されます。

必須：はい

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    data: {
        dataSources: {
            options: {
                customProviders:[{ key: 'CDP', name: 'Custom Data Provider' }]
            }
        }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    data: {
        dataSources: {
            options: {
                customProviders:[{ key: 'CDP', name: 'Custom Data Provider' }]
            }
        }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    data: {
        dataSources: {
            options: {
                customProviders:[{ key: 'CDP', name: 'Custom Data Provider' }]
            }
        }
    }
});

dataSets

説明：［データ］タブの［データセット］セクションの設定。

必須：はい

»visible

説明：［データ］タブに［データセット］セクションを表示するかどうかを指定します。デフォルトでは表示されます。

戻り値：boolean

必須：はい

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    data: {
        dataSources: {
            options: {
                customProviders:[{ key: 'CDP', name: 'Custom Data Provider' }]
            }
        }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    data: {
        dataSources: {
            options: {
                customProviders:[{ key: 'CDP', name: 'Custom Data Provider' }]
            }
        }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    data: {
        dataSources: {
            options: {
                customProviders:[{ key: 'CDP', name: 'Custom Data Provider' }]
            }
        }
    }
});

»canModify

説明：データセットを変更（追加／削除）できるかどうかを指定します。デフォルト値は、falseです。

戻り値：boolean

必須：はい

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    data: {
        dataSets: {
            canModify:true
        }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    data: {
        dataSets: {
            canModify:true
        }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    data: {
        dataSets: {
            canModify:true
        }
    }
});

parameters

説明：［データ］タブの［パラメータ］セクションの設定。

必須：はい

»visible

説明：［データ］タブに［パラメータ］セクションを表示するかどうかを指定します。デフォルトでは表示されます。

戻り値：boolean

必須：はい

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    data: {
        parameters: {
            visible: false
        }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    data: {
        parameters: {
            visible: false
        }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    data: {
        parameters: {
            visible: false
        }
    }
});

»canModify

説明：パラメータを変更（追加／削除）できるかどうかを指定します。デフォルト値は、trueです。

戻り値：boolean

必須：はい

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    data: {
        parameters: {
            canModify: false
        }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    data: {
        parameters: {
            canModify: false
        }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    data: {
        parameters: {
            canModify: false
        }
    }
});

commonValues

説明：［データ］タブの［共通の値］セクションの設定。

必須：はい

»visible

説明：［データ］タブに［共通の値］セクションを表示するかどうかを指定します。デフォルトでは表示されます。

戻り値：boolean

必須：はい

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    data: {
        commonValues: {
            visible: false
        }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    data: {
        commonValues: {
            visible: false
        }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    data: {
        commonValues: {
            visible: false
        }
    }
});

styles

説明：セクションレポートのスタイル設定。

必須：はい

stylesTab

説明：［スタイル］タブの設定。

必須：はい

»visible

説明：セクションレポート（RPXファイル）のスタイルシートを変更できるかどうかを指定します。デフォルトでは表示されます。

戻り値：boolean

必須：はい

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    styles: {
        stylesTab: {
            visible:false
        }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    styles: {
        stylesTab: {
            visible:false
        }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    styles: {
        stylesTab: {
            visible:false
        }
    }
});

stylesheet

説明：Webデザイナでスタイルシートの設定。

必須：はい

»canModify

説明：Webデザイナでセクションレポート（RPXファイル）を変更できるかどうかを指定します。デフォルト値は、trueです。

戻り値：boolean

必須：はい

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    styles: {
        stylesTab: {
            canModify:false
        }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    styles: {
        stylesTab: {
            canModify:false
        }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    styles: {
        stylesTab: {
            canModify:false
        }
    }
});

server

説明：Webデザイナのサーバー関連の設定。

必須：はい

url

説明： WebデザイナのサーバーAPIのベースURLを指定します。プロパティのデフォルト値は「api」です。

戻り値：string

必須：はい

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    server: {
        url: 'api/designer'
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    server: {
        url: 'api/designer'
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    server: {
        url: 'api/designer'
    }
});

onBeforeRequest()

説明：Webデザイナで要求を変更するための特別なハンドラ。

パラメータ（型）：

init: RequestInit

戻り値：RequestInit

必須：オプション

onBeforeRequestAsync()

説明：onBeforeRequestの非同期バージョン。本バージョンまたはonBeforeRequestを使用します。

パラメータ（型）：

init: RequestInit

戻り値：Promise<RequestInit>

必須：オプション

title

説明：Webデザイナに表示するドキュメントのタイトルの設定。

必須：はい

onUpdate()

説明：Webデザイナで編集されたレポートが更新されたときに、ドキュメントのタイトルを更新するためのカスタムロジックを実装できます。

パラメータ（型）：

init: TitleInfo

戻り値：string

必須：オプション

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
      title: {
          onUpdate: (info) =>
                `${info.name}${info.hasUnsavedChanges ? ' - Has Unsaved Changes!' : info.name}`
      }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
      title: {
          onUpdate: (info) =>
                `${info.name}${info.hasUnsavedChanges ? ' - Has Unsaved Changes!' : info.name}`
      }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
      title: {
          onUpdate: (info: TitleInfo) =>
                `${info.name}${info.hasUnsavedChanges ? ' - Has Unsaved Changes!' : info.name}`
      }
});

disabled

説明：Webデザイナでブラウザータブにドキュメントのタイトルを更新できるかどうかを指定します。プロパティのデフォルト値は「false」です。

戻り値：boolean

必須：はい

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
     title: {
            disabled: true
        }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
     title: {
            disabled: true
        }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
     title: {
            disabled: true
        }
});

preview

説明：ドキュメントのプレビューに関する設定。

必須：はい

canPreview

説明：デザイナの［リボン］タブに［プレビュー］ボタンを表示するかどうかを指定します。プロパティのデフォルト値は「false」です。

戻り値：boolean

必須：オプション

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    server: {
        url: 'api/designer'
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    server: {
        url: 'api/designer'
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    server: {
        url: 'api/designer'
    }
});

openViewer

説明：DesignerOptionsオブジェクトにopenViewerメソッドを実装することで、レポートビューワのコンポーネントをプラグインできます。

パラメータ（型）：

  1. settings: ViewerSettings

戻り値：void

必須：はい

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
 preview: {
     openViewer: (info) =>
         console.log(info.applicationTitle)
  }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
 preview: {
     openViewer: (info) =>
         console.log(info.applicationTitle)
  }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
 preview: {
     openViewer: (info: ViewerSettings) =>
         console.log(info.applicationTitle)
  }
});

rpx

説明：RPX固有の設定。セクションレポート（RPXファイル）を機能させるために必要です。

必須：はい

enabled

説明：RPXサポートを有効にするには、trueに設定します。

戻り値：Boolean

必須：オプション

initTemplates

戻り値：{imperialTemplates (optional): string[]; metricTemplates (optional): string[];};

必須：オプション

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    rpx: {
            enabled: true,
            metricTemplates: ['{"Name":"Report","Width":"10cm","Layers":[{"Name":"default1"}],"CustomProperties":[{"Name":"DisplayType","Value":"Page"},{"Name":"SizeType","Value":"Default"},{"Name":"PaperOrientation","Value":"Portrait"}],"Page":{"PageWidth":"8.5in","PageHeight":"11in","RightMargin":"1in","LeftMargin":"1in","TopMargin":"1in","BottomMargin":"1in","Columns":1,"ColumnSpacing":"0in"},"Body":{"Height":"0.75cm","ReportItems":[{"Type":"textbox","Name":"TextBox1","CustomProperties":[],"CanGrow":true,"KeepTogether":true,"Style":{"PaddingLeft":"2pt","PaddingRight":"2pt","PaddingTop":"2pt","PaddingBottom":"2pt"},"Left":"0cm","Top":"0cm","Width":"10cm","Height":"5cm"}]}}'],
        }
    );
     var designer = GrapeCity.ActiveReports.Designer.apiOf('ar-web-designer');
    designer.documents.create({
    name: 'MyReport.rpx',
    type:
        {
            platform: 'rpx',
            type: 'report'
        }
    });

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    rpx: {
            enabled: true,
            metricTemplates: ['{"Name":"Report","Width":"10cm","Layers":[{"Name":"default1"}],"CustomProperties":[{"Name":"DisplayType","Value":"Page"},{"Name":"SizeType","Value":"Default"},{"Name":"PaperOrientation","Value":"Portrait"}],"Page":{"PageWidth":"8.5in","PageHeight":"11in","RightMargin":"1in","LeftMargin":"1in","TopMargin":"1in","BottomMargin":"1in","Columns":1,"ColumnSpacing":"0in"},"Body":{"Height":"0.75cm","ReportItems":[{"Type":"textbox","Name":"TextBox1","CustomProperties":[],"CanGrow":true,"KeepTogether":true,"Style":{"PaddingLeft":"2pt","PaddingRight":"2pt","PaddingTop":"2pt","PaddingBottom":"2pt"},"Left":"0cm","Top":"0cm","Width":"10cm","Height":"5cm"}]}}'],
        }
    );
     var designer = GrapeCity.ActiveReports.Designer.apiOf('ar-web-designer');
    designer.documents.create({
    name: 'MyReport.rpx',
    type:
        {
            platform: 'rpx',
            type: 'report'
        }
    });

rpx: {
        enabled: true,
        metricTemplates: ['{"Name":"Report","Width":"10cm","Layers":[{"Name":"default1"}],"CustomProperties":[{"Name":"DisplayType","Value":"Page"},{"Name":"SizeType","Value":"Default"},{"Name":"PaperOrientation","Value":"Portrait"}],"Page":{"PageWidth":"8.5in","PageHeight":"11in","RightMargin":"1in","LeftMargin":"1in","TopMargin":"1in","BottomMargin":"1in","Columns":1,"ColumnSpacing":"0in"},"Body":{"Height":"0.75cm","ReportItems":[{"Type":"textbox","Name":"TextBox1","CustomProperties":[],"CanGrow":true,"KeepTogether":true,"Style":{"PaddingLeft":"2pt","PaddingRight":"2pt","PaddingTop":"2pt","PaddingBottom":"2pt"},"Left":"0cm","Top":"0cm","Width":"10cm","Height":"5cm"}]}}'],
    }
);
const designer = GrapeCity.ActiveReports.Designer.apiOf('ar-web-designer');
designer.documents.create({
name: 'MyReport.rpx',
type:
        {
            platform: 'rpx',
            type: 'report'
        }
});

toolBoxContent

戻り値：RpxToolBoxItem[]

必須：オプション

rdlx

必須：はい

expressionSyntax

説明：「i11n」の補間構文または「rdl」の古いrdl式構文の中でWebデザイナコンポーネントで使用される式構文を指定します。デフォルトでは、補間構文が式に使用されます。

戻り値：'i11n' | 'rdl'

必須：はい

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
     rdlx: {
         expressionSyntax: 'rdl'
     }
 });

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
     rdlx: {
         expressionSyntax: 'rdl'
     }
 });

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
     rdlx: {
         expressionSyntax: 'rdl'
     }
 });

msl

»enabled

説明：複数レイアウトのRDLレポートのサポートを有効にするには、true に設定します。

戻り値：boolean

必須：オプション

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
        rdlx: {
            msl: {
                enabled: true
            }
        }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
        rdlx: {
            msl: {
                enabled: true
            }
        }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
        rdlx: {
            msl: {
                enabled: true
            }
        }
});

fpl

»enabled

説明：trueに設定すると、ページレポートのサポートが有効になります。

戻り値：boolean

必須：オプション

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
        rdlx: {
            fpl: {
                enabled: true
            }
        }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
        rdlx: {
            fpl: {
                enabled: true
            }
        }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
        rdlx: {
            fpl: {
                enabled: true
            }
        }
});

dashboard

»enabled

説明：trueに設定すると、ダッシュボードのサポートが有効になります。

戻り値：boolean

必須：オプション

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
        rdlx: {
            dashboard: {
                enabled: true
            }
        }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
        rdlx: {
            dashboard: {
                enabled: true
            }
        }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
        rdlx: {
            dashboard: {
                enabled: true
            }
        }
});

reportParts

説明：レポートパーツに関する設定。

戻り値： ReportPartsSettings

必須：オプション

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    rdlx: {
         reportParts: {
             enabled: true,                 
             libraries: [{
                 name: 'Sales',
                 path: 'Libraries/Lib_Sales.rdlx'
             }]
         }
     }
 });

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    rdlx: {
         reportParts: {
             enabled: true,                 
             libraries: [{
                 name: 'Sales',
                 path: 'Libraries/Lib_Sales.rdlx'
             }]
         }
     }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    rdlx: {
         reportParts: {
             enabled: true,                 
             libraries: [{
                 name: 'Sales',
                 path: 'Libraries/Lib_Sales.rdlx'
             }]
         }
     }
});

masterReports

»enabled

説明：trueに設定すると、マスターレポートのサポートが有効になります。

戻り値：boolean

必須：オプション

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
        rdlx: {
            masterReports: {
                enabled: true
            }
        }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
        rdlx: {
            masterReports: {
                enabled: true
            }
        }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
        rdlx: {
            masterReports: {
                enabled: true
            }
        }
});

expressionEditorNodesFilter()

説明：Webデザイナの式エディタのノードのフィルタ。

パラメータ（型）：

  1. key: string

戻り値：boolean

必須：オプション

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    designerSettings.rdlx.expressionEditorNodesFilter = (key) => {
        if (key.includes('commonValues')) return false;
        if (key.includes('aggregate.aggregateIfWithScope')) return false;
        return true;

designerSettings.rdlx.expressionEditorNodesFilter = (key) => {
    if (key.includes('commonValues')) return false;
    if (key.includes('aggregate.aggregateIfWithScope')) return false;
    return true;
}

designerSettings.rdlx.expressionEditorNodesFilter = (key: string) => {
    if (key.includes('commonValues')) return false;
    if (key.includes('aggregate.aggregateIfWithScope')) return false;
    return true;
}

toolBoxContent

説明：ツールボックスでのコントロールとその表示順序を指定します。デフォルトでは、ページレポート（FPL）で使用できるコントロールは、TextBox、CheckBox、Container、Line、Shape、TableOfContents、Image、List、Table、Tablix、Chart、Bullet、Barcode、FormattedText、RichText、Sparkline、SubReport、BandedList、およびInputFieldです。

RDLレポート（CPL）の場合、デフォルトで使用できるコントロールは、TextBox、CheckBox、Container、Line、Shape、TableOfContents、Image、List、Table、Tablix、Chart、Bullet、Barcode、FormattedText、RichText、Sparkline、SubReport、OverflowPlaceHolder、BandedList、およびInputFieldです。

戻り値：{cpl: RdlxToolBoxItem[]; fpl: RdlxToolBoxItem[]; };

必須：オプション

サンプルコード
コードのコピー 
designerSettings.rdlx.toolBoxContent = {
   cpl: [ 'checkbox', 'container', 'textbox' ],
   fpl: [ 'image', 'list', 'table', 'tablix', 'chart', 'bullet', 'barcode', 'formattedtext' ]
}

initTemplates

説明：ページレポートの特定のコントロール（OverflowPlaceHolderなど）のカスタムテンプレートを設定には、ページレポートを使用します。他のすべてのレポートコントロール、およびページヘッダとページフッタのカスタムテンプレートを設定するには、RDLレポートを使用することをお勧めします。レポートに対して、ConsumeContainerWhitespaceと、BottomMargin、LeftMargin、RightMargin、TopMargin、PageHeight、PageWidth、ColumnSpacingなどのページ関連のプロパティを設定できます。

残りのレポートアイテムに対して、テーブルの列数やデフォルトのバーコード記号など、すべてのプロパティが設定されます。配列内の後続のレポート内に前のレポートアイテムと同じレポートアイテムがある場合、このレポートアイテムの最後のテンプレートのみが設定されます。また、いくつかのレポートアイテムに複数のinitテンプレートを設定できます。このために、同じタイプのレポートアイテムが複数あるレポートを追加する必要があります。同じ名前のテンプレートは置き換えられます。各レポートアイテムのTemplateNameプロパティを使用して、テンプレートのローカライズされた名前を設定します。ChartコントロールのAllowWizardプロパティを使用して、このレポートアイテムを作成する時にチャートウィザードを使用できるようにします。たとえば、... ,"CustomProperties":[{"Name":"TemplateName","Value":"Doughnut Chart"}, {"Name":"AllowWizard","Value":"true"},...],...

戻り値：{imperialTemplates?: string[]; metricTemplates?: string[];};

必須：オプション

サンプルコード
コードのコピー 
imperialTemplates: ['{"Name":"Report","Width":"5in","Layers":[{"Name":"default"}],"CustomProperties":[{"Name":"DisplayType","Value":"Page"},{"Name":"SizeType","Value":"Default"},{"Name":"PaperOrientation","Value":"Portrait"}],"Page":{"PageWidth":"8.5in","PageHeight":"11in","RightMargin":"1in","LeftMargin":"1in","TopMargin":"1in","BottomMargin":"1in","Columns":1,"ColumnSpacing":"0in"},"Body":{"Height":"0.25in","ReportItems":[{"Type":"textbox","Name":"TextBox1","CustomProperties":[],"CanGrow":true,"KeepTogether":true,"Style":{"PaddingLeft":"2pt","PaddingRight":"2pt","PaddingTop":"2pt","PaddingBottom":"2pt"},"Width":"5in","Height":"0.25in"}]}}'],
metricTemplates: ['{"Name":"Report","Width":"10cm","Layers":[{"Name":"default"}],"CustomProperties":[{"Name":"DisplayType","Value":"Page"},{"Name":"SizeType","Value":"Default"},{"Name":"PaperOrientation","Value":"Portrait"}],"Page":{"PageWidth":"8.5in","PageHeight":"11in","RightMargin":"1in","LeftMargin":"1in","TopMargin":"1in","BottomMargin":"1in","Columns":1,"ColumnSpacing":"0in"},"Body":{"Height":"0.75cm","ReportItems":[{"Type":"textbox","Name":"TextBox1","CustomProperties":[],"CanGrow":true,"KeepTogether":true,"Style":{"PaddingLeft":"2pt","PaddingRight":"2pt","PaddingTop":"2pt","PaddingBottom":"2pt"},"Left":"0cm","Top":"0cm","Width":"10cm","Height":"0.75cm"}]}}'],
};

reportItemsFeatures

説明：Webデザイナのカスタマイズ可能なレポートアイテムを示します。

戻り値：RdlxReportItemsSettings

必須：はい

reportStyles

説明：Webデザイナのレポートコントロールのスタイルに追加のスタイルを指定します。

戻り値：ReportStyles[]

必須：はい

サンプルコード
コードのコピー 
designerSettings.rdlx.reportStyles
    {
        Bullet: [{
                id: 'c8aa4403-83ef-402b-a7da-032063cf625a',
                name: 'additionalBulletStyle1',
                content: {
                    ValueColor: 'red',
                    LabelFontColor: '=Theme.Colors!Dark1',
                    LabelFontFamily: '=Theme.Fonts!MinorFont.Family',
                    LabelFontSize: '=Theme.Fonts!MinorFont.Size',
                    LabelFontStyle: '=Theme.Fonts!MinorFont.Style',
                    TicksLineColor: '=Theme.Colors(1,0)'
                }
            },
        ],
        List: [
            {    id: '3d2c3781-4eea-4ac3-8d50-636edd9328d5',
                name: 'additionalListStyle1',
                content: {},
            },
            {    id: '5b7b4e73-22e5-42ed-99c4-62840bdde79d',
                name: 'additionalListStyle2',
                content: {
                    BackgroundColor: '=Theme.Colors!Accent1',
                    Border: {
                        Color: '=Theme.Colors(4,4)',
                        Width: '1pt',
                        Style: 'Solid',
                    }
                }
            }]
    },
    {    ChartPalette: [{
                id: 'c8aa4403-83ef-402b-a7da-0320444',
                name: 'additionalChartPalette',
                content: ['red', '=Theme.Colors!Accent2', '=Theme.Colors!Accent3', '=Theme.Colors!Accent4', '=Theme.Colors!Accent5', '=Theme.Colors!Accent6', '=Theme.Colors(5,4)', '=Theme.Colors(5,5)', '=Theme.Colors(5,6)', '=Theme.Colors(5,7)', '=Theme.Colors(5,8)', '=Theme.Colors(5,9)']
            }]
    },   
];

TitleInfo

ブラウザに表示するドキュメントのタイトルに関する情報。

name

説明：ドキュメントのタイトルを示します。

戻り値：string

必須：はい

hasUnsavedChanges

説明：レポートに未保存の変更があるかどうかを示します。

戻り値：boolean

必須：はい

 

RdlxToolBoxItem

ツールボックスで使用できるレポートアイテム。

有効な値

コードのコピー 
'textbox' | 'checkbox' | 'container' | 'line' | 'shape' | 'tableofcontents' |
'image' | 'list' | 'table' | 'tablix' | 'chart' | 'bullet' | 'barcode' | 'formattedtext' |
'richtext' | 'sparkline' | 'subreport' | 'overflowplaceholder' | 'bandedlist' | 'inputfield'

RpxToolBoxItem

ツールボックスで使用できるレポートアイテム。

有効な値

コードのコピー 
'Label' | 'TextBox' | 'CheckBox' | 'RichTextBox' | 'Shape' | 'Picture' | 'Line' | 'PageBreak' |
'Barcode' | 'SubReport' | 'ReportInfo' | 'CrossSectionLine' | 'CrossSectionBox' | 'InputFieldText' | 'InputFieldCheckBox'

DvChartPlotType

利用可能なチャートの種類。

有効な値

コードのコピー 
'Custom'| 'Bar' | 'Line' | 'Area' | 'Scatter' | 'HighLowOpenClose' | 'Candlestick' | 'Column' |'Pie' | 'Pyramid' | 'Funnel' | 'Bubble' | 'Gantt' | 'HighLowClose' | 'PolarColumn' | 'PolarBar'|'RadarArea' | 'RadarBubble' | 'RadarScatter' | 'RadarLine' | 'RangeArea' | 'RangeBar' | 'RangeColumn' | 'Gauge'

DvChartEncodingType

エンコーディングのタイプ。以下は、エンコーディングパネルのみで表示されるエンコーディングです。

有効な値

コードのコピー 
'Details' | 'Color' | 'Shape' | 'Size' | 'Text'

RdlxReportItemsSettings

レポートアイテムの設定。

barcode

説明：WebデザイナのBarcodeコントロールの設定。

symbologies

説明：利用可能なバーコードの種類のリストを制限します。デフォルトでは、ActiveReportsがサポートするすべてのバーコードが利用可能です。

戻り値：RdlxBarcodeSymbology[]

必須：オプション

 import { arWebDesigner } from './web-designer.js';
 arWebDesigner.create('#ar-web-designer', {
     rdlx: {
         reportItemsFeatures: {
             barcode: {
                symbologies: ['Code_128_A', 'Code_128_B', 'Code_128_C']
             }
         }
     }
 });

 GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
     rdlx: {
         reportItemsFeatures: {
             barcode: {
                symbologies: ['Code_128_A', 'Code_128_B', 'Code_128_C']
             }
         }
     }
 });

 GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
     rdlx: {
         reportItemsFeatures: {
             barcode: {
                symbologies: ['Code_128_A', 'Code_128_B', 'Code_128_C']
             }
         }
     }
 });

hideUnsupportedBarcodeJSProperties

説明：サポートされていないバーコードのJS プロパティを非表示にします。

戻り値：boolean

Required: Optional

 import { arWebDesigner } from './web-designer.js';
 arWebDesigner.create('#ar-web-designer', {
     rdlx: {
         reportItemsFeatures: {
             barcode: {
                hideUnsupportedBarcodeJSProperties: true
             }
         }
     }
 });

 GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
     rdlx: {
         reportItemsFeatures: {
             barcode: {
                hideUnsupportedBarcodeJSProperties: true
             }
         }
     }
 });

 GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
     rdlx: {
         reportItemsFeatures: {
             barcode: {
                hideUnsupportedBarcodeJSProperties: true
             }
         }
     }
 });

chart

説明：Chart機能の設定。

canUseWizard

説明：チャートウィザードを使用して、チャートを作成できるかどうかを指定します。

戻り値：boolean

必須：オプション

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    rdlx: {
        reportItemsFeatures: {
           chart: {
               canUseWizard: false
           }
        }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
     rdlx: {
         reportItemsFeatures: {
            chart: {
                canUseWizard: false
            }
         }
     }
 });

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
     rdlx: {
         reportItemsFeatures: {
            chart: {
                canUseWizard: false
            }
         }
     }
 });

plotChartTypes

説明：作成できるチャートのタイプを指定します。

戻り値：boolean

必須：オプション

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    rdlx: {
        reportItemsFeatures: {
           chart: {
               plotChartTypes: ['Column', 'Bar', 'Line']
           }
        }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    rdlx: {
        reportItemsFeatures: {
            chart: {
                plotChartTypes: ['Column', 'Bar', 'Line']
            }
        }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    rdlx: {
        reportItemsFeatures: {
            chart: {
                plotChartTypes: ['Column', 'Bar', 'Line']
            }
        }
    }
});

hiddenEncodings

説明：エンコーディングパネルから指定されたエンコーディングを除外します。

戻り値：DvChartEncodingType[]

必須：はい

import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    rdlx: {
        reportItemsFeatures: {
            chart: {
                hiddenEncodings: ['Color', 'Text']
            }
        }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    rdlx: {
        reportItemsFeatures: {
            chart: {
                hiddenEncodings: ['Color', 'Text']
            }
        }
    }
});

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    rdlx: {
        reportItemsFeatures: {
            chart: {
                hiddenEncodings: ['Color', 'Text']
            }
        }
    }
});

table

説明： WebデザイナのTableコントロールの設定。

autoFillHeader

説明：フィールドがテーブルの詳細行にドラッグ＆ドロップされた時、テーブルヘッダを自動入力する必要があるかどうかを指定します。たとえば、ProductNameフィールドが詳細行にドロップされた時、「ProductName」の値がヘッダ行に追加されます。デフォルトでは、有効になっています。

戻り値：boolean

必須：オプション

サンプルコード
コードのコピー 
designerSettings.rdlx.reportItemsFeatures.table.autoFillHeader = false;

autoFillFooter

説明：フィールドがテーブルの詳細行にドラッグ＆ドロップされた時、テーブルフッタを自動入力する必要があるかどうかを指定します。たとえば、ProductNameフィールドが詳細行にドロップされた時、「=Count([ProductName])」の値がフッタ行に追加されます。デフォルトでは、無効になっています。

戻り値：boolean

必須：オプション

サンプルコード
コードのコピー 
designerSettings.rdlx.reportItemsFeatures.table.autoFillFooter = true;

canMergeCellsVertically

説明：テーブルのヘッダ、フッタ、および詳細行内でセルの垂直方向の結合を有効にするかどうかを指定します。デフォルトでは、有効になっています。

戻り値：boolean

必須：オプション

サンプルコード
コードのコピー 
designerSettings.rdlx.reportItemsFeatures.table.canMergeCellsVertically = false;

hideFrozenRowsColumns

説明：プロパティモードからFrozenRowsプロパティまたはFrozenColumnsプロパティを非表示にするかどうかを指定します。デフォルトでは、「false」に設定されています。

戻り値：boolean

必須：オプション

サンプルコード
コードのコピー 
designerSettings.rdlx.reportItemsFeatures.table.hideFrozenRowsColumns = true;

tablix

説明：WebデザイナのTablixコントロールの設定。

crossAggregates

説明：Tablixウィザードでクロス集計機能を非表示にするかどうかを指定します。デフォルトでは、有効になっています。

戻り値：boolean

必須：オプション

サンプルコード
コードのコピー 
GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    rdlx: {
        reportItemsFeatures: {
            tablix: {
                 crossAggregates: false
            }
        }
    }
});

autoFillCorner

説明：フィールドがTablixの行グループセルにドラッグ＆ドロップされた時、Tablixのコーナー領域のセルを自動入力する必要があるかどうかを指定します。たとえば、ProductNameフィールドを行グループセルにドラッグ＆ドロップすると、「ProductName」の値がコーナー領域のセルに追加されます。デフォルトでは、有効になっています。

戻り値：boolean

必須：オプション

サンプルコード
コードのコピー 
GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    rdlx: {
             reportItemsFeatures: {
                tablix: {
                 autoFillCorner: false
                }
             }
    }
});

canUseWizard

説明：Tablixウィザードを使用して、Tablixを作成または編集できるかどうかを指定します。デフォルトでは、有効になっています。

戻り値：boolean

必須：オプション

サンプルコード
コードのコピー 
GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    rdlx: {
             reportItemsFeatures: {
                tablix: {
                 canUseWizard: false
                }
             }
    }
});

hideFrozenRowsColumns

説明：プロパティモードおよびTablixウィザードからFrozenRowsプロパティまたはFrozenColumnsプロパティを非表示にするかどうかを指定します。デフォルトでは、「false」に設定されています。

戻り値：boolean

必須：オプション

サンプルコード
コードのコピー 
GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    rdlx: {
             reportItemsFeatures: {
                tablix: {
         hideFrozenRowsColumns: true
            }
        }
    }
});

RdlxBarcodeSymbology

Webデザイナでサポートされているバーコードの種類。

有効な値

コードのコピー 
'Ansi39' | 'Ansi39x' | 'BC412' | 'Codabar' | 'Code_11' | 'Code_128_A' | 'Code_128_B' | 'Code_128_C' | 'Code_128auto' |
'Code_2_of_5' | 'Code_93' | 'Code25intlv' | 'Code39' | 'Code39x' | 'Code49' | 'Code93x' | 'DataMatrix' | 'EAN_13' | 'EAN_8' | 'EAN128FNC1' |
'GS1QRCode' | 'HIBCCode128' | 'HIBCCode39' | 'IATA_2_of_5' | 'IntelligentMail' | 'IntelligentMailPackage' | 'ISBN' | 'ISMN' | 'ISSN' |
'ITF14' | 'JapanesePostal' | 'Matrix_2_of_5' | 'MaxiCode' | 'MicroPDF417' | 'MicroQRCode' | 'MSI' | 'Pdf417' | 'Pharmacode' | 'Plessey' |
'PostNet' | 'PZN' | 'QRCode' | 'RM4SCC' | 'RSS14' | 'RSS14Stacked' | 'RSS14StackedOmnidirectional' | 'RSS14Truncated' | 'RSSExpanded' |
'RSSExpandedStacked' | 'RSSLimited' | 'SSCC_18' | 'Telepen' | 'UCCEAN128' | 'UPC_A' | 'UPC_E0' | 'UPC_E1' |

ReportItemStyle<T>

レポートアイテムのスタイル。

id

戻り値：string

必須：はい

name

戻り値：string

必須：はい

content

戻り値：T

必須：はい

BorderStyle

罫線のスタイル。

Color

戻り値：string

必須：オプション

Style

戻り値：string

必須：オプション

Width

戻り値：string

必須：オプション

CellStyleContent

テーブルセルのスタイル。

LeftBorder

戻り値：BorderStyle

必須：オプション

TopBorder

戻り値：BorderStyle

必須：オプション

BottomBorder

戻り値：BorderStyle

必須：オプション

RightBorder

戻り値：BorderStyle

必須：オプション

TextAlign

戻り値：string

必須：オプション

BottomBorder

戻り値：string

必須：オプション

TextBoxStyleContent

TextBoxコントロールのスタイル。

Color

戻り値：string

必須：オプション

BackgroundColor

戻り値：string

必須：オプション

FontFamily

戻り値：string

必須：オプション

FontSize

戻り値：string

必須：オプション

FontStyle

戻り値：string

必須：オプション

FontWeight

戻り値：string

必須：オプション

ContainerStyleContent

Containerコントロールのスタイル。

BackgroundColor

戻り値：string

必須：オプション

Border

戻り値：string

必須：オプション

BulletStyleContent

Bulletコントロールのスタイル。

ValueColor

戻り値：string

必須：オプション

TargetLineColor

戻り値：string

必須：オプション

LabelFontColor

戻り値：string

必須：オプション

LabelFontFamily

戻り値：string

必須：オプション

LabelFontSize

戻り値：string

必須：オプション

LabelFontStyle

戻り値：string

必須：オプション

TicksLineColor

戻り値：string

必須：オプション

SparklineStyleContent

Sparklineコントロールのスタイル。

LineColor

戻り値：string

必須：オプション

FillColor

戻り値：string

必須：オプション

GradientEndColor

戻り値：string

必須：オプション

MarkerColor

戻り値：string

必須：オプション

RangeFillColor

戻り値：string

必須：オプション

RangeGradientEndColor

戻り値：string

必須：オプション

TableStyleContent

Tableコントロールのスタイル。

Header

戻り値：{ Rows: CellStyleContent[] };

必須：はい

Details

戻り値：{ Rows: CellStyleContent[]; AlternatingExpression: string };

必須：はい

Footer

戻り値：{ Rows: CellStyleContent[] };

必須：はい

TableGroups

Styles

戻り値：{ Header: { Rows: CellStyleContent[] }; Footer: { Rows: CellStyleContent[] };}[];

必須：はい

Border

戻り値：BorderStyle

必須：オプション

TableOfContentsStyleContent

TableOfContentsコントロールのスタイル。

BackgroundColor

戻り値：string

必須：オプション

Border

戻り値：BorderStyle

必須：オプション

Levels

必須：はい

Color

戻り値：string

必須：オプション

PaddingLeft

戻り値：string

必須：オプション

FontFamily

戻り値：string

必須：オプション

FontSize

戻り値：string

必須：オプション

FontStyle

戻り値：string

必須：オプション

FontWeight

戻り値：string

必須：オプション

ChartPaletteContent

チャートのカラーパレット。


有効な値

コードのコピー 
string[]

ReportStyles

ツールボックスのアイテムまたはレポートコントロールのスタイル。

Bullet

戻り値：ReportItemStyle<BulletStyleContent>

必須：はい

CheckBox

戻り値：ReportItemStyle<TextBoxStyleContent>

必須：はい

FormattedText

戻り値：ReportItemStyle<ContainerStyleContent>

必須：はい

InputField

戻り値：ReportItemStyle<TextBoxStyleContent>

必須：はい

List

戻り値：ReportItemStyle<ContainerStyleContent>

必須：はい

Rectangle

戻り値：ReportItemStyle<ContainerStyleContent>

必須：はい

RichText

戻り値：ReportItemStyle<TextBoxStyleContent>

必須：はい

Shape

戻り値：ReportItemStyle<ContainerStyleContent>

必須：はい

Sparkline

戻り値：ReportItemStyle<SparklineStyleContent>

必須：はい

Table

戻り値：ReportItemStyle<TableStyleContent>

必須：はい

TableOfContents

Tablix

戻り値：ReportItemStyle<TableStyleContent>

必須：はい

TextBox

戻り値：ReportItemStyle<TextBoxStyleContent>

必須：はい

ChartPalette

戻り値：ReportItemStyle<ChartPaletteContent>

必須：はい

Table

戻り値：ReportItemStyle<TableStyleContent>

必須：はい

TableOfContents

戻り値：ReportItemStyle<TableOfContentsStyleContent>

必須：はい

Tablix

TextBox

ChartPalette

ViewerSettings

ビューワの設定。

element

説明：ビューワを描画する要素IDを指定します。

戻り値：string

必須：はい

applicationTitle

説明：デザイナによって渡されたアプリケーション名を示します。

戻り値：string

必須：はい

documentInfo

説明：プレビューするレポートに関する情報を取得します。

必須：はい

id

説明：プレビューするレポートIDを示します。

戻り値：string

必須：はい

content

説明：ブラウザ内に表示するビューワに対するJSON形式のレポート内容を示します。

戻り値：unknown

必須：はい

name

説明：レポート名を指定します。

戻り値：string

必須：はい

temporary

説明：プレビューするレポートがサーバーに保存されている既存のレポートかどうかを指定します。

戻り値：boolean

必須：はい

preferredFormat

説明：ドキュメントの描画形式を指定します。

戻り値：'html' | 'svg'

必須：はい

CreateDocumentOptions

作成するドキュメントを定義します。

name

説明：新規作成したレポートの名前を指定します。名前を指定しない場合、レポート名は「新規レポート」として表示されます。

戻り値：string

必須：オプション

type

説明：Webデザイナで作成するレポートの種類を示します。このプロパティが指定されていない場合、RDLレポートが作成されます。

戻り値：SupportedDocumentType

必須：オプション

template

説明：レポートに使用するテンプレートを示します。

戻り値：DocumentTemplate

必須：オプション

dataSetsInfo

説明：テンプレートで使用するデータセットのリストを示します。これらのデータセットは、セクションレポート（RPXファイル）で使用できません。

戻り値：{ id: string;, name: string;}[];

  1. id：データセットID。
    name：データセット名。

必須：オプション

CreateDocumentInfo

作成されたレポートに関する情報。

type

説明：Webデザイナ内のレポートの種類を示します。

戻り値：SupportedDocumentType

必須：はい

name

説明：Webデザイナ内のレポートの名前を示します。

戻り値：string

必須：はい

template

説明：Webデザイナ内のレポートテンプレートを示します。

戻り値：DocumentTemplate

必須：オプション

success

説明：onBeforeCreateハンドラでは定義されません。onAfterCreateハンドラで定義されます。

戻り値：boolean

必須：オプション

CurrentDocumentInfo

既存のレポートに関する情報。

id

説明：レポートのIDを指定します。既存のレポートを編集する場合は、idを定義します。新しいレポートを編集する場合は、idをnullにします。

戻り値：string | null

必須：はい

name

説明：レポート名を指定します。

戻り値：string

必須：はい

type

説明：レポートの種類を示します。

戻り値：SupportedDocumentType

必須：はい

DocumentTemplate

レポートに使用するテンプレート。

id 

説明：レポートテンプレートIDを指定します。

戻り値：string

必須：オプション

content

説明：空白でない新しいレポートを作成するために使用できるJSON形式のテンプレートのコンテンツを指定します。

戻り値：unknown

必須：オプション

OpenDocumentOptions

レポートを開くためのオプションを定義します。

templateInfo

説明： テンプレートに関する情報を示します。レポートを作成するためにtemplateInfoを指定する場合は、templateInfo.idまたはtemplateinfo.contentを定義する必要があります。

戻り値：DocumentTemplate

必須：オプション

dataSetsInfo

説明：テンプレートで使用するデータセットのリストを示します。これらのデータセットは、セクションレポート（RPXファイル）で使用できません。

戻り値：{id: string; name: string;}[];

  1. id：データセットID。
    name：データセット名。

必須：オプション   

name

説明：新規作成したレポートの名前を指定します。名前を指定しない場合、レポート名は「新規レポート」として表示されます。

戻り値：string

必須：オプション

type

説明：Webデザイナで作成するレポートの種類を示します。このプロパティが指定されていない場合、RDLレポートが作成されます。

戻り値：SupportedDocumentType

必須：オプション

SaveDocumentInfo

レポートの保存に関する情報。

type

説明：レポートの種類を示します。

戻り値：SupportedDocumentType

必須：はい

id

説明：保存する時に既存のレポートを置き換える場合は、正しいIDを明示的に指定する必要があります。

戻り値：string

必須：オプション

name

説明：正しい名前を明示的に指定します。

戻り値：string

必須：はい

isFirstSave

説明：新しいレポートが初めて保存されることを示します。

戻り値：boolean

必須：はい

success

説明：onBeforeハンドラでは定義されません。onAfterハンドラで定義されます。

戻り値：boolean

必須：オプション

OpenDocumentInfo

開いているレポートに関する情報。

type

説明：レポートの種類を示します。

戻り値：SupportedDocumentType

必須：はい

id

説明：レポートのIDを示します。

戻り値：string

必須：はい

name

説明：レポートの名前を示します。

戻り値：string

必須：はい

success

説明：onBeforeハンドラでは定義されません。onAfterハンドラで定義されます。

戻り値：boolean

必須：オプション

ReportPartsSettings

レポートパーツの設定に関するAPI。

enabled

説明：エンドユーザーがライブラリを使用できるように、Webデザイナでレポートパーツを有効にするかどうかを指定します。

戻り値：SupportedDocumentType

必須：オプション

libraries

説明：ユーザーライブラリで使用できるレポートアイテムのリスト。

戻り値：

Array<{
          name: string,
          path: string
         }>

必須：オプション

 

 

© MESCIUS inc. All rights reserved.