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');

export const ColorThemes: ColorThemesType

説明：WebデザイナのESMモジュールによってエクスポートされる、事前に定義されたテーマオブジェクトです。

ColorThemesType

説明：テーマ名をキーとする、事前に定義されたテーマオブジェクトの型です。

type ColorThemesType = {
 default: ColorTheme,
 defaultDark: ColorTheme,
 darkOled: ColorTheme,
 highContrast: ColorTheme,
 highContrastDark: ColorTheme
};

Shades

説明：Shades型を定義します。

type Shades = {
  veryLight: string;
  light: string;
  lighter: string;
  lightMedium: string;
  medium: string;
  base: string;
  darkMedium: string;
  darker: string;
  dark: string;
  veryDark: string;
};

Color

説明：Color型の定義です。

type Color = string | Shades;

ColorTheme

説明：ColorTheme型の定義です。

export type ColorTheme = {
  name: string;
  type: 'light' | 'dark';
  backgroundMain: string;
  backgroundPanels: string;
  primary: Color;
  secondary: Color;
  neutral: Color;
  error: Color;
  warning: Color;
  fontFamily: string
};

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

必須：はい

GrapeCity.ActiveReports.Designer.create('#container-1', { settings, instanceId: 'instance-1' });
GrapeCity.ActiveReports.Designer.destroy('#container-1', 'instance-1');

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 }

必須：はい

ES

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';
});

UMD

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';
});

TypeScript

TypeScript

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

必須：はい

ES

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';
});

UMD

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

TypeScript

TypeScript

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

必須：はい

ES

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';
});

UMD

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

TypeScript

TypeScript

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

必須：はい

ES

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';
});

UMD

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';
});

TypeScript

TypeScript

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

必須：はい

ES

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

UMD

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

TypeScript

TypeScript

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()

ES

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

UMD

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

TypeScript

TypeScript

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

canRedo()/redo()

ES

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

UMD

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

TypeScript

TypeScript

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

canCut()/cut()

ES

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

UMD

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

TypeScript

TypeScript

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

canCopy()/copy()

ES

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

UMD

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

TypeScript

TypeScript

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

canPaste()/paste()

ES

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

UMD

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

TypeScript

TypeScript

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

canDelete()/delete()

ES

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

UMD

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

TypeScript

TypeScript

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

panels

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

ES

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

UMD

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

TypeScript

TypeScript

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

sidebar

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

»open()

パラメータ（型）：

id: string

戻り値：void

»close

戻り値：void

ES

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

UMD

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

TypeScript

TypeScript

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

documents

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

戻り値：DocumentsAPI

必須：はい

notifications

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

戻り値：NotificationsAPI

必須：はい

DocumentsAPI

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

hasUnsavedChanges()

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

戻り値：boolean

必須：はい

ES

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

UMD

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

TypeScript

TypeScript

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

必須：はい

ES

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

UMD

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

TypeScript

TypeScript

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

info()

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

戻り値：CurrentDocumentInfo

必須：はい

ES

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.`);

UMD

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

TypeScript

TypeScript

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

create()

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

パラメータ（型）：

options（オプション）: CreateDocumentOptions

戻り値：Promise<CreateDocumentInfo>

必須：はい

ES

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.'); });

UMD

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

TypeScript

TypeScript

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

open()

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

戻り値：void

必須：はい

ES

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

UMD

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

TypeScript

TypeScript

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

openById()

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

パラメータ（型）：

id: string

type: SupportedDocumentType

name（オプション）: string

content（オプション）: any

戻り値：Promise<OpenDocumentInfo>

必須：はい

ES

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('テキストボックスを持つ新しいレポートが作成されました。');
});

UMD

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('テキストボックスを持つ新しいレポートが作成されました。');
});

TypeScript

TypeScript

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

必須：はい

ES

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

UMD

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

TypeScript

TypeScript

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

saveAs()

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

戻り値：void

必須：はい

ES

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

UMD

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

TypeScript

TypeScript

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

saveById()

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

パラメータ（型）：

id（オプション）: string
name（オプション）: string

戻り値：Promise<SaveDocumentInfo>

必須：はい

ES

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

UMD

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

TypeScript

TypeScript

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

saveByName()

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

パラメータ（型）：

name: string

戻り値：Promise<SaveDocumentInfo>

必須：はい

ES

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

UMD

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

TypeScript

TypeScript

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

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

戻り値：void

必須：はい

ES

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

UMD

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

TypeScript

TypeScript

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

必須：はい

ES

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

UMD

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

TypeScript

TypeScript

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

必須：はい

ES

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

UMD

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

TypeScript

TypeScript

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

必須：はい

ES

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

UMD

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

TypeScript

TypeScript

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

dismissAll()

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

戻り値：void

必須：はい

ES

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

UMD

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

TypeScript

TypeScript

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

Font

label

戻り値：string

必須：はい

value

戻り値：string

必須：はい

FontHeader

header

戻り値：string

必須：はい

Locale

date-fnsからのLocaleオブジェクトです。

code

戻り値： string

必須：はい

formatDistance

戻り値：any

必須：はい

formatRelative

戻り値： any

必須：はい

localize

戻り値：any

必須：はい

formatLong

戻り値：any

必須：はい

match

戻り値：any

必須：はい

options

戻り値： any

必須：はい

MenuCssIcon

type

戻り値：css

必須：はい

class

戻り値：string

必須：はい

MenuIcon

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

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

initialTheme

説明：適用される初期テーマです。

戻り値： string

themeSelector

enabled

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

戻り値：boolean

availableThemes

説明：ユーザーが選択できる利用可能なテーマの配列です。組み込みのテーマ名を使用するか、テーマオブジェクトを渡します。これらのテーマは組み込みテーマまたはユーザー定義テーマです。以下の中からデフォルトテーマを設定できます：default、defaultDark、darkOled、highContrast、highContrastDark。

戻り値： (string | ColorTheme)[];

ES Module

ES MODULE

//ユーザー定義テーマを使用します。
arWebDesigner.create('#ar-web-designer', {
    themes: {
        initialTheme: 'testTheme',
        themeSelector: {
            enabled: false,
            availableThemes: ['Default', theme]
        }
    },
});
//組み込みのテーマを使用します。
arWebDesigner.create('#ar-web-designer', {
    themes: {
      initialTheme: 'defaultDark',
      themeSelector: { enabled: false } 
    },
});

UMD Module

UMD MODULE

//ユーザー定義テーマを使用します。
GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    themes: {
        initialTheme: 'testTheme',
        themeSelector: {
            enabled: false,
            availableThemes: ['Default', theme]
        }
    }
});
//組み込みのテーマを使用します。
GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    themes: {
        initialTheme: 'defaultDark',
        themeSelector: { enabled: false }
    },
});

TypeScript Module

TYPESCRIPT MODULE

//ユーザー定義テーマを使用します。
GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    themes: {
        initialTheme: 'testTheme',
        themeSelector: {
            enabled: false,
            availableThemes: ['Default', theme]
        }
    }
});
//組み込みのテーマを使用します。
GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    themes: {
        initialTheme: 'defaultDark',
        themeSelector: { 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']
});

dateTimeLocale

説明： 'date-fns' から追加のロケールオブジェクトを指定します。en、fr、ja、ko、pl、zhCN、zhTW 以外のロケールを使用する場合は、これを使用します。

戻り値： Locale

必須：オプション

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デザイナコンポーネントのルーラーの設定を指定します。

必須：オプション

ES

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

UMD

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

TypeScript

TypeScript

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

visible

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

戻り値：boolean

必須：はい

WebデザイナのAPI

export const arWebDesigner

create()

apiof()

addLanguage()

destroy()

export const ColorThemes: ColorThemesType

ColorThemesType

Shades

Color

ColorTheme

GlobalDesignerAPI

create()

apiof()

addLanguage()

destroy()

ResourceBundle

lng

ns

resources

DesignerAPI

app

about

help

ES

UMD

TypeScript

applicationTitle

ES

UMD

TypeScript

»applicationTitleCompact

ES

UMD

TypeScript

»applicationVersion

»coreVersion

ES

UMD

TypeScript

focus()

ES

UMD

TypeScript

editor()

canUndo()/undo()

ES

UMD

TypeScript

canRedo()/redo()

ES

UMD

TypeScript

canCut()/cut()

ES

UMD

TypeScript

canCopy()/copy()

ES

UMD

TypeScript

canPaste()/paste()

ES

UMD

TypeScript

canDelete()/delete()

ES

UMD

TypeScript

panels

menu

»open()

»pin

»close

ES

UMD

TypeScript

sidebar

»open()

»close