Blazor
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Custom Resource Generator

08 Apr 2021 / 4 minutes to read

Warning: Starting with version 18.3.0.35 (Volume 3, 2020), the Syncfusion Blazor library is integrated with the JavaScript Isolation feature of Blazor. So, the CRG online tool is no longer needed for your production environment and it is deprecated now. That is, the Syncfusion Blazor library itself handles the Syncfusion interop scripts and it is no longer needs to be added manually in the layout page (_Host.cshtml/index.html) for production. You can still use the ThemeStudio online web application to customize and generate the Syncfusion Blazor themes for a specific set of components.

Syncfusion provides an option to generate a selective component’s interop script and styles using the Custom Resource Generator (CRG) web tool.

Custom resource generator preview for Blazor

Search and select the component list

Search and select the required Syncfusion Blazor UI components from the CRG to generate a specific set of component resources.

Refer to the following steps to search and select the components in CRG:

  1. Navigate to the Custom Resource Generator (CRG) application at CRG.
  2. Type the required component name in the search bar, and then select the checkbox. The dependency of the selected component is resolved in the application itself, so you do not need to choose each dependent component manually.

Search and select Syncfusion Blazor UI components

  1. Click the expand icon, and then select the required features for the specific set of components.

Select feature-based script in the supported components

  1. If the entire features of the component are needed, then click the specific component’s checkbox to select all features.

Select all features in the component

  1. Select the required built-in themes from the Select Themes option. This provides an option to select more than one theme.

Select the built-in themes

Download the selected component resources

After selecting the required component resources, download the custom interop script and styles from CRG.

Refer to the following steps to download the custom resources in CRG:

  1. Click the DOWNLOAD button at the bottom of the page. Select the Minified option to generate the minified file output for production.

Download option

  1. Change the file name as needed, and then click GENERATE button in the pop-up.

Export popup for generation custom resources

  1. Now, the bundling process for the selected components will be started, and the output will be downloaded as a zip file.

blazor Bundle custom resources

  1. The final output contains the custom interop script and styles for the selected components and an import.json file, which stores the current settings.

Final output of customized resources

How to use custom resources in the Blazor application

Warning: Starting with version 18.3.0.35 (Volume 3, 2020), the following configuration is no longer needed for the production environment. You can use the default getting started configuration in production mode.

  1. Copy or paste the downloaded custom resources in the Blazor application ~/wwwroot folder.
  2. Set DisableScriptManager as true in AddSyncfusionBlazor service in ~/Startup.cs file for Blazor Server app or ~/Program.cs file for Blazor WebAssembly app.

Blazor Server App (~/Startup.cs)

Copied to clipboard
public void ConfigureServices(IServiceCollection services)
{
    services.AddRazorPages();
    services.AddServerSideBlazor();

    // Set DisableScriptManager as true to load custom  scripts
    services.AddSyncfusionBlazor(true);

    services.AddSingleton<WeatherForecastService>();
}

Blazor WebAssembly App (~/Program.cs)

Copied to clipboard
public static async Task Main(string[] args)
{
    var builder = WebAssemblyHostBuilder.CreateDefault(args)    ;
    ....
    ....

    // Set DisableScriptManager as true to load custom  scripts
    builder.Services.AddSyncfusionBlazor(true);

    await builder.Build().RunAsync();
}
  1. Now, manually add the custom interop script and styles in the ~/Pages/_Host.cshtml for Blazor Server app or ~/wwwroot/index.html for Blazor WebAssembly app.
Copied to clipboard
<head>
    ....
    ....
    <link href="material.css" rel="stylesheet" />
    <script src="syncfusion-blazor.min.js" type="text/javascript"></script>
</head>
  1. Run the application and it will load the resources with application required components.

Import previously generated settings into CRG

To add more components or upgrade the latest Syncfusion Blazor library resources, it is not necessary to generate from the scratch in the CRG. Just import the old import.json file, make the changes, and then download it again from the CRG application.

Refer to the following steps to import previous settings in CRG:

  1. Click the IMPORT SETTINGS button at the bottom of the page.

Import option in CRG

  1. Upload the import.json file, so that the previously stored data will be restored in the CRG application. Now, add more components and export the resources again.

blazor Previous changes restored

Previous
Next