WebDesigner API

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

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

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

import { arWebDesigner } from './web-designer.js';
arWebDesigner.addLanguage('en', [
             {
                "ns": "app",
                "lng": "en",
                "resources": {
                        "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

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

export const ColorThemes: ColorThemesType

Description: The predefined themes object exported by WebDesigner ESM module.

ColorThemesType

Description: The type of predefined themes object, with keys as theme names.

type ColorThemesType = {
 default: ColorTheme,
 defaultDark: ColorTheme,
 darkOled: ColorTheme,
 highContrast: ColorTheme,
 highContrastDark: ColorTheme
};

Shades

Description: Type Shades definition.

type Shades = {
  veryLight: string;
  light: string;
  lighter: string;
  lightMedium: string;
  medium: string;
  base: string;
  darkMedium: string;
  darker: string;
  dark: string;
  veryDark: string;
};

Color

Description: Type Color definition.

type Color = string | Shades;

ColorTheme

Description: Type ColorTheme definition.

export type ColorTheme = {
  name: string;
  type: 'light' | 'dark';
  backgroundMain: string;
  backgroundPanels: string;
  primary: Color;
  secondary: Color;
  neutral: Color;
  error: Color;
  warning: Color;
  fontFamily: string
};

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

<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

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

GrapeCity.ActiveReports.Designer.addLanguage('en', [
            {
                "ns": "app",
                "lng": "en",
                "resources": {
                        "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

GrapeCity.ActiveReports.Designer.create('#container-1', { settings, instanceId: 'instance-1' });
GrapeCity.ActiveReports.Designer.destroy('#container-1', 'instance-1');

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

»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

ES MODULE

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';
});

UMD MODULE

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';
});

TYPESCRIPT MODULE

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

ES MODULE

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';
});

UMD MODULE

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

TYPESCRIPT MODULE

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

ES MODULE

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';
});

UMD MODULE

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

TYPESCRIPT MODULE

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

ES MODULE

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';
});

UMD MODULE

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';
});

TYPESCRIPT MODULE

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

ES MODULE

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

UMD MODULE

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

TYPESCRIPT MODULE

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 html usage of setting flags and the corresponding action to take.

»canUndo()/undo()

ES MODULE

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

UMD MODULE

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

TYPESCRIPT MODULE

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

»canRedo()/redo()

ES MODULE

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

UMD MODULE

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

TYPESCRIPT MODULE

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

»canCut()/cut()

ES MODULE

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

UMD MODULE

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

TYPESCRIPT MODULE

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

»canCopy()/copy()

ES MODULE

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

UMD MODULE

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

TYPESCRIPT MODULE

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

»canPaste()/paste()

ES MODULE

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

UMD MODULE

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

TYPESCRIPT MODULE

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

»canDelete()/delete()

ES MODULE

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

UMD MODULE

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

TYPESCRIPT MODULE

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.

sidebar

Description: Sidebar API.

»open()

Parameter Type:

id: string

Return Type: void

»close

Return Type: void

ES MODULE

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

UMD MODULE

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

TYPESCRIPT MODULE

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

ES MODULE

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.');

UMD MODULE

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

TYPESCRIPT MODULE

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

ES MODULE

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

UMD MODULE

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

TYPESCRIPT MODULE

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

ES MODULE

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.`);

UMD MODULE

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

TYPESCRIPT MODULE

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

options (optional): CreateDocumentOptions

Return Type: Promise<CreateDocumentInfo>

Required: Yes

ES MODULE

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.'); });

UMD MODULE

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

TYPESCRIPT MODULE

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

ES MODULE

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

UMD MODULE

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

TYPESCRIPT MODULE

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

ES MODULE

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.');
});

UMD MODULE

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.');
});

TYPESCRIPT MODULE

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

ES MODULE

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

UMD MODULE

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

TYPESCRIPT MODULE

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

ES MODULE

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

UMD MODULE

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

TYPESCRIPT MODULE

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

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

Return Type: Promise<SaveDocumentInfo>

Required: Yes

ES MODULE

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

UMD MODULE

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

TYPESCRIPT MODULE

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

ES MODULE

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

UMD MODULE

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

TYPESCRIPT MODULE

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

onBeforeClose()

Description: An async handler, cancels saving unsaved changes if returned true.

Return Type: Promise<boolean>

Required: Yes

ES MODULE

import { arWebDesigner } from './web-designer.js';
	  arWebDesigner.create('#ar-web-designer', {
	   documents: {
	       handlers: {
	           onBeforeClose(options) {
	               return new Promise((resolve, _) => {
	                   if (!options.hasUnsavedChanges) return resolve(true);
	                   if (options.isNew) return resolve(false);
	                   arWebDesigner.apiOf('ar-web-designer').documents.save();
	                   return resolve(true);
	               });
	            }
	         }
	   }
	  });

UMD MODULE

GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
	   documents: {
	       handlers: {
	           onBeforeClose(options) {
	               return new Promise((resolve, _) => {
	                   if (!options.hasUnsavedChanges) return resolve(true);
	                   if (options.isNew) return resolve(false);
	                   GrapeCity.ActiveReports.Designer.apiOf('ar-web-designer').documents.save();
	                   return resolve(true);
	               });
	            }
	         }
	   }
	  });

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.

RdlxFplReportDocumentType | RdlxMslReportDocumentType | RdlxMslDashboardDocumentType | RdlxMasterMultiReportDocumentType;

SupportedDocumentType

Type of documents supported by the WebDesigner component.

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

level refers to notification level. It determines the color and icons used for the notifications.
caption refers to notification caption. It is displayed when the notification pops up by default, then used as a title in Notification Details view.
content refers to notification content. It is only visible when the Notification Details are open.

Return Type: void

Required: Yes

ES MODULE

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

UMD MODULE

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

TYPESCRIPT MODULE

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

ES MODULE

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

UMD MODULE

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

TYPESCRIPT MODULE

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

ES MODULE

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

UMD MODULE

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

TYPESCRIPT MODULE

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

ES MODULE

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

UMD MODULE

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

TYPESCRIPT MODULE

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

ES MODULE

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

UMD MODULE

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

TYPESCRIPT MODULE

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

Locale

Locale object from date-fns.

code

Return Type: string

Required: Yes

formatDistance

Return Type: any

Required: Yes

formatRelative

Return Type: any

Required: Yes

localize

Return Type: any

Required: Yes

formatLong

Return Type: any

Required: Yes

match

Return Type: any

Required: Yes

options

Return Type: any

Required: Optional

MenuCssIcon

type

Return Type: css

Required: Yes

class

Return Type: string

Required: Yes

MenuIcon

Menu Icon of the WebDesigner component.

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

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

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

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

initialTheme

Description: The initial theme to be applied.

Return Type: string

themeSelector

enabled

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

Return Type: boolean

availableThemes

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. These themes can be either built-in themes or custom ones. The default theme can be set from any of these: default, defaultDark, darkOled, highContrast, highContrastDark.

Return Type: (string | ColorTheme)[];

ES MODULE

//using custom theme
arWebDesigner.create('#ar-web-designer', {
    themes: {
        initialTheme: 'testTheme',
        themeSelector: {
            enabled: false,
            availableThemes: ['Default', theme]
        }
    },
});
//using built-in themes
arWebDesigner.create('#ar-web-designer', {
    themes: {
      initialTheme: 'defaultDark',
      themeSelector: { enabled: false } 
    },
});

UMD MODULE

//using custom theme
GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    themes: {
        initialTheme: 'testTheme',
        themeSelector: {
            enabled: false,
            availableThemes: ['Default', theme]
        }
    }
});
//using built-in themes
GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    themes: {
        initialTheme: 'defaultDark',
        themeSelector: { enabled: false }
    },
});

TYPESCRIPT MODULE

//using custom theme
GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    themes: {
        initialTheme: 'testTheme',
        themeSelector: {
            enabled: false,
            availableThemes: ['Default', theme]
        }
    }
});
//using built-in themes
GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    themes: {
        initialTheme: 'defaultDark',
        themeSelector: { 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

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

dateTimeLocale

Description: Specifies the additional locale object from 'date-fns'. Pass it, if you use other locale except en, fr, ja, ko, pl, zhCN, and zhTW.

Return Type: Locale

Required: Optional

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

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

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

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

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

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

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

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

ES MODULE

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

UMD MODULE

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

TYPESCRIPT MODULE

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

ES MODULE

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

UMD MODULE

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

TYPESCRIPT MODULE

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

ES MODULE

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

UMD MODULE

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

TYPESCRIPT MODULE

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

ES MODULE

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

UMD MODULE

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

TYPESCRIPT MODULE

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

ES MODULE

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

UMD MODULE

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

TYPESCRIPT MODULE

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

ES MODULE

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

UMD MODULE

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

TYPESCRIPT MODULE

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

ES MODULE

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

UMD MODULE

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

TYPESCRIPT MODULE

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

ES MODULE

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

UMD MODULE

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

TYPESCRIPT MODULE

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

ES MODULE

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

UMD MODULE

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

TYPESCRIPT MODULE

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

ES MODULE

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

UMD MODULE

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

TYPESCRIPT MODULE

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

ES MODULE

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

UMD MODULE

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

TYPESCRIPT MODULE

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

ES MODULE

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

UMD MODULE

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

TYPESCRIPT MODULE

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

ES MODULE

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

UMD MODULE

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

TYPESCRIPT MODULE

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

ES MODULE

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

UMD MODULE

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

TYPESCRIPT MODULE

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

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

ES MODULE

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

UMD MODULE

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

TYPESCRIPT MODULE

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

ES MODULE

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

UMD MODULE

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

TYPESCRIPT MODULE

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

ES MODULE

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

UMD MODULE

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

TYPESCRIPT MODULE

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

ES MODULE

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

UMD MODULE

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

TYPESCRIPT MODULE

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

ES MODULE

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

UMD MODULE

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

TYPESCRIPT MODULE

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

ES MODULE

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

UMD MODULE

GrapeCity.ActiveReports.Designer.create('#ar-web-designer

WebDesigner API

export const arWebDesigner

create()

apiof()

addLanguage()

destroy()

export const ColorThemes: ColorThemesType

ColorThemesType

Shades

Color

ColorTheme

GlobalDesignerAPI

create()

apiof()

addLanguage()

destroy()

ResourceBundle

lng

ns

resources

DesignerAPI

app

»help

general

transformation

»applicationTitle

»applicationTitleCompact

»applicationVersion

»coreVersion

focus()

editor()

»canUndo()/undo()

»canRedo()/redo()

»canCut()/cut()

»canCopy()/copy()

»canPaste()/paste()

»canDelete()/delete()

panels

menu

»open()

»pin

»close

sidebar

»open()

»close

documents

notifications

DocumentsAPI

hasUnsavedChanges()

isNew()

info()

create()

open()

openById()

save()

saveAs()

saveById()

saveByName()

onBeforeClose()

RpxReportDocumentType

RdlxFplReportDocumentType

RdlxMslReportDocumentType

RdlxMslDashboardDocumentType

RdlxMasterMultiReportDocumentType

RdlxReportDocumentType

SupportedDocumentType

NotificationsAPI

send()

info()

error()

warning()

dismissAll()

Font

label

value

FontHeader

header

Locale

code

formatDistance