ActiveReports 18 .NET Edition
Developers / Create Applications / WebDesigner Application / WebDesigner API
In This Topic
    WebDesigner API
    In This Topic

    ActiveReports provides a rich API for integrating the web designer components into your web application. Use this API to embed the WebDesigner component in your project. 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. You will find the usage examples for ES, UMD, and TypeScript modules.

    export const arWebDesigner

    The main object exported by WebDesigner ES Module is described below.

    create()

    Description: Renders the WebDesigner component to the <div> element with given selector using the specified DesignerSettings object.

    Parameter (Type):

    selector: string
    settings: DesignerSettings

    Return Type: Promise<DesignerAPI>

    Required: Yes

    Sample Code
    Copy Code 
    import { arWebDesigner } from './web-designer.js';
import { createViewer } from './jsViewer.min.js';
let viewer = null;
arWebDesigner.create('#ar-web-designer', {
    rpx: { enabled: true },
    appBar: { openButton: { visible: true } },
    data: { dataSets: { canModify: true }, dataSources: { canModify: true } },
    preview: {
        openViewer: (options) => {
            if (viewer) {
                viewer.openReport(options.documentInfo.id);
                return;
            }
            viewer = createViewer({
                element: '#' + options.element,
                reportService: {
                    url: 'api/reporting',
                },
                reportID: options.documentInfo.id,
                settings: {
                    zoomType: 'FitPage'
                }
            });
        }
    }
});

    apiof()

    Description: Returns the DesignerAPI of the previously created instance of the WebDesigner component.

    Parameter (Type):

    instanceId: string

    Return Type: DesignerAPI

    Required: Yes

    Sample code
    Copy Code 
    import { arWebDesigner } from './web-designer.js';
const designer = arWebDesigner.apiOf('ar-web-designer');

    addLanguage()

    Description: Adds language resources for all instances of WebDesigner.

    Parameter (Type):

    lng: string
    resources: ResourceBundle[]

    Return Type: void

    Required: Yes

    Sample code
    Copy Code 
    import { arWebDesigner } from './web-designer.js';
arWebDesigner.addLanguage('en', [
             {
                "ns": "app",
                "lng": "en",
                "resources": {
                    "about": {
                        "textAppTitleCompact": "",
                    },
                }
            },
]);

    destroy()

    Description: Destroys Designer application.

    Parameter (Type):

    selector: string (the Designer container selector)
    instanceId: string (use only if Designer was created using DesignerSettings.instanceId)                

    Return Type: void

    Required: Yes

    Sample Code
    Copy Code 
    import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#container-1', { ...settings, instanceId: 'instance-1' });
arWebDesigner.destroy('#container-1', 'instance-1');

    GlobalDesignerAPI

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

    create()

    Description: Renders the WebDesigner component to the <div> element with given selector using the specified DesignerSettings object.

    Parameter (Type):

    selector: string
    settings: DesignerSettings

    Return Type: Promise<DesignerAPI>

    Required: Yes

    Sample Code
    Copy Code 
    <html>
 <head>
     <title>ActiveReports WebDesigner</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta http-equiv="x-ua-compatible" content="ie=edge">
    <link rel="stylesheet" href="vendor/css/bootstrap.css" />
    <link rel="stylesheet" href="vendor/css/fonts-googleapis.css" type="text/css">
    <!-- Optional. Resets the browser's default style, which allows the web designer to occupy the whole page. -->
     <style>
         html, body { width: 100%; height: 100%; margin: 0; padding: 0 }
     </style>
    <!-- Required for the ActiveReports Web Viewer -->
     <link rel="stylesheet" href="jsViewer.min.css" />
     <link rel="stylesheet" href="web-designer.css" />
 </head>
 <body>
     <!-- Required for the ActiveReports Web Viewer -->
     <script src="jsViewer.min.js"></script>
     <script src="web-designer.js"></script>
    <!-- Important! Designer requires a defined size or a container to fill -->
     <div id="ar-web-designer" style="width: 100%; height: 100%;"></div>
    <script>
         /* Required for the ActiveReports Web Viewer */
         var viewer = null;
         GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
             appBar: {
           
                 saveButton: { visible: false },          
                 saveAsButton: { visible: false }
             },
            data: {
                 dataSets: { canModify: true },
                 dataSources: { canModify: true }
             },
            server: {
                 url: 'api'
             },
            preview: {
                 /* Required for the ActiveReports Web Viewer */
                 openViewer: ({ element, documentInfo: { id: documentId } }) => {
                     if (viewer) {
                         viewer.openReport(documentId);
                         return;
                     }
                    viewer = GrapeCity.ActiveReports.JSViewer.create({
                         element: '#' + element,
                         reportID: documentId,
                         renderFormat: options.preferredFormat || 'html',
                         reportService: {
                             url: 'api/reporting'
                         },
                         settings: {
                             zoomType: 'FitPage'
                         }
                     });
                 }
             }
         });
     </script>
 </body>
 </html>

    apiof()

    Description: Returns the DesignerAPI of the previously created instance of the WebDesigner component.

    Parameter (Type):

    instanceId: string

    Return Type: DesignerAPI | undefined

    Required: Yes

    Sample code
    Copy Code 
    const designer = GrapeCity.ActiveReports.Designer.apiOf('ar-web-designer');

    addLanguage()

    Description: Adds language resources for all instances of WebDesigner.

    Parameter (Type):

    lng: string
    resources: ResourceBundle[]

    Return Type: void

    Required: Yes

    Sample code
    Copy Code 
    GrapeCity.ActiveReports.Designer.addLanguage('en', [
            {
                "ns": "app",
                "lng": "en",
                "resources": {
                    "about": {
                        "textAppTitleCompact": "",
                    },
                }
            },
]);

    destroy()

    Description: Destroys Designer application.

    Parameter (Type):

    selector: string (the Designer container selector)
    instanceId: string (Optional, use only if Designer was created using DesignerSettings.instanceId)                

    Return Type: void

    Required: Yes

    Sample Code with instanceId
    Copy Code 
    GrapeCity.ActiveReports.Designer.create('#container-1', { settings, instanceId: 'instance-1' });
GrapeCity.ActiveReports.Designer.destroy('#container-1', 'instance-1');
    Sample Code without instanceId
    Copy Code 
    GrapeCity.ActiveReports.Designer.create('#container-2', settings);
GrapeCity.ActiveReports.Designer.destroy('#container-2');

    ResourceBundle

    Localization resource for a specific locale.

    lng

    Description: Refers to the bundle language.

    Return Type: string

    Required: Yes

    ns

    Description: Refers to the bundle namespace.

    Return Type: string

    Required: Yes

    resources

    Description: Refers to the localization resources.

    Return Type: Record<string, any>

    Required: Yes

    DesignerAPI

    Type of object returned by functions from the GlobalDesignerAPI.

    app

    Description: Contains application-related information.

    Required: Yes

    about

    Description: Contains documentation links and application-related information.

    Required: Yes

    »help

    Description: Contains designer-related documentation links.

    Required: Yes

    general

    Description: Refers to the general documentation.

    Return Type: { text: string; url: string }

    Required: Yes

     

    transformation

    Description: Refers to the report items transformation information.

    Return Type: { text (optional): string; url: string }

    Required: Yes

    import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
     rpx: { enabled: true },
     appBar: { openButton: { visible: true } }
             }).then((designer) => {
     designer.app.about.help.general.text = 'help text';
     designer.app.about.help.general.url = 'http://myurl';
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
     rpx: { enabled: true },
     appBar: { openButton: { visible: true } }
             }).then((designer) => {
     designer.app.about.help.general.text = 'help text';
     designer.app.about.help.general.url = 'http://myurl';
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
     rpx: { enabled: true },
     appBar: { openButton: { visible: true } }
             }).then((designer: DesignerAPI) => {
     designer.app.about.help.general.text = 'help text';
     designer.app.about.help.general.url = 'http://myurl';
});

    »applicationTitle

    Description: Specifies the application title for the WebDesigner component.

    Return Type: string

    Required: Yes

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

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

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

    »applicationTitleCompact

    Description: Specifies the compact version of the application title for the WebDesigner component.

    Return Type: string

    Required: Yes

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

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

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

    »applicationVersion

    Description: Specifies the application version for the WebDesigner component.

    Return Type: string

    Required: Yes

    »coreVersion

    Description: Refers to the WebDesigner Core version an application is based on.

    Return Type: string

    Required: Yes

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

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

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

    focus()

    Description: Returns focus to the WebDesigner component. Focus may be lost when plugged-in or external 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

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

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

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

    editor()

    Description: Information about the availability of common actions with the report and selected items

    Required: Yes

    The flags indicate whether the editor is able to perform the corresponding action. The Return Type of these flags is 'boolean'. The actions indicate action associated with the flag. The Return Type of these actions is 'void'.

    Flag Action

    canUndo()

    		 undo()

    canRedo()

    		 Redo()

    canCut()

    		 Cut()

    canPaste()

    		 Paste()

    canCopy()

    		 Copy()

    canDelete()

    		 Delete()

    See the following section for sample usage of setting flags and the corresponding action to take.

    »canUndo()/undo()

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

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

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

    »canRedo()/redo()

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

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

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

    »canCut()/cut()

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

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

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

    »canCopy()/copy()

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

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

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

    »canPaste()/paste()

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

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

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

    »canDelete()/delete()

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

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

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

    panels

    Description: Contains access to the menu and sidebar panels. It contains following objects: menu and sidebar.

    menu

    Description: Menu API.

    »open()

    Parameter Type:
    id: string

    Return Type: void

    »pin

    Return Type: void

    »close

    Return Type: void

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

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

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

    sidebar

    Description: Sidebar API.

    »open()

    Parameter Type:
    id: string

    Return Type: void

    »close

    Return Type: void

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

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

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

    documents

    Description: This object includes functions allowing you to create, open, save reports, and more.

    Return Type: DocumentsAPI

    Required: Yes

    notifications

    Description: Allows to utilize the built-in notifications system in the WebDesigner component.

    Return Type: NotificationsAPI

    Required: Yes

    DocumentsAPI

    API to create, edit, open, or save report, to fetch information on unsaved reports, and more.

    hasUnsavedChanges()

    Description: Indicates whether the report has unsaved changes.

    Return Type: boolean

    Required: Yes

    import { arWebDesigner } from './web-designer.js';
const designer = arWebDesigner.apiOf('ar-web-designer');
const val = designer.documents.hasUnsavedChanges(); if (val) console.log('Currently edited report has unsaved changes.');

    const designer = GrapeCity.ActiveReports.Designer.apiOf('ar-web-designer');
const val = designer.documents.hasUnsavedChanges();
if (val) console.log('Currently edited report has unsaved changes.');

    const designer = GrapeCity.ActiveReports.Designer.apiOf('ar-web-designer');
const val = designer.documents.hasUnsavedChanges();
if (val) console.log('Currently edited report has unsaved changes.');

    isNew()

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

    Return Type: boolean

    Required: Yes

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

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

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

    info()

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

    Return Type: CurrentDocumentInfo      

    Required: Yes 

    import { arWebDesigner } from './web-designer.js';
const designer = arWebDesigner.apiOf('ar-web-designer');
var reportInfo = designer.documents.info();
console.log(`Report "${reportInfo.name}" is currently edited.`);

    const designer = GrapeCity.ActiveReports.Designer.apiOf('ar-web-designer');
var reportInfo = designer.documents.info();
console.log(`Report "${reportInfo.name}" is currently edited.`);

    const designer = GrapeCity.ActiveReports.Designer.apiOf('ar-web-designer');
var reportInfo = designer.documents.info();
console.log(`Report "${reportInfo.name}" is currently edited.`);

    create()

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

    Parameter (Type):

    1. options (optional): CreateDocumentOptions

    Return Type: Promise<CreateDocumentInfo> 

    Required: Yes      

    import { arWebDesigner } from './web-designer.js';
const designer = arWebDesigner.apiOf('ar-web-designer');
var reportInfo = designer.documents.create().then(function() {
console.log('An empty RDLX report is created.'); });

    const designer = GrapeCity.ActiveReports.Designer.apiOf('ar-web-designer');
var reportInfo = designer.documents.create().then(function() {
console.log('An empty RDLX report is created.');
});

    const designer = GrapeCity.ActiveReports.Designer.apiOf('ar-web-designer');
var reportInfo = designer.documents.create().then(() => {
console.log('An empty RDLX report is created.');
});

    open()

    Description: Shows the Open Report dialog box in the WebDesigner component.

    Return Type: void

    Required: Yes

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

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

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

    openById()

    Description: Opens an existing report to be edited in the WebDesigner 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
    type: SupportedDocumentType
    name (optional): string
    content (optional): any

    Return Type: Promise<OpenDocumentInfo>

    Required: Yes

    import { arWebDesigner } from './web-designer.js';
var api = arWebDesigner.apiOf('designer-id');
api.documents.openById('MyReport.rdlx', { platform: 'rdlx', type: 'report', subType: 'msl'}).then(() => {
console.log('An existing report "MyReport.rdlx" is opened.');
});
var reportContent = { Width: '6.5in', ReportSections: [{ Type: 'Continuous' as any, Name: 'ContinuousSection1', Body: { ReportItems: [ {Type: 'textbox', Name: 'TextBox1', Width: '5in', Height: '1in' } ] }}]};
api.documents.openById('NewReport.rdlx', { platform: 'rdlx', type: 'report', subType: 'msl'}, 'NewReport', reportContent).then(() => {
console.log('New report with one textbox created and opened.');
});

    var api = GrapeCity.ActiveReports.Designer.apiOf('designer-id');
api.documents.openById('MyReport.rdlx', { platform: 'rdlx', type: 'report', subType: 'msl'}).then(() => {
console.log('An existing report "MyReport.rdlx" is opened.');
});
var reportContent = { Width: '6.5in', ReportSections: [{ Type: 'Continuous' as any, Name: 'ContinuousSection1', Body: { ReportItems: [ {Type: 'textbox', Name: 'TextBox1', Width: '5in', Height: '1in' } ] }}]};
api.documents.openById('NewReport.rdlx', { platform: 'rdlx', type: 'report', subType: 'msl'}, 'NewReport', reportContent).then(() => {
console.log('New report with one textbox created and opened.');
});

    const api = GrapeCity.ActiveReports.Designer.apiOf('designer-id');
api.documents.openById('MyReport.rdlx', { platform: 'rdlx', type: 'report', subType: 'msl'}).then(() => {
console.log('An existing report "MyReport.rdlx" is opened.');
});
const reportContent = { Width: '6.5in', ReportSections: [{ Type: 'Continuous' as any, Name: 'ContinuousSection1', Body: { ReportItems: [ {Type: 'textbox', Name: 'TextBox1', Width: '5in', Height: '1in' } ] }}]};
api.documents.openById('NewReport.rdlx', { platform: 'rdlx', type: 'report', subType: 'msl'}, 'NewReport', reportContent).then(() => {
console.log('New report with one textbox created and opened.');
});

    save()

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

    Return Type: void

    Required: Yes

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

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

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

    saveAs()

    Description: Opens the Save As dialog box in the WebDesigner component.

    Return Type: void

    Required: Yes

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

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

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

    saveById()

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

    Parameter (Type):

    Return Type: Promise<SaveDocumentInfo>

    Required: Yes

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

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

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

    saveByName()

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

    Parameter (Type):

    name: string

    Return Type: Promise<SaveDocumentInfo>

    Required: Yes

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

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

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

    RpxReportDocumentType

    Section Report (.rpx) document type.

    type RpxReportDocumentType = { platform: 'rpx'; type: 'report' };

    RdlxFplReportDocumentType

    Page Report (.rdlx) document type.

    type RdlxFplReportDocumentType = { platform: 'rdlx'; type: 'report'; subType: 'fpl'};

    RdlxMslReportDocumentType

    RDLX Multi-Section (.rdlx) document type.

    type RdlxMslReportDocumentType = { platform: 'rdlx'; type: 'report'; subType: 'msl'};

    RdlxMslDashboardDocumentType

    RDLX Dashboard (.rdlx) document type.

    type RdlxMslDashboardDocumentType = { platform: 'rdlx'; type: 'report'; subType: 'msl'};

    RdlxMasterMultiReportDocumentType

    RDLX report (.rdlx) document type.

    type RdlxMasterMultiReportDocumentType = { platform: 'rdlx'; type: 'master'; subType: 'msl'};

    RdlxReportDocumentType

    RDLX, Page, RDLX Multi-Section, or RDLX Dashboard document type.

    Acceptable Values
    Copy Code 
    RdlxFplReportDocumentType | RdlxMslReportDocumentType | RdlxMslDashboardDocumentType | RdlxMasterMultiReportDocumentType;

    SupportedDocumentType

    Type of documents supported by the WebDesigner component.

    Acceptable Values
    Copy Code 
    RpxReportDocumentType | RdlxReportDocumentType;

    NotificationsAPI

    API for notifications for a user action, error, warning, and more.

    send()

    Description: Sends a notification of the specified level, including caption and content.

    Parameter (Type):

    level: 'info' | 'warning' | 'error'
    caption: string
    content (optional): string
    1. level refers to notification level. It determines the color and icons used for the notifications.
    2. caption refers to notification caption. It is displayed when the notification pops up by default, then used as a title in Notification Details view.
    3. content refers to notification content. It is only visible when the Notification Details are open.

    Return Type: void

    Required: Yes

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

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

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

    info()

    Description: Sends a general notification, which can be used to notify when any user-initiated action is complete.

    Parameter (Type):

    caption: string      
    text (optional): string

    Return Type: void

    Required: Yes

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

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

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

    error()

    Description: Sends an error notification.

    Parameter (Type):

    caption: string
    errorText (optional): string

    Return Type: void

    Required: Yes

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

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

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

    warning()

    Description: Sends a warning notification.

    Parameter (Type):

    caption: string
    warningText (optional): string

    Return Type: void

    Required: Yes

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

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

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

    dismissAll()

    Description: Dismisses all notifications.

    Return Type: void

    Required: Yes

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

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

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

    Font

    label

    Return Type: string

    Required: Yes

    value

    Return Type: string

    Required: Yes

    FontHeader

    header

    Return Type: string

    Required: Yes

    Color

    R

    Return Type: number

    Required: Yes

    G

    Return Type: number

    Required: Yes

    B

    Return Type: number

    Required: Yes

    A

    Return Type: number

    Required: Optional

    MenuCssIcon

    type

    Return Type: css

    Required: Yes

    class

    Return Type: string

    Required: Yes

    MenuIcon

    Menu Icon of the WebDesigner component.

    Acceptable Value
    Copy Code 
    MenuCssIcon

    DesignerSettings

    API for designer settings.

    instanceId

    Description: Indicates the unique identifier for the WebDesigner instance. This is required if there are multiple instances of the WebDesigner on the same page.

    Return Type: string

    Required: Yes

    Sample Code
    Copy Code 
    const designer = GrapeCity.ActiveReports.Designer.apiOf('ar-web-designer');

    language

    Description: Specifies the language to use for the WebDesigner component. If language is not specified, browser preferences are used. The localization is available in following languages: 
    'en-US’, ‘ja-JP’, and 'zh-CN'. The default value for this property is set to 'en-US'.

    Sample Code
    Copy Code 
    designerSettings.language = 'zh-CN';

    Return Type: string

    Required: Yes

    fonts

    Description: Specifies the list of fonts displayed in the Font editors all over the WebDesigner component, and supports plain strings, label-value pairs, headers, and splitters. 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 | Font | FontHeader)[]

    Required: Yes

    Sample Code
    Copy Code 
    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
   fonts: [{ header: 'Questionable Choice' }, { label: 'Pretty Font', value: 'Comic Sans MS' }, { header: '' }, 'Arial', 'Courier New', 'Times New Roman']
});

    themes

    default

    Description: The default theme to be applied.

    Return Type: string

    Required: Yes

    The default theme can be set from any of these: activeReports, activeReportsDark, defaultDark, darkOled, highContrast, highContrastDark.

    import { arWebDesigner } from './web-designer.js';
 arWebDesigner.create('#ar-web-designer', {
       themes: { default: 'defaultDark'}
 });

    const designer = GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
      themes: { default: 'defaultDark'}
});

    const designer = GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
      themes: { default: 'defaultDark'}
});

    list

    Description: An array of available themes that can be picked by the user. You can use either built-in theme names, or pass the theme object. A theme object can be created using GrapeCity.ActiveReports.DesignerThemes.create().

    Return Type: (string | Record<string, string | Color | boolean>)[];

    Required: Yes

    import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
     themes: { list: ['default','defaultDark']}
});

    const designer = GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
      themes: { list: ['default','defaultDark']}
});

    const designer = GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
      themes: { list: ['default','defaultDark']}
});

    detectDarkTheme

    Description: Indicates the whether designer should automatically detect and switch to a dark theme based on system settings. By default, this setting is set to 'false'.

    Return Type: boolean

    Required: Yes

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

    const designer = GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
     themes: { detectDarkTheme: true }
});

    const designer = GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
     themes: { detectDarkTheme: true }
});

    picker

    Description: Shows Theme Picker in the UI, which lists all the available themes. By default, this setting is set to 'true'.

    Return Type: boolean

    Required: Yes

    import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
     themes: { picker: { enabled: false }
});

    const designer = GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
     themes: { picker: { enabled: false }
});

    const designer = GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
     themes: { picker: { enabled: false }
});

    dateFormats

    Description: Specifies the list of supported date formats. See Microsoft Documentation for more information on custom date and time format strings.

    Return Type: string[]

    Required: Yes

    Sample Code
    Copy Code 
    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
   dateFormats = ['yyyy/MM/dd HH:mm:ss', 'yyyy/MM/dd', 'HH:mm:ss', 'tt hh:mm:ss']
});

    imageMimeTypes

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

    Return Type: string[]

    Required: Yes

    units

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

    Return Type: 'in' | 'cm'

    Required: Optional

    Sample Code
    Copy Code 
    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
  storeUserPreferences: false,
  units: 'cm'
});

    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 
    const designer = GrapeCity.ActiveReports.Designer.apiOf('ar-web-designer');
designer.lockLayout = 'true';

    document

    Return Type: { id: string; type: SupportedDocumentType; };

    Required: Optional

    storeUnsavedReport

    Description: By default, the storeUnsavedReport 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 storeUnsavedReport property is set to 'false', the aforementioned functionality is not available.

    Return Type: boolean

    Required: Yes

    Sample Code
    Copy Code 
    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
            storeUnsavedReport: false
});

    storeUserPreferences

    Description: By default, the storeUserPreferences property is set to 'true'. In this case, the user preferences will be saved to the browser storage. However, if the storeUnsavedReport property is set to 'false', the aforementioned functionality is not available.

    Return Type: boolean

    Required: Yes

    Sample Code
    Copy Code 
    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
            storeUserPreferences: false
});

    disableFocusTimer

    Description: By default, the disableFocusTimer property is set to 'true'. In such a case, the focused elements (like buttons) are highlighted only for a short period after the Tab key is pressed. However, if the disableFocusTimer property is set to 'false', the focus highlighting timer on the buttons is disabled for better accessibility.

    Return Type: boolean

    Required: Yes

    Sample Code
    Copy Code 
    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
            disableFocusTimer: true
});

    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.

    Return Type: boolean

    Required: Yes

    Sample Code
    Copy Code 
    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
            disableSystemClipboard: true
});

    filterProperties

    Description: Return filtered array of descriptors in the order in which descriptors should be rearranged.

    Parameter (Type):

    descriptors: PropertyDescriptor[]

    item: Record<string, any>

    platform: 'rdlx' | 'rpx'

    Return Type: PropertyDescriptor[]

    Required: Optional

    Sample Code
    Copy Code 
    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
  filterProperties: (descriptors, item, platform) => platform === 'rpx' ? [] : descriptors,
});

    editor

    Description: Settings available for the Editors in the Web designer component.

    Required: Yes

    rulers

    Description: Specifies the ruler settings for the WebDesigner component.

    Required: Optional

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

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

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

    »visible

    Description: Specifies whether rulers need to be shown in the WebDesigner component, by default.

    Return Type: boolean

    Required: Yes

    »snapStep

    Description: Specifies the snapStep value. The default value is { in: 0.25, cm: 0.5 }.

    Return Type: { in: number; cm: number; };

    Required: Optional

    gridSize

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

    Return Type: string

    Required: Optional

    showGrid

    Description: Specifies whether the grids must be shown or hidden in the WebDesigner component.

    Return Type: boolean

    Required: Optional

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

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

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

    snapToGrid

    Description: Specifies whether to display the Snap To Grid option in the WebDesigner component. The default value is 'false'.

    Return Type: boolean

    Required: Optional

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

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

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

    snapToGuides

    Description: Specifies whether to display the Snap To Guides option in the WebDesigner component. The default value is 'false'.

    Return Type: boolean

    Required: Optional

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

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

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

    appBar

    Description: Settings for the App bar in the WebDesigner component.

    Required: Yes

    visible

    Description: Specifies whether the App bar needs to be shown in the WebDesigner component. By default, the App bar is visible.

    Return Type: boolean

    Required: Yes

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

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
        appBar: {
            visible: false
        }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
        appBar: {
            visible: false
        }
});

    saveButton

    Description: Settings for the Save button in the WebDesigner component.

    Required: Yes

    »visible

    Description: Specifies whether the Save button needs to be shown in the WebDesigner component. By default, the Save button is hidden.

    Return Type: boolean

    Required: Yes

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

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

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

    saveAsButton

    Description: Settings for the Save As button in the WebDesigner component.

    Required: Yes

    »visible

    Description: Specifies whether the SaveAs button needs to be shown in the WebDesigner component. By default, the SaveAs button is visible.

    Return Type: boolean

    Required: Yes

    import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
        appBar: {
           saveAsButton: { visible: false}
        }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    appBar: {
        saveAsButton: { visible: false}
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    appBar: {
        saveAsButton: { visible: false}
    }
});

    openButton

    Description: Settings for the Open button in the WebDesigner component.

    Required: Yes

    »visible

    Description: Specifies whether the Open button needs to be shown in the WebDesigner component. By default, the Open button is hidden.

    Return Type: boolean

    Required: Yes

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

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

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

    insertTab

    Description: Settings for the Insert tab in the WebDesigner 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, this tab is hidden.

    Return Type: boolean

    Required: Yes

    import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    appBar: {
        insertTab: { visible: false}
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    appBar: {
        insertTab: { visible: false}
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    appBar: {
        insertTab: { visible: false}
    }
});

    homeTab

    Description: Settings for the Home tab in the WebDesigner component.

    Required: Yes

    »visible

    Description: Specifies whether the Home tab needs to be shown in the Web Designer's application bar. By default, this tab is visible.

    Return Type: boolean

    Required: Yes

    import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    appBar: {
        homeTab: { visible: false}
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    appBar: {
        homeTab: { visible: false}
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    appBar: {
        homeTab: { visible: false}
    }
});

    contextActionsTab

    Description: Settings for the Context Actions tab in the WebDesigner component.

    Required: Yes

    »visible

    Description: Specifies whether the Context Actions tab needs to be shown in the Web Designer's application bar. By default, the this tab is visible.

    Return Type: boolean

    Required: Yes

    import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    appBar: {
        contextActionsTab: { visible: false}
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    appBar: {
        contextActionsTab: { visible: false}
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    appBar: {
        contextActionsTab: { visible: false}
    }
});

    parametersTab

    Description: Settings for the Parameters tab in the WebDesigner component.

    Required: Yes

    »visible

    Description: Specifies whether the Parameters tab needs to be shown in the Web Designer's application bar. By default, this tab is visible.

    Return Type: boolean

    Required: Yes

    import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    appBar: {
        parametersTab: { visible: false}
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    appBar: {
        parametersTab: { visible: false}
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    appBar: {
        parametersTab: { visible: false}
    }
});

    scriptTab

    Description: Settings for the Script tab in the WebDesigner component.

    Required: Yes

    »visible

    Description: Specifies whether the Script tab needs to be shown in the Web Designer's application bar. By default, this tab is visible.

    Return Type: boolean

    Required: Yes

    import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    appBar: {
        scriptTab: { visible: false}
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    appBar: {
        scriptTab: { visible: false}
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    appBar: {
        scriptTab: { visible: false}
    }
});

    toolBar

    Description: Settings for the Tool Bar.

    Required: Yes

    visible

    Description: Specifies whether the Tool Bar needs to be shown in the WebDesigner component. By default, the Tool Bar is visible.

    Return Type: boolean

    Required: Yes

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

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    toolBar: { visible: false }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    toolBar: { visible: false }
});

    menu

    Description: Settings for menus in the WebDesigner component.

    Required: Yes

    visible

    Description: Specifies whether the Main menu needs to be shown in the WebDesigner component. By default, the Main menu is visible.

    Return Type: boolean

    Required: Yes

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

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    menu: { visible: false }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    menu: { visible: false }
});

    logo

    Description: Specifies the settings for the custom logo in the menu of WebDesigner.

    Required: Optional

    »visible

    Description: Specifies whether the logo needs to be shown in the menu.

    Required: Optional

    Return Type: Boolean

    import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    menu: {
        logo: { visible: false }
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
   menu: {
       logo: { visible: false }
   }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
   menu: {
       logo: { visible: false }
   }
});

    »custom

    Description: Sets a custom logo to be shown in the menu.

    Required: Optional

    Return Type: MenuIcon

    import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    menu: {
       logo: { custom: { type: 'css', class: 'my-custom-icon' }; }
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
   menu: {
      logo: { custom: { type: 'css', class: 'my-custom-icon' }; }
   }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
   menu: {
      logo: { custom: { type: 'css', class: 'my-custom-icon' }; }
   }
});

    toolBox

    Description: Settings for the ToolBox menu in the WebDesigner component.

    Required: Yes

    »visible

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

    Return Type: boolean

    Required: Yes

    import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
  menu: {
     toolBox: { visible: false }
  }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
  menu: {
     toolBox: { visible: false }
  }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
  menu: {
     toolBox: { visible: false }
  }
});

    documentExplorer

    Description: Settings for the Document Explorer button in the WebDesigner component.

    Required: Yes

    »visible

    Description: Specifies whether the Document Explorer button needs to be shown in the WebDesigner component. By default, the Document Explorer button is visible.

    Return Type: boolean

    Required: Yes

    import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
  menu: {
      documentExplorer: { visible: false }
  }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
  menu: {
      documentExplorer: { visible: false }
  }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
  menu: {
      documentExplorer: { visible: false }
  }
});

    groupEditor

    Description: Settings for the Group Editor button in the WebDesigner component.

    Required: Yes

    »visible

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

    Return Type: boolean

    Required: Yes

    import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    menu: {
       groupEditor: { visible: false }
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
   menu: {
      groupEditor: { visible: false }
  }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    menu: {
      groupEditor: { visible: false }
   }
});

    layerEditor

    Description: Settings for the Layer Editor button in the WebDesigner component.

    Required: Yes

    »visible

    Description: Specifies whether the Layer Editor button needs to be shown in the WebDesigner component. By default, the Layer Editor button is visible.

    Return Type: boolean

    Required: Yes

    import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
  menu: {
      layerEditor: { visible: false }
  }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
  menu: {
      layerEditor: { visible: false }
  }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
  menu: {
      layerEditor: { visible: false }
  }
});

    statusBar

    Description: Settings for the Status bar in the WebDesigner component.

    Required: Yes

    visible

    Description: Specifies whether the Status Bar needs to be shown. By default, the Status Bar is visible.

    Return Type: boolean

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

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
  statusBar: { visible: false }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
   statusBar: { visible: false }
});

    toggleUnitsButton

    Description: Settings for the Units button in the WebDesigner component.

    Required: Yes

    »visible

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

    Return Type: boolean

    Required: Yes

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

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

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

    toggleGridButton

    Description: Settings for the Show Grid button in the WebDesigner component.

    Required: Yes

    »visible

    Description: Specifies whether the Show Grid button needs to be shown in the WebDesigner component. By default, the Show Grid button is visible.

    Return Type: boolean

    Required: Yes

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

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

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

    gridSizeEditor

    Description: Settings for the Grid Size editor in the WebDesigner component.

    Required: Yes

    »visible

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

    Return Type: boolean

    Required: Yes

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

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

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

    rulersButton

    Description: Settings for the Show Rulers button in the WebDesigner component.

    Required: Yes

    »visible

    Description: Specifies whether the Show Rulers button needs to be shown in the WebDesigner component. By default, the Show Rulers button is visible.

    Return Type: boolean

    Required: Yes

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

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

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

    propertiesModeButton

    Description: Settings for the Properties Mode drop-down in the WebDesigner component.

    Required: Yes

    »visible

    Description: Specifies whether the Properties Mode drop-down needs to be shown in the WebDesigner component. By default, the Properties Mode drop-down is visible.

    Return Type: boolean

    Required: Yes

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

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

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

    propertyGrid

    Description: Settings for the Property grid in the WebDesigner component.

    Required: Yes

    propertiesTab

    Description: Settings for the Properties tab in the WebDesigner component.

    Required: Yes

    »visible

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

    Return Type: boolean

    Required: Optional

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

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

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

    mode

    Description: Specifies the available property modes in the WebDesigner component.

    Return Type: 'Basic' | 'Advanced'

    Required: Optional

    import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
   propertyGrid: {
       propertiesTab: {
           mode: 'Basic'
       }
   }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
   propertyGrid: {
       propertiesTab: {
           mode: 'Basic'
       }
   }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
   propertyGrid: {
       propertiesTab: {
           mode: 'Basic'
       }
   }
});

    sort

    Description: Specifies the available properties sort modes in the WebDesigner component.

    Return Type: 'categorized' | 'alphabetical'

    Required: Optional

    import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
   propertyGrid: {
       propertiesTab: {
           sort: 'alphabetical'
       }
   }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
   propertyGrid: {
       propertiesTab: {
           sort: 'alphabetical'
       }
   }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
   propertyGrid: {
       propertiesTab: {
           sort: 'alphabetical'
       }
   }
});

    collapsibleCategories

    Description: Settings for the collapsibleCategories in the WebDesigner component.

    Required: Optional

    »enabled

    Description: When set to true, Property grid categories becomes collapsible and app memorizes categories' and editor's expand/collapse states.

    Return Type: boolean

    Required: Optional

    import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
   propertyGrid: {
       propertiesTab: {
           collapsibleCategories: {
               enabled: false
           }
       }
   }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
   propertyGrid: {
       propertiesTab: {
            collapsibleCategories: {
                enabled: false
            }
       }
   }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
   propertyGrid: {
       collapsibleCategories: {
           enabled: false
       }
   }
});

    saveExpandEditorsState

    Description: Settings for the saveExpandEditorsState in the WebDesigner component.

    Required: Optional

    »enabled

    Description: When set to true, app memorizes editor's expand/collapse states.

    Return Type: boolean

    Required: Optional

    import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
   propertyGrid: {
       propertiesTab: {
            saveExpandEditorsState: {
                enabled: false
            }
       }
   }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
   propertyGrid: {
       propertiesTab: {
            saveExpandEditorsState: {
                enabled: false
            }
       }
   }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
   propertyGrid: {
       propertiesTab: {
            saveExpandEditorsState: {
                enabled: false
            }
       }
   }
});

    documents

    Description: Settings for the Document API in the WebDesigner component.

    Required: Yes

    fileView

    Description: Settings for the File View tab in the WebDesigner component.

    Required: Yes

    »visible

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

    Return Type: boolean

    Required: Yes

    import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
        documents: {
            fileView: {
                visible: false,
            }
        }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
        documents: {
            fileView: {
                visible: false,
            }
        }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
        documents: {
            fileView: {
                visible: false,
            }
        }
   }
});

    handlers

    Required: Yes

    »onBeforeSave()

    Description: An async handler, cancels saving process if returned false.

    Parameter (Type):

    1. info: SaveDocumentInfo

    Return Type: Promise<boolean>

    Required: Optional

    import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
        documents: {
            fileView: {
        handlers: {
            onBeforeSave: (info) => {
                return new Promise((resolve, reject) => {
                    resolve(false);
                });
            }
        }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    documents: {
        handlers: {
            onBeforeSave: (info) => {
                return new Promise((resolve, reject) => {
                    resolve(false);
                });
            }
        }
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    documents: {
        handlers: {
            onBeforeSave: (info: SaveDocumentInfo) => {
                return new Promise((resolve, reject) => {
                    resolve(false);
                });
            }
        }
    }
});

    »onAfterSave()

    Description: A handler that is called when the save process is completed.

    Parameter (Type):

    1. info: SaveDocumentInfo

    Return Type: void

    Required: Optional

    import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    documents: {
        handlers: {
            onAfterSave: (info) => {
                if (!info.success) throw new Error(`Report saving error`);
            }
        }
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    documents: {
        handlers: {
            onAfterSave: (info) => {
                if (!info.success) throw new Error(`Report saving error`);
            }
        }
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    documents: {
        handlers: {
            onAfterSave: (info) => {
                if (!info.success) throw new Error(`Report saving error`);
            }
        }
    }
});

    »onBeforeOpen()

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

    Return Type: Promise<boolean>

    Required: Optional

    import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    documents: {
       handlers: {
            onBeforeOpen: () => {
                return new Promise((resolve, reject) => {
                    resolve(false);
                });
            }
       }
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    documents: {
       handlers: {
            onBeforeOpen: () => {
                return new Promise((resolve, reject) => {
                    resolve(false);
                });
            }
       }
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    documents: {
       handlers: {
            onBeforeOpen: () => {
                return new Promise((resolve, reject) => {
                    resolve(false);
                });
            }
       }
    }
});

    »onAfterOpen()

    Description: A handler that is called when the open process is completed.

    Return Type: void

    Required: Optional

    import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    documents: {
       handlers: {
           onAfterOpen: () => {
                console.log('New report opened successful.')
            }
       }
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    documents: {
       handlers: {
           onAfterOpen: () => {
                console.log('New report opened successful.')
            }
       }
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    documents: {
       handlers: {
           onAfterOpen: () => {
                console.log('New report opened successful.')
            }
       }
    }
});

    »onBeforeCreate()

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

    Return Type: Promise<boolean>

    Required: Optional

    import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    documents: {
       handlers: {
           onBeforeCreate: () => {return false}
       }
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    documents: {
       handlers: {
           onBeforeCreate: () => {return false}
       }
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    documents: {
       handlers: {
           onBeforeCreate: () => {return false}
       }
    }
});

    »onAfterCreate()

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

    Return Type: void

    Required: Optional

    import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    documents: {
       handlers: {
          onAfterCreate: () => {
                console.log('New report created successful.')
            }
      }
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    documents: {
       handlers: {
          onAfterCreate: () => {
                console.log('New report created successful.')
            }
      }
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    documents: {
       handlers: {
          onAfterCreate: () => {
                console.log('New report created successful.')
            }
      }
    }
});

    »onInfoUpdate()

    Description: A handler that is triggered when report name/id is updated.

    Return Type: void

    Required: Optional

    import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    documents: {
      handlers: {
          onInfoUpdate: (options) => {
                console.log(`name changed ${options.name}`);
            }
        }
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    documents: {
      handlers: {
          onInfoUpdate: (options) => {
                console.log(`name changed ${options.name}`);
            }
        }
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    documents: {
      handlers: {
          onInfoUpdate: (options:
               {
                   name: string,
                   id?: string,
                   type: SupportedDocumentType['type'],
                   platform: SupportedDocumentType['platform']
               }) =>
                    {console.log(`name changed ${options.name}`);}
        }
    }
});

    »onDocumentChanged()

    Description: A handler that is triggered when report content is changed.
    This function takes an object as an argument that contains two properties:

    • document: The document property contains the updated version of the document that was changed
    • hasUnsavedChanges: The hasUnsavedChanges is a boolean value that indicates whether there are any unsaved changes in the document.

    Return Type: void

    Required: Optional

    import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    documents: {
      handlers: {
            onDocumentChanged: (options) => {
                if (options.hasUnsavedChanges) console.log('Currently edited report has unsaved changes.');
            }
        }
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    documents: {
      handlers: {
            onDocumentChanged: (options) => {
                if (options.hasUnsavedChanges) console.log('Currently edited report has unsaved changes.');
            }
        }
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    documents: {
      handlers: {
          onInfoUpdate: (options:
               {
                   name: string,
                   id?: string,
                   type: SupportedDocumentType['type'],
                   platform: SupportedDocumentType['platform']
               }) =>
                    {console.log(`name changed ${options.name}`);}
        }
    }
});

     

    data

    dataTab

    Description: Settings related to data in the WebDesigner component.

    Required: Yes

    »visible

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

    Return Type: boolean

    Required: Yes

    import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    data: {
        dataTab: {
            visible:false
            }
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    data: {
        dataTab: {
            visible:false
            }
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    data: {
        dataTab: {
            visible:false
        }
    }
});

    dataSources

    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 WebDesigner component. By default, the Data Sources section is visible.

    Return Type: boolean

    Required: Yes

    import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    data: {
        dataSources: {
            visible:false
            }
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    data: {
        dataSources: {
            visible:false
            }
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    data: {
        dataSources: {
            visible:false
        }
    }
});

    »canModify

    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

    import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    data: {
        dataSources: {
            canModify: true
            }
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    data: {
        dataSources: {
            canModify: true
            }
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    data: {
        dataSources: {
            canModify: true
        }
    }
});

    »shared

    Description: Specifies whether the shared data sources should be enabled in the WebDesigner. The shared data sources are available under the ‘Shared Reference’ option as a Provider.

    Return Type: boolean

    Required: Yes

    import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    data: {
        dataSources: {
             shared: {
                  enabled: true
             }
        }
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    data: {
        dataSources: {
              shared: {
                  enabled: true
             }
        }
     }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    data: {
        dataSources: {
              shared: {
                  enabled: true
             }
        }
     }
});

    »options

    predefinedProviders

    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: Yes

    import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    data: {
        dataSources: {
            options: {
                predefinedProviders: ['SQL', 'JSON']
            }
        }
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    data: {
        dataSources: {
            options: {
                predefinedProviders: ['SQL', 'JSON']
            }
        }
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    data: {
        dataSources: {
            options: {
                predefinedProviders: ['SQL', 'JSON']
            }
         }
     }
});

    oleDbProviders

    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: Yes

    import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    data: {
        dataSources: {
            options: {
                oleDbProviders: ['Microsoft.Jet.OLEDB.4.0', 'SQLOLEDB.1']
            }
        }
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    data: {
        dataSources: {
            options: {
                oleDbProviders: ['Microsoft.Jet.OLEDB.4.0', 'SQLOLEDB.1']
            }
        }
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    data: {
        dataSources: {
            options: {
                oleDbProviders: ['Microsoft.Jet.OLEDB.4.0', 'SQLOLEDB.1']
            }
        }
    }
});

    customProviders

    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, 
      key refers to the data provider identifier. This value is used for 'DataSource.ConnectionProperties.DataProvider' property.
      name refers to the data provider label. This value is used as a friendly data provider label in UI.

    Required: Yes

    import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    data: {
        dataSources: {
            options: {
                customProviders:[{ key: 'CDP', name: 'Custom Data Provider' }]
            }
        }
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    data: {
        dataSources: {
            options: {
                customProviders:[{ key: 'CDP', name: 'Custom Data Provider' }]
            }
        }
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    data: {
        dataSources: {
            options: {
                customProviders:[{ key: 'CDP', name: 'Custom Data Provider' }]
            }
        }
    }
});

    dataSets

    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 WebDesigner component. By default, the Datasets section is visible.

    Return Type: boolean

    Required: Yes

    import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    data: {
        dataSources: {
            options: {
                customProviders:[{ key: 'CDP', name: 'Custom Data Provider' }]
            }
        }
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    data: {
        dataSources: {
            options: {
                customProviders:[{ key: 'CDP', name: 'Custom Data Provider' }]
            }
        }
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    data: {
        dataSources: {
            options: {
                customProviders:[{ key: 'CDP', name: 'Custom Data Provider' }]
            }
        }
    }
});

    »canModify

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

    Return Type: boolean

    Required: Yes

    import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    data: {
        dataSets: {
            canModify:true
        }
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    data: {
        dataSets: {
            canModify:true
        }
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    data: {
        dataSets: {
            canModify:true
        }
    }
});

    parameters

    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 WebDesigner component. By default, the Parameters section is visible.

    Return Type: boolean

    Required: Yes

    import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    data: {
        parameters: {
            visible: false
        }
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    data: {
        parameters: {
            visible: false
        }
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    data: {
        parameters: {
            visible: false
        }
    }
});

    »canModify

    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

    import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    data: {
        parameters: {
            canModify: false
        }
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    data: {
        parameters: {
            canModify: false
        }
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    data: {
        parameters: {
            canModify: false
        }
    }
});

    commonValues

    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 WebDesigner component. By default, the Common Values section is visible.

    Return Type: boolean

    Required: Yes

    import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    data: {
        commonValues: {
            visible: false
        }
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    data: {
        commonValues: {
            visible: false
        }
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    data: {
        commonValues: {
            visible: false
        }
    }
});

    styles

    Description: Style settings for Section Reports in the WebDesigner component.

    Required: Yes

    stylesTab

    Description: Settings for the Styles Tab in the WebDesigner component.

    Required: Yes

    »visible

    Description: Specifies whether the stylesheet for the Section Reports (.rpx) can be modified. By default, the Styles tab is visible.

    Return Type: boolean

    Required: Yes

    import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    styles: {
        stylesTab: {
            visible:false
        }
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    styles: {
        stylesTab: {
            visible:false
        }
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    styles: {
        stylesTab: {
            visible:false
        }
    }
});

    stylesheet

    Description: Stylesheet settings in the WebDesigner component.

    Required: Yes

    »canModify

    Description: Specifies whether it is possible to modify the Section Report (.rpx) in the WebDesigner component. The default value for this property is 'true'.

    Return Type: boolean

    Required: Yes

    import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    styles: {
        stylesTab: {
            canModify:false
        }
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    styles: {
        stylesTab: {
            canModify:false
        }
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    styles: {
        stylesTab: {
            canModify:false
        }
    }
});

    server

    Description: Backend-related settings for the WebDesigner 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

    import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    server: {
        url: 'api/designer'
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    server: {
        url: 'api/designer'
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    server: {
        url: 'api/designer'
    }
});

    onBeforeRequest()

    Description: A special handler to modify requests in the WebDesigner component.

    Parameter (Type):

    init: RequestInit

    Return Type: RequestInit

    Required: Optional

    onBeforeRequestAsync()

    Description: Async version of onBeforeRequest. Use either this or normal version.

    Parameter (Type):

    init: RequestInit

    Return Type: Promise<RequestInit>

    Required: Optional

    title

    Description: Settings for document title in the WebDesigner component.

    Required: Yes

    onUpdate()

    Description: It is possible to implement custom logic for updating the browser tab's title when the edited document gets updated in the WebDesigner component.

    Parameter (Type):

    init: TitleInfo

    Return Type: string

    Required: Optional

    import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
      title: {
          onUpdate: (info) =>
                `${info.name}${info.hasUnsavedChanges ? ' - Has Unsaved Changes!' : info.name}`
      }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
      title: {
          onUpdate: (info) =>
                `${info.name}${info.hasUnsavedChanges ? ' - Has Unsaved Changes!' : info.name}`
      }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
      title: {
          onUpdate: (info: TitleInfo) =>
                `${info.name}${info.hasUnsavedChanges ? ' - Has Unsaved Changes!' : info.name}`
      }
});

    disabled

    Description: Specifies whether the browser tab title can be updated in the WebDesigner component. The default value of the property is 'false'.

    Return Type: boolean

    Required: Yes

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

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
     title: {
            disabled: true
        }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
     title: {
            disabled: true
        }
});

    preview

    Description: Preview settings for the document in the WebDesigner component.

    Required: Yes

    canPreview

    Description: Specifies whether the Preview button needs to be shown in the WebDesigner component. The default value of the property is 'false'.

    Return Type: boolean

    Required: Optional

    import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    server: {
        url: 'api/designer'
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    server: {
        url: 'api/designer'
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    server: {
        url: 'api/designer'
    }
});

    openViewer

    Description: You can plug in the Viewer component by providing the openViewer() method.

    Parameter (Type):

    1. settings: ViewerSettings

    Return Type: void

    Required: Yes

    import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
 preview: {
     openViewer: (info) =>
         console.log(info.applicationTitle)
  }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
 preview: {
     openViewer: (info) =>
         console.log(info.applicationTitle)
  }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
 preview: {
     openViewer: (info: ViewerSettings) =>
         console.log(info.applicationTitle)
  }
});

    rpx

    Description: RPX platform-specific settings in the WebDesigner component. Must exist for the Section Reports (.rpx) to work.

    Required: Yes

    enabled

    Description: Set to true to enable RPX support.

    Return Type: Boolean

    Required: Optional

    initTemplates

    Return Type: {imperialTemplates (optional): string[]; metricTemplates (optional): string[];};

    Required: Optional

    import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    rpx: {
            enabled: true,
            metricTemplates: ['{"Name":"Report","Width":"10cm","Layers":[{"Name":"default1"}],"CustomProperties":[{"Name":"DisplayType","Value":"Page"},{"Name":"SizeType","Value":"Default"},{"Name":"PaperOrientation","Value":"Portrait"}],"Page":{"PageWidth":"8.5in","PageHeight":"11in","RightMargin":"1in","LeftMargin":"1in","TopMargin":"1in","BottomMargin":"1in","Columns":1,"ColumnSpacing":"0in"},"Body":{"Height":"0.75cm","ReportItems":[{"Type":"textbox","Name":"TextBox1","CustomProperties":[],"CanGrow":true,"KeepTogether":true,"Style":{"PaddingLeft":"2pt","PaddingRight":"2pt","PaddingTop":"2pt","PaddingBottom":"2pt"},"Left":"0cm","Top":"0cm","Width":"10cm","Height":"5cm"}]}}'],
        }
    );
     var designer = GrapeCity.ActiveReports.Designer.apiOf('ar-web-designer');
    designer.documents.create({
    name: 'MyReport.rpx',
    type:
        {
            platform: 'rpx',
            type: 'report'
        }
    });

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    rpx: {
            enabled: true,
            metricTemplates: ['{"Name":"Report","Width":"10cm","Layers":[{"Name":"default1"}],"CustomProperties":[{"Name":"DisplayType","Value":"Page"},{"Name":"SizeType","Value":"Default"},{"Name":"PaperOrientation","Value":"Portrait"}],"Page":{"PageWidth":"8.5in","PageHeight":"11in","RightMargin":"1in","LeftMargin":"1in","TopMargin":"1in","BottomMargin":"1in","Columns":1,"ColumnSpacing":"0in"},"Body":{"Height":"0.75cm","ReportItems":[{"Type":"textbox","Name":"TextBox1","CustomProperties":[],"CanGrow":true,"KeepTogether":true,"Style":{"PaddingLeft":"2pt","PaddingRight":"2pt","PaddingTop":"2pt","PaddingBottom":"2pt"},"Left":"0cm","Top":"0cm","Width":"10cm","Height":"5cm"}]}}'],
        }
    );
     var designer = GrapeCity.ActiveReports.Designer.apiOf('ar-web-designer');
    designer.documents.create({
    name: 'MyReport.rpx',
    type:
        {
            platform: 'rpx',
            type: 'report'
        }
    });

    rpx: {
        enabled: true,
        metricTemplates: ['{"Name":"Report","Width":"10cm","Layers":[{"Name":"default1"}],"CustomProperties":[{"Name":"DisplayType","Value":"Page"},{"Name":"SizeType","Value":"Default"},{"Name":"PaperOrientation","Value":"Portrait"}],"Page":{"PageWidth":"8.5in","PageHeight":"11in","RightMargin":"1in","LeftMargin":"1in","TopMargin":"1in","BottomMargin":"1in","Columns":1,"ColumnSpacing":"0in"},"Body":{"Height":"0.75cm","ReportItems":[{"Type":"textbox","Name":"TextBox1","CustomProperties":[],"CanGrow":true,"KeepTogether":true,"Style":{"PaddingLeft":"2pt","PaddingRight":"2pt","PaddingTop":"2pt","PaddingBottom":"2pt"},"Left":"0cm","Top":"0cm","Width":"10cm","Height":"5cm"}]}}'],
    }
);
const designer = GrapeCity.ActiveReports.Designer.apiOf('ar-web-designer');
designer.documents.create({
name: 'MyReport.rpx',
type:
        {
            platform: 'rpx',
            type: 'report'
        }
});

    toolBoxContent

    Description: Specifies the report items and their display order in the toolbox of Section report.

    Return Type: RpxToolBoxItem[]

    Required: Optional

    import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
     rpx: {
             enabled: true,
             toolBoxContent:['Label', 'TextBox']                
    });

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    rpx: {
            enabled: true,
            toolBoxContent:['Label', 'TextBox']                
    });

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    rpx: {
            enabled: true,
            toolBoxContent:['Label', 'TextBox']                
    });

     

    rdlx

    Required: Yes

    expressionSyntax

    Description: Specifies which Expression syntax will be used in the WebDesigner 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

    import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
     rdlx: {
         expressionSyntax: 'rdl'
     }
 });

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
     rdlx: {
         expressionSyntax: 'rdl'
     }
 });

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
     rdlx: {
         expressionSyntax: 'rdl'
     }
 });

    msl

    »enabled

    Description: Set to true to enable RDLX report(a multi-section layout (MSL)) support.

    Return Type: boolean

    Required: Optional

    import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
        rdlx: {
            msl: {
                enabled: true
            }
        }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
        rdlx: {
            msl: {
                enabled: true
            }
        }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
        rdlx: {
            msl: {
                enabled: true
            }
        }
});

    fpl

    »enabled

    Description: Set to true to enable Fixed Page Layout support.

    Return Type: boolean

    Required: Optional

    import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
        rdlx: {
            fpl: {
                enabled: true
            }
        }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
        rdlx: {
            fpl: {
                enabled: true
            }
        }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
        rdlx: {
            fpl: {
                enabled: true
            }
        }
});

    dashboard

    »enabled

    Description: Set to true to enable Dashboard report support.

    Return Type: boolean

    Required: Optional

    import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
        rdlx: {
            dashboard: {
                enabled: true
            }
        }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
        rdlx: {
            dashboard: {
                enabled: true
            }
        }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
        rdlx: {
            dashboard: {
                enabled: true
            }
        }
});

    reportParts

    Description: Report Parts feature related settings.

    Return Type: ReportPartsSettings

    Required: Optional

    import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    rdlx: {
         reportParts: {
             enabled: true,                 
             libraries: [{
                 name: 'Sales',
                 path: 'Libraries/Lib_Sales.rdlx'
             }]
         }
     }
 });

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    rdlx: {
         reportParts: {
             enabled: true,                 
             libraries: [{
                 name: 'Sales',
                 path: 'Libraries/Lib_Sales.rdlx'
             }]
         }
     }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    rdlx: {
         reportParts: {
             enabled: true,                 
             libraries: [{
                 name: 'Sales',
                 path: 'Libraries/Lib_Sales.rdlx'
             }]
         }
     }
});

    masterReports

    »enabled

    Description: Set to true to enable master reports support.

    Return Type: boolean

    Required: Optional

    import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
        rdlx: {
            masterReports: {
                enabled: true
            }
        }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
        rdlx: {
            masterReports: {
                enabled: true
            }
        }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
        rdlx: {
            masterReports: {
                enabled: true
            }
        }
});

    expressionEditorNodesFilter()

    Description: Filters the Expression Editor nodes in the WebDesigner component.

    Parameter (Type):

    1. key: string

    Return Type: boolean

    Required: Optional

    import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    designerSettings.rdlx.expressionEditorNodesFilter = (key) => {
        if (key.includes('commonValues')) return false;
        if (key.includes('aggregate.aggregateIfWithScope')) return false;
        return true;

    designerSettings.rdlx.expressionEditorNodesFilter = (key) => {
    if (key.includes('commonValues')) return false;
    if (key.includes('aggregate.aggregateIfWithScope')) return false;
    return true;
}

    designerSettings.rdlx.expressionEditorNodesFilter = (key: string) => {
    if (key.includes('commonValues')) return false;
    if (key.includes('aggregate.aggregateIfWithScope')) return false;
    return true;
}

    toolBoxContent

    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 RDLX reports, 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: RdlxToolBoxItem[]; fpl: RdlxToolBoxItem[]; };

    Required: Optional

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

    initTemplates

    Description: Use Page reports to set custom templates for specific Page report items, for example, 'OverflowPlaceHolder'. It is preferable to use an RDLX report for setting custom templates for all other report items, as well as for pageHeader and pageFooter. In case of Reports, set ConsumeContainerWhitespace and Page-properties: 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 barcode default symbology. Note that if there is a same report item as in the previous one within a subsequent report in an array. Then, in such a case only the last template for this report item will be set. Furthermore, you can also set multiple init templates for some report items. For this, you should add a report with more than one report item of the same type. Templates with the same names will be replaced. Use the 'TemplateName' custom property of each report item to set a localized name of the template. Use the 'AllowWizard' custom property of a chart report item to allow the use of chart wizard when this report item is created. For example: ... ,"CustomProperties":[{"Name":"TemplateName","Value":"Doughnut Chart"}, {"Name":"AllowWizard","Value":"true"},...],...

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

    Required: Optional

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

    reportItemsFeatures

    Description: Refers to customizable report item features in the WebDesigner component.

    Return Type: RdlxReportItemsSettings

    Required: Yes

    reportStyles

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

    Return Type: ReportStyles[]

    Required: Yes

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

    TitleInfo

    Information on browser tab title.

    name

    Description: Refers to the document name.

    Return Type: string

    Required: Yes

    hasUnsavedChanges

    Description: Indicates whether the document has unsaved changes or not in the WebDesigner component.

    Return Type: boolean

    Required: Yes

     

    RdlxToolBoxItem

    Report items available in the toolbox.

    Acceptable Values

    Copy Code 
    'textbox' | 'checkbox' | 'container' | 'line' | 'shape' | 'tableofcontents' |
'image' | 'list' | 'table' | 'tablix' | 'chart' | 'bullet' | 'barcode' | 'formattedtext' |
'richtext' | 'sparkline' | 'subreport' | 'overflowplaceholder' | 'bandedlist' | 'inputfield'

    RpxToolBoxItem

    Report items available in the toolbox.

    Acceptable Values

    Copy Code 
    'Label' | 'TextBox' | 'CheckBox' | 'RichTextBox' | 'Shape' | 'Picture' | 'Line' | 'PageBreak' |
'Barcode' | 'SubReport' | 'ReportInfo' | 'CrossSectionLine' | 'CrossSectionBox' | 'InputFieldText' | 'InputFieldCheckBox'

    DvChartPlotType

    Chart types available.

    Acceptable Values

    Copy Code 
    'Custom'| 'Bar' | 'Line' | 'Area' | 'Scatter' | 'HighLowOpenClose' | 'Candlestick' | 'Column' |'Pie' | 'Pyramid' | 'Funnel' | 'Bubble' | 'Gantt' | 'HighLowClose' | 'PolarColumn' | 'PolarBar'|'RadarArea' | 'RadarBubble' | 'RadarScatter' | 'RadarLine' | 'RangeArea' | 'RangeBar' | 'RangeColumn' | 'Gauge'

    DvChartEncodingType

    The encoding type. Following are the encodings from the adorner panel only.

    Acceptable Values

    Copy Code 
    'Details' | 'Color' | 'Shape' | 'Size' | 'Text'

    RdlxReportItemsSettings

    Settings for the report items.

    barcode

    Description: Settings for barcodes in the WebDesigner component.

    symbologies

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

    Return Type: RdlxBarcodeSymbology[]

    Required: Optional

     import { arWebDesigner } from './web-designer.js';
 arWebDesigner.create('#ar-web-designer', {
     rdlx: {
         reportItemsFeatures: {
             barcode: {
                symbologies: ['Code_128_A', 'Code_128_B', 'Code_128_C']
             }
         }
     }
 });

     GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
     rdlx: {
         reportItemsFeatures: {
             barcode: {
                symbologies: ['Code_128_A', 'Code_128_B', 'Code_128_C']
             }
         }
     }
 });

     GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
     rdlx: {
         reportItemsFeatures: {
             barcode: {
                symbologies: ['Code_128_A', 'Code_128_B', 'Code_128_C']
             }
         }
     }
 });

    hideUnsupportedBarcodeJSProperties

    Description: Hides some unsupported barcode JS properties.

    Return Type: boolean

    Required: Optional

     import { arWebDesigner } from './web-designer.js';
 arWebDesigner.create('#ar-web-designer', {
     rdlx: {
         reportItemsFeatures: {
             barcode: {
                hideUnsupportedBarcodeJSProperties: true
             }
         }
     }
 });

     GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
     rdlx: {
         reportItemsFeatures: {
             barcode: {
                hideUnsupportedBarcodeJSProperties: true
             }
         }
     }
 });

     GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
     rdlx: {
         reportItemsFeatures: {
             barcode: {
                hideUnsupportedBarcodeJSProperties: true
             }
         }
     }
 });

    chart

    Description: Settings for the chart features.

    canUseWizard

    Description: Specifies whether the Chart Wizard is available for creating a Chart.

    Return Type: boolean

    Required: Optional

    import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    rdlx: {
        reportItemsFeatures: {
           chart: {
               canUseWizard: false
           }
        }
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
     rdlx: {
         reportItemsFeatures: {
            chart: {
                canUseWizard: false
            }
         }
     }
 });

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
     rdlx: {
         reportItemsFeatures: {
            chart: {
                canUseWizard: false
            }
         }
     }
 });

    plotChartTypes

    Description: Specifies the plot chart types available for creation.

    Return Type: boolean

    Required: Optional

    import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    rdlx: {
        reportItemsFeatures: {
           chart: {
               plotChartTypes: ['Column', 'Bar', 'Line']
           }
        }
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    rdlx: {
        reportItemsFeatures: {
            chart: {
                plotChartTypes: ['Column', 'Bar', 'Line']
            }
        }
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    rdlx: {
        reportItemsFeatures: {
            chart: {
                plotChartTypes: ['Column', 'Bar', 'Line']
            }
        }
    }
});

    hiddenEncodings

    Description: Excludes given encodings from encoding panel in chart adorner.

    Return Type: DvChartEncodingType[]

    Required: Yes

    import { arWebDesigner } from './web-designer.js';
arWebDesigner.create('#ar-web-designer', {
    rdlx: {
        reportItemsFeatures: {
            chart: {
                hiddenEncodings: ['Color', 'Text']
            }
        }
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    rdlx: {
        reportItemsFeatures: {
            chart: {
                hiddenEncodings: ['Color', 'Text']
            }
        }
    }
});

    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    rdlx: {
        reportItemsFeatures: {
            chart: {
                hiddenEncodings: ['Color', 'Text']
            }
        }
    }
});

    table

    Description: Settings for tables in the WebDesigner 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: Optional

    Sample Code
    Copy Code 
    designerSettings.rdlx.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: Optional

    Sample Code
    Copy Code 
    designerSettings.rdlx.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: Optional

    Sample Code
    Copy Code 
    designerSettings.rdlx.reportItemsFeatures.table.canMergeCellsVertically = false;

    hideFrozenRowsColumns

    Description: Specifies whether to hide FrozenRows or FrozenColumns properties from the Property grid. By default, hideFrozenRowsColumns is set to 'false'.

    Return Type: boolean

    Required: Optional

    Sample Code
    Copy Code 
    designerSettings.rdlx.reportItemsFeatures.table.hideFrozenRowsColumns = true;

    tablix

    Description: Settings for Tablix data region in the WebDesigner component.

    crossAggregates

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

    Return Type: boolean

    Required: Optional

    Sample Code
    Copy Code 
    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    rdlx: {
        reportItemsFeatures: {
            tablix: {
                 crossAggregates: false
            }
        }
    }
});

    autoFillCorner

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

    Return Type: boolean

    Required: Optional

    Sample Code
    Copy Code 
    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    rdlx: {
             reportItemsFeatures: {
                tablix: {
                 autoFillCorner: false
                }
             }
    }
});

    canUseWizard

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

    Return Type: boolean

    Required: Optional

    Sample Code
    Copy Code 
    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    rdlx: {
             reportItemsFeatures: {
                tablix: {
                 canUseWizard: false
                }
             }
    }
});

    hideFrozenRowsColumns

    Description: Specifies whether to hide FrozenRows or FrozenColumns properties from the Property grid and Tablix wizard. By default, hideFrozenRowsColumns is set to 'false'.

    Return Type: boolean

    Required: Optional

    Sample Code
    Copy Code 
    GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    rdlx: {
             reportItemsFeatures: {
                tablix: {
         hideFrozenRowsColumns: true
            }
        }
    }
});

    RdlxBarcodeSymbology

    Supported barcode symbologies.

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

    ReportItemStyle<T>

    Report item style.

    id

    Return Type: string

    Required: Yes

    name

    Return Type: string

    Required: Yes

    content

    Return Type: T

    Required: Yes

    BorderStyle

    Border style.

    Color

    Return Type: string

    Required: Optional

    Style

    Return Type: string

    Required: Optional

    Width

    Return Type: string

    Required: Optional

    CellStyleContent

    Styles for Table cell.

    TextBoxStyleContent with the following:

    LeftBorder

    Return Type: BorderStyle

    Required: Optional

    TopBorder

    Return Type: BorderStyle

    Required: Optional

    BottomBorder

    Return Type: BorderStyle

    Required: Optional

    RightBorder

    Return Type: BorderStyle

    Required: Optional

    TextAlign

    Return Type: string

    Required: Optional

    BottomBorder

    Return Type: string

    Required: Optional

    TextBoxStyleContent

    Styles for TextBox control.

    Color

    Return Type: string

    Required: Optional

    BackgroundColor

    Return Type: string

    Required: Optional

    FontFamily

    Return Type: string

    Required: Optional

    FontSize

    Return Type: string

    Required: Optional

    FontStyle

    Return Type: string

    Required: Optional

    FontWeight

    Return Type: string

    Required: Optional

    ContainerStyleContent

    Styles for Container control.

    BackgroundColor

    Return Type: string

    Required: Optional

    Border

    Return Type: string

    Required: Optional

    BulletStyleContent

    Styles for Bullet data region.

    ValueColor

    Return Type: string

    Required: Optional

    TargetLineColor

    Return Type: string

    Required: Optional

    LabelFontColor

    Return Type: string

    Required: Optional

    LabelFontFamily

    Return Type: string

    Required: Optional

    LabelFontSize

    Return Type: string

    Required: Optional

    LabelFontStyle

    Return Type: string

    Required: Optional

    TicksLineColor

    Return Type: string

    Required: Optional

    SparklineStyleContent

    Styles for Sparkline control.

    LineColor

    Return Type: string

    Required: Optional

    FillColor

    Return Type: string

    Required: Optional

    GradientEndColor

    Return Type: string

    Required: Optional

    MarkerColor

    Return Type: string

    Required: Optional

    RangeFillColor

    Return Type: string

    Required: Optional

    RangeGradientEndColor

    Return Type: string

    Required: Optional

    TableStyleContent

    Styles for Table data region.

    Header

    Return Type: { Rows: CellStyleContent[] };

    Required: Yes

    Details

    Return Type: { Rows: CellStyleContent[]; AlternatingExpression: string };

    Required: Yes

    Footer

    Return Type: { Rows: CellStyleContent[] };

    Required: Yes

    TableGroups

    Styles

    Return Type: { Header: { Rows: CellStyleContent[] }; Footer: { Rows: CellStyleContent[] };}[];

    Required: Yes

    Border

    Return Type: BorderStyle

    Required: Optional

    TableOfContentsStyleContent

    Styles for Table of Contents data region.

    BackgroundColor

    Return Type: string

    Required: Optional

    Border

    Return Type: BorderStyle

    Required: Optional

    Levels

    Required: Yes

    Color

    Return Type: string

    Required: Optional

    PaddingLeft

    Return Type: string

    Required: Optional

    FontFamily

    Return Type: string

    Required: Optional

    FontSize

    Return Type: string

    Required: Optional

    FontStyle

    Return Type: string

    Required: Optional

    FontWeight

    Return Type: string

    Required: Optional

    ChartPaletteContent

    Chart palette.


    Acceptable Values

    Copy Code 
    string[]

    ReportStyles

    Styles for toolbox items or report controls.

    Bullet

    Return Type: ReportItemStyle<BulletStyleContent>

    Required: Yes

    CheckBox

    Return Type: ReportItemStyle<TextBoxStyleContent>

    Required: Yes

    FormattedText

    Return Type: ReportItemStyle<ContainerStyleContent>

    Required: Yes

    InputField

    Return Type: ReportItemStyle<TextBoxStyleContent>

    Required: Yes

    List

    Return Type: ReportItemStyle<ContainerStyleContent>

    Required: Yes

    Rectangle

    Return Type: ReportItemStyle<ContainerStyleContent>

    Required: Yes

    RichText

    Return Type: ReportItemStyle<TextBoxStyleContent>

    Required: Yes

    Shape

    Return Type: ReportItemStyle<ContainerStyleContent>

    Required: Yes

    Sparkline

    Return Type: ReportItemStyle<SparklineStyleContent>

    Required: Yes

    Table

    Return Type: ReportItemStyle<TableStyleContent>

    Required: Yes

    TableOfContents

    Tablix

    Return Type: ReportItemStyle<TableStyleContent>

    Required: Yes

    TextBox

    Return Type: ReportItemStyle<TextBoxStyleContent>

    Required: Yes

    ChartPalette

    Return Type: ReportItemStyle<ChartPaletteContent>

    Required: Yes

    Table

    Return Type: ReportItemStyle<TableStyleContent>

    Required: Yes

    TableOfContents

    Return Type: ReportItemStyle<TableOfContentsStyleContent>

    Required: Yes

    Tablix

    TextBox

    ChartPalette

    ViewerSettings

    Viewer settings.

    element

    Description: Refers to the host element's id where to render the Viewer.

    Return Type: string

    Required: Yes

    applicationTitle

    Description: Refers to the application title passed by the WebDesigner component.

    Return Type: string

    Required: Yes

    documentInfo

    Description: Information on the document to be previewed.

    Required: Yes

    id

    Description: Refers to the document id.

    Return Type: string

    Required: Yes

    content

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

    Return Type: unknown

    Required: Yes

    name

    Description: Refers to the document name.

    Return Type: string

    Required: Yes

    temporary

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

    Return Type: boolean

    Required: Yes

    preferredFormat

    Description: Specifies preferred rendering format for the document.

    Return Type: 'html' | 'svg'

    Required: Yes

    CreateDocumentOptions

    Define what kind of document must be created. 

    name

    Description: Refers to the name of the document. If this property is not specified, the default 'Untitled' name will be used.

    Return Type: string

    Required: Optional

    type

    Description: Refers to the document type to create in the WebDesigner component. If this property is not specified, an RDLX report will be created.

    Return Type: SupportedDocumentType

    Required: Optional

    template

    Description: Refers to the template to use for the document.

    Return Type: DocumentTemplate

    Required: Optional

    dataSetsInfo

    Description: Refers to the list of RDLX Data Sets to use with the template in the WebDesigner component. Note that these datasets won't work with Section Reports (.rpx).

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

    1. where, 
      id refers to the dataset id.
      name refers to the dataset name.

    Required: Optional

    CreateDocumentInfo

    Information about the created document (if it was successfully created). 

    type

    Description: Refers to the document type in the WebDesigner component.

    Return Type: SupportedDocumentType

    Required: Yes

    name

    Description: Refers to the document name in the WebDesigner component.

    Return Type: string

    Required: Yes

    template

    Description: Refers to the document template in the WebDesigner component.

    Return Type: DocumentTemplate

    Required: Optional

    success

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

    Return Type: boolean

    Required: Optional

    CurrentDocumentInfo

    Information about the current document.

    id

    Description: Refers to the document 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 document name in the WebDesigner component.

    Return Type: string

    Required: Yes

    type

    Description: Refers to the document type in the WebDesigner component.

    Return Type: SupportedDocumentType

    Required: Yes

    DocumentTemplate

    Template to use for the document.

    id 

    Description: Refers to the document template id.

    Return Type: string

    Required: Optional

    content

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

    Return Type: unknown

    Required: Optional

    OpenDocumentOptions

    Define options for opening a document.

    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: DocumentTemplate

    Required: Optional

    dataSetsInfo

    Description: Refers to the list of RDLX datasets to use with the template. Note that these datasets won't work with Section Reports (.rpx).

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

    1. where, 
      id refers to the dataset id.
      name refers to the dataset name.

    Required: Optional   

    name

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

    Return Type: string

    Required: Optional

    type

    Description: Refers to the report type. If not specified RDLX report will be created.

    Return Type: SupportedDocumentType

    Required: Optional

    SaveDocumentInfo

    Information about the saving the document.

    type

    Description: Refers to the type of document.

    Return Type: SupportedDocumentType

    Required: Yes

    id

    Description: If an existing document 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 document 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

    OpenDocumentInfo

    Information about an open document.

    type

    Description: Refers to the type of document.

    Return Type: SupportedDocumentType

    Required: Yes

    id

    Description: Refers to the document id.

    Return Type: string

    Required: Yes

    name

    Description: Refers to the document name.

    Return Type: string

    Required: Yes

    success

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

    Return Type: boolean

    Required: Optional

    ReportPartsSettings

    API for settings related to Report Parts.

    enabled

    Description: Specifies whether the report parts should be enabled in the WebDesigner for the end users to be able to use libraries.

    Return Type: SupportedDocumentType

    Required: Optional

    libraries

    Description: List of report items initially available for user libraries.

    Return Type:

    Array<{
              name: string,
              path: string
             }>

    Required: Optional

    See Also

    Samples

    WebDesigner Custom