ActiveReportsは、WebデザイナコンポーネントをWebアプリケーションに統合するための豊富なAPIを提供します。プロジェクトにWebデザイナコンポーネントを埋め込むには、WebデザイナのAPIを使用します。APIを使用することで、レポートを作成、設計、および保存でき、デザイナのロケールの定義、レポートアイテムのデフォルト設定のカスタマイズ、データタブとプロパティタブの管理、アプリケーション情報の変更などの追加機能を使用できます。以下は、ES、UMD、TypeScriptモジュールの使用例を説明しています。
パラメータ(型):
selector: string
戻り値: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
戻り値:void
必須:はい
サンプルコード |
コードのコピー
|
GrapeCity.ActiveReports.Designer.addLanguage('en', [
{
"ns": "app",
"lng": "en",
"resources": {
"about": {
"textAppTitleCompact": "",
},
}
},
]);
|
destroy()
説明:デザイナアプリケーションを破棄します。
パラメータ(型):
戻り値: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オブジェクトを使用して、デザイナで編集する新しいレポートを作成します。
パラメータ(型):
- 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
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デザイナコンポーネントに保存します。
パラメータ(型):
- id(オプション): string
- name(オプション): string
戻り値: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
- levelは通知レベルを指します。通知に使用される色とアイコンを決定します。
- captionは、通知のキャプションを指します。デフォルトでは、通知がポップアップするときに表示され、通知の詳細ビューでタイトルとして使用されます。
- 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']
});
|
説明:適用されるデフォルトのテーマ。
戻り値: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'}
});
説明:ユーザーが選択できる利用可能なテーマの配列。組み込みのテーマ名を使用するか、テーマオブジェクトを渡すことができます。テーマオブジェクトは次を使用して作成できます。
戻り値:(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']}
});
説明:デザイナがシステム設定に基づいてダークテーマを自動的に検出して切り替えるかどうかを示します。デフォルトでは、「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 }
});
説明:利用可能なすべてのテーマをリストするテーマピッカーを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が返された場合は「保存」処理をキャンセルします。
パラメータ(型):
- 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()
説明:保存処理が完了したときに呼び出されるハンドラ。
パラメータ(型):
- 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;}[]
- 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デザイナで編集されたレポートが更新されたときに、ドキュメントのタイトルを更新するためのカスタムロジックを実装できます。
パラメータ(型):
戻り値: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メソッドを実装することで、レポートビューワのコンポーネントをプラグインできます。
パラメータ(型):
- 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デザイナの式エディタのノードのフィルタ。
パラメータ(型):
- 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
必須:はい
ツールボックスで使用できるレポートアイテム。
有効な値
|
コードのコピー
|
'textbox' | 'checkbox' | 'container' | 'line' | 'shape' | 'tableofcontents' |
'image' | 'list' | 'table' | 'tablix' | 'chart' | 'bullet' | 'barcode' | 'formattedtext' |
'richtext' | 'sparkline' | 'subreport' | 'overflowplaceholder' | 'bandedlist' | 'inputfield'
|
ツールボックスで使用できるレポートアイテム。
有効な値
|
コードのコピー
|
'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' |
|
レポートアイテムのスタイル。
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
チャートのカラーパレット。
有効な値
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;}[];
- 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;}[];
- 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
}>
必須:オプション