# WebDesigner API

ActiveReports offers a powerful API for integrating the web designer component into your web application. Explore how to embed the WebDesigner component with ease.

## Content

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](/activereportsnet/docs/v20.1/developers/create-applications/web-designer-application/web-designer-api#designersettings)
**Return Type**: Promise<[DesignerAPI](/activereportsnet/docs/v20.1/developers/create-applications/web-designer-application/web-designer-api#designerapi)>
**Required**: Yes

```html
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](/activereportsnet/docs/v20.1/developers/create-applications/web-designer-application/web-designer-api#designerapi)
**Required**: Yes

```html
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

```html
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](/activereportsnet/docs/v20.1/developers/create-applications/web-designer-application/web-designer-api#instanceid))
**Return Type**: void
**Required**: Yes

```html
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.

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

## Shades

**Description**: Type Shades definition.

```auto
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.

```auto
type Color = string | Shades;
```

## ColorTheme

**Description**: Type ColorTheme definition.

```auto
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](/activereportsnet/docs/v20.1/developers/create-applications/web-designer-application/web-designer-api#designersettings)
**Return Type**: Promise<[DesignerAPI](/activereportsnet/docs/v20.1/developers/create-applications/web-designer-application/web-designer-api#designerapi)>
**Required**: Yes

```html
<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](/activereportsnet/docs/v20.1/developers/create-applications/web-designer-application/web-designer-api#designerapi) \| undefined
**Required**: Yes

```html
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

```html
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](/activereportsnet/docs/v20.1/developers/create-applications/web-designer-application/web-designer-api#instanceid))
**Return Type**: void
**Required**: Yes

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

```html
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](/activereportsnet/docs/v20.1/developers/create-applications/web-designer-application/web-designer-api#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**

```javascript
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**

```javascript
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**

```javascript
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**

```javascript
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**

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

**TYPESCRIPT MODULE**

```javascript
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**

```javascript
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**

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

**TYPESCRIPT MODULE**

```javascript
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**

```javascript
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**

```javascript
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**

```javascript
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**

```javascript
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**

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

**TYPESCRIPT MODULE**

```javascript
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**

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

**UMD MODULE**

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

**TYPESCRIPT MODULE**

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

#### »canRedo()/redo()

**ES MODULE**

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

**UMD MODULE**

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

**TYPESCRIPT MODULE**

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

#### »canCut()/cut()

**ES MODULE**

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

**UMD MODULE**

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

**TYPESCRIPT MODULE**

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

#### »canCopy()/copy()

**ES MODULE**

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

**UMD MODULE**

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

**TYPESCRIPT MODULE**

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

#### »canPaste()/paste()

**ES MODULE**

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

**UMD MODULE**

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

**TYPESCRIPT MODULE**

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

#### »canDelete()/delete()

**ES MODULE**

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

**UMD MODULE**

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

**TYPESCRIPT MODULE**

```javascript
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
**ES MODULE**

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

**UMD MODULE**

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

**TYPESCRIPT MODULE**

```javascript
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
**ES MODULE**

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

**UMD MODULE**

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

**TYPESCRIPT MODULE**

```javascript
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](/activereportsnet/docs/v20.1/developers/create-applications/web-designer-application/web-designer-api#documentsapi)
**Required**: Yes

### notifications

**Description**: Allows to utilize the built-in notifications system in the WebDesigner component.
**Return Type**: [NotificationsAPI](/activereportsnet/docs/v20.1/developers/create-applications/web-designer-application/web-designer-api#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**

```javascript
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**

```javascript
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**

```javascript
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**

```javascript
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**

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

**TYPESCRIPT MODULE**

```javascript
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](/activereportsnet/docs/v20.1/developers/create-applications/web-designer-application/web-designer-api#currentdocumentinfo)
**Required**: Yes
**ES MODULE**

```javascript
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**

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

**TYPESCRIPT MODULE**

```javascript
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](/activereportsnet/docs/v20.1/developers/create-applications/web-designer-application/web-designer-api#createdocumentoptions)
**Return Type**: Promise<[CreateDocumentInfo](/activereportsnet/docs/v20.1/developers/create-applications/web-designer-application/web-designer-api#createdocumentinfo)>
**Required**: Yes
**ES MODULE**

```javascript
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**

```javascript
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**

```javascript
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**

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

**UMD MODULE**

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

**TYPESCRIPT MODULE**

```javascript
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](/activereportsnet/docs/v20.1/developers/create-applications/web-designer-application/web-designer-api#supporteddocumenttype)
name (optional): string
content (optional): any
**Return Type**: Promise<[OpenDocumentInfo](/activereportsnet/docs/v20.1/developers/create-applications/web-designer-application/web-designer-api#opendocumentinfo)>
**Required**: Yes
**ES MODULE**

```javascript
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**

```javascript
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**

```javascript
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**

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

**UMD MODULE**

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

**TYPESCRIPT MODULE**

```javascript
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**

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

**UMD MODULE**

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

**TYPESCRIPT MODULE**

```javascript
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](/activereportsnet/docs/v20.1/developers/create-applications/web-designer-application/web-designer-api#savedocumentinfo)>
**Required**: Yes
**ES MODULE**

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

**UMD MODULE**

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

**TYPESCRIPT MODULE**

```javascript
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](/activereportsnet/docs/v20.1/developers/create-applications/web-designer-application/web-designer-api#savedocumentinfo)>
**Required**: Yes
**ES MODULE**

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

**UMD MODULE**

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

**TYPESCRIPT MODULE**

```javascript
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**

```javascript
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**

```javascript
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.

```plaintext
RdlxFplReportDocumentType | RdlxMslReportDocumentType | RdlxMslDashboardDocumentType | RdlxMasterMultiReportDocumentType;
```

## SupportedDocumentType

Type of documents supported by the WebDesigner component.

```plaintext
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
**ES MODULE**

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

**UMD MODULE**

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

**TYPESCRIPT MODULE**

```javascript
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**

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

**UMD MODULE**

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

**TYPESCRIPT MODULE**

```javascript
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**

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

**UMD MODULE**

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

**TYPESCRIPT MODULE**

```javascript
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**

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

**UMD MODULE**

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

**TYPESCRIPT MODULE**

```javascript
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**

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

**UMD MODULE**

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

**TYPESCRIPT MODULE**

```javascript
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.

```plaintext
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

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

```html
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](/activereportsnet/docs/v20.1/developers/create-applications/web-designer-application/web-designer-api#font) \| [FontHeader](/activereportsnet/docs/v20.1/developers/create-applications/web-designer-application/web-designer-api#fontheader))[]
**Required**: Yes

```html
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**

```javascript
//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**

```javascript
//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**

```javascript
//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](https://learn.microsoft.com/en-us/dotnet/standard/base-types/custom-date-and-time-format-strings) for more information on custom date and time format strings.
**Return Type**: string[]
**Required**: Yes

```html
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](/activereportsnet/docs/v20.1/developers/create-applications/web-designer-application/web-designer-api#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

```html
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

```html
const designer = GrapeCity.ActiveReports.Designer.apiOf('ar-web-designer');
designer.lockLayout = 'true';
```

### document

**Return Type**: { id: string; type: [SupportedDocumentType](/activereportsnet/docs/v20.1/developers/create-applications/web-designer-application/web-designer-api#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

```html
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

```html
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

```html
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

```html
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

```html
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**

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

**UMD MODULE**

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

**TYPESCRIPT MODULE**

```javascript
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**

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

**UMD MODULE**

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

**TYPESCRIPT MODULE**

```javascript
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**

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

**UMD MODULE**

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

**TYPESCRIPT MODULE**

```javascript
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**

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

**UMD MODULE**

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

**TYPESCRIPT MODULE**

```javascript
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**

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

**UMD MODULE**

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

**TYPESCRIPT MODULE**

```javascript
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**

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

**UMD MODULE**

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

**TYPESCRIPT MODULE**

```javascript
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**

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

**UMD MODULE**

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

**TYPESCRIPT MODULE**

```javascript
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**

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

**UMD MODULE**

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

**TYPESCRIPT MODULE**

```javascript
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**

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

**UMD MODULE**

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

**TYPESCRIPT MODULE**

```javascript
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**

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

**UMD MODULE**

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

**TYPESCRIPT MODULE**

```javascript
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**

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

**UMD MODULE**

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

**TYPESCRIPT MODULE**

```javascript
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**

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

**UMD MODULE**

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

**TYPESCRIPT MODULE**

```javascript
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**

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

**UMD MODULE**

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

**TYPESCRIPT MODULE**

```javascript
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**

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

**UMD MODULE**

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

**TYPESCRIPT MODULE**

```javascript
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
**ES MODULE**

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

**UMD MODULE**

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

**TYPESCRIPT MODULE**

```javascript
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**

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

**UMD MODULE**

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

**TYPESCRIPT MODULE**

```javascript
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](/activereportsnet/docs/v20.1/developers/create-applications/web-designer-application/web-designer-api#menuicon)
**ES MODULE**

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

**UMD MODULE**

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

**TYPESCRIPT MODULE**

```javascript
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**

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

**UMD MODULE**

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

**TYPESCRIPT MODULE**

```javascript
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**

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

**UMD MODULE**

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

**TYPESCRIPT MODULE**

```javascript
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**

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

**UMD MODULE**

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