ActiveReports 16 .NET Edition
ActiveReports 16 User Guide / Concepts / ActiveReports Web Designer / Web Designer API
In This Topic
    Web Designer API
    In This Topic

    ActiveReports provides a rich API for integrating the web designer components into your web application. To embed the Web Designer component in your project, use the Web Designer API. It lets you create, design, and save reports with added capabilities that include - defining the locale for the designer, customizing the default settings of the report items, managing the Data and Properties tab, modifying the application info, and much more.

    GlobalDesignerApiV2

    Type of GrapeCity.ActiveReports.WebDesignerV2 object exported by the web-designer.js module.

    create()

    Description: Renders the Web Designer component to the <div> element with the designerElementId id using the specified DesignerOptions object.

    Parameter (Type):

    designerElementId: string
    designerOptions: DesignerOptions

    Return Type: Promise<DesignerApiV2>

    Required: Yes

    Sample Code
    Copy Code
    GrapeCity.ActiveReports.WebDesigner.create('designer-id', designerOptions);
    

    apiOf()

    Description: Returns the DesignerApi of the previously created instance of the Web Designer component.

    Parameter (Type):

    designerElementId: string

    Return Type: DesignerApiV2 | undefined

    Required: Yes

    DesignerApiV2

    Type of object returned by functions from the GlobalDesignerApiV2.

    focus()

    Description: Returns focus to the Web Designer component. Focus may be lost when plugged-in or external components are opened/closed. Returning focus is essential to continue using designer hotkeys like Ctrl+Z (undo), Ctrl+Y (redo), etc.

    Return Type: void

    Required: Yes

    Sample Code
    Copy Code
    GrapeCity.ActiveReports.WebDesignerV2.apiOf('designer-id').focus();
    

    getAboutInfo()

    Description: Returns the AboutInfo object containing information about application name/version and product title/version.

    Return Type: AboutInfo

    Required: Yes

    Sample Code
    Copy Code
    var aboutInfo =
    GrapeCity.ActiveReports.WebDesignerV2.apiOf('designer-id').getAboutInfo();
    

    getHelpInfos()

    Description: Returns HelpInfo[] that contains the title/link pairs of the Web Designer-related Help pages.

    Return Type: HelpInfo

    Required: Yes

    Sample Code
    Copy Code
    var helpInfos = GrapeCity.ActiveReports.WebDesignerV2.apiOf('designer-id').getHelpInfos();
    

    document()

    Description: This object includes functions allowing to create/open/save a report, etc.

    Return Type: DocumentApi

    Required: Yes

    DocumentApi

    This is V2 api, for legacy see the ReportingApi.

    hasUnsavedChanges()

    Description: Indicates whether the report has unsaved changes.

    Return Type: boolean

    Required: Yes

    Sample Code
    Copy Code
    var hasUnsavedChanges = GrapeCity.ActiveReports.WebDesignerV2.apiOf('designer-id').hasUnsavedChanges();
    if (hasUnsavedChanges) console.log('Currently edited report has unsaved changes.');
    

    isNew()

    Description: Indicates whether the report was saved before at least once.

    Return Type: boolean

    Required: Yes

    info()

    Description: Returns information about the currently edited report in the Web Designer component.

    Return Type: CurrentReportInfo      

    Required: Yes 

    Sample Code
    Copy Code
    var reportInfo = GrapeCity.ActiveReports.WebDesignerV2.apiOf('designer-id').info();
    console.log(`Report "${reportInfo.name}" is currently edited.`);
    

    create()

    Description: Creates a new report to be edited in the Web Designer component using the specified CreateReportOptions object.

    Parameter (Type):

    1. options (optional): CreateReportOptions

    Return Type: Promise<CreateReportInfo

    Required: Yes      

    Sample Code
    Copy Code
    var api = GrapeCity.ActiveReports.WebDesignerV2.apiOf('designer-id');
    api.document.create().then(() => {
            console.log('An empty RDL report is created.');
    })
    

    open()

    Description: Shows the Open Report dialog box in the Web Designer component.

    Return Type: void

    Required: Yes

    openById()

    Description: Opens an existing report to be edited in the Web Designer component with a specified id. Optionally, you can pass the report name and content, else it will be loaded from the server.

    Parameter (Type):

    id: string
    name (optional): string
    content (optional): any

    Return Type: Promise<OpenReportInfo>

    Required: Yes

    Sample Code
    Copy Code
    var api = GrapeCity.ActiveReports.WebDesignerV2.apiOf('designer-id');
    api.document.openById('MyReport.rdlx').then(() => {
      console.log('An existing report "MyReport.rdlx" is opened.');
    });
    var reportContent = { Type: 'report', Body: { ReportItems: [ {Type: 'textbox', Name: 'TextBox1', Width: '5in', Height: '1in' } ] }};
    api.document.openById('NewReport.rdlx', 'NewReport', reportContent).then(() => {
      console.log('New report with one textbox created and opened.');
    });
    

     

    save()

    Description: Saves the currently edited report in the Web Designer component. If the report is new, then the Save As dialog box will be opened.

    Return Type: void

    Required: Yes

    saveAs()

    Description: Opens the Save As dialog box in the Web Designer component.

    Return Type: void

    Required: Yes

    saveById()

    Description: Saves the currently edited report in the Web Designer component using the specified id.

    Parameter (Type):

    • id (optional): string
    • name (optional): string

    Return Type: Promise<SaveReportInfo>

    Required: Yes

    Sample Code
    Copy Code
    var api = GrapeCity.ActiveReports.WebDesignerV2.apiOf('designer-id');
    api.document.saveById('MyReport.rdlx')
    

    saveByName()

    Description: Saves the report currently edited in the Web Designer component using the specified name.

    Parameter (Type):

    name: string

    Return Type: Promise<SaveReportInfo>

    Required: Yes

    Sample Code
    Copy Code
    var api = GrapeCity.ActiveReports.WebDesignerV2.apiOf('designer-id');
    api.document.saveById('MyReport.rdlx')
    

    DesignerOptions

    language

    Description: Specifies the language to use for the Web Designer component. If language value is not specified, browser preferences are used. The localization is available in following languages: 'en' | 'ja' | 'zh' | 'zh-TW' | 'es' | 'ko' | 'pl' | 

    Return Type: string

    Required: Optional

    Sample Code
    Copy Code
    designerOptions.language = 'ja';
    

    locale

    Description: Specifies the locale to use for displaying the Web Designer component. If locale value is not specified explicitly here, the locale corresponding to the browser preferences is used. This property is now deprecated; use 'language' instead. 

    Return Type: 'en' | 'ja' | 'zh'

    Required: Optional

    Sample Code
    Copy Code
    designerOptions.locale = 'ja';
    

    localeData

    Description: Specifies the custom localization data for the Web Designer component. This property is now deprecated; use resource bundles instead.

    Return Type: {ns: string; lng: string; resources: any;}[]

      1.      where
        1.  ns refers to namespace.
        2.  lng refers to locale.
        3.  resources refers to localization resources.

    Required: Optional

    Sample Code
    Copy Code
    designerOptions.localeData = customLocaleData;
    

    units

    Description: Specifies the default measurement units for the Web Designer component. The default unit is inches.

    Return Type: 'in' | 'cm'

    Required: Optional

    Sample Code
    Copy Code
    designerOptions.units = 'cm';
    

    fonts

    Description: Specifies the list of fonts displayed in the Font drop-downs all over the Web Designer component. If fonts are not specified explicitly here, the default list of fonts is used:

    'Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Geneva', 'Georgia', 'Helvetica',  'Impact', 'Lucida Console', 'Meiryo', 'Meiryo UI', 'MingLiU', 'MingLiU-ExtB', 'MS Gothic', 'MS Mincho', 'MS PGothic', 'MS PMincho', 'MS Song', 'MS UI Gothic', 'NSimSun', 'Osaka', 'PMingLiU', 'PMingLiU-ExtB', 'SimSun', 'SimSun-ExtB', 'Song', 'Tahoma', 'Times New Roman', 'Trebuchet MS', 'Verdana', and 'Yu Gothic'.

    Return Type: string[]

    Required: Optional

    Sample Code
    Copy Code
    designerOptions.fonts = ['Arial', 'Courier New', 'Times New Roman'];
    

    reportItems

    Description: It is possible to limit and/or reorder available report items. Specify the comma-separated report items keys from this list:

    BandedList, Barcode, Bullet, Chart, CheckBox, Container, FormattedText, Image, InputField, Line, List, OverflowPlaceholder, Shape, Sparkline, Subreport, Table, TableOfContents, Tablix, and TextBox.

    Return Type: string

    Required: Optional

    Sample Code
    Copy Code
    designerOptions.reportItems = 'TextBox,CheckBox,Table,Chart,Image';
    

    reportItemsFeatures

    Description: Customizable features for report items Barcode, Table, and Tablix controls are specified here.

    Required: Yes

    barcode

    Description: Settings for barcodes in the Web Designer component.

    symbologies

    Description: Limits the list of barcode symbologies available for creation. By default, all barcode symbologies supported by ActiveReports are available.

    Return Type: BarcodeSymbology[]

    Required: Optional

    Sample Code
    Copy Code
    designerOptions.reportItemsFeatures.barcode.symbologies = ['Code_128_A', 'Code_128_B', 'Code_128_C'];
    

    table

    Description: Settings for tables in the Web Designer component.

    autoFillHeader

    Description: Specifies whether the Table Header needs to be auto-filled when a field is dropped to the Table Details section. For example, if the ProductName field is dropped to the Details section, the Product Name value is set to the Header. By default, this feature is enabled.

    Return Type: boolean

    Required: Yes

    Sample Code
    Copy Code
    designerOptions.reportItemsFeatures.table.autoFillHeader = false;
    

    autoFillFooter

    Description: Specifies whether Table Footer needs to be auto-filled when a field is dropped to the Table Details section. For example, if the ProductName field is dropped to the Details section, =Count([ProductName]) value is set to the Footer. By default, this feature is disabled.

    Return Type: boolean

    Required: Yes

    Sample Code
    Copy Code
    designerOptions.reportItemsFeatures.table.autoFillFooter = true;
    

    canMergeCellsVertically

    Description: Specifies whether vertical merge of cells is enabled within the Table Header, Details, and Footer sections. By default, this feature is enabled.

    Return Type: boolean

    Required: Yes

    Sample Code
    Copy Code
    designerOptions.reportItemsFeatures.table.canMergeCellsVertically = false;
    

    tablix

    Description: Settings for Tablix data region in the Web Designer component.

    crossAggregates

    Description: Specifies whether the Tablix Wizard should hide the cross-aggregates functionality. By default, this feature is enabled.

    Return Type: boolean

    Required: Yes

    Sample Code
    Copy Code
    designerOptions.reportItemsFeatures.tablix.crossAggregates = false;
    

    autoFillCorner

    Description: Specifies whether the Tablix Corner cell needs to be auto-filled when a field is dropped to Tablix Row Group cell. For example, if the ProductName field is dropped to the Row Group cell, Product Name value is set to Corner cell. By default, this feature is enabled.

    Return Type: boolean

    Required: Yes

    Sample Code
    Copy Code
    designerOptions.reportItemsFeatures.tablix.autoFillCorner = false;
    

    canUseWizard

    Description: Specifies whether the Tablix Wizard is available for creating or editing the Tablix control in the Web Designer component. By default, this feature is enabled.

    Return Type: boolean

    Required: Yes

    Sample Code
    Copy Code
    designerOptions.reportItemsFeatures.tablix.canUseWizard = false;
    

    lockLayout

    Description: By default, the lockLayout property is set to 'false'. However, when you set this property to 'true', it enables you to modify the properties of existing report items. Operations that can modify the report layout structure are not possible, such as adding a new report item or deleting an existing one, and others.

    Return Type: boolean

    Required: Yes

    Sample Code
    Copy Code
    designerOptions.lockLayout = true;
    

    restoreUnsavedReport

    Description: By default, the restoreUnsavedReport property is set to 'true'. In this case, the last unsaved report can be restored if the browser tab or browser itself gets accidentally closed. However, if the restoreUnsavedReport property is set to 'false', the aforementioned functionality is not available.

    Return Type: boolean

    Required: Yes

    Sample Code
    Copy Code
    designerOptions.restoreUnsavedReport = false;
    

    reportInfo

    Description: If is specified, the corresponding report will be opened in the Web Designer component when a Designer application is rendered.

    Required: Yes

    id

    Description: Specifies the report id to open in the Web Designer component when the Designer application is rendered.

    Return Type: string | null

    Required: Optional

    Sample Code
    Copy Code
    designerOptions.reportInfo.id = 'MyReport.rdlx';
    

    expressionSyntax

    Description: Specifies which Expression syntax will be used in the Web Designer component: 'i11n' - interpolation syntax or 'rdl' - old rdl expression syntax. By default, the interpolation syntax is used for expressions.

    Return Type: 'i11n' | 'rdl'

    Required: Yes

    Sample Code
    Copy Code
    designerOptions.expressionSyntax = 'rdl';
    

    fileView

    Description: Settings for the File View tab in the Web Designer component.

    Required: Yes

    visible

    Description: Specifies whether the File View tab needs to be shown in the Web Designer component. By default, the File View tab is visible.

    Return Type: boolean

    Required: Yes

    Sample Code
    Copy Code
    designerOptions.fileView.visible = false;
    

    saveButton

    Description: Settings for the Save button in the Web Designer component.

    Required: Yes

    visible

    Description: Specifies whether the Save button needs to be shown in the Web Designer component. By default, the Save button is not visible.

    Return Type: boolean

    Required: Yes

    Sample Code
    Copy Code
    designerOptions.saveButton.visible = true;
    

    saveAsButton

    Description: Settings for the Save As button in the Web Designer component.

    Required: Yes

    visible

    Description: Specifies whether the Save As button needs to be shown in the Web Designer component. By default, the Save As button is not visible.

    Return Type: boolean

    Required: Yes

    Sample Code
    Copy Code
    designerOptions.saveAsButton.visible = true;
    

    openButton

    Description: Settings for the Open button in the Web Designer component.

    Required: Yes

    visible

    Description: Specifies whether the Open button needs to be shown in the Web Designer component. By default, the Open button is not visible.

    Return Type: boolean

    Required: Yes

    Sample Code
    Copy Code
    designerOptions.openButton.visible = true;
    

    insertTab

    Description: Settings for the Insert tab in the Web Designer component.

    Required: Yes

    visible

    Description: Specifies whether the Insert tab needs to be shown in the Web Designer's application bar. The ToolBox and Insert tab are interchangeable. By default, the Insert tab is not visible.

    Return Type: boolean

    Required: Yes

    Sample Code
    Copy Code
    designerOptions.insertTab.visible = true;
    

    reportExplorer

    Description: Settings for the Report Explorer button in the Web Designer component.

    Required: Yes

    visible

    Description: Specifies whether the Report Explorer button needs to be shown in the Web Designer component. By default, the Report Explorer button is visible.

    Return Type: boolean

    Required: Yes

    Sample Code
    Copy Code
    designerOptions.reportExplorer.visible = false;
    

    groupEditor

    Description: Settings for the Group Editor button in the Web Designer component.

    Required: Yes

    visible

    Description: Specifies whether the Group Editor button needs to be shown in the Web Designer component. By default, the Group Editor button is visible.

    Return Type: boolean

    Required: Yes

    Sample Code
    Copy Code
    designerOptions.groupEditor.visible = false;
    

    toolBox

    Description: Settings for the ToolBox menu in the Web Designer component.

    Required: Yes

    visible

    Description: Specifies whether the ToolBox menu needs to be shown in the Web Designer component. By default, the ToolBox menu is visible.

    Return Type: boolean

    Required: Yes

    Sample Code
    Copy Code
    designerOptions.toolBox.visible = false;
    

    propertiesTab

    Description: Settings for the Properties tab in the Web Designer component.

    Required: Yes

    visible

    Description: Specifies whether the Properties tab needs to be shown in the Web Designer component. By default, the Properties tab is visible.

    Return Type: boolean

    Required: Yes

    Sample Code
    Copy Code
    designerOptions.propertiesTab.visible = false;
    

    mode

    Description: Specifies the available properties modes in the Web Designer component. The default value for this property is 'Both'.

    Return Type: 'Basic' | 'Advanced' | 'Both'

    Required: Yes

    Sample Code
    Copy Code
    designerOptions.propertiesTab.mode = 'Basic';
    

    defaultMode

    Description: Relevant only when the properties mode is set to 'Both'. If undefined, the last used properties mode is set.

    Return Type: 'Basic' | 'Advanced'

    Required: Optional

    Sample Code
    Copy Code
    designerOptions.propertiesTab.defaultMode = 'Advanced';
    

    dataTab

    Description: Settings for the Data tab in the Web Designer component.

    Required: Yes

    visible

    Description: Specifies whether the Data tab needs to be shown in the Web Designer component. By default, the Data tab is visible.

    Return Type: boolean

    Required: Yes

    Sample Code
    Copy Code
    designerOptions.dataTab.visible = false;
    

    dataSources

    Description: Settings for the Data Sources section in the Data tab.

    Required: Yes

    visible

    Description: Specifies whether the Data Sources section in the Data tab needs to be shown in the Web Designer component. By default, the Data Sources section is visible.

    Return Type: boolean

    Required: Yes

    Sample Code
    Copy Code
    designerOptions.dataTab.dataSources.visible = false;
    

    canModify

    Description: Specifies whether it is possible to modify (i.e. add, edit, or delete) the data sources in the Data Sources section. By default, this feature is disabled.

    Return Type: boolean

    Required: Yes

    Sample Code
    Copy Code
    designerOptions.dataTab.dataSources.canModify = true;
    

    options

    Description: Settings for the options for the data sources and Data Source editor.

    predefinedProviders

    Description: Specifies the list of predefined data providers available in the Data Source editor. By default, all the predefined providers are available.

    Return Type: ('SQL' | 'OLEDB' | 'ODBC' | 'JSON' | 'CSV' | 'XML')[]

    Required: Optional

    Sample Code
    Copy Code
    designerOptions.dataTab.dataSources.options.predefinedProviders = ['SQL', 'JSON'];
    

    oleDbProviders

    Description: Specifies the list of OLE DB providers available in the Data Source editor. By default, 'Microsoft.Jet.OLEDB.4.0', 'SQLOLEDB.1', 'MSDataShape.1', and 'MSDASQL.1' are available.

    Return Type: string[]

    Required: Optional

    Sample Code
    Copy Code
    designerOptions.dataTab.dataSources.options.oleDbProviders = ['Microsoft.Jet.OLEDB.4.0', 'SQLOLEDB.1'];
    

    customProviders

    Description: Specifies the list of custom data providers available in the Data Source editor. By default, there are no custom data providers available.

    Return Type: {key: string; name: string;}[]

      1.      where
        1.  key refers to data provider identifier. This value is used for DataSource.ConnectionProperties.DataProvider property.
        2.  name refers to the data provider label. This value is used as a friendly data provider label in UI.

    Required: Optional

    Sample Code
    Copy Code
    designerOptions.dataTab.dataSources.canModify = true;
    

    dataSets

    Description: Settings for the Datasets section in the Data tab.

    Required: Yes

    visible

    Description: Specifies whether the Datasets section needs to be shown in the Web Designer component. By default, the Datasets section is visible.

    Return Type: boolean

    Required: Yes

    Sample Code
    Copy Code
    designerOptions.dataTab.dataSets.visible = false;
    

    canModify

    Description: Specifies whether it is possible to modify (including add/edit/remove) datasets in the Web Designer component. The default value for this property is 'false'.

    Return Type: boolean

    Required: Yes

    Sample Code
    Copy Code
    designerOptions.dataTab.dataSets.canModify = true;
    

    parameters

    Description: Settings for the Parameters section in the Data tab.

    Required: Yes

    visible

    Description: Specifies whether the Parameters section needs to be shown in the Web Designer component. By default, the Parameters section is visible.

    Return Type: boolean

    Required: Yes

    Sample Code
    Copy Code
    designerOptions.dataTab.parameters.visible = false;
    

    canModify

    Description: Specifies whether it is possible to modify (i.e. add, edit, or delete) the report parameters in the Parameters section. The default value for this property is set to 'true'.

    Return Type: boolean

    Required: Yes

    Sample Code
    Copy Code
    designerOptions.dataTab.parameters.canModify = false;
    

    commonValues

    Description: Settings for the Common Values section in the Data tab.

    Required: Yes

    visible

    Description: Specifies whether the Common Values section needs to be shown in the Web Designer component. By default, the Common Values section is visible.

    Return Type: boolean

    Required: Yes

    Sample Code
    Copy Code
    designerOptions.dataTab.commonValues.visible = false;
    

    unitsButton

    Description: Settings for the Units button in the Web Designer component.

    Required: Yes

    visible

    Description: Specifies whether the Units button needs to be shown in the Web Designer component. By default, the Units button is visible.

    Return Type: boolean

    Required: Yes

    Sample Code
    Copy Code
    designerOptions.unitsButton = { visible: false };
    

    gridSize

    Description: Settings for the Grid Size editor in the Web Designer component.

    Required: Yes

    visible

    Description: Specifies whether the Grid Size editor in the Status bar needs to be shown. By default, the Grid Size editor is visible.

    Return Type: boolean

    Required: Yes

    Sample Code
    Copy Code
    designerOptions.gridSize.visible = false;
    

    value

    Description: Specifies the size of the Grid Size editor. By default, 'in' is used.

    Return Type: string

    Required: Optional

    Sample Code
    Copy Code
    designerOptions.gridSize.value = '0.5in';
    

    showGrid

    Description: Settings for the Show Grid toggle in the Web Designer component.

    Required: Yes

    visible

    Description: Specifies whether the Show Grid toggle in the Status bar needs to be shown. By default, the Show Grid toggle is visible.

    Return Type: boolean

    Required: Yes

    Sample Code
    Copy Code
    designerOptions.showGrid.visible = false;
    

    value

    Description: If the Show Grid toggle is not visible, it is possible to specify the Show Grid value as 'true' or 'false'.

    Return Type: boolean

    Required: Optional

    Sample Code
    Copy Code
    designerOptions.showGrid.value = false;
    

    snapToGrid

    Description: Specifies whether to display the Snap To Grid option in the Web Designer component. The default value for this property is 'false'.

    Return Type: boolean

    Required: Optional

    snapToGuides

    Description: Specifies whether to display the Snap To Guides option in the Web Designer component. The default value for this property is 'false'.

    Return Type: boolean

    Required: Optional

    disableFocusTimer

    Description: Disables focus highlighting timer on the buttons for better accessibility.

    Return Type: boolean

    Required: Yes

    server

    Description: Server-related settings in the Web Designer component.

    Required: Yes

    url

    Description: Specifies the base URL for the Designer Server API. The default value of the property is 'api'.

    Return Type: string

    Required: Yes

    Sample Code
    Copy Code
    designerOptions.server.url = 'api/designer';
    

    toolBoxContent

    Description: Specifies the report items and their display order in the toolbox. By default, the available report items for Page report (FPL) are TextBox, CheckBox, Container, Line, Shape, TableOfContents, Image, List, Table, Tablix, Chart, Bullet, Barcode, FormattedText, RichText, Sparkline, SubReport, BandedList, and InputField.

    For RDL reports (CPL), these are the default available report items - TextBox, CheckBox, Container, Line, Shape, TableOfContents, Image, List, Table, Tablix, Chart, Bullet, Barcode, FormattedText, RichText, Sparkline, SubReport, OverflowPlaceholder, BandedList, and InputField.

    Return Type: {cpl: ToolBoxContentItemType[]; fpl: ToolBoxContentItemType[]; };

    Required: Optional

    Sample Code
    Copy Code
    designerOptions.toolBoxContent = {
            cpl: [ 'checkbox', 'container', 'textbox' ],
            fpl: [ 'image', 'list', 'table', 'tablix', 'chart', 'bullet', 'barcode', 'formattedtext' ],
    };
    

    reportStyles

    Description: Specifies additional styles to add to report item styles in the Web Designer component.

    Return Type: ReportStyles[]

    Required: Optional

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

    customInitTemplates

    Description: Reports as rdlx-json strings. The report items from these reports  are used as templates for creating new items in the Web Designer component.

    • imperialTemplates should include reports with units = 'in'.
    • metricTemplates should include reports with units = 'cm'.

    It is recommended to use Page reports to set custom templates for specific Page report items. For example, OverflowPlaceHolder.
    It is preferable to use RDL reports to set custom templates for all other report items, as well as for pageHeader and pageFooter.

    For reports, you can set the ConsumeContainerWhitespace and page- related properties including BottomMargin, LeftMargin, RightMargin, TopMargin, PageHeight, PageWidth, and ColumnSpacing. For the rest of the report items, all properties are set, including, for example, the number of columns in the table or default barcode symbology.

    Return Type: {imperialTemplates?: string[]; metricTemplates?: string[];};

    Required: Optional

    Sample Code
    Copy Code
    designerOptions.customInitTemplates = {
        imperialTemplates: ['{"Name":"Report","Width":"5in","Layers":[{"Name":"default"}],"CustomProperties":[{"Name":"DisplayType","Value":"Page"},{"Name":"SizeType","Value":"Default"},{"Name":"PaperOrientation","Value":"Portrait"}],"Page":{"PageWidth":"8.5in","PageHeight":"11in","RightMargin":"1in","LeftMargin":"1in","TopMargin":"1in","BottomMargin":"1in","Columns":1,"ColumnSpacing":"0in"},"Body":{"Height":"0.25in","ReportItems":[{"Type":"textbox","Name":"TextBox1","CustomProperties":[],"CanGrow":true,"KeepTogether":true,"Style":{"PaddingLeft":"2pt","PaddingRight":"2pt","PaddingTop":"2pt","PaddingBottom":"2pt"},"Width":"5in","Height":"0.25in"}]}}'],
        metricTemplates: ['{"Name":"Report","Width":"10cm","Layers":[{"Name":"default"}],"CustomProperties":[{"Name":"DisplayType","Value":"Page"},{"Name":"SizeType","Value":"Default"},{"Name":"PaperOrientation","Value":"Portrait"}],"Page":{"PageWidth":"8.5in","PageHeight":"11in","RightMargin":"1in","LeftMargin":"1in","TopMargin":"1in","BottomMargin":"1in","Columns":1,"ColumnSpacing":"0in"},"Body":{"Height":"0.75cm","ReportItems":[{"Type":"textbox","Name":"TextBox1","CustomProperties":[],"CanGrow":true,"KeepTogether":true,"Style":{"PaddingLeft":"2pt","PaddingRight":"2pt","PaddingTop":"2pt","PaddingBottom":"2pt"},"Left":"0cm","Top":"0cm","Width":"10cm","Height":"0.75cm"}]}}'],
    };
    

    Note that if in a subsequent report in the array, there is the same reportItem as in the previous one, only last template for this reportItem will be set. Also you can set multiple init templates for some report items. For this, you should add report with more than one report items of the same type. This will replace the templates with the same name.

    • Use TemplateName custom property of each report item to set a localized name of the template and
    • Use AllowWizard custom property of a chart report item to allow use the chart wizard when this report item is created.
    For example, the in the code above, use the above custom properties as shown below:
    Sample Code
    Copy Code
    ... ,"CustomProperties":[{"Name":"TemplateName","Value":"Doughnut Chart"}, {"Name":"AllowWizard","Value":"true"},...],... 
    

    openViewer()

    Description: You can plug in the Report Viewer component by providing the openViewer() method to the DesignerOptions object. When the openViewer is passed to the DesignerOptions, the Preview button appears in the Designer's application bar.

    Parameter (Type):

    1. options: ViewerOptions

    Return Type: void

    Required: Optional

    Sample Code
    Copy Code
    designerOptions.openViewer = function(options) {
        // create viewer and open report
    };
    

    updateTitle()

    Description: You can implement custom logic for updating the document's title when an edited report gets updated in the Web Designer component. By default, the updateTitle() method is undefined and the report's name is used as the document title.

    Parameter (Type):

    1. info: ReportTitleInfo

    Return Type: string

    Required: Optional

    Sample Code
    Copy Code
    designerOptions.updateTitle = ({ reportName, dirty }) => `${reportName}${dirty ? ' - Has Unsaved Changes!' : ''}`;
    };
    

    updateRoute()

    Description: You can implement custom logic for updating the route when the edited report id gets updated in the Web Designer component. The report id is updated on creating, opening, or saving a report, after that updateRoute() method is called. By default, the updateRoute method is undefined, so the route remains unchanged.

    Parameter (Type):

    1. options: UpdateRouteOptions

    Return Type: void

    Required: Optional

    Sample Code
    Copy Code
    designerOptions.updateRoute = function(options) {
        // custom logic for updating route
    };
    

    expressionEditorNodesFilter()

    Description: Filters the Expression Editor nodes in the Web Designer component.

    Parameter (Type):

    1. key: string

    Return Type: boolean

    Required: Optional

    Sample Code
    Copy Code
    designerOptions.expressionEditorNodesFilter = (key) => {
        console.log(key); // Use this to get log in browser console
        if (key.includes('CommonValues')) return false;
        if (key.includes('aggregate.aggregateIfWithScope')) return false;
        if (key.includes('userId')) return false; //hide node in CommonValues
        if (key.includes('pageNumber')) return false;
        if (key.includes('userLanguage')) return false;
        if (key.includes('currentDateTime')) return false;
        if (key.includes('pageNM')) return false;
        return true;
    }
    

    documentApiHandlers

    Required: Yes

    onBeforeSave()

    Description: Async handler, cancels saving process if returned false.

    Parameter (Type):

    1. info: SaveReportInfo

    Return Type: Promise<boolean>

    Required: Optional

    onAfterSave()

    Description: Handler that is called when the save process is completed.

    Parameter (Type):

    1. info: SaveReportInfo

    Return Type: void

    Required: Optional

    onBeforeOpen()

    Description: Async handler, cancels opening process if returned false.

    Return Type: Promise<boolean>

    Required: Optional

    onAfterOpen()

    Description: Handler that is called when the open process is completed.

    Return Type: void

    Required: Optional

    onBeforeCreate()

    Description: Async handler, cancels the create process if returned false.

    Return Type: Promise<boolean>

    Required: Optional

    onAfterCreate()

    Description: Handler that is called when the 'create' process is complete.

    Return Type: void

    Required: Optional

    onReportSaved()

    Parameter (Type):

    1. reportInfo: SaveReportInfo

    Return Type: void

    Required: Optional

    disableSystemClipboard

    Description: Disable the usage of the system clipboard. Copy-paste between designer instances will work only in the same browser in the same domain. This property is deprecated; use 'documentApiHandlers.onAfterSave' instead.

    Return Type: boolean

    Required: Optional

    imageMimeTypes

    Description: Specifies the list of supported image mime-types.

    Return Type: string

    Required: Optional

    rulers

    Description: Enables the Rulers that allow changing the page margins by dragging the ruler's markers. In addition, use the snapStep value to specify the ruler's steps, that is, the distance between ruler marks.

    Required: Optional

    Sample Code
    Copy Code
    designerOptions.rulers = {
        visible: true, // Specifies whether to show Rulers in the Designer. The default value is false.
        snapStep:    {
            in: number, // Specifies the snapStep value. The default value is 0.25.
            cm: number, // Specifies the snapStep value. The default value is 0.5.
        }
    },
    

    BarcodeSymbology

    Barcode symbologies that are supported by the Web Designer component.


    Acceptable Values

    Copy Code
    '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' 
    

    ViewerOptions

    element

    Description: Refers to the element id where to render the Viewer.

    Return Type: string

    Required: Yes

    locale

    Description: Refers to the locale passed by the Web Designer component.

    Return Type: 'en' | 'ja' | 'zh'

    Required: Yes

    applicationTitle

    Description: Refers to the application title passed by the Web Designer component.

    Return Type: string

    Required: Yes

    reportInfo

    Description: Gets information about the report being previewed.

    id

    Description: Refers to the report id to be previewed.

    Return Type: string

    Required: Yes

    content

    Description: Refers to the report content in JSON format that can be useful for report viewers with in-browser rendering.

    Return Type: Report

    Required: Yes

    name

    Description: Refers to the report name.

    Return Type: string

    Required: Yes

    isTemporary

    Description: Specifies whether the report to be previewed is an existing report saved on the server-side.

    Return Type: boolean

    Required: Yes

    ReportTitleInfo

    reportName

    Description: Refers to the report name.

    Return Type: string

    Required: Yes

    dirty

    Description: Indicates whether the report has unsaved changes or not in the Web Designer component.

    Return Type: boolean

    Required: Yes

    UpdateRouteOptions

    id

    Description: Refers to the report id.

    Return Type: string

    Required: Yes

    AboutInfo

    applicationTitle

    Description: Specifies the application title to be used in the About dialog box of the Web Designer component.

    Return Type: string

    Required: Yes

    applicationTitleCompact

    Description: Specifies the compact application title to be used in the About dialog box of the Web Designer component in places where there is not enough space for a full title.

    Return Type: string

    Required: Yes

    applicationVersion

    Description: Specifies the application version in the About dialog box of the Web Designer component.

    Return Type: string

    Required: Yes

    productTitle

    Description: Specifies the product title to be shown in the About dialog box of the Web Designer component. The product title can be overwritten.

    Return Type: string

    Required: Optional

    productVersion

    Description: Specifies the product version to be shown in the About dialog box of the Web Designer component. The product version can be overwritten.

    Return Type: string

    Required: Optional

    HelpInfo

    title

    Description: Specifies the help page title.

    Return Type: string

    Required: Optional

    link

    Description: Specifies the help page URL.

    Return Type: string

    Required: Yes

    CurrentReportInfo

    id 

    Description: Refers to the report id. If an existing report is edited, id is defined. Otherwise, if a new report is edited, id is 'null'.

    Return Type: string | null

    Required: Yes

    name

    Description: Refers to the report name.

    Return Type: string

    Required: Yes

    TemplateInfo

    name

    Description: Refers to the report template name.

    Return Type: string

    Required: Yes

    id

    Description: Refers to the report template id.

    Return Type: string

    Required: Optional

    content

    Description: Refers to the report template content in JSON format that can be useful in case you would like to create a non-empty new report.

    Return Type: ReportTemplate

    Required: Optional

    CreateReportOptions

    templateInfo

    Description: Refers to the template information. If it is specified for report creation, either templateInfo.id or templateinfo.content needs to be defined.

    Return Type: TemplateInfo

    Required: Optional

    dataSetsInfo

    Description: Refers to the datasets information.

    Return Type: {id: string; name: string;}[];

      1.      where
        1.  id refers to dataset id.
        2.  name refers to dataset name.

    Required: Optional

    name

    Description: Refers to the new report name. If you do not specify the name, report name is set to 'Untitled'.

    Return Type: string

    Required: Optional

    reportType

    Description: Refers to the report type. It can either be set to CPL (RDL report) or FPL (Page report).

    Return Type: 'CPL' | 'FPL'

    Required: Optional

    CreateReportInfo

    templateInfo

    Return Type: TemplateInfo

    Required: Optional

    name

    Return Type: string

    Required: Yes

    success

    Description: Undefined in onBeforeCreate handler. Defined in onAfterCreate handler.

    Return Type: boolean

    Required: Optional

    SaveReportInfo

    id

    Description: If an existing report is to be overwritten on saving, the correct id should be specified explicitly.

    Return Type: string

    Required: Optional

    name

    Description: The correct name needs to be always specified explicitly.

    Return Type: string

    Required: Yes

    isFirstSave

    Description: Indicates that a new report is being saved for the first time.

    Return Type: boolean

    Required: Yes

    success

    Description: Undefined in onBefore handler. Defined in onAfter handler.

    Return Type: boolean

    Required: Optional

    OpenReportInfo

    name

    Return Type: string

    Required: Yes

    id

    Return Type: string

    Required: Yes

    success

    Description: Undefined in onBefore handler. Defined in onAfter handler.

    Return Type: boolean

    Required: Optional

    DesignerAPI

    createDesignerOptions()

    Description: Creates the default DesignerOptions object to be passed to the renderApplication() function. This object includes both the required and optional designer's settings.               

    Return TypeDesignerOptions

    Required: Yes

    Sample Code
    Copy Code
    var designerOptions = GrapeCity.ActiveReports.WebDesigner.createDesignerOptions();
    

    renderApplication()

    Description: Renders the Web Designer component to the <div> element with designerElementId id using the specified DesignerOptions object.

    Parameter (Type):

    designerElementId: string
    designerOptions: DesignerOptions

    Return Type: Promise<any>

    Required: Yes

    Sample Code
    Copy Code
    GrapeCity.ActiveReports.WebDesigner.renderApplication('designer-id', designerOptions);
    

    focus()

    Description: Returns focus to the Web Designer component. Focus may be lost when plug-in components are opened or closed. Returning focus is essential to continue using designer hotkeys like Ctrl+Z (undo), Ctrl+Y (redo), etc.

    Return Type: void

    Required: Yes

    Sample Code
    Copy Code
    GrapeCity.ActiveReports.WebDesigner.focus();
    

    getAboutInfo()

    Description: Returns the AboutInfo object containing information about application name/version and product title/version.

    Return Type: AboutInfo

    Required: Yes

    Sample Code
    Copy Code
    var aboutInfo = GrapeCity.ActiveReports.WebDesigner.getAboutInfo();
    

    api

    Description: This object includes functions allowing to create/open/save report, etc.

    Return Type: ReportingApi

    Required: Yes

    ReportingApi

    isReportDirty()

    Description: Indicates whether the report has any unsaved changes.

    Return Type: boolean

    Required: Yes

    Sample Code
    Copy Code
    var hasUnsavedChanges = GrapeCity.ActiveReports.WebDesigner.api.isReportDirty();
    if (hasUnsavedChanges) console.log('Currently edited report has unsaved changes.');
    

    getReportInfo()

    Description: Returns information about the currently edited report.

    Return Type: CurrentReportInfo

    Required: Yes

    Sample Code
    Copy Code
    var reportInfo = GrapeCity.ActiveReports.WebDesigner.api.getReportInfo();
    console.log(`Report "${reportInfo.name}" is currently edited.`);
    

    createReport()

    Description: Creates a new report to be edited in the Web Designer component using the specified CreateReportOptions object.

    Parameter (Type):

    options: LegacyCreateReportOptions

    Return Type: void

    Required: Yes

    Sample Code
    Copy Code
    GrapeCity.ActiveReports.WebDesigner.api.createReport({
        onFinish: () => {
            console.log('An empty RDL report is created.');
        },
    });
    

    openReport()

    Description: Opens an existing report to be edited in the Web Designer component using the specified OpenReportOptions object.

    Parameter (Type):

    options: LegacyOpenReportOptions

    Return Type: void

    Required: Yes

    Sample Code
    Copy Code
    GrapeCity.ActiveReports.WebDesigner.api.openReport({
        reportInfo: {
            id: 'MyReport.rdlx',
            name: 'MyReport.rdlx',
        },
        onFinish: () => {
            console.log('An existing report "MyReport.rdlx" is opened.');
        },
    });
    

    saveReport()

    Description: Saves the report currently edited in the Web Designer component using the specified SaveReportOptions object.

    Parameter (Type):

    options: LegacySaveReportOptions

    Return Type: void

    Required: Yes

    Sample Code
    Copy Code
    GrapeCity.ActiveReports.WebDesigner.api.saveReport({
        reportInfo: {
            name: 'MyReport.rdlx',
        },
        onFinish: () => {
            console.log('A new report "MyReport.rdlx" is saved.');
        },
    });
    

    LegacyCreateReportOptions

    templateInfo

    Description: If it is specified for report creation, either id or content needs to be defined.

    Required: Optional

    name

    Description: Refers to the report template name.

    Return Type: string

    Required: Yes

    id

    Description: Refers to the report template id.

    Return Type: string

    Required: Optional

    content

    Description: Refers to the report template content in JSON format that can be useful in case you would like to create a non-empty new report.

    Return Type: ReportTemplate

    Required: Optional

    dataSets

    Description: If datasets are specified, the following properties are used.

    Return Type: {id: string; name: string;}[];

      1.      where
        1.  id refers to dataset id.
        2.  name refers to dataset name.

    Required: Optional

    onStart()

    Description: Callback on starting to create a report.

    Return Type: void

    Required: Optional

    onFinish()

    Description: Callback on finishing to create a report.

    Return Type: void

    Required: Optional

    LegacyOpenReportOptions

    reportInfo

    Required: Yes

    name

    Description: Refers to the report name.

    Return Type: string

    Required: Yes

    id

    Description: Refers to the report id.

    Return Type: string

    Required: Optional

    content

    Description: Refers to the report content in JSON format.

    Return Type: Report

    Required: Optional

    onStart()

    Description: Callback on starting to open a report.

    Return Type: void

    Required: Optional

    onFinish()

    Description: Callback on finishing to open a report.

    Return Type: void

    Required: Optional

    LegacySaveReportOptions

    reportInfo

    Description: Refers to the report-related information.

    Required: Yes

    id

    Description: Refers to the report id. If an existing report is to be overwritten on saving, then the correct id should be specified explicitly.

    Return Type: string

    Required: Optional

    name

    Description: Refers to the report name. The correct name needs to be always specified explicitly.

    Return Type: string

    Required: Yes

    onStart()

    Description: Callback on starting to save a report.

    Return Type: void

    Required: Optional

    onFinish()

    Description: Callback on finishing to save a report.

    Return Type: void

    Required: Optional