GrapeCity ActiveReports for .NET 14.0J
プラグインAPIの使用

このトピックでは、ar-designer-types.d.tsファイルの内容がプラグインとして使用されています。以下は、Web デザイナで利用可能なプロパティと機能の使用方法について説明します。

ar-designer-types.d.ts
コードのコピー
/**
 * **web-designer.js**モジュールによってエクスポートされた**GrapeCity.ActiveReports.WebDesigner**オブジェクトのタイプ。
 */
export type DesignerApi = {
    /**
     * **renderApplication**関数に渡されるデフォルトの**DesignerOptions**オブジェクトを作成します。\
     * このオブジェクトには、デザイナに関する必須とオプションの両方の設定が含まれます。
     *
     * **例:**
     * ```javascript
     * var designerOptions = GrapeCity.ActiveReports.WebDesigner.createDesignerOptions(serverApi);
     * ```
     *
     * @param serverApi DesignerServerApiオブジェクト
     */
    createDesignerOptions: (serverApi: DesignerServerApi) => DesignerOptions;

    /**
     * 指定した**DesignerOptions**オブジェクトを使用して、**Webデザイナ**を**designerElementId**属性を持つ**<div>**要素に描画します。
     *
     * **例:**
     * ```javascript
     * GrapeCity.ActiveReports.WebDesigner.renderApplication('designer-id', designerOptions);
     * ```
     *
     * @param designerElementId文字列
     * @param designerOptions DesignerOptionsオブジェクト
     */
    renderApplication: (designerElementId: string, designerOptions: DesignerOptions) => Promise<any>;

    /**
     * デザイナにフォーカスを戻します。プラグイン要素を開いたり閉じたりする場合は、フォーカスが失われます。\
     * Ctrl + Z(元に戻す)、Ctrl + Y(やり直し)などのショートカットキーを使い続けるために、フォーカスを戻すことが必要です。
     *
     * **例:**
     * ```javascript
     * GrapeCity.ActiveReports.WebDesigner.focus();
     * ```
     */
    focus: () => void;

    /**
     * アプリケーションの名前またはバージョン、および製品のタイトルまたはバージョンに関する情報を含む**AboutInfo**オブジェクトを返します。
     *
     * **例:**
     * ```javascript
     * var aboutInfo = GrapeCity.ActiveReports.WebDesigner.getAboutInfo();
     * ```
     */
    getAboutInfo: () => AboutInfo;


    /**
     * デザイナに関するヘルプページの名前とurlを含む**<HelpInfo>**配列を返します。
     *
     * **例:**
     * ```javascript
     * var helpInfos = GrapeCity.ActiveReports.WebDesigner.getHelpInfos();
     * ```
     */
    getHelpInfos: () => Array<HelpInfo>;

    /**
     * このオブジェクトにはレポートを作成/開く/保存するための関数が含まれます。
     */
    api: ReportingApi;
};
/**
 * デザイナの操作に必要な機能を指定します。
 */
export type DesignerServerApi = {
    /**
     * RDLXレポート定義に格納するレポート、画像、テーマなどのリソースのリンクを作成します。\
     * リソースリンクは、レポートを描画する時に解決されます。レポートを正常にプレビューするためにこれらのリンクが正しく指定されている必要があります。
     *
     * @param options ResourceLinkOptions object
     */
    createResourceLink: (options: ResourceLinkOptions) => string;

    /**
     * **createResourceLink**関数の逆の操作を実装します。
     *
     * @param resourceLink文字列
     */
    parseResourceLink: (resourceLink: string) => ResourceLinkOptions;

    /**
     * 新規または既存のレポートを編集するときにデザイナのURLを更新します。
     *
     * @param options UpdateRouteOptionsオブジェクト
     */
    updateRoute: (options: UpdateRouteOptions) => void;

    /**
     * 利用可能なレポートのリストを取得します。
     */
    getReportsList: () => Promise<Array<ReportsListItem>>;

    /**
     * レポート内容を取得します。
     *
     * @param options GetReportContentOptionsオブジェクト
     */
    getReportContent: (options: GetReportContentOptions) => Promise<Report>;

    /**
     * レポートのリビジョンを取得します。
     *
     * @param options GetReportRevisionsOptionsオブジェクト
     */
    getReportRevisions: (options: GetReportRevisionsOptions) => Promise<Array<ReportRevision>>;

    /**
     * 新しいレポートを保存します。
     *
     * @param options SaveNewReportOptionsオブジェクト
     */
    saveNewReport: (options: SaveNewReportOptions) => Promise<SaveReportResponse>;

    /**
     * 既存のレポートを保存します。
     *
     * @param options SaveExistingReportOptions
     */
    saveExistingReport: (options: SaveExistingReportOptions) => Promise<SaveReportResponse>;

    /**
     * 一時ファイルを保存します。
     *
     * @param options SaveTemporaryReportOptionsオブジェクト
     */
    saveTemporaryReport: (options: SaveTemporaryReportOptions) => Promise<SaveReportResponse>;

    /**
     * データセットとデータソースを取得します。
     *
     * @param options GetDataSourcesAndDataSetsOptionsオブジェクト
     */
    getDataSourcesAndDataSets: (options: GetDataSourcesAndDataSetsOptions) => Promise<GetDataSourcesAndDataSetsResponse>;

    /**
     * レポートテンプレートの内容を取得します。
     *
     * @param options GetTemplateContentOptionsオブジェクト
     */
    getTemplateContent: (options: GetTemplateContentOptions) => Promise<ReportTemplate>;

    /**
     * 利用可能なテーマのリストを取得します。
     */
    getThemesList: () => Promise<Array<ThemesListItem>>;

    /**
     * テーマの内容を取得します。
     *
     * @param options GetThemeContentOptionsオブジェクト
     */
    getThemeContent: (options: GetThemeContentOptions) => Promise<ThemeModel>;

    /**
     * 利用可能な画像のリストを取得します。
     */
    getImagesList: () => Promise<Array<ImagesListItem>>;

    /**
     * 画像のURLを返します。
     *
     * @param options GetImageUrlOptionsオブジェクト
     */
    getImageUrl: (options: GetImageUrlOptions) => string;

    /**
     * データソースを編集できるかどうかを示します。
     *
     * @param options CanEditDataSourceOptionsオブジェクト
     */
    canEditDataSource: (options: CanEditDataSourceOptions) => boolean;

    /**
     * データセットを編集できるかどうかを示します。
     *
     * @param options CanEditDataSetOptionsオブジェクト
     */
    canEditDataSet: (options: CanEditDataSetOptions) => boolean;

    /**
     * 指定したデータソースに対してデータセットを作成できるかどうかを示します。
     *
     * @param options CanAddDataSetForDataSourceOptionsオブジェクト
     */
    canAddDataSetForDataSource: (options: CanAddDataSetForDataSourceOptions) => boolean;

    /**
     * 指定したデータソース用に初期化されたデータセットを返します。
     *
     * @param options InitDataSetForDataSourceOptionsオブジェクト
     */
    initDataSetForDataSource: (options: InitDataSetForDataSourceOptions) => DataSet;

    /**
     * 指定したデータセットの利用可能なプロパティを返します。
     *
     * @param options GetDataSetPropertiesOptionsオブジェクト
     */
    getDataSetProperties: (options: GetDataSetPropertiesOptions) => Array<DataSetProperty>;

    /**
     * 指定したデータセットのスキーマを取得します。
     *
     * @param option GetDataSetSchemaOptionsオブジェクト
     */
    getDataSetSchema: (options: GetDataSetSchemaOptions) => Promise<GetDataSetSchemaResponse>;
};

export type Report = Object;
export type ReportTemplate = Object;

export type ResourceLinkOptions = {
    /** リソースID */
    id: string;

    /** リソースタイプ */
    type: 'report' | 'image' | 'theme' | null;

    /** 予約済み:「null」のみがサポートされています。 */
    version: null;
};
export type UpdateRouteOptions = {
    /** レポートのID */
    id: string;
    /** 予約済み:「null」のみがサポートされています。 */
    version: null;
};
export type ReportsListItem = {
    /** レポートのID */
    _id: string;

    /** レポート名 */
    Name: string;

    /** レポートがCPLかFPLかを指定します。 */
    IsCpl: boolean;

    /** 予約済み:「PageReport」のみがサポートされています。 */
    Type: 'PageReport';

    /** 予約済み:「すべて」のみがサポートされています。 */
    $effectivePermissions: 'All';
};

export type GetReportContentOptions = {
    /** レポートのID */
    id: string;

    /** 予約済み:「null」のみがサポートされています。 */
    version: null;
};

export type GetReportRevisionsOptions = {
    /** レポートのID */
    id: string;
};
export type ReportRevision = {
    /** レポートのID */
    _id: string;

    /** レポート名 */
    Name: string;

    /** レポートがCPLかFPLかを指定します。 */
    IsCpl: boolean;

    /** 予約済み:「PageReport」のみがサポートされています。 */
    Type: 'PageReport';

    /** 予約済み:「すべて」のみがサポートされています。 */
    $effectivePermissions: 'All';

    /** 予約済み:「null」のみがサポートされています。 */
    version?: number | null;
};

export type SaveNewReportOptions = {
    /** レポート名 */
    name: string;

    /** レポートJSONモデル */
    content: Report;
};

export type SaveExistingReportOptions = {
    /** レポートのID */
    id: string;

    /** レポートJSONモデル */
    content: Report;
};

export type SaveTemporaryReportOptions = {
    /** レポート名 */
    name: string;
    /** レポートJSONモデル */
    content: Report;
};

export type SaveReportResponse = {
    /** 保存されたレポートのID */
    Id: string;
};

export type GetDataSourcesAndDataSetsOptions = {
    dataSetInfo: {
        /** データセットID */
        id: string;
        /** データセット名 */
        name: string;
        /** 予約済み:「null」のみがサポートされています。 */
        version: null;
    };

    /** 予約済み */
    dataSourceInfo: Object;

    /** レポートで使用されるデータセット */
    reportDataSets: Array<DataSet>;

    /** レポートで使用されるデータソース */
    reportDataSources: Array<DataSource>;
};

export type GetDataSourcesAndDataSetsResponse = {
    /** データソース */
    dataSources: Array<DataSource>;

    /** データセット */
    dataSets: Array<DataSet>;
};

export type GetTemplateContentOptions = {
    /** レポートテンプレートID */
    id: st
};

export type ThemesListItem = {
    /** テーマのID */
    _id: string;

    /** テーマ名 */
    Name: string;

    /** デフォルトテーマとして設定するかどうかを指定します。1つのテーマのみをデフォルトとして設定できます。 */
    IsDefault: boolean;

    /** 「濃色1」テーマ色 */
    Dark1: string;

    /** 「濃色2」テーマ色 */
    Dark2: string;

    /** 「淡色1」テーマ色 */
    Light1: string;

    /** 「淡色2」テーマ色 */
    Light2: string;

    /** 「アクセント1」テーマ色 */
    Accent1: string;

    /** 「アクセント2」テーマ色 */
    Accent2: string;

    /** 「アクセント3」テーマ色 */
    Accent3: string;

    /** 「アクセント4」テーマ色 */
    Accent4: string;

    /** 「アクセント5」テーマ色 */
    Accent5: string;

    /** 「アクセント6」テーマ色 */
    Accent6: string;

    /** メジャーフォントファミリ */
    MajorFontFamily: string;

    /** マイナーフォントファミリ */
    MinorFontFamily: string;
};
export type GetThemeContentOptions = {
    /** テーマのID */
    id: string;
};

export type ThemeModel = {
    /** テーマ色 */
    Colors: {
        /** 「濃色1」テーマ色 */
        Dark1: string;

        /** 「濃色2」テーマ色 */
        Dark2: string;

        /** 「淡色1」テーマ色 */
        Light1: string;

        /** 「淡色2」テーマ色 */
        Light2: string;

        /** 「アクセント1」テーマ色 */
        Accent1: string;

        /** 「アクセント2」テーマ色 */
        Accent2: string;

        /** 「アクセント3」テーマ色 */
        Accent3: string;

        /** 「アクセント4」テーマ色 */
        Accent4: string;

        /** 「アクセント5」テーマ色 */
        Accent5: string;

        /** 「アクセント6」テーマ色 */
        Accent6: string;

        /** ハイパーリンク テキストのテーマ色 */
        Hyperlink: string;

        /** 表示済みのハイパーリンク テキストのテーマ色 */
        HyperlinkFollowed: string;
    };
    /** テーマのフォント */
    Fonts: {
        /** メジャーフォントの設定 */
        MajorFont: ThemeFont;
        /** マイナーフォントの設定 */
        MinorFont: ThemeFont;
    };

    /** テーマの画像 */
    Images: Array<ThemeImage>;

    /** テーマ定数 */
    Constants: Array<ThemeConstant>;
};

export type ThemeFont = {
    /** フォントファミリ */
    Family: string;

    /** フォントのスタイル */
    Style: string;

    /** フォントのサイズ */
    Size: string;

    /** フォントの太さ */
    Weight: string;
};

export type ThemeImage = {
    /** 画像の名前 */
    Name: string;

    /** 画像のMIMEタイプ */
    MIMEType: string;

    /** Base64エンコード形式の画像データ */
    ImageData: string;
};

export type ThemeConstant = {
    /** 定数キー */
    Key: string;

    /** 定数値 */
    Value: string;
};

export type ImagesListItem = {
    /** 画像のID */
    _id: string;

    /** 画像の名前 */
    Name: string;

    /** 画像のMIMEタイプ */
    MimeType: string;

    /** Base64エンコード形式の画像データ */
    Thumbnail: string | null;
};

export type GetImageUrlOptions = {
    /** 画像のID */
    id: string;
};

export type CanEditDataSourceOptions = {
    /** データソース */
    dataSource: DataSource;

    /** データソースのデータプロバイダ */
    dataProvider: string;
};

export type CanEditDataSetOptions = {
    /** データセット */
    dataSet: DataSet;

    /** データセットの親データソースのデータプロバイダ */
    dataProvider: string;
};

export type CanAddDataSetForDataSourceOptions = {
    /** データソース */
    dataSource: DataSource;

    /** データソースのデータプロバイダ */
    dataProvider: string;
};

export type InitDataSetForDataSourceOptions = {
    /** データソース */
    dataSource: DataSource;

    /** データソースのデータプロバイダ */
    dataProvider: string;

    /** 初期化されるデータセット名 */
    dataSetName: string;
};

export type GetDataSetPropertiesOptions = {
    /** データセットの親データソースのデータプロバイダ */
    dataProvider: string;
};

export type DataSetProperty = 'name' | 'commandType' | 'query' | 'fields' | 'calculatedFields' | 'parameters' | 'filters'
    | 'caseSensitivity' | 'collation' | 'kanatypeSensitivity' | 'widthSensitivity' | 'accentSensitivity';

export type GetDataSetSchemaOptions = {
    /** データセット */
    dataSet: DataSet;

    /** データセットの親データソース */
    dataSource: DataSource;
};

export type GetDataSetSchemaResponse = {
    /** データセットのフィールド */
    fields: Array<Field>;

    /** データセットクエリパラメータ */
    parameters: Array<QueryParameter>;
};

export type DesignerOptions = {
    /**
     * デザイナの表示に使用されるロケールを指定します。
     * ロケール値が明示的に指定されていない場合は、ブラウザの設定に応じてロケールが使用されます。
     *
     * **例:**
     * ```javascript
     * designerOptions.locale = 'ja';
     * ```
     */
    locale?: 'en' | 'ja' | 'zh';

    /**
     * デザイナで使用されるデフォルトの寸法の単位を指定します。
     * 寸法の単位が明示的に指定されていない場合、ロケールに応じて識別されます。
     *
     * **例:**
     * ```javascript
     * designerOptions.units = 'cm';
     * ```
     */
    units?: 'in' | 'cm';

    /**
     * デザイナのフォントプロパティのドロップダウンに表示されるフォントのリストを指定します。
     * フォントが明示的に指定されていない場合、フォルトのフォントリストが使用されます。
     *
     * **例:**
     * ```javascript
     * designerOptions.fonts = ['Arial', 'Courier New', 'Times New Roman'];
     * ```
     */
    fonts?: Array<string>;

    /**
     * 使用可能なレポートアイテムを制限したり並べ替えたりできます。
     * レポートアイテムをカンマ区切りで指定します。
     *
     * ```none
     * BandedList, Barcode, Bullet, Chart, CheckBox, Container, FormattedText, Image, InputField, Line, List,
     * OverflowPlaceholder, Shape, Sparkline, Subreport, Table, TableOfContents, Tablix, TextBox
     * ```
     *
     * **例:**
     * ```javascript
     * designerOptions.reportItems = 'TextBox,CheckBox,Table,Chart,Image';
     * ```
     */
    reportItems?: string;

    /**
     * カスタマイズ可能なレポートアイテムの機能を指定します。
     */
    reportItemsFeatures: {
        /** Barcode */
        barcode: {
            /**
             * 新しく作成されたバーコードに使用するデフォルトの種類をオーバーライドします。\
             * デフォルトでは、新しいバーコードがQRコードで作成されます。
             *
             * **例:**
             * ```javascript
             * designerOptions.reportItemsFeatures.barcode.defaultSymbology = 'Code_128_A';
             * ```
             */
            defaultSymbology?: BarcodeSymbology;

            /**
             * 利用可能なバーコードの種類のリストを制限します。\
             * デフォルトでは、ActiveReportsがサポートするすべてのバーコードが利用可能です。
             *
             * **例:**
             * ```javascript
             * designerOptions.reportItemsFeatures.barcode.symbologies = ['Code_128_A', 'Code_128_B', 'Code_128_C'];
             * ```
             */
            symbologies?: Array<BarcodeSymbology>;
        };

        /** Table */
        table: {
            /**
             * フィールドがテーブルの詳細行にドラッグ&ドロップされた時、テーブルヘッダを自動入力する必要があるかどうかを指定します。\
             * たとえば、**ProductName**フィールドが詳細行にドロップされた時、「ProductName」の値がヘッダ行に追加されます。\
             * デフォルトでは、有効になっています。
             *
             * **例:**
             * ```javascript
             * designerOptions.reportItemsFeatures.table.autoFillHeader = false;
             * ```
             */
            autoFillHeader: boolean;

            /**
             * フィールドがテーブルの詳細行にドラッグ&ドロップされた時、テーブルフッタを自動入力する必要があるかどうかを指定します。\
             * たとえば、**ProductNameフィールド**が詳細行にドロップされた時、**「=Count([ProductName])」**の値がフッタ行に追加されます。\
             * デフォルトでは、無効になっています。
             *
             * **例:**
             * ```javascript
             * designerOptions.reportItemsFeatures.table.autoFillFooter = true;
             * ```
             */
            autoFillFooter: boolean;

            /**
             * ヘッダ、フッタ、お??よび詳細行内でセルの垂直方向の結合を有効にするかどうかを指定します。\
             * デフォルトでは、有効になっています。
             *
             * **例:**
             * ```javascript
             * designerOptions.reportItemsFeatures.table.canMergeCellsVertically = false;
             * ```
             */
            canMergeCellsVertically: boolean;
        };

        /** Tablix */
        tablix: {
            /**
             * フィールドが**Tablix**の行グループセルにドラッグ&ドロップされた時、**Tablix**のコーナー領域のセルを自動入力する必要があるかどうかを指定します。\
             * たとえば、**ProductName**フィールドが行グループセルにドラッグ&ドロップされた時、**「ProductName」**の値がコーナー領域のセルに追加されます。\
             * デフォルトでは、有効になっています。
             *
             * **例:**
             * ```javascript
             * designerOptions.reportItemsFeatures.tablix.autoFillCorner = false;
             * ```
             */
            autoFillCorner: boolean;

            /**
             * Tablixウィザードを使用して、Tablixを作成または編集できるかどうかを指定します。\
             * デフォルトでは、有効になっています。
             *
             * **例:**
             * ```javascript
             * designerOptions.reportItemsFeatures.tablix.canUseWizard = false;
             * ```
             */
            canUseWizard: boolean;
        };
    };

    /**
     * **lockLayout**を有効にすると、既存のレポートアイテムの変更のみが可能です。\
     * 新しいレポートアイテムを追加するや、既存のアイテムを削除する、レポートのレイアウトを変更することができません。\
     * デフォルトでは、無効になっています。
     *
     * **例:**
     * ```javascript
     * designerOptions.lockLayout = true;
     * ```
     */
    lockLayout: boolean;

    /**
     * **restoreUnsavedReport**を有効にすると、ブラウザタブまたはブラウザ自体を閉じた場合、未保存レポートを復元します。\
     * **restoreUnsavedReport**を無効にすると、未保存レポートを復元することができません。\
     * デフォルトでは、有効になっています。
     *
     * **例:**
     * ```javascript
     * designerOptions.restoreUnsavedReport = false;
     * ```
     */
    restoreUnsavedReport: boolean;

    /**
     * **reportInfo.id**を有効にすると、対応するレポートがデザイナで開かれます。
     *
     * **例:**
     * ```javascript
     * designerOptions.reportInfo.id = 'MyReport.rdlx';
     * ```
     */
    reportInfo: {
        /** レポートのID */
        id?: string | null;
        /** 予約済み:「null」のみがサポートされています。 */
        version?: number | null;
    };
    documentation: {
        /**
         *  デザイナのホームのドキュメントリンクを指定します。
         */
        home?: string;

        /**
         * デザイナ内のレポートアイテムの変換のドキュメントリンクを指定します。
         */
        reportItemsTransformation?: string;
    };

    /** プラグインAPI */
    serverApi: DesignerServerApi;

    /**
     * **DesignerOptions**オブジェクトに**openViewer**関数を実装することで、**ReportViewer**コンポーネントをプラグインできます。\
     * **openViewer**関数を実装して、**DesignerOptions**に渡すと、デザイナの[リボン]タブに**[プレビュー]**ボタンが表示されます。
     *
     * **例:**
     * ```javascript
     * designerOptions.openViewer = openViewerImpl;
     * ```
     *
     * @param options ViewerBaseOptionsオブジェクト
     */
    openViewer?: (options: ViewerBaseOptions) => void;

    /**
     * **DesignerOptions**オブジェクトに**openFileView**関数を実装することで、**FileView**コンポーネントをプラグインできます。\
     * **openFileView**関数を実装して、**DesignerOptions**に渡すと、デザイナの[リボン]タブに**[ファイル]**タブが表示されます。
     *
     * **例:**
     * ```javascript
     * designerOptions.openFileView = openFileViewImpl;
     * ```
     *
     * @param options FileViewBaseOptionsオブジェクト
     */
    openFileView?: (options: FileViewBaseOptions) => void;

    /**
     * **DesignerOptions**オブジェクトに**onSave()**関数を実装することで、**[保存]**ボタンの動作を指定できます。
     *
     * **例:**
     * ```javascript
     * designerOptions.onSave = onSaveImpl;
     * ```
     *
     * @param options SaveBaseOptionsオブジェクト
     */
    onSave?: (options: SaveBaseOptions) => void;

    /**
     * **DesignerOptions**オブジェクトに**onSaveAs**関数を実装することで、**[名前を付けて保存]**ボタンの動作を指定できます。
     *
     * **例:**
     * ```javascript
     * designerOptions.onSaveAs = onSaveAsImpl;
     * ```
     *
     * @param options SaveBaseOptionsオブジェクト
     */
    onSaveAs?: (options: SaveBaseOptions) => void;

「    /**
     * **DesignerOptions**オブジェクトに**onOpen**関数を実装することで、**[開く]**ボタンの動作を指定できます。
     *
     * **例:**
     * ```javascript
     * designerOptions.onOpen = onOpenImpl;
     * ```
     *
     * @param options OpenBaseOptionsオブジェクト
     */
    onOpen?: (options: OpenBaseOptions) => void;

    /**
     * **DesignerOptionsオブジェクト**に**openDataSourceEditor**関数を実装することで、データソースの追加、編集ボタンの動作を指定できます。
     *
     * **例:**
     * ```javascript
     * designerOptions.openDataSourceEditor = openDataSourceEditorImpl;
     * ```
     *
     * @param options OpenDataSourceEditorBaseOptionsオブジェクト
     */
    openDataSourceEditor?: (options: OpenDataSourceEditorBaseOptions) => void;

    /**
     * **データ**タブの**データセット**セクションから**追加**ボタンをクリックしたときの動作を指定できます。
     *
     * **例:**
     * ```javascript
     * designerOptions.dataSetPicker.mode = 'Panel';
     * designerOptions.dataSetPicker.open = openDataSetPickerImpl;
     * designerOptions.dataSetPicker.close = closeDataSetPickerImpl;
     * ```
     */
    dataSetPicker: {
        /** データセットの追加 */
        mode: DataSetPickerMode;

        /**
         * [データセットの追加]ダイアログを開くときの動作を指定します。
         *
         * @param options OpenDataSetPickerBaseOptionsオブジェクト
         */
        open?: (options: OpenDataSetPickerBaseOptions) => void;

        /**
         * [データセットの追加]ダイアログを終了するときの動作を指定します。
         */
        close?: () => void;
    };

    /** **保存**ボタンの設定 */
    saveButton: {
        /**
         * [保存]ボタンを表示するかどうかを指定します。\
         *  デフォルトで表示されません。
         *
         * **例:**
         * ```javascript
         * designerOptions.saveButton.visible = true;
         * ```
         */
        visible: boolean;
    };

    /** **名前を付けて保存**ボタンの設定 */
    saveAsButton: {
        /**
         * **[名前を付けて保存]**ボタンを表示するかどうかを指定します。\
         *  デフォルトで表示されません。
         *
         * **例:**
         * ```javascript
         * designerOptions.saveAsButton.visible = true;
         * ```
         */
        visible: boolean;
    };

    /** **開く**ボタンの設定 */
    openButton: {
        /**
         * **[開く]**ボタンを表示するかどうかを指定します。\
         *  デフォルトで表示されません。
         *
         * **例:**
         * ```javascript
         * designerOptions.openButton.visible = true;
         * ```
         */
        visible: boolean;
    };

    /** **挿入**タブの設定 */
    insertTab: {
        /**
         * リボンの**[挿入]**タブを表示するかどうかを指定します。\
         * ツールボックスと挿入タブを交換できます。\
         * デフォルトで表示されません。
         *
         * **例:**
         * ```javascript
         * designerOptions.insertTab.visible = true;
         * ```
         */
        visible: boolean;
    };

    /** **エクスプローラ**の設定 */
    reportExplorer: {
        /**
         * [エクスプローラ]ボタンを表示するかどうかを指定します。\
         * デフォルトで表示されます。
         *
         * **例:**
         * ```javascript
         * designerOptions.reportExplorer.visible = false;
         * ```
         */
        visible: boolean;
    };

    /** **グループエディタ**の設定 */
    groupEditor: {
        /**
         * **[グループエディタ]**ボタンを表示するかどうかを指定します。\
         * デフォルトで表示されます。
         *
         * **例:**
         * ```javascript
         * designerOptions.groupEditor.visible = false;
         * ```
         */
        visible: boolean;
    };

    /** **ツールボックス**の設定 */
    toolBox: {
        /**
         * 左側にある**[ツールボックス]**を表示するかどうかを指定します。\
         * デフォルトで表示されます。
         *
         * **例:**
         * ```javascript
         * designerOptions.toolBox.visible = false;
         * ```
         */
        visible: boolean;
    };

    /** **プロパティ**タブの設定 */
    propertiesTab: {
        /**
         * **[プロパティ]**タブを表示するかどうかを指定します。\
         * デフォルトで表示されます。
         *
         * **例:**
         * ```javascript
         * designerOptions.propertiesTab.visible = false;
         * ```
         */
        visible: boolean;

        /**
         * 使用可能なプロパティモードを指定します。\
         * デフォルト値は「Both」です。
         *
         * **例:**
         * ```javascript
         * designerOptions.propertiesTab.mode = 'Basic';
         * ```
         */
        mode: 'Basic' | 'Advanced' | 'Both';

        /**
         * デフォルト値は**「Both」**です。\
         * 未定義の場合は、最後に使用されたプロパティモードが設定されます。
         *
         * **例:**
         * ```javascript
         * designerOptions.propertiesTab.defaultMode = 'Advanced';
         * ```
         */
        defaultMode?: 'Basic' | 'Advanced';
    };

    /** **データ**タブの設定 */
    dataTab: {
        /**
         * **[データ]**タブを表示するかどうかを指定します。\
         * デフォルトで表示されます。
         *
         * **例:**
         * ```javascript
         * designerOptions.dataTab.visible = false;
         * ```
         */
        visible: boolean;

        /** **データソース**セクションの設定 */
        dataSources: {
            /**
             * **[データソース]**セクションを表示するかどうかを指定します。\
             * デフォルトで表示されます。
             *
             * **例:**
             * ```javascript
             * designerOptions.dataTab.dataSources.visible = false;
             * ```
             */
            visible: boolean;

            /**
             * データセットを変更(追加/削除)できるかどうかを指定します。\
             * デフォルトでは、無効になっています。
             *
             * **例:**
             * ```javascript
             * designerOptions.dataTab.dataSources.canModify = true;
             * ```
             */
            canModify: boolean;
        };

        /** **データセット**セクションの設定 */
        dataSets: {
            /**
             * **[データセット]**セクションを表示するかどうかを指定します。\
             * デフォルトで表示されます。
             *
             * **例:**
             * ```javascript
             * designerOptions.dataTab.dataSets.visible = false;
             * ```
             */
            visible: boolean;

            /**
             * データセットを変更(追加/削除)できるかどうかを指定します。\
             * デフォルトでは、無効になっています。
             *
             * **例:**
             * ```javascript
             * designerOptions.dataTab.dataSets.canModify = true;
             * ```
             */
            canModify: boolean;
        };

        /** **パラメータ**セクションの設定 */
        parameters: {
            /**
             * **[パラメータ]**セクションを表示するかどうかを指定します。\
             * デフォルトで表示されます。
             *
             * **例:**
             * ```javascript
             * designerOptions.dataTab.parameters.visible = false;
             * ```
             */
            visible: boolean;

            /**
             * レポートパラメータを変更(追加/削除)できるかどうかを指定します。\
             * デフォルトでは、有効になっています。
             *
             * **例:**
             * ```javascript
             * designerOptions.dataTab.parameters.canModify = false;
             * ```
             */
            canModify: boolean;
        };

        /** **共通の値**セクションの設定 */
        commonValues: {
            /**
             * **[共通の値]**セクションを表示するかどうかを指定します。\
             * デフォルトで表示されます。
             *
             * **例:**
             * ```javascript
             * designerOptions.dataTab.commonValues.visible = false;
             * ```
             */
            visible: boolean;
        };
    };

    /** **寸法の単位**エディタの設定 */
    gridSize: {
        /**
         * ステータスバーの[寸法の単位]エディタを表示するかどうかを指定します。\
         * デフォルトで表示されます。
         *
         * **例:**
         * ```javascript
         * designerOptions.gridSize.visible = false;
         * ```
         */
        visible: boolean;

        /**
         * **[寸法の単位]**エディタが表示されていない場合は、グリッドの幅を**in(インチ)/cm(センチ)**で指定できます。
         *
         * **例:**
         * ```javascript
         * designerOptions.gridSize.value = '0.5in';
         * ```
         */
        value?: string;
    };

    /** **グリッド**トグルの設定 */
    showGrid: {
        /**
         * ステータスバの**[グリッド]**トグルを表示するかどうかを指定します。\
         * デフォルトで表示されます。
         *
         * **例:**
         * ```javascript
         * designerOptions.showGrid.visible = false;
         * ```
         */
        visible: boolean;

        /**
         * **[グリッド]**トグルの表示切り替えが表示されていない場合は、グリッドの表示値を**true**または**false**に指定できます。
         *
         * **例:**
         * ```javascript
         * designerOptions.showGrid.value = false;
         * ```
         */
        value?: boolean;
    };
};
export type LocalizationUnit = {
    /** 名前空間 */
    ns: string;

    /** ロケール */
    lng: string;

    /** ローカリゼーションリソース */
    resources: any;
};

export type BarcodeSymbology = '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';
export type ViewerBaseOptions = {
    /** デザイナが決定されたロケール値 */
    locale: 'en' | 'ja' | 'zh';

    /** デザイナによって渡されたアプリケーション名 */
    applicationTitle: string;

    /** プレビューするレポートに関する情報 */
    reportInfo: ViewerReportInfo;
};

export type ViewerReportInfo = {
    /** レポートのID */
    id?: string;

    /** ブラウザ内に表示するビューワに対するJSON形式のレポート内容 */
    content?: Report;

    /** レポート名 */
    name: string;

    /** プレビューするレポートがサーバーに保存されている既存のレポートかどうかを指定します。 */
    isTemporary?: boolean;
};

export type FileViewBaseOptions = {
    /** デザイナが決定されたロケール値 */
    locale: 'en' | 'ja' | 'zh';

    /** デザイナが要求されたファイルビューモード */
    mode: 'new' | 'open' | 'saveAs';

    /** 編集中のレポートに関する情報 */
    reportInfo: FileViewReportInfo;

    /** デザイナによって渡された**「製品情報」**に関連する情報 */
    aboutInfo?: AboutInfo;

    /** デザイナによって渡された**「ヘルプ」**に関連する情報 */
    helpInfos?: Array<HelpInfo>;
};

export type FileViewReportInfo = {
    /** レポートのID */
    id?: string;

    /** レポート名 */
    name: string;

    /** レポート権限 */
    permissions: Array<string>;
};

export type SaveBaseOptions = {
    /** デザイナが決定されたロケール値 */
    locale: 'en' | 'ja' | 'zh';
    /** 保存するレポートに関連する情報 */
    reportInfo: SaveReportInfo & {
        /** JSON形式のレポート内容 */
        content?: Report;
    };

    /** callback on successful report saving */
    onSuccess: () => void;
};

export type OpenBaseOptions = {
    /** デザイナが決定されたロケール値 */
    locale: 'en' | 'ja' | 'zh';
};

export type OpenDataSourceEditorBaseOptions = {
    /** デザイナが決定されたロケール値 */
    locale: 'en' | 'ja' | 'zh';

    /** 既存のデータソースを編集する場合はnullではない。新しいデータソースを作成する場合は**null**。 */
    dataSource: DataSource | null;
    /** レポートで使用されたデータソース */
    reportDataSources: Array<DataSource>;

    /** データソースを正常に編集または作成したときのコールバック */
    onSuccess: (options: DataSourceEditorOnSuccessOptions) => void;
    /** データソースエディタを閉じる時のコールバック */
    onClose: () => void;
};

export type DataSourceEditorOnSuccessOptions = {
    /** 正常に作成または編集されたデータソース */
    dataSource: DataSource;
};

export type OpenDataSetPickerBaseOptions = {
    /** デザイナが決定されたロケール値 */
    locale: 'en' | 'ja' | 'zh';

    /** モードがパネルレイアウトの場合、[データ]タブに[データセットの追加]ボタンが表示されます。 */
    mode: DataSetPickerMode;

    /** モードがパネルでない場合は、[データセットの追加]ボタンがこのIDを持つ要素に描画します。 */
    elementId?: string;

    /** レポートのデータソース */
    reportDataSources: Array<DataSource>;

    /** レポートのデータセット */
    reportDataSets: Array<DataSet>;

    /** 追加するデータソースとデータセットは、この関数にパラメータとして渡します。 */
    addDataSourcesAndDataSets: (options: AddDataSourcesAndDataSetsOptions) => void;

    /** [データセットの追加]を閉じる時のコールバック。 */
    onClose: () => void;
};
export type DataSetPickerMode = 'Panel' | 'Dialog';

export type DataSource = {
    /** データソース名 */
    Name: string;

    /** connection properties */
    ConnectionProperties: {
        /** 接続文字列 */
        ConnectString: string;

        /** データプロバイダ(オンラインヘルプを参照してください。) */
        DataProvider: string;
    };
    // その他のプロパティについては、オンラインヘルプを参照してください。
};
export type DataSet = {
    /** データセット名 */
    Name: string;

    /** データセットのフィールド */
    Fields: Array<Field>;

    /** データセットクエリ */
    Query: {
        /** 親データソース名 */
        DataSourceName: string;

        /** クエリコマンドの種類 */
        CommandType: 'Text' | 'StoredProcedure';

        /** クエリコマンドテキスト */
        CommandText: string;

        /** クエリパラメータ */
        QueryParameters: Array<QueryParameter>;
    };
    // その他のプロパティについては、オンラインヘルプを参照してください。
};

export type Field = {
    /** フィールド名 */
    Name: string;

    /** 連結フィールドに対するデータフィールド名 */
    DataField?: string;

    /** 計算フィールドに対するフィールド値 */
    Value?: string;

    /** デフォルトの集計フィールド(使用可能な集計関数については、オンラインヘルプを参照してください。) */
    Aggregate?: 'Count' | 'Sum' | 'First' | 'Max' | 'Min' /* etc. */;

    /** フィールドのデータ型 */
    DataType?: 'String' | 'Integer' | 'Float' | 'Number' | 'Boolean' | 'DateTime';
};

export type QueryParameter = {
    /** クエリパラメータ名 */
    Name: string;

    /** クエリパラメータ値 */
    Value: string;
};

export type AddDataSourcesAndDataSetsOptions = {
    /** 追加するデータソース */
    dataSources: Array<DataSource>;

    /** 追加するデータセット */
    dataSets: Array<DataSet>;
};

export type ReportingApi = {
    /**
     * レポートに未保存の変更があるかどうかを示します。
     *
     * **例:**
     * ```javascript
     * var hasUnsavedChanges = GrapeCity.ActiveReports.WebDesigner.api.isReportDirty();
     * if (hasUnsavedChanges) console.log('編集中のレポートには未保存の変更があります。');
     * ```
     */
    isReportDirty: () => boolean;

    /**
     * 編集中のレポートに関する情報を返します。
     *
     * **例:**
     * ```javascript
     * var reportInfo = GrapeCity.ActiveReports.WebDesigner.api.getReportInfo();
     * console.log(`「${reportInfo.name}」レポートを編集しています。`);
     * ```
     */
    getReportInfo: () => CurrentReportInfo;

    /**
     * 指定したCreateReportOptionsオブジェクトを使用して、デザイナで編集する新しいレポートを作成します。
     *
     * **例:**
     * ```javascript
     * GrapeCity.ActiveReports.WebDesigner.api.createReport({
     *     onFinish: () => {
     *         console.log(空白のRDLレポートが作成されました。');
     *     },
     * });
     * ```
     *
     * @param options CreateReportOptionsオブジェクト
     */
    createReport: (options: CreateReportOptions) => void;

    /**
     * 指定したOpenReportOptionsオブジェクトを使用して、デザイナで編集する既存のレポートを開きます。
     *
     * **例:**
     * ```javascript
     * GrapeCity.ActiveReports.WebDesigner.api.openReport({
     *     reportInfo: {
     *         id: 'MyReport.rdlx',
     *         name: 'MyReport.rdlx',
     *     },
     *     onFinish: () => {
     *         console.log('既存の「MyReport.rdlx」レポートを開きました。');
     *     },
     * });
     * ```
     *
     * @param options OpenReportOptionsオブジェクト
     */
    openReport: (options: OpenReportOptions) => void;

    /**
     * 指定したSaveReportOptionsオブジェクトを使用して、デザイナで編集されたレポートを保存します。
     *
     * **例:**
     * ```javascript
     * GrapeCity.ActiveReports.WebDesigner.api.saveReport({
     *     reportInfo: {
     *         name: 'MyReport.rdlx',
     *     },
     *     onFinish: () => {
     *         console.log('新規の「MyReport.rdlx」レポートが保存されました。');
     *     },
     * });
     * ```
     *
     * @param options SaveReportOptionsオブジェクト
     */
    saveReport: (options: SaveReportOptions) => void;
};

export type AboutInfo = {
    /** アプリケーション名はデフォルトで使用される**「ActiveReports Webデザイナ」**に置き換わります。 */
    applicationTitle: string;

    /** スペースが足りない場合は、アプリケーション名が省略して表示されます。 */
    applicationTitleCompact: string;

    /** アプリケーションのバージョン */
    applicationVersion: string;

    /** 上書きできる製品のタイトル */
    productTitle?: string;

    /** 上書きできる製品のバージョン */
    productVersion?: string;
};

export type HelpInfo = {
    /** ヘルプページの名前 */
    title?: string;
    /** ヘルプページのurl */
    link: string;
};

//
export type CurrentReportInfo = {
    /**
     * レポートのID
     *
     * 既存のレポートを編集する場合は、**id**を定義します。\
     * 新しいレポートを編集する場合は、**id**を**null**にします。
     */
    id: string | null;

    /** レポート名 */
    name: string;

    /** レポート権限 */
    permissions: Array<string>;
};

export type CreateReportOptions = {
    /** テンプレートに関する情報 */
    templateInfo?: TemplateInfo;

    /** データセットに関する情報 */
    dataSets?: Array<DataSetInfo>;

    /** レポートの作成が開始された時のコールバック */
    onStart?: () => void;

    /** レポートの作成が終了した時のコールバック */
    onFinish?: () => void;
};

/** レポートを作成するためにtemplateInfoを指定する場合は、**id**または**content**を定義します。 */
export type TemplateInfo = {
    /** レポートテンプレート名 */
    name: string;

    /** レポートテンプレートID */
    id?: string;

    /** 空白でない新しいレポートを作成するために使用できるJSON形式のテンプレート。 */
    content?: ReportTemplate;
};
export type DataSetInfo = {
    /** データセットID */
    id: string;

    /** データセット名 */
    name: string;
};

export type OpenReportOptions = {
    reportInfo: OpenReportInfo;

    /** レポートの「開く」操作が開始された時のコールバック */
    onStart?: () => void;

    /** レポートの「開く」操作が終了した時のコールバック */
    onFinish?: () => void;
};

export type OpenReportInfo = {
    /** レポート名 */
    name: string;

    /** レポートのID */
    id?: string;

    /** JSON形式のレポート内容。 */
    content?: Report;
};

export type SaveReportOptions = {
    /** レポート情報 */
    reportInfo: SaveReportInfo;

    /** レポートの保存が開始された時のコールバック */
    onStart?: () => void;

    /** レポートの保存が終了した時のコールバック */
    onFinish?: () => void;
};
export type SaveReportInfo = {
    /**
     * レポートのID
     *
     * 保存する時に既存のレポートを置き換える場合は、正しいIDを明示的に指定します。
     */
    id?: string;

    /** 正しい名前を明示的に指定します。 */
    name: string;
};
/* ===== データセットの追加 === */

/**
 * **data-set-picker.js**モジュールによってエクスポートされた**dataSetPicker**オブジェクトのタイプ。
 */
export type DataSetPickerApi = {
    /**
     * 指定したDataSetPickerOptionsオブジェクトを使用して、データの追加オプションを**「dataSetPickerElementId」**属性を持つ**<div>**要素に描画します。
     *
     * **例:**
     * ```javascript
     * dataSetPicker.renderDataSetPicker('data-set-picker-id', dataSetPickerOptions);
     * ```
     *
     * @param dataSetPickerElementId文字列
     * @param options DataSetPickerOptions
     */
    renderDataSetPicker: (dataSetPickerElementId: string, options: DataSetPickerOptions) => void;

    /**
     * [データセットの追加]を解放します。
     *
     * **例:**
     * ```javascript
     * dataSetPicker.dispose();
     * ```
     */
    dispose: () => void;
};

export type DataSetPickerOptions = OpenDataSetPickerBaseOptions & {
       /** カスタムローカリゼーションデータを指定します。 */
    localeData?: Array<LocalizationUnit>;

       /** [データセットの追加]のサーバーAPI */
    serverApi: {
        /** データセットのリストを取得します。 */
        getDataSetsList: () => Promise<DataSetsListItem>;
        /**
         * データソースとデータセットを取得します。
         *
         * @param options GetDataSourcesAndDataSetsOptionsオブジェクト
         */
        getDataSourcesAndDataSets: (options: GetDataSourcesAndDataSetsOptions) => Promise<GetDataSourcesAndDataSetsResponse>;
    };
};

export type DataSetsListItem = {
    /** データセットID */
    id: string;

    /** データセット名 */
    name: string;

    /** 予約済み:「null」のみがサポートされています。 */
    version: null;
};

/* ===== データソースエディタ ===== */
/**
 * **ar-datasource-editor.js**モジュールによってエクスポートされた**ARDataSourceEditor**オブジェクトのタイプ。
 */
export type DataSourceEditorApi = {
    /**
     * 指定した**DataSourceEditorInitOptions**オブジェクトを使用してデータソースエディタを初期化し、**「dataSourceEditorElementId」**属性を持つ<div>要素に描画します。
     *
     * **例:**
     * ```javascript
     * ARDataSourceEditor.init('data-source-editor-id', dataSourceEditorInitOptions);
     * ```
     *
     * @param dataSourceEditorElementId文字列
     * @param options DataSourceEditorInitOptionsオブジェクト
     */
    init: (dataSourceEditorElementId: string, options?: DataSourceEditorInitOptions) => void;

    /**
     * データソースエディタを開きます。
     *
     * **例:**
     * ```javascript
     * ARDataSourceEditor.open(dataSourceEditorOptions);
     * ```
     *
     * @param options DataSourceEditorOptionsオブジェクト
     */
    open: (options: DataSourceEditorOptions) => void;
};

export type CustomProviderDescriptor = {
    /**
     * key:データプロバイダ識別子\
     * DataSource.ConnectionProperties.DataProviderプロパティに使用されます。
     */
    key: string;
    /**
     * name:データプロバイダーのラベル\
     * UIでデータプロバイダのラベルとして使用されます。
     */
    name: string;
};

export type DataSourceEditorInitOptions = {
    /** 定義済みデータプロバイダ */
    predefinedProviders?: Array<PredefinedProvider>;
    /** OleDBプロバイダ */
    oleDbProviders?: Array<OleDbProvider>;
    /** カスタムプロバイダ */
    customProviders?: Array<CustomProviderDescriptor>;
};
export type PredefinedProvider = 'SQL' | 'OLEDB' | 'ODBC' | 'JSON' | 'CSV' | 'XML';

export type OleDbProvider = PredefinedOleDbProvider | string;

export type PredefinedOleDbProvider = 'Microsoft.Jet.OLEDB.4.0' | 'SQLOLEDB.1' | 'MSDataShape.1' | 'MSDASQL.1';

export type DataSourceEditorOptions = OpenDataSourceEditorBaseOptions & {
    /** カスタムローカリゼーションデータを指定します。 */
    localeData?: Array<LocalizationUnit>;

    /** [データソースエディタ]のサーバーAPI */
    serverApi: {
        /**
         * データソースへの接続をテストします。
         *
         * @param options TestConnectionOptionsオブジェクト
         */
        testConnection: (options: TestConnectionOptions) => Promise<TestConnectionResponse>;
    };
};

export type TestConnectionOptions = {
    /** データソース */
    dataSource: DataSource;
};

export type TestConnectionResponse = {
    /** エラーコード: 成功した場合は0 */
    Code: number;

    /** 接続設定に利用可能なデータベースのリスト */
    Databases: Array<string> | null,

    /** エラーメッセージ */
    Error: string | null,
};
/* ===== ファイルダイアログ ===== */
/**
 * **file-dialog.js**モジュールによってエクスポートされた**fileDialog**オブジェクトのタイプ。
 */
export type FileDialogApi = {
    /**
     * 指定した**OpenReportDialogOptions**オブジェクトを使用して**[開く]**ダイアログを作成し、**「openReportDialogElementId」**属性を持つ<div>要素に描画します。
     *
     * **例:**
     * ```javascript
     * fileDialog.createOpenReportDialog('open-report-dialog-id', openReportDialogOptions);
     * ```
     *
     * @param openReportDialogElementId文字列
     * @param options OpenReportDialogOptionsオブジェクト
     */
    createOpenReportDialog: (openReportDialogElementId: string, options: OpenReportDialogOptions) => void;

    /**
     * 指定した**SaveReportAsDialogOptions**オブジェクトを使用して**[名前を付けて保存]**ダイアログを作成し、**「saveReportAsDialogElementId」**属性を持つ<div>要素に描画します。
     *
     * **例:**
     * ```javascript
     * fileDialog.createSaveReportAsDialog('save-report-as-dialog-id', saveReportAsDialogOptions);
     * ```
     *
     * @param saveReportAsDialogElementId文字列
     * @param options SaveReportAsDialogOptionsオブジェクト
     */
    createSaveReportAsDialog: (saveReportAsDialogElementId: string, options: SaveReportAsDialogOptions) => void;
};

export type FileDialogOptions = {
    /**
     * ファイルダイアログを表示するために使用されるロケールを指定します。
     * ロケール値が明示的に指定されていない場合は、**「ja」**が使用されます。
     */
    locale?: 'en' | 'ja' | 'zh';
    /** カスタムローカリゼーションデータを指定します。 */
    localeData?: Array<LocalizationUnit>;

    /** ファイルのパス区切り */
    pathSeparator?: string;

    /** ファイルパスの大文字小文字の区別を無視する必要があるかどうかを指定します。 */
    ignoreCase?: boolean;

    /** ファイルダイアログを閉じる時のコールバック */
    onClose?: () => void,
};

export type OpenReportDialogOptions = FileDialogOptions & {
    /** レポートが正常に開かれた時のコールバック */
    onSuccess?: (openResult: { path: string, id: string }) => void,

    /** [開く]ダイアログのサーバーAPI */
    api: {
        /** レポートのリストを取得します。 */
        getReportsList: () => Promise<Array<{ path: string }>>,
        /** 指定したパスでレポートを開きます。 */
        openReport: (options: { path: string }) => Promise<{ id: string }>,
    },
};

export type SaveReportAsDialogOptions = FileDialogOptions & {
    /** レポート情報 */
    reportInfo?: {
        /** レポートを保存するためのファイルパス */
        path?: string,
    },

    /** レポートが正常に保存された時のコールバック */
    onSuccess?: (saveResult: { path: string, id: string }) => void,

    /** [名前を付けて保存]ダイアログのサーバーAPI */
    api: {
        /** レポートのリストを取得します。 */
        getReportsList: () => Promise<Array<{ path: string }>>,
        /** 指定したパスでレポートを保存します。 */
        saveReport: (options: { path: string }) => Promise<{ id: string }>,
    },
};

/* ===== ファイルビュー ===== */

/**
 * **file-view.js**モジュールによってエクスポートされた**fileView**オブジェクトのタイプ。
 */
export type FileViewApi = {
    renderFileView: (fileViewElementId: string, options: FileViewOptions) => void;
};

export type FileViewOptions = FileViewBaseOptions & {
    /** ファイルビューのサーバーAPI */
    serverApi: {
        /** レポートのリストを取得します。 */
        getReportsList: () => Promise<Array<ReportsListItem>>;

        /**
         * レポートバージョンを取得します。
         *
         * @param options GetReportRevisionsOptionsオブジェクト
         */
        getReportRevisions: (options: GetReportRevisionsOptions) => Promise<Array<ReportRevision>>;

        /** データセットのリストを取得します。 */
        getDataSetsList: () => Promise<DataSetsListItem>;

        /** レポートテンプレートを取得します。 */
        getTemplatesList: () => Promise<Array<TemplatesListItem>>;
        /**
         * レポートテンプレートの内容を取得します。
         *
         * @param options GetTemplateContentOptionsオブジェクト
         */
        getTemplateContent: (options: GetTemplateContentOptions) => Promise<ReportTemplate>;

        /**
         * レポートテンプレートのサムネイルを取得します。
         *
         * @param options GetTemplateThumbnailOptionsオブジェクト
         */
        getTemplateThumbnail: (options: GetTemplateThumbnailOptions) => Promise<string>; // base64ImageData
    },

    /**
     * 指定した**CreateReportOptions**オブジェクトを使用して、デザイナで編集する新しいレポートを作成します。\
     * **GrapeCity.ActiveReports.WebDesigner.api.createReport**関数はこのプロパティに渡されます。
     *
     * @param options CreateReportOptionsオブジェクト
     */
    createReport: (options: CreateReportOptions) => void;

    /**
     * 指定した**OpenReportOptions**オブジェクトを使用して、デザイナで編集する既存のレポートを開きます。\
     * **GrapeCity.ActiveReports.WebDesigner.api.openReport**関数はこのプロパティに渡されます。
     *
     * @param options OpenReportOptionsオブジェクト
     */
    openReport: (options: OpenReportOptions) => void;

    /**
     * 指定したSaveReportOptionsオブジェクトを使用して、デザイナで編集中のレポートを保存します。\
     * GrapeCity.ActiveReports.WebDesigner.api.saveReport関数はこのプロパティに渡されます。
     *
     * @param options SaveReportOptionsオブジェクト
     */
    saveReport: (options: SaveReportOptions) => void;

    /** ファイルビューを閉じる時のコールバック */
    onClose: () => void;

    /** ファイルパスの大文字小文字の区別を無視する必要があるかどうかを指定します。 */
    ignoreCase?: boolean;

    /** ファイルパスの区切り文字 */
    delimiter?: string;
};
export type TemplatesListItem = {
    /** テンプレートID */
    _id: string;
   
    /** テンプレート名 */
    Name: string;
};

export type GetTemplateThumbnailOptions = {
    /** テンプレートID */
    id: string,
};

/* ===== ビューワコンテナ ===== */
/**
 * **viewer-container.js**モジュールによってエクスポートされた**viewerContainer**オブジェクトのタイプ。
 */
export type ViewerContainerApi = {
    /**
     * 指定した**ViewerContainerOptions**オブジェクトを使用して、ビューワのコンテナを**「viewerContainerElementId」**属性を持つ**<div>**要素に描画します。
     *
     * **例:**
     * ```javascript
     * viewerContainer.renderViewerContainer('viewer-container-id', viewerContainerOptions, onClose);
     * ```
     *
     * @param viewerContainerElementId文字列
     * @param options ViewerContainerOptionsオブジェクト
     * @param Viewerコンテナを閉じる時のonCloseコールバック関数
     */
    renderViewerContainer: (viewerContainerElementId: string, options: ViewerContainerOptions, onClose: () => void) => void;
};

export type ViewerContainerOptions = ViewerBaseOptions & {
    /**
     * ビューワで**<iframe>**を作成するために使用されるURLを作成します。
     */
    makeViewerUrl: () => string;
};