# Blazor WebDesigner API

Explore our comprehensive API that facilitates the integration of web designer component into your Blazor web application.

## Content

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

## GlobalDesignerAPI

Type of **GrapeCity.ActiveReports.Blazor.Designer.ReportDesigner** object exported by the [GrapeCity.ActiveReports.Blazor.Designer](/activereportsnet/api/v19.2/MESCIUS.ActiveReports.Blazor.Designer/GrapeCity.ActiveReports.Blazor.Designer.html) library.

### ReportDesigner

Renders the **ReportDesigner** component to the **\<div>** element. Use the following example for "\***.razor**" pages.

**Parameter (Type)**:

**PreviewSettings**: [PreviewSettings](/activereportsnet/docs/v19.2/developers/create-applications/blazor-web-designer-application/web-designer-api-blazor#previewsettings)

**Return**: Renders the **ReportDesigner** component for the user interface.

```html
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = false
        };
    }
}
```

### AppBarSettings

Gets or sets the settings for the application bar component.

**Parameter (Type)**:

**AppBarSettings**: AppBarSettings

* **OpenButton**: OpenButton
<br>
    Description: Gets or sets the **OpenButton** button settings.
    Return: Returns the **OpenButton** object representing the Open button settings.
* **AboutButton**: AboutButton
<br>
    Description: Gets or sets the **AboutButton** button settings.
    Return: Returns the **AboutButton** object representing the About button settings.
* **ContextActionsTab**: ContextActionsTab
<br>
    Description: Gets or sets the Context Actions tab settings.
    Return: Returns the **ContextActionsTab** object representing the Context Actions tab settings.
* **HomeTab**: HomeTab
<br>
    Description: Gets or sets the Home tab settings.
    Return: Returns the **HomeTab** object representing the Home tab settings.
* **InsertTab**: InsertTab
<br>
    Description: Gets or sets the Insert tab settings.
    Return: Returns the **InsertTab** object representing the Insert tab settings.
* **ParametersTab**: ParametersTab
<br>
    Description: Gets or sets the Parameters tab settings.
    Return: Returns the **ParametersTab** object representing the Parameters tab settings.
* **SaveAsButton**: SaveAsButton
<br>
    Description: Gets or sets the SaveAs button settings.
    Return: Returns the **SaveAsButton** object representing the SaveAs button settings.
* **SaveButton**: SaveButton
<br>
    Description: Gets or sets the Save button settings.
    Return: Returns the **SaveButton** object representing the Save button settings.
* **ScriptTab**: ScriptTab
<br>
    Description: Gets or sets the Script tab settings.
    Return: Returns the **ScriptTab** object representing the Script tab settings.
* **Visible**: bool?
<br>
    Description: Gets or sets whether to show the Application bar.
    Return: Returns a value representing whether the application bar should be displayed.

**Return**: Returns an **AppBarSettings** object containing the settings for the Application bar.

```html
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner AppBarSettings="@_appBar" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    private AppBarSettings _appBar = new AppBarSettings
    {
        OpenButton = new OpenButton { Visible = true },
        AboutButton = new AboutButton { Visible = false },
        ContextActionsTab = new ContextActionsTab { Visible = true },
        HomeTab = new HomeTab { Visible = true },
        InsertTab = new InsertTab { Visible = false },
        ParametersTab = new ParametersTab { Visible = true },
        SaveAsButton = new SaveAsButton { Visible = false },
        SaveButton = new SaveButton { Visible = false },
        ScriptTab = new ScriptTab { Visible = false },
        Visible = false
    };
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = false
        };
    }
}
```

### App

Gets the application API.

**Parameter (Type)**:

**App**: GrapeCity.ActiveReports.Blazor.Designer.App

> * **Panels**: Panels
<br>
>     Description: Contains access to the Menu and Sidebar panels.
>     Return: Returns the **Panels** object representing the menu and sidebar panels.
> * **Focus()**: Task
<br>
>     Description: Returns focus to the Designer. Focus may be lost when plug-in components are opened/closed. Returning focus is essential to continue using Designer hotkeys like Ctrl+Z (undo), Ctrl+Y (redo), etc.
>     Return: The **Task** object represents an asynchronous operation.
> * **GetAbout()**: ValueTask\<About>
<br>
>     Description: Returns documentation links and application information.
>     Return: The **ValueTask\<About>** object representing references to documentation and information about the application.

**Return**: Returns the application **API**.

```html
@page "/"
@inject IJSRuntime JSRuntime 
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner @ref="_designer" PreviewSettings="@_preview" />
</div>
@code {
    private ReportDesigner _designer;
    private PreviewSettings _preview;
    private ReportViewer _viewer;
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = true,
            OpenViewer = OpenViewer
        };
    }
    private async void OpenViewer(ViewerSettings settings)
    {
        if (_viewer != null)
        {
            await _viewer.OpenReport(settings.DocumentInfo.Id);
            return;
        }
        _viewer = new ReportViewer();
        GrapeCity.ActiveReports.Blazor.Designer.App api = _designer.App;
        var initOptions = new InitializationOptions();
        initOptions.ReportID = settings.DocumentInfo.Id;
        initOptions.PanelsLocation = PanelsLocation.toolbar;
        initOptions.ReportLoaded = (reportInfo) => { };
        await _viewer.Render(JSRuntime, settings.Element, initOptions);
    }
}
```

### DataSettings

Sets the data settings for the report designer component.

**Parameter (Type)**:

**DataSettings**: DataSettings

* **CommonValues**: CommonValues
<br>
    Description: Gets or sets the Common Values' section settings.
    Return: Returns the Common Values' section settings.
* **DataSets**: DataSets
<br>
    Description: Gets or sets the Data Sets' section settings.
    Return: Returns the Data Sets' section settings.
* **DataSources**: DataSources
<br>
    Description: Gets or sets the Data Sources' section settings.
    Return: Returns the Data Sources' section settings.
* **DataTab**: DataTab
<br>
    Description: Gets or sets the Data Tab's section settings.
    Return: Returns the Data Tab's section settings.
* **Parameters**: Parameters
<br>
    Description: Gets or sets the Parameters' section settings.
    Return: Returns the Parameters' section settings.

**Return**: Returns a **DataSettings** object containing the settings for the data.

```html
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner DataSettings="@_dataSettings" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    private DataSettings _dataSettings = new DataSettings
    {
        DataSets = new DataSets { CanModify = true },
        DataSources = new DataSources { CanModify = true },
        DataSources = new DataSources { CanModify = true, 
             Shared = new SharedDataSourceOptions()
             {
                Enabled = true
             }
        },
        DataTab = new DataTab { Visible = true },
        Parameters = new Parameters() { CanModify = true },
        CommonValues = new CommonValues() { Visible = false }
    };
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = false
        };
    }
}
```

### DesignerInitialized

Gets or sets the callback that is invoked when a Designer is initialized.

**Parameter (Type)**:

**DesignerInitialized**: Action

**Return**: Returns an **Action** object containing the action that is called after the initialization of the designer.

```html
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner DesignerInitialized="@DesignerInitializedCallback" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    private void DesignerInitializedCallback() { }
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = false
        };
    }
}
```

### DisableFocusTimer

Disables the focus timer. By default, focused elements (like buttons) are highlighted only for a short period of time after the Tab key is pressed. This setting makes focused elements permanently highlighted.

**Parameter (Type)**:

**DisableFocusTimer**: Boolean

**Return**: Returns the current state of an item's focus.

```html
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner DisableFocusTimer="true" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = false
        };
    }
}
```

### DisableSystemClipboard

Disables the usage of the system clipboard.

**Parameter (Type)**:

**DisableSystemClipboard**: Boolean

**Return**: Returns the current state of disabling the use of the system clipboard.

```html
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner DisableSystemClipboard="true" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = false
        };
    }
}
```

### Document

Opens the specified document.

**Parameter (Type)**:

**Document**: Document

* **Type**: SupportedDocumentType
<br>
    Description: Gets or sets the supported report type. The available values are SupportedDocumentType.fpl, SupportedDocumentType.rpx, SupportedDocumentType.dashboard, SupportedDocumentType.msl, and SupportedDocumentType.cpl.
    Return: Returns the supported report type.
* **Id**: String
<br>
    Description: Gets or sets the report identifier.
    Return: Returns the report identifier.

**Return**: Returns the specified document.

```html
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner Document="@_doc" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    private Document _doc = new Document()
    {
        Type = SupportedDocumentType.cpl,
        Id = "Example.rdlx"
    };
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = false
        };
    }
}
```

### Documents

Gets the document API.

**Parameter (Type)**:

**Documents**: Documents

* **Create(CreateDocumentOptions** options\*\*)\*\*: ValueTask\<CreateDocumentInfo>
<br>
    Description: Creates a new report to be edited in a designer using the specified **CreateReportOptions** object.
    Return: Returns the **ValueTask\<CreateDocumentInfo>** object representing the information about the created document.
* **HasUnsavedChanges()**: ValueTask\<bool>
<br>
    Description: Indicates whether the report has unsaved changes.
    Return: Returns the **ValueTask\<bool>** representing the presence of unsaved changes.
* **Info()**: ValueTask\<CurrentDocumentInfo>
<br>
    Description: Returns information about the currently edited report.
    Return: Returns the **ValueTask\<CurrentDocumentInfo>** object representing the document information.
* **IsNew()**: ValueTask\<bool>
<br>
    Description: Indicates whether report was saved before at least once.
    Return: Returns the **ValueTask\<bool>** object representing whether the report was saved at least once.
* **Open()**: Task
<br>
    Description: Shows open report dialog.
    Return: The **Task** object represents an asynchronous operation.
* **OpenById**(**string** id, **SupportedDocumentType** type, **string** name = null, **string** content = null): **ValueTask\<OpenDocumentInfo>**
<br>
    Description: Opens an existing report to be edited in the Designer with the specified id. Optionally, you can pass the name and the content, else, the report is loaded from the server.
    Return: The \*\*ValueTask\<OpenDocumentInfo>\*\*object representing information about the opened document.
* **Save()**: Task
<br>
    Description: Saves the report currently edited in Designer. If the report is new, then the "Save As" dialog is opened.
    Return: The **Task** object representing an asynchronous operation.
* **SaveAs()**: Task
<br>
    Description: Opens 'Save As' dialog.
    Return: The **Task** object represents an asynchronous operation.
* **SaveById**(**string** id\*\*, string\*\* name = null) : ValueTask\<SaveDocumentInfo>
<br>
    Description: Saves the report currently edited in Designer using the specified **id**.
    Return: The **ValueTask\<SaveDocumentInfo>** object representing a saved document information.
* **SaveByName**(**string** name): ValueTask\<SaveDocumentInfo>
<br>
    Description: Saves the report currently edited in Designer using the specified **name**.
    Return: The **ValueTask\<SaveDocumentInfo>** object representing a saved document information.

**Return**: Returns the document **API**.

```html
@page "/"
@inject IJSRuntime JSRuntime 
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner @ref="_designer" Document="@_doc" PreviewSettings="@_preview" />
</div>
@code {
    private ReportDesigner _designer;
    private PreviewSettings _preview;
    private ReportViewer _viewer;
    private Document _doc = new Document
    {
        Id = "Example.rdlx",
        Type = SupportedDocumentType.cpl
    };
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = true,
            OpenViewer = OpenViewer
        };
    }
    private async void OpenViewer(ViewerSettings settings)
    {
        if(_viewer != null)
        {
            await _viewer.OpenReport(settings.DocumentInfo.Id);
            return;
        }
        Documents api = _designer.Documents;
        _viewer = new ReportViewer();
        var initOptions = new InitializationOptions();
        initOptions.ReportID = settings.DocumentInfo.Id;
        initOptions.PanelsLocation = PanelsLocation.toolbar;
        initOptions.ReportLoaded = (reportInfo) => { };
        await _viewer.Render(JSRuntime, settings.Element, initOptions);
    }
}
```

### DocumentsSettings

Gets or sets the API settings for documents.

**Parameter (Type)**:

**DocumentsSettings**: DocumentsSettings

* **FileView**: FileView
<br>
    Description: Gets or sets the file view settings.
    Return: Returns the current value of the file view settings.
* **Handlers**: Handlers
<br>
    Description: Gets or sets the handlers.
    Return: Returns the current value of the handlers.
    * **OnDocumentChanged**: A handler that is triggered when report content is changed.
        This function takes an object as an argument that contains two properties:
        * **document**: The document property contains the updated version of the document that was changed
        * **hasUnsavedChanges**: The hasUnsavedChanges is a boolean value that indicates whether there are any unsaved changes in the document.

**Return**: Returns the specified settings for documents **API**.

```html
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner DocumentsSettings="@_documentsSettings" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    private DocumentsSettings _documentsSettings = new DocumentsSettings
    {
        FileView = new FileView { Visible = true },
        Handlers = new Handlers()
    };
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = false
        };
    }
}
```

```html
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner DocumentsSettings="_documentsSettings"/>
</div>
@code {
    private DocumentsSettings _documentsSettings;
    public Index()
    {
        _documentsSettings = new DocumentsSettings()
        {
            Handlers = new Handlers()
            {
                OnDocumentChanged = (options) =>
                {
                    ...
                }
            }
        };
    }
}
```

### EditorSettings

Gets or sets the editor settings.

**Parameter (Type)**:

**EditorSettings**: EditorSettings

* **ShowGrid**: bool?
<br>
    Description: Specifies if the Grid must be shown or hidden by default.
    Return: Returns the current value of the grid display.
* **SnapToGrid**: bool?
<br>
    Description: Specifies the default value for the snapToGrid option.
    Return: Returns the current snapToGrid option value.
* **SnapToGuides**: bool?
<br>
    Description: Specifies the default value for the snapToGuides option.
    Return: Returns the current snapToGuides option value.
* **GridSize**: String
<br>
    Description: Specifies the default Grid Size. If units = 'cm', value = 0.5cm by default. Else, value = 0.25in by default.
    Return: Returns the current Grid Size.
* **Rulers**: Rulers
<br>
    Description: Gets or sets the Ruler's settings.
    Return: Returns the current Ruler's settings.

**Return**: Returns the set editor settings.

```html
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner EditorSettings="@_editorSettings" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    private EditorSettings _editorSettings = new EditorSettings
    {
        ShowGrid = true,
        SnapToGrid = true,
        SnapToGuides = true,
        Rulers = new Rulers(),
        GridSize = "0.5cm"
    };
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = false
        };
    }
}
```

### Fonts

Gets or sets the list of allowed fonts for controls.

**Parameter (Type)**:

**Fonts**: Object[]

**Return**: Returns the set list of allowed fonts for controls.

```html
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner Fonts="@_fonts" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    private string[] _fonts = new string[1] { "Arial" };
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = false
        };
    }
}
```

### Height

Gets or sets the height of the designer.

**Parameter (Type)**:

**Height**: String

**Return**: Returns the height of the designer.

```html
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner Height="20%" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = false
        };
    }
}
```

### ImageMimeTypes

Gets or sets the list of allowed image mime types for controls.

**Parameter (Type)**:

**ImageMimeTypes**: String[]

**Return**: Returns the set list of allowed image mime types for controls.

```html
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner ImageMimeTypes="@_imageMimeTypes" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    private string[] _imageMimeTypes = new string[3] { "image/gif", "image/jpeg", "image/png" };
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = false
        };
    }
}
```

### Language

Gets or sets the language of the report designer. Use 'en-US' (for English), 'ja-JP' (for Japanese), and 'zh-CN' (for simplified Chinese).

**Parameter (Type)**:

**Language**: String

**Return**: Returns the specified language.

```html
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner Language="ja-JP" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = false
        };
    }
}
```

### LocalizationResources

Gets or sets a custom resource localization.

**Parameter (Type)**:

**LocalizationResources**: LocalizationResources[]

* **Language**: String
<br>
    Description: Gets or sets the Language.
    Return: Returns the specified language.
* **Resources**: String
<br>
    Description: Gets or sets the localization resources in json array.
    Return: Returns the specified localization resources represented in the json array.

**Return**: Returns an array of custom localization resources.

```html
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner LocalizationResources="@_localizationResources" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    private LocalizationResources[] _localizationResources =
    {
        new LocalizationResources()
        {
            Language = "en",
            Resources = "[ { \"ns\": \"common\", \"lng\": \"en\", \"resources\": { \"units\": { \"cm\": { \"textShortName\": \"CustomName_cm\", \"textFullName\": \"CustomName_Centimeters\" } } } } ]"
        }
    };
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = false
        };
    }
}
```

### LockLayout

Manages the interaction with the Layout. When LockLayout is enabled, it is only possible to modify the properties of existing report items, i.e., operations such as adding a new report item or deleting an existing one, and modifying the report layout structure is not possible.

**Parameter (Type)**:

**LockLayout**: Boolean

**Return**: Returns the current state of the lock layout.

```html
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner LockLayout="true" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = false
        };
    }
}
```

### MenuSettings

Get or sets the menu settings.

**Parameter (Type)**:

**MenuSettings**: MenuSettings

* **DocumentExplorer**: DocumentExplorer
<br>
    Description: Document/Report Explorer settings.
    Return: Returns an object representing the Document/Report Explorer settings.
* **GroupEditor**: GroupEditor
<br>
    Description: Group Editor settings.
    Return: Returns an object representing the Group Editor settings.
* **LayerEditor**: LayerEditor
<br>
    Description: Layer Editor settings.
    Return: Returns an object representing the Layer Editor settings.
* **Logo**: Logo
<br>
    Description: Logo settings.
    Return: Returns an object representing the Logo settings.
* **ToolBox**: ToolBox
<br>
    Description: ToolBox settings.
    Return: Returns an object representing the ToolBox settings.
* **Visible**: bool?
<br>
    Description: Specifies whether Main Menu needs to be shown.
    Return: Returns a value representing the current visibility state.

**Return**: Returns the current settings of the menu.

```html
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner MenuSettings="@_menuSettings" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    private MenuSettings _menuSettings = new MenuSettings
    {
        DocumentExplorer = new DocumentExplorer { Visible = true },
        GroupEditor = new GroupEditor { Visible = true },
        LayerEditor = new LayerEditor { Visible = true },
        Logo = new Logo { Visible = true },
        ToolBox = new ToolBox { Visible = true },
        Visible = true
    };
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = false
        };
    }
}
```

### Notifications

Gets the notifications API.

**Parameter (Type)**:

**Notifications**: Notifications

* **Send()**: Task
<br>
    Description: Sends a notification of specified level, caption, and content.
    Return: The **Task** object representing an asynchronous operation.
* **Warning()**: Task
<br>
    Description: Sends a warning notification.
    Return: The **Task** object representing an asynchronous operation.
* **Info()**: Task
<br>
    Description: Sends a general notification. It can be used to notify when any user-initiated action is completed.
    Return: The **Task** object representing an asynchronous operation.
* **Error()**: Task
<br>
    Description: Sends an error notification.
    Return: The **Task** object representing an asynchronous operation.
* **DismissAll()**: Task
<br>
    Description: Dismisses all notifications.
    Return: The **Task** object representing an asynchronous operation.

**Return**: Returns the notifications **API**.

```html
@page "/"
@inject IJSRuntime JSRuntime 
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner @ref="_designer" PreviewSettings="@_preview" />
</div>
@code {
    private ReportDesigner _designer;
    private PreviewSettings _preview;
    private ReportViewer _viewer;
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = true,
            OpenViewer = OpenViewer
        };
    }
    private async void OpenViewer(ViewerSettings settings)
    {
        if (_viewer != null)
        {
            await _viewer.OpenReport(settings.DocumentInfo.Id);
            return;
        }
        Notifications api = _designer.Notifications;
        _viewer = new ReportViewer();
        var initOptions = new InitializationOptions();
        initOptions.ReportID = settings.DocumentInfo.Id;
        initOptions.PanelsLocation = PanelsLocation.toolbar;
        initOptions.ReportLoaded = (reportInfo) => { };
        await _viewer.Render(JSRuntime, settings.Element, initOptions);
    }
}
```

### PreviewSettings

Gets or sets the preview settings.

**Parameter (Type)**:

**PreviewSettings**: PreviewSettings

* **CanPreview()**: Boolean
<br>
    Description: Sets or gets whether to show the **Preview** button.
* **OpenViewer()**: Action\<ViewerSettings>
<br>
    Description: You can plug-in **Viewer component** by providing OpenViewer function.

**Return**: Returns the preview settings.

```html
@page "/"
@inject IJSRuntime JSRuntime
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner @ref="_designer" PreviewSettings="@_preview" />
</div>
@code {
    private ReportDesigner _designer;
    private PreviewSettings _preview;
    private ReportViewer _viewer;
    public Index()
    {
         _preview = new PreviewSettings
         {
             CanPreview = true,
             OpenViewer = OpenViewer
         };
    }
    private async void OpenViewer(ViewerSettings settings)
    {
        if (_viewer != null)
        {
            await _viewer.OpenReport(settings.DocumentInfo.Id);
            return;
        }
        _viewer = new ReportViewer();
        var initOptions = new InitializationOptions();
        initOptions.ReportID = settings.DocumentInfo.Id;
        initOptions.PanelsLocation = PanelsLocation.toolbar;
        initOptions.ReportLoaded = (reportInfo) => { };
        await _viewer.Render(JSRuntime, settings.Element, initOptions);
    }
}
```

### PropertyGridSettings

Gets or sets the property grid settings.

**Parameter (Type)**:

**PropertyGridSettings**: PropertyGridSettings

* **PropertiesTab**: PropertiesTab
<br>
    Description: Sets or gets properties tab settings.
    Return: The **PropertiesTab** object representing the current settings of properties tab.
* **Mode()**: Mode?
<br>
    Description: Specifies default properties mode. The available values are Mode.Basic and Courier New Mode.Advanced.
    Return: The current mode of the properties tab settings.
* **Sort()**: Sort?
<br>
    Description: Specifies default properties sort mode. The available values are Sort.categorized and Sort.alphabetical.
    Return: The current sort of the properties tab settings

**Return**: The **PropertyGridSettings** representing the current settings for the property grid.

```html
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner PropertyGridSettings="@_propertyGridSettings" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    private PropertyGridSettings _propertyGridSettings = new PropertyGridSettings
    {
        Mode = Mode.Advanced,
        Sort = Sort.categorized,
        PropertiesTab = new PropertiesTab { Visible = false }
    };
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = false
        };
    }
}
```

### RdlxSettings

Gets or sets the RDLX platform-specific settings.

**Parameter (Type)**:

**RdlxSettings**: RdlxSettings

* **ExpressionSyntax**: ExpressionSyntax?
<br>
    Description: Gets or sets the expression syntax used in Designer. The available values are ExpressionSyntax.i11n and ExpressionSyntax.rdl.
    Return: The object representing the current expression syntax settings.
* **ToolBoxContent**: ToolBoxContent
<br>
    Description: Gets or sets the report items available and their order.
    Return: The **ToolBoxContent** object representing the available report elements with the current settings and their order.
* **InitTemplates**: InitTemplates
<br>
    Description: Gets or sets the reports as rdlx-json strings. Report items from these reports are used as templates for creating new items.
    Return: The **InitTemplates** object representing the current templates settings.
* **ReportItemsFeatures**: RdlxReportItemsSettings
<br>
    Description: Gets or sets the customizable report item features.
    Return: The **RdlxReportItemsSettings** object representing the current customizable report item features.
* **ReportStyles**: ReportStyles[]
<br>
    Description: Gets or sets the additional styles to add to report item styles.
    Return: The array of **ReportStyles** objects representing the current additional styles to add to the report element styles.
* **Msl**: Msl
<br>
    Description: Gets or sets the RDLX Multi-Section report settings.
    Return: The **Msl** object representing the current RDLX Multi-Section report settings.
* **Dashboard**: Dashboard
<br>
    Description: Gets or sets the RDLX Dashboard reports settings.
    Return: The **Dashboard** object representing the current RDLX Dashboard report settings.

**Return**: The **RdlxSettings** object representing the current rdlx report settings.

```html
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner RdlxSettings="@_rdlxSettings" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    private RdlxSettings _rdlxSettings = new RdlxSettings
    {
        Dashboard = new Dashboard { Enabled = true },
        Msl = new Msl { Enabled = true },
        ExpressionSyntax = ExpressionSyntax.rdl,
        InitTemplates = new InitTemplates(),
        ReportItemsFeatures = new RdlxReportItemsSettings(),
        ReportStyles = { },
        ToolBoxContent = new ToolBoxContent { Cpl = new[] { RdlxToolBoxItem.formattedtext } }
    };
    public Index()
    {
         _preview = new PreviewSettings
         {
             CanPreview = false
         };
    }
}
```

### RpxSettings

Gets or sets the RPX platform-specific settings. To set these settings, an RPX report must exist.

**Parameter (Type)**:

**RpxSettings**: RpxSettings

* **Enabled**: bool?
<br>
    Description: Gets or sets the activation value of RPX reports.
    Return: The object represents the current activation value of RPX reports.
* **InitTemplates**: InitTemplates
<br>
    Description: Gets or sets the reports as json strings. Report items from these reports are used as templates for creating new items.
    Return: The **InitTemplates** object representing the current templates settings.

**Return**: The **RpxSettings** object representing the current rpx reports settings.

```html
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner RpxSettings="@_rpxSettings" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    private RpxSettings _rpxSettings = new RpxSettings
    {
        Enabled = true,
        InitTemplates = new InitTemplates()
    };
    public Index()
    {
         _preview = new PreviewSettings
         {
             CanPreview = false
         };
    }
}
```

### ServerSettings

Gets or sets the back end-related settings.

**Parameter (Type)**:

**ServerSettings**: ServerSettings

* **Url**: String
<br>
    Description: Gets or sets the base URL for Designer Server API.
    Return: The string representing the current base URL for Designer Server API.
* **OnBeforeRequest**: Func\<RequestInit, RequestInit>
<br>
    Description: Gets or sets the handler to modify requests.
    Return: The **Func\<RequestInit, RequestInit>** object representing the current handler to modify requests.

**Return**: The **ServerSettings** object representing the current back end-related settings.

```html
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner ServerSettings="@_serverSettings" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    private ServerSettings _serverSettings = new ServerSettings
    {
        OnBeforeRequest = delegate (RequestInit requestInit)
        {
            return requestInit;
        },
        Url = "http://localhost:5098/"
    };
    public Index()
    {
         _preview = new PreviewSettings
         {
             CanPreview = false
         };
    }
}
```

### StatusBarSettings

Gets or sets the status bar settings.

**Parameter (Type)**:

**StatusBarSettings**: StatusBarSettings

* **ToggleUnitsButton**: ToggleUnitsButton
<br>
    Description: Gets or sets the toggle units button settings.
    Return: The **ToggleUnitsButton** object representing the current toggle units button settings.
* **GridSizeEditor**: GridSizeEditor
<br>
    Description: Gets or sets the grid size editor settings.
    Return: The **GridSizeEditor** object representing the current grid size editor settings.
* **RulersButton**: RulersButton
<br>
    Description: Gets or sets the rulers button settings.
    Return: The **RulersButton** object representing the current rulers button settings.
* **Visible**: bool?
<br>
    Description: Gets or sets the visibility of the status bar.
    Return: The value representing the current visibility of the status bar settings.

**Return**: The **StatusBarSettings** object represented the current status bar settings.

```html
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner StatusBarSettings="@_statusBarSettings" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    private StatusBarSettings _statusBarSettings = new StatusBarSettings
    {
        GridSizeEditor = new GridSizeEditor { Visible = true },
        PropertiesModeButton = new PropertiesModeButton { Visible = true },
        RulersButton = new RulersButton { Visible = true },
        ToggleGridButton = new ToggleGridButton { Visible = true },
        ToggleUnitsButton = new ToggleUnitsButton { Visible = true },
        Visible = true
    };
    public Index()
    {
         _preview = new PreviewSettings
         {
             CanPreview = false
         };
    }
}
```

### StoreUnsavedReport

Manages the report retention. When StoreUnsavedReport is enabled, the last unsaved report can be restored if a browser tab or the browser itself gets accidentally closed.

**Parameter (Type)**:

**StoreUnsavedReport**: Bool

**Return**: The value representing the current state of the **StoreUnsavedReport**.

```html
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner StoreUnsavedReport="false" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    public Index()
    {
         _preview = new PreviewSettings
         {
             CanPreview = false
         };
    }
}
```

### StoreUserPreferences

Manages the user preferences. When **StoreUserPreferences** is enabled, user preferences are saved to a browser storage.

**Parameter (Type)**:

**StoreUserPreferences**: Bool

**Return**: The value representing the current state of the **StoreUserPreferences**.

```html
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner StoreUserPreferences="false" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    public Index()
    {
         _preview = new PreviewSettings
         {
             CanPreview = false
         };
    }
}
```

### StylesSettings

Gets or sets the RPX Styles-related settings.

**Parameter (Type)**:

**StylesSettings**: StylesSettings

* **StylesTab**: StylesTab
<br>
    Description: Gets or sets the styles tab settings.
    Return: The **StylesTab** object representing the current styles tab settings.
* **Stylesheet**: Stylesheet
<br>
    Description: Gets or sets the Stylesheet settings.
    Return: The **Stylesheet** object representing the current Stylesheet settings.

**Return**: The StylesSettings object representing the current RPX styles-related settings.

```html
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner StylesSettings="@_styleSettings" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    private StylesSettings _styleSettings = new StylesSettings
    {
        Stylesheet = new Stylesheet { CanModify = true },
        StylesTab = new StylesTab { Visible = true }
    };
    public Index()
    {
         _preview = new PreviewSettings
         {
             CanPreview = false
         };
    }
}
```

### TitleSettings

Gets or sets the document title settings.

**Parameter (Type)**:

**TitleSettings**: TitleSettings

* **Disabled**: bool?
<br>
    Description: Gets or sets whether the document title is disabled.
    Return: The value representing whether the document title is disabled.

**Return**: The **TitleSettings** object representing the current document title settings.

```html
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner TitleSettings="@_titleSettings" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    private TitleSettings _titleSettings = new TitleSettings
    {
        Disabled = false
    };
    public Index()
    {
         _preview = new PreviewSettings
         {
             CanPreview = false
         };
    }
}
```

### ToolBarSettings

Gets or sets the ToolBar settings.

**Parameter (Type)**:

**ToolBarSettings**: ToolBarSettings

* **Visible**: bool?
<br>
    Description: Gets or sets the visibility of ToolBar.
    Return: The value represented the visibility of ToolBar.

**Return**: The **ToolBarSettings** object represented the current ToolBar settings.

```html
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner ToolBarSettings="@_toolbarSettings" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    private ToolBarSettings _toolbarSettings = new ToolBarSettings
    {
        Visible = true
    };
    public Index()
    {
         _preview = new PreviewSettings
         {
             CanPreview = false
         };
    }
}
```

### Units

Gets or sets the default measurement units of the report designer. The available values are Units.In and Units.Cm

**Parameter (Type)**:

**Units**: Units

**Return**: The current value of default measurement units of the report designer.

```html
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner Units="Units.Cm" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    public Index()
    {
         _preview = new PreviewSettings
         {
             CanPreview = false
         };
    }
}
```

### Width

Gets or sets the width of the designer.

**Parameter (Type)**:

**Width**: String

**Return**: Returns the width of the designer.

```html
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner Width="20%" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    public Index()
    {
         _preview = new PreviewSettings
         {
             CanPreview = false
         };
    }
}
```

### OpenDocumentExplorer

Manages the panels of the Designer API. To manage panels from the **Blazor Designer API**, use the following example for "**\*.razor**" pages.

In this example, the explorer panel is called for a report using the Blazor Designer API.

* Add the call button code.

    ```auto
    <button @onclick="OpenDocumentExplorer">Open document explorer</button>
    ```
* Add the button click handler code.

    ```auto
    private async void OpenDocumentExplorer()
    {
        await _designer.App.Panels.Menu.Open("document-explorer");
    }
    ```

The complete code is as follows:

```html
@page "/"
@inject IJSRuntime JSRuntime
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<button @onclick="OpenDocumentExplorer">Open document explorer</button>
<div id="designerContainer">
    <ReportDesigner @ref="_designer" PreviewSettings="@_preview" />
</div>
@code {
    private ReportDesigner _designer;
    private PreviewSettings _preview;
    private ReportViewer _viewer;
    private async void OpenDocumentExplorer()
    {
        await _designer.App.Panels.Menu.Open("document-explorer");
    }
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = false
        };
    }
}
```

### UndoLastOperation

Manages the clipboard and state selectors of the application API. To manage the clipboard and state selectors of the application API, use the following example for "**\*.razor**" pages.

This example implements undoing the last operation in the designer using the custom button.

* Add the call button code.

    ```auto
    <button @onclick="UndoLastOperation">Undo the last operation</button>
    ```
* Add the button click handler code.

    ```auto
    private async void UndoLastOperation()
    {
        await _designer.App.Editor.Undo();
    }
    ```

The complete code is as follows:

```html
@page "/"
@inject IJSRuntime JSRuntime
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<button @onclick="UndoLastOperation">Undo the last operation</button>
<div id="designerContainer">
    <ReportDesigner @ref="_designer" PreviewSettings="@_preview" />
</div>
@code {
    private ReportDesigner _designer;
    private PreviewSettings _preview;
    private ReportViewer _viewer;
    private async void UndoLastOperation()
    {
        await _designer.App.Editor.Undo();
    }
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = false
        };
    }
}
```

### ReportDesigner

Renders the **ReportDesigner** component to the **\<div>** element. Use the following example for "\***.razor**" pages.

**Parameter (Type)**:

**PreviewSettings**: [PreviewSettings](/activereportsnet/docs/v19.2/developers/create-applications/blazor-web-designer-application/web-designer-api-blazor#previewsettings)

**Return**: Renders

### DateFormats

Gets or sets the list of supported date formats. These settings are only used during the initialization and cannot be changed afterward.

**Parameter(Type)**:

**DateFormats: String[]**

**Return**: Returns the list of supported date formats.

```html
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner DateFormats="@_dateFormats" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    private string[] _dateFormats = { /* Your date formats. */ };
    public Index()
    {
         _preview = new PreviewSettings
         {
             CanPreview = false
         };
    }
}
```

### ThemesSettings

Represents the settings for themes, allowing configuration of the default theme, detection of dark mode, available themes for user selection, and settings for the theme picker.

**Parameter(Type)**:

* **Default**: string
    Description: Gets or sets the default theme to be applied. Predefined themes: "default", "activeReports", "activeReportsDark", "defaultDark", "darkOled", "highContrast", "highContrastDark".
* **List**: string[] or GrapeCity.ActiveReports.Blazor.Viewer.UITheme[]
    Description: Gets ot sets the array of available themes that can be picked by the user. Can be a string or a GrapeCity.ActiveReports.Blazor.Viewer.UITheme.
* **Picker**: PickerSettings
    Description: Represents the settings for the theme picker in the UI.
    * **Enabled**: bool?
        Description: Indicates whether the theme picker should be shown in the UI.

**Return**: Returns the settings for themes.

```html
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner ThemesSettings="@_themesSettings" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    private ThemesSettings _themesSettings = new ThemesSettings
    {
        Default = "default",
        
        List = new string[] { /* Your themes. */ },
        Picker = new PickerSettings
        {
            Enabled = true
        }
    };
    public Index()
    {
         _preview = new PreviewSettings
         {
             CanPreview = false
         };
    }
}
```

### Default Constructor

Initializes a new instance of the class ReportDesigner.

```html
ReportDesigner _designer = new ReportDesigner();See Also
```