Localize Reports in the Web Report Designer
- 3 minutes to read
Follow the instructions in this help topic to integrate AI-powered Localization functionality into the Web Report Designer. This tutorial uses Azure OpenAI.
The Localize with AI button in the Localization Editor translates all localizable property values to the selected language:
Note
This functionality is not supported in the Web Report Designer control for ASP.
#Install NuGet Packages
Install the following NuGet packages to use Azure OpenAI:
- DevExpress.AIIntegration.AspNetCore.Reporting
- Microsoft.Extensions.AI (Version=”9.5.0”)
- Microsoft.Extensions.AI.OpenAI (Version=”9.5.0-preview.1.25265.7”)
- Azure.AI.OpenAI (Version=”2.2.0-beta.4”)
For the list of supported AI services and their corresponding prerequisites, refer to the Supported AI Services section of the following help topic: AI-powered Extensions for DevExpress Reporting.
Note
DevExpress AI-powered extensions follow the “bring your own key” principle. Dev
#Register AI Service and Activate Extension
Call the following methods on application startup:
- AddDevExpressAI
- Adds DevExpress AI-related services to the application service collection.
- AddWebReportingAIIntegration
- Adds AI-powered functionality to the Web Document Viewer and Web Report Designer.
- AddLocalization()
Activates AI-powered Localization functionality in the Web Report Designer
Use the following method to specify test data source options:
-
Specifies output randomness. Lower temperatures yield more predictable and focused outputs, while higher temperatures produce more diverse and creative responses.
-
The following snippet registers an Azure OpenAI service and activates AI-powered Localization in the Web Report Designer:
using Azure.AI.OpenAI;
using Microsoft.Extensions.AI;
using System;
// ...
string azureOpenAIEndpoint = Environment.GetEnvironmentVariable("AZURE_OPENAI_ENDPOINT");
string azureOpenAIKey = Environment.GetEnvironmentVariable("AZURE_OPENAI_API_KEY");
string deploymentName = "MODEL_NAME"
IChatClient chatClient = new AzureOpenAIClient(new Uri(azureOpenAIEndpoint),
new System.ClientModel.ApiKeyCredential(azureOpenAIKey))
.GetChatClient(deploymentName).AsIChatClient();
builder.Services.AddSingleton(chatClient);
builder.Services.AddDevExpressAI((config) => {
config.AddWebReportingAIIntegration(options =>
options.AddLocalization());
});
#Disable AI-powered Functionality for a Specific Control
AI-powered functionality configured within AIReportingConfigurationBuilder is available for all Report Viewer and Report Designer components in the application. If you need to disable this AI-powered functionality for a specific Web Report Designer control, set the client AIServicesEnabled property to false
in the BeforeRender
event handler. The following snippet disables AI-powered functionality for a Report Designer in an ASP.NET Core application:
<script type="text/javascript">
function onBeforeRender(e, s) {
DevExpress.Reporting.Designer.Settings.AIServicesEnabled(false);
}
</script>
@{
var designerRender = Html.DevExpress().ReportDesigner("reportDesigner")
.Height("100%")
.ClientSideEvents(configure => configure.BeforeRender("onBeforeRender"))
.Bind(Model);
@designerRender.RenderHtml()
}
#Localize Reports
Select a language from the Language drop-down and click the Localize with AI button to translate all localizable property values to the selected language:
You can adjust AI-translated strings in the Localization Editor.
Switch to the Preview to see the localized report: