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

Sample Location

C#

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)

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

  
  
• Hide About button

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

• Hide File menu

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

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

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

• Hide ToolBox

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

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

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

  
  
  
• Hide Data tab

  	Copy Code
  _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

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

• Limit font list to limited font families

  	Copy Code
  _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

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