WebDesigner Blazor Custom

This sample shows how to use the Blazor WebDesigner API to create a customized UI for ActiveReports WebDesigner in Blazor.

Web Designer with a customized UI

type=note

Note: To run this sample, you must have

Visual Studio 2022 (version 17.0 or later)

.NET 6.0 SDK

.NET Core Hosting Bundle (for deployment to IIS)

Sample Location

https://github.com/activereports/WebSamples19/tree/main/WebDesigner_Blazor_Custom

Details

This sample utilizes the WebDesigner API to create a customized UI for the WebDesigner. Some of the customizations demonstrated in the sample are shown below. You can check the Index.razor page of the sample for complete implementation.

Use a custom logo (white labeling)

_menuSettings = new MenuSettings()
        {
            Logo = new Logo() { Custom = new MenuIcon() { Type = "css", Class = "example-icon" } }
        };

Hide About button

_appBarSettings = new AppBarSettings
        {
            AboutButton = new AboutButton() { Visible = false }
        };

Hide File menu

_documentsSettings = new DocumentsSettings()
        {
            FileView = new FileView() { Visible = false }
        };

Lock the report layout, that is, disable the operations that modify the report layout structure

<div id="ar-web-designer" class="ar-web-designer">
   <ReportDesigner @ref="_designer"
                   LockLayout="true"
</div>

Hide ToolBox

_menuSettings = new MenuSettings()
        {
            ToolBox = new ToolBox() { Visible = false }
        };

Hide Parameters tab, the design area for designing a custom parameter pane

_appBarSettings = new AppBarSettings
        {
            ParametersTab = new ParametersTab() { Visible = false }
        };

Hide Data tab
```
_dataSettings = new DataSettings() { DataTab = new DataTab() { Visible = false } };
```
Hiding Data tab hides the options such as data sources, data sets, parameters, and common values.

Hide Properties Mode button that helps switch between the Advanced and Basic properties of the report elements

_statusBarSettings = new StatusBarSettings()
    {
        PropertiesModeButton = new PropertiesModeButton() { Visible = false }
    };

Limit font list to limited font families

_fonts = new object[]
   {
       new FontHeader() { Header = "Questionable Choice" },
       new Font() { Label = "Pretty Font", Value = "Comic Sans MS" },
       new FontHeader() { Header = "" },
       "Arial",
       "Courier New",
       "Times New Roman"
   };

Property grid uses the Basic mode to show the properties of report elements

_propertyGridSettings = new PropertyGridSettings() { Mode = Mode.Basic };