ActiveReports 14
ActiveReports 14 User Guide / Concepts / ActiveReports Web Designer / Web Designer API
In This Topic
    Web Designer API
    In This Topic

    This document provides the content of the ar-designer-types.d.ts file, that can be used as plug-in to your project. Here you will find the usage and descriptions of properties and functions available in Web Designer.

    ar-designer-types.d.ts
    Copy Code
    /**
     * Type of **GrapeCity.ActiveReports.WebDesigner** object exported by **web-designer.js** module.
     */
    export type DesignerApi = {
        /**
         * Creates the default **DesignerOptions** object to be passed to **renderApplication()** function.\
         * This object includes both required and optional Designer settings.
         *
         * **Example:**
         * ```javascript
         * var designerOptions = GrapeCity.ActiveReports.WebDesigner.createDesignerOptions(serverApi);
         * ```
         *
         * @param serverApi DesignerServerApi object
         */
        createDesignerOptions: (serverApi: DesignerServerApi) => DesignerOptions;
    
        /**
         * Renders **Web Designer** to **<div>** element with id **designerElementId** using the specified **DesignerOptions** object.
         *
         * **Example:**
         * ```javascript
         * GrapeCity.ActiveReports.WebDesigner.renderApplication('designer-id', designerOptions);
         * ```
         *
         * @param designerElementId string
         * @param designerOptions DesignerOptions object
         */
        renderApplication: (designerElementId: string, designerOptions: DesignerOptions) => Promise<any>;
    
        /**
         * Returns focus to Designer. Focus may be lost when plug-in components are opened/closed.\
         * Returning focus is essential to continue using Designer hotkeys like Ctrl+Z (undo), Ctrl+Y (redo), etc.
         *
         * **Example:**
         * ```javascript
         * GrapeCity.ActiveReports.WebDesigner.focus();
         * ```
         */
        focus: () => void;
    
        /**
         * Returns **AboutInfo** object containing information about application name/version and product title/version.
         *
         * **Example:**
         * ```javascript
         * var aboutInfo = GrapeCity.ActiveReports.WebDesigner.getAboutInfo();
         * ```
         */
        getAboutInfo: () => AboutInfo;
    
    
        /**
         * Returns **Array<HelpInfo>** containing title/link pairs of Designer-related Help pages.
         *
         * **Example:**
         * ```javascript
         * var helpInfos = GrapeCity.ActiveReports.WebDesigner.getHelpInfos();
         * ```
         */
        getHelpInfos: () => Array<HelpInfo>;
    
        /**
         * This object includes functions allowing to create/open/save report, etc.
         */
        api: ReportingApi;
    };
    /**
     * This type specifies functions required for Designer operation.
     */
    export type DesignerServerApi = {
        /**
         * Creates a resource (report/image/theme) link to be stored in RDLX report definition.\
         * Resource links are then resolved while rendering report. These links need to be correct for successful report preview.
         *
         * @param options ResourceLinkOptions object
         */
        createResourceLink: (options: ResourceLinkOptions) => string;
    
        /**
         * Does the opposite operation to **createResourceLink()** function.
         *
         * @param resourceLink string
         */
        parseResourceLink: (resourceLink: string) => ResourceLinkOptions;
    
        /**
         * Updates Designer URL when a new or an existing report editing is started.
         *
         * @param options UpdateRouteOptions object
         */
        updateRoute: (options: UpdateRouteOptions) => void;
    
        /**
         * Gets available reports list.
         */
        getReportsList: () => Promise<Array<ReportsListItem>>;
    
        /**
         * Gets report content.
         *
         * @param options GetReportContentOptions object
         */
        getReportContent: (options: GetReportContentOptions) => Promise<Report>;
    
        /**
         * Gets report revisions.
         *
         * @param options GetReportRevisionsOptions object
         */
        getReportRevisions: (options: GetReportRevisionsOptions) => Promise<Array<ReportRevision>>;
    
        /**
         * Saves a new report.
         *
         * @param options SaveNewReportOptions object
         */
        saveNewReport: (options: SaveNewReportOptions) => Promise<SaveReportResponse>;
    
        /**
         * Saves an existing report.
         *
         * @param options SaveExistingReportOptions
         */
        saveExistingReport: (options: SaveExistingReportOptions) => Promise<SaveReportResponse>;
    
        /**
         * Saves a temporary report.
         *
         * @param options SaveTemporaryReportOptions object
         */
        saveTemporaryReport: (options: SaveTemporaryReportOptions) => Promise<SaveReportResponse>;
    
        /**
         * Gets data sources and data sets.
         *
         * @param options GetDataSourcesAndDataSetsOptions object
         */
        getDataSourcesAndDataSets: (options: GetDataSourcesAndDataSetsOptions) => Promise<GetDataSourcesAndDataSetsResponse>;
    
        /**
         * Gets report template content.
         *
         * @param options GetTemplateContentOptions object
         */
        getTemplateContent: (options: GetTemplateContentOptions) => Promise<ReportTemplate>;
    
        /**
         * Gets available themes list.
         */
        getThemesList: () => Promise<Array<ThemesListItem>>;
    
        /**
         * Gets theme content.
         *
         * @param options GetThemeContentOptions object
         */
        getThemeContent: (options: GetThemeContentOptions) => Promise<ThemeModel>;
    
        /**
         * Gets available images list.
         */
        getImagesList: () => Promise<Array<ImagesListItem>>;
    
        /**
         * Returns image URL.
         *
         * @param options GetImageUrlOptions object
         */
        getImageUrl: (options: GetImageUrlOptions) => string;
    
        /**
         * Indicates whether a data source can be edited.
         *
         * @param options CanEditDataSourceOptions object
         */
        canEditDataSource: (options: CanEditDataSourceOptions) => boolean;
    
        /**
         * Indicates whether a data set can be edited.
         *
         * @param options CanEditDataSetOptions object
         */
        canEditDataSet: (options: CanEditDataSetOptions) => boolean;
    
        /**
         * Indicates whether a data set can be created for the specified data source.
         *
         * @param options CanAddDataSetForDataSourceOptions object
         */
        canAddDataSetForDataSource: (options: CanAddDataSetForDataSourceOptions) => boolean;
    
        /**
         * Returns a data set initialized for the specified data source.
         *
         * @param options InitDataSetForDataSourceOptions object
         */
        initDataSetForDataSource: (options: InitDataSetForDataSourceOptions) => DataSet;
    
        /**
         * Returns properties available for the specified data set.
         *
         * @param options GetDataSetPropertiesOptions object
         */
        getDataSetProperties: (options: GetDataSetPropertiesOptions) => Array<DataSetProperty>;
    
        /**
         * Gets schema for the specified data set.
         *
         * @param option GetDataSetSchemaOptions object
         */
        getDataSetSchema: (options: GetDataSetSchemaOptions) => Promise<GetDataSetSchemaResponse>;
    };
    
    export type Report = Object;
    export type ReportTemplate = Object;
    
    export type ResourceLinkOptions = {
        /** resource id */
        id: string;
    
        /** resource type */
        type: 'report' | 'image' | 'theme' | null;
    
        /** RESERVED - for now only **null** is supported */
        version: null;
    };
    export type UpdateRouteOptions = {
        /** report id */
        id: string;
        /** RESERVED - for now only **null** is supported */
        version: null;
    };
    export type ReportsListItem = {
        /** report id */
        _id: string;
    
        /** report name */
        Name: string;
    
        /** specifies whether report is CPL or FPL */
        IsCpl: boolean;
    
        /** RESERVED - for now only **PageReport** is supported */
        Type: 'PageReport';
    
        /** RESERVED - for now only **All** is supported */
        $effectivePermissions: 'All';
    };
    
    export type GetReportContentOptions = {
        /** report id */
        id: string;
    
        /** RESERVED - for now only **null** is supported */
        version: null;
    };
    
    export type GetReportRevisionsOptions = {
        /** report id */
        id: string;
    };
    export type ReportRevision = {
        /** report id */
        _id: string;
    
        /** report name */
        Name: string;
    
        /** specifies whether report is CPL or FPL */
        IsCpl: boolean;
    
        /** RESERVED - for now only **PageReport** is supported */
        Type: 'PageReport';
    
        /** RESERVED - for now only **All** is supported */
        $effectivePermissions: 'All';
    
        /** RESERVED - for now only **null** is supported */
        version?: number | null;
    };
    
    export type SaveNewReportOptions = {
        /** report name */
        name: string;
    
        /** report JSON model */
        content: Report;
    };
    
    export type SaveExistingReportOptions = {
        /** report id */
        id: string;
    
        /** report JSON model */
        content: Report;
    };
    
    export type SaveTemporaryReportOptions = {
        /** report name */
        name: string;
        /** report JSON model */
        content: Report;
    };
    
    export type SaveReportResponse = {
        /** saved report id */
        Id: string;
    };
    
    export type GetDataSourcesAndDataSetsOptions = {
        dataSetInfo: {
            /** data set id */
            id: string;
            /** data set name */
            name: string;
            /** RESERVED - for now only **null** is supported */
            version: null;
        };
    
        /** RESERVED */
        dataSourceInfo: Object;
    
        /** data sets used in report */
        reportDataSets: Array<DataSet>;
    
        /** data sources used in report */
        reportDataSources: Array<DataSource>;
    };
    
    export type GetDataSourcesAndDataSetsResponse = {
        /** data sources */
        dataSources: Array<DataSource>;
    
        /** data sets */
        dataSets: Array<DataSet>;
    };
    
    export type GetTemplateContentOptions = {
        /** report template id */
        id: string;
    };
    
    export type ThemesListItem = {
        /** theme id */
        _id: string;
    
        /** theme name */
        Name: string;
    
        /** specifies whether theme is default or not, only a single theme can be default */
        IsDefault: boolean;
    
        /** Dark1 theme color */
        Dark1: string;
    
        /** Dark2 theme color */
        Dark2: string;
    
        /** Light1 theme color */
        Light1: string;
    
        /** Light2 theme color */
        Light2: string;
    
        /** Accent1 theme color */
        Accent1: string;
    
        /** Accent2 theme color */
        Accent2: string;
    
        /** Accent3 theme color */
        Accent3: string;
    
        /** Accent4 theme color */
        Accent4: string;
    
        /** Accent5 theme color */
        Accent5: string;
    
        /** Accent6 theme color */
        Accent6: string;
    
        /** Major text theme font family */
        MajorFontFamily: string;
    
        /** Minor text theme font family */
        MinorFontFamily: string;
    };
    export type GetThemeContentOptions = {
        /** theme id */
        id: string;
    };
    
    export type ThemeModel = {
        /** theme colors */
        Colors: {
            /** Dark1 theme color */
            Dark1: string;
    
            /** Dark2 theme color */
            Dark2: string;
    
            /** Light1 theme color */
            Light1: string;
    
            /** Light2 theme color */
            Light2: string;
    
            /** Accent1 theme color */
            Accent1: string;
    
            /** Accent2 theme color */
            Accent2: string;
    
            /** Accent3 theme color */
            Accent3: string;
    
            /** Accent4 theme color */
            Accent4: string;
    
            /** Accent5 theme color */
            Accent5: string;
    
            /** Accent6 theme color */
            Accent6: string;
    
            /** Hyperlink theme color */
            Hyperlink: string;
    
            /** Followed hyperlink theme color */
            HyperlinkFollowed: string;
        };
        /** theme fonts */
        Fonts: {
            /** Major font settings */
            MajorFont: ThemeFont;
            /** Minor font settings */
            MinorFont: ThemeFont;
        };
    
        /** theme images */
        Images: Array<ThemeImage>;
    
        /** theme constants */
        Constants: Array<ThemeConstant>;
    };
    
    export type ThemeFont = {
        /** font family */
        Family: string;
    
        /** font style */
        Style: string;
    
        /** font size */
        Size: string;
    
        /** font weight */
        Weight: string;
    };
    
    export type ThemeImage = {
        /** image name */
        Name: string;
    
        /** image MIME type */
        MIMEType: string;
    
        /** Base64 image data */
        ImageData: string;
    };
    
    export type ThemeConstant = {
        /** constant key */
        Key: string;
    
        /** constant value */
        Value: string;
    };
    
    export type ImagesListItem = {
        /** image id */
        _id: string;
    
        /** image name */
        Name: string;
    
        /** image MIME type */
        MimeType: string;
    
        /** Base64 image data */
        Thumbnail: string | null;
    };
    
    export type GetImageUrlOptions = {
        /** image id */
        id: string;
    };
    
    export type CanEditDataSourceOptions = {
        /** data source */
        dataSource: DataSource;
    
        /** data provider of data source */
        dataProvider: string;
    };
    
    export type CanEditDataSetOptions = {
        /** data set */
        dataSet: DataSet;
    
        /** data provider of data set's parent data source */
        dataProvider: string;
    };
    
    export type CanAddDataSetForDataSourceOptions = {
        /** data source */
        dataSource: DataSource;
    
        /** data provider of data source */
        dataProvider: string;
    };
    
    export type InitDataSetForDataSourceOptions = {
        /** data source */
        dataSource: DataSource;
    
        /** data provider of data source */
        dataProvider: string;
    
        /** data set name to be initialized */
        dataSetName: string;
    };
    
    export type GetDataSetPropertiesOptions = {
        /** data provider of data set's parent data source */
        dataProvider: string;
    };
    
    export type DataSetProperty = 'name' | 'commandType' | 'query' | 'fields' | 'calculatedFields' | 'parameters' | 'filters'
        | 'caseSensitivity' | 'collation' | 'kanatypeSensitivity' | 'widthSensitivity' | 'accentSensitivity';
    
    export type GetDataSetSchemaOptions = {
        /** data set */
        dataSet: DataSet;
    
        /** data set's parent data source */
        dataSource: DataSource;
    };
    
    export type GetDataSetSchemaResponse = {
        /** data set fields */
        fields: Array<Field>;
    
        /** data set query parameters */
        parameters: Array<QueryParameter>;
    };
    
    export type DesignerOptions = {
        /**
         * Specifies locale used for displaying Designer.
         * If **locale** is not specified explicitly here, the locale corresponding to the browser preferences is used.
         *
         * **Example:**
         * ```javascript
         * designerOptions.locale = 'ja';
         * ```
         */
        locale?: 'en' | 'ja' | 'zh';
    
        /**
         * Specifies the default measurement units used in Designer.
         * If **units** are not specified explicitly here, they are identified depending on **locale**.
         *
         * **Example:**
         * ```javascript
         * designerOptions.units = 'cm';
         * ```
         */
        units?: 'in' | 'cm';
    
        /**
         * Specifies the list of fonts displayed in font properties drop-downs all over Designer.
         * If **fonts** are not specified explicitly here, the default list of fonts is used.
         *
         * **Example:**
         * ```javascript
         * designerOptions.fonts = ['Arial', 'Courier New', 'Times New Roman'];
         * ```
         */
        fonts?: Array<string>;
    
        /**
         * It is possible to limit and/or reorder available report items.
         * Specify comma-separated report items keys from this list:
         *
         * ```none
         * BandedList, Barcode, Bullet, Chart, CheckBox, Container, FormattedText, Image, InputField, Line, List,
         * OverflowPlaceholder, Shape, Sparkline, Subreport, Table, TableOfContents, Tablix, TextBox
         * ```
         *
         * **Example:**
         * ```javascript
         * designerOptions.reportItems = 'TextBox,CheckBox,Table,Chart,Image';
         * ```
         */
        reportItems?: string;
    
        /**
         * Customizable report items features are specified here.
         */
        reportItemsFeatures: {
            /** Barcode features */
            barcode: {
                /**
                 * Overrides the default symbology used for newly-created barcodes.\
                 * By default new barcodes are created with QR Code symbology.
                 *
                 * **Example:**
                 * ```javascript
                 * designerOptions.reportItemsFeatures.barcode.defaultSymbology = 'Code_128_A';
                 * ```
                 */
                defaultSymbology?: BarcodeSymbology;
    
                /**
                 * Limits the list of barcode symbologies available for creation.\
                 * By default all barcode symbologies supported by ActiveReports are available.
                 *
                 * **Example:**
                 * ```javascript
                 * designerOptions.reportItemsFeatures.barcode.symbologies = ['Code_128_A', 'Code_128_B', 'Code_128_C'];
                 * ```
                 */
                symbologies?: Array<BarcodeSymbology>;
            };
    
            /** Table features */
            table: {
                /**
                 * Specifies whether **Table Header** needs to be auto-filled when a field is dropped to **Table Details**.\
                 * For example, if **ProductName** field is dropped to **Details**, **Product Name** value is set to **Header**.\
                 * By default this feature is **enabled**.
                 *
                 * **Example:**
                 * ```javascript
                 * designerOptions.reportItemsFeatures.table.autoFillHeader = false;
                 * ```
                 */
                autoFillHeader: boolean;
    
                /**
                 * Specifies whether **Table Footer** needs to be auto-filled when a field is dropped to **Table Details**.\
                 * For example, if **ProductName** field is dropped to **Details**, **=Count([ProductName])** value is set to **Footer**.\
                 * By default this feature is **disabled**.
                 *
                 * **Example:**
                 * ```javascript
                 * designerOptions.reportItemsFeatures.table.autoFillFooter = true;
                 * ```
                 */
                autoFillFooter: boolean;
    
                /**
                 * Specifies whether vertical merge of cells is enabled within **Table Header**, **Details** and **Footer**.\
                 * By default this feature is **enabled**.
                 *
                 * **Example:**
                 * ```javascript
                 * designerOptions.reportItemsFeatures.table.canMergeCellsVertically = false;
                 * ```
                 */
                canMergeCellsVertically: boolean;
            };
    
            /** Tablix features */
            tablix: {
                /**
                 * Specifies whether **Tablix Corner Cell** needs to be auto-filled when a field is dropped to **Tablix Row Group Cell**.\
                 * For example, if **ProductName** field is dropped to **Row Group Cell**, **Product Name** value is set to **Corner Cell**.\
                 * By default this feature is **enabled**.
                 *
                 * **Example:**
                 * ```javascript
                 * designerOptions.reportItemsFeatures.tablix.autoFillCorner = false;
                 * ```
                 */
                autoFillCorner: boolean;
    
                /**
                 * Specifies whether Tablix Wizard is available for creating/editing Tablix.\
                 * By default this feature is **enabled**.
                 *
                 * **Example:**
                 * ```javascript
                 * designerOptions.reportItemsFeatures.tablix.canUseWizard = false;
                 * ```
                 */
                canUseWizard: boolean;
            };
        };
    
        /**
         * When **lockLayout** is enabled, it is only possible to modify properties of existing report items.\
         * I.e., adding a new report item or deleting of an existing one is not possible as well as other operations that modify report layout structure.\
         * By default this feature is **disabled**.
         *
         * **Example:**
         * ```javascript
         * designerOptions.lockLayout = true;
         * ```
         */
        lockLayout: boolean;
    
        /**
         * When **restoreUnsavedReport** is **enabled**, the last unsaved report can be restored if browser tab or browser itself gets accidentally closed.\
         * In case **restoreUnsavedReport** is **disabled**, the aforementioned functionality is not available.\
         * By default this feature is **enabled**.
         *
         * **Example:**
         * ```javascript
         * designerOptions.restoreUnsavedReport = false;
         * ```
         */
        restoreUnsavedReport: boolean;
    
        /**
         * If **reportInfo.id** is specified, the corresponding report will be opened in Designer when Designer application is rendered.
         *
         * **Example:**
         * ```javascript
         * designerOptions.reportInfo.id = 'MyReport.rdlx';
         * ```
         */
        reportInfo: {
            /** report id */
            id?: string | null;
            /** RESERVED - for now only **null** is supported */
            version?: number | null;
        };
        documentation: {
            /**
             *  Specifies **Designer** home documentation link.
             */
            home?: string;
    
            /**
             * Specifies **Designer** report items transformation documentation link.
             */
            reportItemsTransformation?: string;
        };
    
        /** **Designer** server API */
        serverApi: DesignerServerApi;
    
        /**
         * You can plug-in **Report Viewer** component by providing **openViewer()** function implementation to **DesignerOptions** object.\
         * When **openViewer()** is implemented and passed to **DesignerOptions**, **Preview** button appears in Designer application bar.
         *
         * **Example:**
         * ```javascript
         * designerOptions.openViewer = openViewerImpl;
         * ```
         *
         * @param options ViewerBaseOptions object
         */
        openViewer?: (options: ViewerBaseOptions) => void;
    
        /**
         * You can plug-in **File View** component by providing **openFileView()** function implementation to **DesignerOptions** object.\
         * When **openFileView()** is implemented and passed to **DesignerOptions**, **File** tab appears in Designer application bar.
         *
         * **Example:**
         * ```javascript
         * designerOptions.openFileView = openFileViewImpl;
         * ```
         *
         * @param options FileViewBaseOptions object
         */
        openFileView?: (options: FileViewBaseOptions) => void;
    
        /**
         * You can specify behavior for **Save Report** scenario by providing **onSave()** function implementation to **DesignerOptions** object.
         *
         * **Example:**
         * ```javascript
         * designerOptions.onSave = onSaveImpl;
         * ```
         *
         * @param options SaveBaseOptions object
         */
        onSave?: (options: SaveBaseOptions) => void;
    
        /**
         * You can specify behavior for **Save Report As** scenario by providing **onSaveAs()** function implementation to **DesignerOptions** object.
         *
         * **Example:**
         * ```javascript
         * designerOptions.onSaveAs = onSaveAsImpl;
         * ```
         *
         * @param options SaveBaseOptions object
         */
        onSaveAs?: (options: SaveBaseOptions) => void;
    
        /**
         * You can specify behavior for **Open Report** scenario by providing **onOpen()** function implementation to **DesignerOptions** object.
         *
         * **Example:**
         * ```javascript
         * designerOptions.onOpen = onOpenImpl;
         * ```
         *
         * @param options OpenBaseOptions object
         */
        onOpen?: (options: OpenBaseOptions) => void;
    
        /**
         * You can specify behavior for **Add/Edit Data Source** scenario by providing **openDataSourceEditor()** function implementation to **DesignerOptions** object.
         *
         * **Example:**
         * ```javascript
         * designerOptions.openDataSourceEditor = openDataSourceEditorImpl;
         * ```
         *
         * @param options OpenDataSourceEditorBaseOptions object
         */
        openDataSourceEditor?: (options: OpenDataSourceEditorBaseOptions) => void;
    
        /**
         * You can specify behavior on clicking **Add Data Set** button from **Data** tab **Data Sets** section.
         *
         * **Example:**
         * ```javascript
         * designerOptions.dataSetPicker.mode = 'Panel';
         * designerOptions.dataSetPicker.open = openDataSetPickerImpl;
         * designerOptions.dataSetPicker.close = closeDataSetPickerImpl;
         * ```
         */
        dataSetPicker: {
            /** Data Set Picker mode */
            mode: DataSetPickerMode;
    
            /**
             * Specifies behavior on opening Data Set Picker.
             *
             * @param options OpenDataSetPickerBaseOptions object
             */
            open?: (options: OpenDataSetPickerBaseOptions) => void;
    
            /**
             * Specifies behavior on closing Data Set Picker.
             */
            close?: () => void;
        };
    
        /** **Save** button settings */
        saveButton: {
            /**
             * Specifies whether **Save** button needs to be shown.\
             * **Save** button is **not visible** by default.
             *
             * **Example:**
             * ```javascript
             * designerOptions.saveButton.visible = true;
             * ```
             */
            visible: boolean;
        };
    
        /** **Save As** button settings */
        saveAsButton: {
            /**
             * Specifies whether **Save As** button needs to be shown.\
             * **Save As** button is **not visible** by default.
             *
             * **Example:**
             * ```javascript
             * designerOptions.saveAsButton.visible = true;
             * ```
             */
            visible: boolean;
        };
    
        /** **Open** button settings */
        openButton: {
            /**
             * Specifies whether **Open** button needs to be shown.\
             * **Open** button is **not visible** by default.
             *
             * **Example:**
             * ```javascript
             * designerOptions.openButton.visible = true;
             * ```
             */
            visible: boolean;
        };
    
        /** **Insert** tab settings */
        insertTab: {
            /**
             * Specifies whether **Insert** tab needs to be shown in Designer application bar.\
             * **Tool Box** and **Insert** tab are interchangeable.\
             * **Insert** tab is **not visible** by default.
             *
             * **Example:**
             * ```javascript
             * designerOptions.insertTab.visible = true;
             * ```
             */
            visible: boolean;
        };
    
        /** **Report Explorer** settings */
        reportExplorer: {
            /**
             * Specifies whether **Report Explorer** button needs to be shown.\
             * **Report Explorer** button is **visible** by default.
             *
             * **Example:**
             * ```javascript
             * designerOptions.reportExplorer.visible = false;
             * ```
             */
            visible: boolean;
        };
    
        /** **Group Editor** settings */
        groupEditor: {
            /**
             * Specifies whether **Group Editor** button needs to be shown.\
             * **Group Editor** button is **visible** by default.
             *
             * **Example:**
             * ```javascript
             * designerOptions.groupEditor.visible = false;
             * ```
             */
            visible: boolean;
        };
    
        /** **Tool Box** settings */
        toolBox: {
            /**
             * Specifies whether left-side menu **Tool Box** needs to be shown.\
             * **Tool Box** is **visible** by default.
             *
             * **Example:**
             * ```javascript
             * designerOptions.toolBox.visible = false;
             * ```
             */
            visible: boolean;
        };
    
        /** **Properties** tab settings */
        propertiesTab: {
            /**
             * Specifies whether **Properties** tab needs to be shown.\
             * **Properties** tab is **visible** by default.
             *
             * **Example:**
             * ```javascript
             * designerOptions.propertiesTab.visible = false;
             * ```
             */
            visible: boolean;
    
            /**
             * Specifies available properties modes.\
             * The default value is **Both**.
             *
             * **Example:**
             * ```javascript
             * designerOptions.propertiesTab.mode = 'Basic';
             * ```
             */
            mode: 'Basic' | 'Advanced' | 'Both';
    
            /**
             * Relevant only when mode is **Both**.\
             * If **undefined**, the last used properties mode is set.
             *
             * **Example:**
             * ```javascript
             * designerOptions.propertiesTab.defaultMode = 'Advanced';
             * ```
             */
            defaultMode?: 'Basic' | 'Advanced';
        };
    
        /** **Data** tab settings */
        dataTab: {
            /**
             * Specifies whether **Data** tab needs to be shown.\
             * **Data** tab is **visible** by default.
             *
             * **Example:**
             * ```javascript
             * designerOptions.dataTab.visible = false;
             * ```
             */
            visible: boolean;
    
            /** **Data Sources** section settings */
            dataSources: {
                /**
                 * Specifies whether **Data Sources** section needs to be shown.\
                 * **Data Sources** section is **visible** by default.
                 *
                 * **Example:**
                 * ```javascript
                 * designerOptions.dataTab.dataSources.visible = false;
                 * ```
                 */
                visible: boolean;
    
                /**
                 * Specifies whether it is possible to modify (including add/edit/remove) data sources.\
                 * By default this feature is **disabled**.
                 *
                 * **Example:**
                 * ```javascript
                 * designerOptions.dataTab.dataSources.canModify = true;
                 * ```
                 */
                canModify: boolean;
            };
    
            /** **Data Sets** section settings */
            dataSets: {
                /**
                 * Specifies whether **Data Sets** section needs to be shown.\
                 * **Data Sets** section is **visible** by default.
                 *
                 * **Example:**
                 * ```javascript
                 * designerOptions.dataTab.dataSets.visible = false;
                 * ```
                 */
                visible: boolean;
    
                /**
                 * Specifies whether it is possible to modify (including add/edit/remove) data sets.\
                 * By default this feature is **disabled**.
                 *
                 * **Example:**
                 * ```javascript
                 * designerOptions.dataTab.dataSets.canModify = true;
                 * ```
                 */
                canModify: boolean;
            };
    
            /** **Parameters** section settings */
            parameters: {
                /**
                 * Specifies whether **Parameters** section needs to be shown.\
                 * **Parameters** section is visible by default.
                 *
                 * **Example:**
                 * ```javascript
                 * designerOptions.dataTab.parameters.visible = false;
                 * ```
                 */
                visible: boolean;
    
                /**
                 * Specifies whether it is possible to modify (including add/edit/remove) report parameters.\
                 * By default this feature is **enabled**.
                 *
                 * **Example:**
                 * ```javascript
                 * designerOptions.dataTab.parameters.canModify = false;
                 * ```
                 */
                canModify: boolean;
            };
    
            /** **Common Values** section settings */
            commonValues: {
                /**
                 * Specifies whether **Common Values** section needs to be shown.\
                 * **Common Values** section is **visible** by default.
                 *
                 * **Example:**
                 * ```javascript
                 * designerOptions.dataTab.commonValues.visible = false;
                 * ```
                 */
                visible: boolean;
            };
        };
    
        /** **Grid Size** editor settings */
        gridSize: {
            /**
             * Specifies whether **Grid Size** editor in **Status Bar** needs to be shown.\
             * **Grid Size** editor is **visible** by default.
             *
             * **Example:**
             * ```javascript
             * designerOptions.gridSize.visible = false;
             * ```
             */
            visible: boolean;
    
            /**
             * If **Grid Size** editor is **not visible**, it is possible to specify **Grid Size** value in **in/cm** (i.e. inches or centimeters).
             *
             * **Example:**
             * ```javascript
             * designerOptions.gridSize.value = '0.5in';
             * ```
             */
            value?: string;
        };
    
        /** **Show Grid** toggle settings */
        showGrid: {
            /**
             * Specifies whether **Show Grid** toggle in Status Bar needs to be shown.\
             * **Show Grid** toggle is **visible** by default.
             *
             * **Example:**
             * ```javascript
             * designerOptions.showGrid.visible = false;
             * ```
             */
            visible: boolean;
    
            /**
             * If **Show Grid** toggle is **not visible**, it is possible to specify **Show Grid** value as *true* or *false*.
             *
             * **Example:**
             * ```javascript
             * designerOptions.showGrid.value = false;
             * ```
             */
            value?: boolean;
        };
    };
    export type LocalizationUnit = {
        /** namespace */
        ns: string;
    
        /** locale */
        lng: string;
    
        /** localization resources */
        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 passed by Designer */
        locale: 'en' | 'ja' | 'zh';
    
        /** application title passed by Designer */
        applicationTitle: string;
    
        /** information on the report to-be-previewed */
        reportInfo: ViewerReportInfo;
    };
    
    export type ViewerReportInfo = {
        /** report id */
        id?: string;
    
        /** Report content in JSON format that can be useful for report viewers with in-browser rendering. */
        content?: Report;
    
        /** report name */
        name: string;
    
        /** Specifies whether the report to-be-previewed is an existing report saved on server side. */
        isTemporary?: boolean;
    };
    
    export type FileViewBaseOptions = {
        /** locale passed by Designer */
        locale: 'en' | 'ja' | 'zh';
    
        /** **File View** mode requested by Designer */
        mode: 'new' | 'open' | 'saveAs';
    
        /** information about the currently edited report */
        reportInfo: FileViewReportInfo;
    
        /** **AboutInfo** object passed by Designer */
        aboutInfo?: AboutInfo;
    
        /** **Array<HelpInfo>** passed by Designer */
        helpInfos?: Array<HelpInfo>;
    };
    
    export type FileViewReportInfo = {
        /** report id */
        id?: string;
    
        /** report name */
        name: string;
    
        /** report permissions */
        permissions: Array<string>;
    };
    
    export type SaveBaseOptions = {
        /** locale passed by Designer */
        locale: 'en' | 'ja' | 'zh';
        /** information about the report to-be-saved */
        reportInfo: SaveReportInfo & {
            /** report content in JSON format */
            content?: Report;
        };
    
        /** callback on successful report saving */
        onSuccess: () => void;
    };
    
    export type OpenBaseOptions = {
        /** locale passed by Designer */
        locale: 'en' | 'ja' | 'zh';
    };
    
    export type OpenDataSourceEditorBaseOptions = {
        /** locale passed by Designer */
        locale: 'en' | 'ja' | 'zh';
    
        /** **Non-null** if an existing data source edited, **null** - if a new one is created. */
        dataSource: DataSource | null;
        /** data sources used in report */
        reportDataSources: Array<DataSource>;
    
        /** callback on successful data source editing/creation */
        onSuccess: (options: DataSourceEditorOnSuccessOptions) => void;
        /** callback on closing Data Source Editor */
        onClose: () => void;
    };
    
    export type DataSourceEditorOnSuccessOptions = {
        /** successfully created or edited data source */
        dataSource: DataSource;
    };
    
    export type OpenDataSetPickerBaseOptions = {
        /** locale passed by Designer */
        locale: 'en' | 'ja' | 'zh';
    
        /** If mode is **Panel**, Data Set Picker is rendered within **Data** tab. */
        mode: DataSetPickerMode;
    
        /** If mode is not **Panel**, Data Set Picker is rendered to an element with this id. */
        elementId?: string;
    
        /** data sources used in report */
        reportDataSources: Array<DataSource>;
    
        /** data sets used in report */
        reportDataSets: Array<DataSet>;
    
        /** New data sources and data sets to be added are passed as parameters to this function. */
        addDataSourcesAndDataSets: (options: AddDataSourcesAndDataSetsOptions) => void;
    
        /** callback on closing Data Set Picker */
        onClose: () => void;
    };
    export type DataSetPickerMode = 'Panel' | 'Dialog';
    
    export type DataSource = {
        /** data source name */
        Name: string;
    
        /** connection properties */
        ConnectionProperties: {
            /** connection string */
            ConnectString: string;
    
            /** data provider - see ActiveReports Documentation for more details */
            DataProvider: string;
        };
        // ... more properties - see ActiveReports Documentation
    };
    export type DataSet = {
        /** data set name */
        Name: string;
    
        /** data set fields */
        Fields: Array<Field>;
    
        /** data set query */
        Query: {
            /** parent data source name */
            DataSourceName: string;
    
            /** query command type */
            CommandType: 'Text' | 'StoredProcedure';
    
            /** query command text */
            CommandText: string;
    
            /** query parameters */
            QueryParameters: Array<QueryParameter>;
        };
        // ... more properties - see ActiveReports Documentation
    };
    
    export type Field = {
        /** field name */
        Name: string;
    
        /** data field name - mandatory for bound fields */
        DataField?: string;
    
        /** field value - mandatory for calculated fields */
        Value?: string;
    
        /** default field aggregate - see ActiveReports Documentation for more available aggregates */
        Aggregate?: 'Count' | 'Sum' | 'First' | 'Max' | 'Min' /* etc. */;
    
        /** field data type */
        DataType?: 'String' | 'Integer' | 'Float' | 'Number' | 'Boolean' | 'DateTime';
    };
    
    export type QueryParameter = {
        /** query parameter name */
        Name: string;
    
        /** query parameter value */
        Value: string;
    };
    
    export type AddDataSourcesAndDataSetsOptions = {
        /** data sources to-be-added */
        dataSources: Array<DataSource>;
    
        /** data sets to-be-added */
        dataSets: Array<DataSet>;
    };
    
    export type ReportingApi = {
        /**
         * Indicates whether report has unsaved changes.
         *
         * **Example:**
         * ```javascript
         * var hasUnsavedChanges = GrapeCity.ActiveReports.WebDesigner.api.isReportDirty();
         * if (hasUnsavedChanges) console.log('Currently edited report has unsaved changes.');
         * ```
         */
        isReportDirty: () => boolean;
    
        /**
         * Returns information about the currently edited report.
         *
         * **Example:**
         * ```javascript
         * var reportInfo = GrapeCity.ActiveReports.WebDesigner.api.getReportInfo();
         * console.log(`Report "${reportInfo.name}" is currently edited.`);
         * ```
         */
        getReportInfo: () => CurrentReportInfo;
    
        /**
         * Creates a new report to be edited in Designer using the specified **CreateReportOptions** object.
         *
         * **Example:**
         * ```javascript
         * GrapeCity.ActiveReports.WebDesigner.api.createReport({
         *     onFinish: () => {
         *         console.log('An empty RDL report is created.');
         *     },
         * });
         * ```
         *
         * @param options CreateReportOptions object
         */
        createReport: (options: CreateReportOptions) => void;
    
        /**
         * Opens anOpens an existing report to be edited in Designer using the specified **OpenReportOptions** object.
         *
         * **Example:**
         * ```javascript
         * GrapeCity.ActiveReports.WebDesigner.api.openReport({
         *     reportInfo: {
         *         id: 'MyReport.rdlx',
         *         name: 'MyReport.rdlx',
         *     },
         *     onFinish: () => {
         *         console.log('An existing report "MyReport.rdlx" is opened.');
         *     },
         * });
         * ```
         *
         * @param options OpenReportOptions object
         */
        openReport: (options: OpenReportOptions) => void;
    
        /**
         * Saves the report currently edited in Designer using the specified **SaveReportOptions** object.
         *
         * **Example:**
         * ```javascript
         * GrapeCity.ActiveReports.WebDesigner.api.saveReport({
         *     reportInfo: {
         *         name: 'MyReport.rdlx',
         *     },
         *     onFinish: () => {
         *         console.log('A new report "MyReport.rdlx" is saved.');
         *     },
         * });
         * ```
         *
         * @param options SaveReportOptions object
         */
        saveReport: (options: SaveReportOptions) => void;
    };
    
    export type AboutInfo = {
        /** Application title replaces **ActiveReports Web Designer** in all the places where it is used by default. */
        applicationTitle: string;
    
        /** Compact application title is used in places where there is not enough space for a full title. */
        applicationTitleCompact: string;
    
        /** application version */
        applicationVersion: string;
    
        /** product title - can be overwritten */
        productTitle?: string;
    
        /** product version - can be overwritten */
        productVersion?: string;
    };
    
    export type HelpInfo = {
        /** help page title */
        title?: string;
        /** help page URL */
        link: string;
    };
    
    //
    export type CurrentReportInfo = {
        /**
         * report id
         *
         * If an existing report is edited, **id** is defined.\
         * Otherwise, if a new report is edited, **id** is **null**.
         */
        id: string | null;
    
        /** report name */
        name: string;
    
        /** report permissions */
        permissions: Array<string>;
    };
    
    export type CreateReportOptions = {
        /** template info */
        templateInfo?: TemplateInfo;
    
        /** data sets infos */
        dataSets?: Array<DataSetInfo>;
    
        /** callback on starting to create a report */
        onStart?: () => void;
    
        /** callback on finishing to create a report */
        onFinish?: () => void;
    };
    
    /** If **TemplateInfo** is specified for report creation, either **id** or **content** needs to be defined. */
    export type TemplateInfo = {
        /** report template name */
        name: string;
    
        /** report template id */
        id?: string;
    
        /** Report template content in JSON format that can be useful in case you would like to create a non-empty new report. */
        content?: ReportTemplate;
    };
    export type DataSetInfo = {
        /** data set id */
        id: string;
    
        /** data set name */
        name: string;
    };
    
    export type OpenReportOptions = {
        reportInfo: OpenReportInfo;
    
        /** callback on starting to open a report */
        onStart?: () => void;
    
        /** callback on finishing to open a report */
        onFinish?: () => void;
    };
    
    export type OpenReportInfo = {
        /** report name */
        name: string;
    
        /** report id */
        id?: string;
    
        /** report content in JSON format */
        content?: Report;
    };
    
    export type SaveReportOptions = {
        /** report info */
        reportInfo: SaveReportInfo;
    
        /** callback on starting to save a report */
        onStart?: () => void;
    
        /** callback on finishing to save a report */
        onFinish?: () => void;
    };
    export type SaveReportInfo = {
        /**
         * report id
         *
         * If an existing report is to be overwritten on saving, the correct **id** should be specified explicitly.
         */
        id?: string;
    
        /** The correct name needs to be always specified explicitly. */
        name: string;
    };
    /* ===== data-set-picker === */
    
    /**
     * Type of **dataSetPicker** object exported by **data-set-picker.js** module.
     */
    export type DataSetPickerApi = {
        /**
         * Renders **Data Set Picker** to **<div>** element with id **dataSetPickerElementId** using the specified **DataSetPickerOptions** object.
         *
         * **Example:**
         * ```javascript
         * dataSetPicker.renderDataSetPicker('data-set-picker-id', dataSetPickerOptions);
         * ```
         *
         * @param dataSetPickerElementId string
         * @param options DataSetPickerOptions
         */
        renderDataSetPicker: (dataSetPickerElementId: string, options: DataSetPickerOptions) => void;
    
        /**
         * Disposes Data Set Picker.
         *
         * **Example:**
         * ```javascript
         * dataSetPicker.dispose();
         * ```
         */
        dispose: () => void;
    };
    
    export type DataSetPickerOptions = OpenDataSetPickerBaseOptions & {
           /** Specifies custom localization data. */
        localeData?: Array<LocalizationUnit>;
    
           /** **Data Set Picker** server API */
        serverApi: {
            /** Gets data sets list. */
            getDataSetsList: () => Promise<DataSetsListItem>;
            /**
             * Gets data sources and data sets.
             *
             * @param options GetDataSourcesAndDataSetsOptions object
             */
            getDataSourcesAndDataSets: (options: GetDataSourcesAndDataSetsOptions) => Promise<GetDataSourcesAndDataSetsResponse>;
        };
    };
    
    export type DataSetsListItem = {
        /** data set id */
        id: string;
    
        /** data set name */
        name: string;
    
        /** RESERVED - for now only **null** is supported */
        version: null;
    };
    
    /* ===== data-source-editor ===== */
    /**
     * Type of **ARDataSourceEditor** object exported by **ar-datasource-editor.js** module.
     */
    export type DataSourceEditorApi = {
        /**
         * Initializes **Data Source Editor** using the specified **DataSourceEditorInitOptions** object and renders it to **<div>** element with id **dataSourceEditorElementId**.
         *
         * **Example:**
         * ```javascript
         * ARDataSourceEditor.init('data-source-editor-id', dataSourceEditorInitOptions);
         * ```
         *
         * @param dataSourceEditorElementId string
         * @param options DataSourceEditorInitOptions object
         */
        init: (dataSourceEditorElementId: string, options?: DataSourceEditorInitOptions) => void;
    
        /**
         * Opens Data Source Editor.
         *
         * **Example:**
         * ```javascript
         * ARDataSourceEditor.open(dataSourceEditorOptions);
         * ```
         *
         * @param options DataSourceEditorOptions object
         */
        open: (options: DataSourceEditorOptions) => void;
    };
    
    export type CustomProviderDescriptor = {
        /**
         * key - data provider identifier\
         * This value is used for **DataSource.ConnectionProperties.DataProvider** property.
         */
        key: string;
        /**
         * name - data provider label\
         * This value is used as a friendly data provider label in UI.
         */
        name: string;
    };
    
    export type DataSourceEditorInitOptions = {
        /** predefined providers */
        predefinedProviders?: Array<PredefinedProvider>;
        /** OLE DB providers */
        oleDbProviders?: Array<OleDbProvider>;
        /** custom providers */
        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 & {
        /** Specifies custom localization data. */
        localeData?: Array<LocalizationUnit>;
    
        /** **Data Source Editor** server API */
        serverApi: {
            /**
             * Tests data source connection.
             *
             * @param options TestConnectionOptions object
             */
            testConnection: (options: TestConnectionOptions) => Promise<TestConnectionResponse>;
        };
    };
    
    export type TestConnectionOptions = {
        /** data source */
        dataSource: DataSource;
    };
    
    export type TestConnectionResponse = {
        /** error code - 0 means success */
        Code: number;
    
        /** databases list available for test connection settings */
        Databases: Array<string> | null,
    
        /** error message */
        Error: string | null,
    };
    /* ===== file-dialog ===== */
    /**
     * Type of **fileDialog** object exported by **file-dialog.js** module.
     */
    export type FileDialogApi = {
        /**
         * Creates **Open-Report Dialog** using the specified **OpenReportDialogOptions** object and renders it to **<div>** element with id **openReportDialogElementId**.
         *
         * **Example:**
         * ```javascript
         * fileDialog.createOpenReportDialog('open-report-dialog-id', openReportDialogOptions);
         * ```
         *
         * @param openReportDialogElementId string
         * @param options OpenReportDialogOptions object
         */
        createOpenReportDialog: (openReportDialogElementId: string, options: OpenReportDialogOptions) => void;
    
        /**
         * Create **Save-Report-As Dialog** using the specified **SaveReportAsDialogOptions** object and renders it to **<div>** element with id **saveReportAsDialogElementId**.
         *
         * **Example:**
         * ```javascript
         * fileDialog.createSaveReportAsDialog('save-report-as-dialog-id', saveReportAsDialogOptions);
         * ```
         *
         * @param saveReportAsDialogElementId string
         * @param options SaveReportAsDialogOptions object
         */
        createSaveReportAsDialog: (saveReportAsDialogElementId: string, options: SaveReportAsDialogOptions) => void;
    };
    
    export type FileDialogOptions = {
        /**
         * Specifies locale used for displaying File Dialog.
         * If **locale** is not specified explicitly here, **en** is used.
         */
        locale?: 'en' | 'ja' | 'zh';
        /** Specifies custom localization data. */
        localeData?: Array<LocalizationUnit>;
    
        /** file path separator */
        pathSeparator?: string;
    
        /** Specifies whether file path case needs to be ignored. */
        ignoreCase?: boolean;
    
        /** callback on closing File Dialog */
        onClose?: () => void,
    };
    
    export type OpenReportDialogOptions = FileDialogOptions & {
        /** callback on successful report opening */
        onSuccess?: (openResult: { path: string, id: string }) => void,
    
        /** **Open-Report Dialog** server API */
        api: {
            /** Gets reports list. */
            getReportsList: () => Promise<Array<{ path: string }>>,
            /** Opens report at the specified **path**. */
            openReport: (options: { path: string }) => Promise<{ id: string }>,
        },
    };
    
    export type SaveReportAsDialogOptions = FileDialogOptions & {
        /** report info */
        reportInfo?: {
            /** file path for saving report */
            path?: string,
        },
    
        /** callback on successful report saving */
        onSuccess?: (saveResult: { path: string, id: string }) => void,
    
        /** **Save-Report-As Dialog** server API */
        api: {
            /** Gets reports list. */
            getReportsList: () => Promise<Array<{ path: string }>>,
            /** Saves report at the specified **path**. */
            saveReport: (options: { path: string }) => Promise<{ id: string }>,
        },
    };
    
    /* ===== file-view ===== */
    
    /**
     * Type of **fileView** object exported by **file-view.js** module.
     */
    export type FileViewApi = {
        renderFileView: (fileViewElementId: string, options: FileViewOptions) => void;
    };
    
    export type FileViewOptions = FileViewBaseOptions & {
        /** **File View** server API */
        serverApi: {
            /** Gets reports list. */
            getReportsList: () => Promise<Array<ReportsListItem>>;
    
            /**
             * Gets report revisions.
             *
             * @param options GetReportRevisionsOptions object
             */
            getReportRevisions: (options: GetReportRevisionsOptions) => Promise<Array<ReportRevision>>;
    
            /** Gets data sets list. */
            getDataSetsList: () => Promise<DataSetsListItem>;
    
            /** Gets report templates list. */
            getTemplatesList: () => Promise<Array<TemplatesListItem>>;
            /**
             * Gets report template content.
             *
             * @param options GetTemplateContentOptions object
             */
            getTemplateContent: (options: GetTemplateContentOptions) => Promise<ReportTemplate>;
    
            /**
             * Gets report template thumbnail.
             *
             * @param options GetTemplateThumbnailOptions object
             */
            getTemplateThumbnail: (options: GetTemplateThumbnailOptions) => Promise<string>; // base64ImageData
        },
    
        /**
         * Creates a new report to be edited in Designer using the specified **CreateReportOptions** object.\
         * **GrapeCity.ActiveReports.WebDesigner.api.createReport** function is expected to be passed to this property.
         *
         * @param options CreateReportOptions object
         */
        createReport: (options: CreateReportOptions) => void;
    
        /**
         * Opens an existing report to be edited in Designer using the specified **OpenReportOptions** object.\
         * **GrapeCity.ActiveReports.WebDesigner.api.openReport** function is expected to be passed to this property.
         *
         * @param options OpenReportOptions object
         */
        openReport: (options: OpenReportOptions) => void;
    
        /**
         * Saves the report currently edited in Designer using the specified **SaveReportOptions** object.\
         * **GrapeCity.ActiveReports.WebDesigner.api.saveReport** function is expected to be passed to this property.
         *
         * @param options SaveReportOptions object
         */
        saveReport: (options: SaveReportOptions) => void;
    
        /** callback on closing file view */
        onClose: () => void;
    
        /** Specifies whether file path case needs to be ignored. */
        ignoreCase?: boolean;
    
        /** file path delimiter */
        delimiter?: string;
    };
    export type TemplatesListItem = {
        /** report template id */
        _id: string;
       
        /** report template name */
        Name: string;
    };
    
    export type GetTemplateThumbnailOptions = {
        /** report template id */
        id: string,
    };
    
    /* ===== viewer-container ===== */
    /**
     * Type of **viewerContainer** object exported by **viewer-container.js** module.
     */
    export type ViewerContainerApi = {
        /**
         * Renders **Viewer Container** to **<div>** element with id **viewerContainerElementId** using the specified **ViewerContainerOptions** object.
         *
         * **Example:**
         * ```javascript
         * viewerContainer.renderViewerContainer('viewer-container-id', viewerContainerOptions, onClose);
         * ```
         *
         * @param viewerContainerElementId string
         * @param options ViewerContainerOptions object
         * @param onClose callback function on closing Viewer Container
         */
        renderViewerContainer: (viewerContainerElementId: string, options: ViewerContainerOptions, onClose: () => void) => void;
    };
    
    export type ViewerContainerOptions = ViewerBaseOptions & {
        /**
         * Makes URL to be used for creating an **<iframe>** with Viewer.
         */
        makeViewerUrl: () => string;
    };