What Changed
In v23.1, we upgraded ace.js to v1.4.13 (the lowest version supported) and enabled the useStrictCSP
option for our Web Report Designer and Web Dashboard components (Expression Editor) and the Query Builder control (Custom Query Editor). You now need to manually register CSS files for the Ace editor in your application to ensure that the Expression Editor is serialized correctly.
Reasons for Change
The Ace library is required for intelligent code completion in the Expression Editor and Filter Editor. To be able to remove the unsafe-inline
directive from Content Security Policy (CSP), we updated the Ace version to 1.4.13 and enabled the useStrictCSP
option.
Impact on Existing Apps
The change affects the following components:
How to Update Existing Apps
Follow the steps below to update your application based on the platform.
ASP.NET Core Applications
If you do not bundle resources, add the following styles to your page:
HTML<link href="/node_modules/ace-builds/css/ace.css" rel="stylesheet" />
<!-- light theme -->
<link href="/node_modules/ace-builds/css/theme/dreamweaver.css" rel="stylesheet" />
<!-- dark theme -->
<link href="/node_modules/ace-builds/css/theme/ambiance.css" rel="stylesheet" />
Note that ace.css
references images, so make sure the ".png" and ".svg" files from the node_modules/ace-builds/css/
folder are placed in the same folder as ace.css
when you run the application.
To bundle resources, reference the CSS files in the bundleconfig.json file.
If you load the modules with the setModuleUrl
function, remove the following lines:
JavaScriptaceConfig.setModuleUrl('ace/theme/dreamweaver', '@Url.Content("~/js/ace/theme-dreamweaver.js")');
aceConfig.setModuleUrl('ace/theme/ambiance', '@Url.Content("~/js/ace/theme-ambiance.js")');
You can add two themes to your application. It doesn't affect the work of the component.
MVC and Web Forms Applications
If you integrate libraries into your application manually, (without the ThirdParty option), reference the following files on your page:
Razor<link href="CSS/Ace/ace.css" rel="stylesheet" />
<!-- light theme -->
<link href="CSS/Ace/theme/dreamweaver.css" rel="stylesheet" />
<!-- dark theme -->
<link href="CSS/Ace/theme/ambiance.css" rel="stylesheet" />
You can find the required CSS file from the following directory:
C:\Program Files\DevExpress 23.1\Components\Sources\DevExpress.Web.Resources\Css\Ace
You can add two themes to your application. It doesn't affect the work of the component.
Angular Applications
For the Report Designer component in Angular, add the following styles to the application:
TypeScript@Component({
styleUrls: [
'../../../node_modules/ace-builds/css/ace.css',
// light theme
'../../../node_modules/ace-builds/css/theme/dreamweaver.css',
// dark theme
'../../../node_modules/ace-builds/css/theme/ambiance.css',
]
})
For the Web Dashboard, add the following styles to the styles.css file:
CSS@import url("../node_modules/ace-builds/css/ace.css");
@import url("../node_modules/ace-builds/css/theme/dreamweaver.css");
@import url("../node_modules/ace-builds/css/theme/ambiance.css");
You can add two themes to your application. It doesn't affect the component.
React Applications
Add the following styles to the styles.css file:
CSS@import url("../node_modules/ace-builds/css/ace.css");
@import url("../node_modules/ace-builds/css/theme/dreamweaver.css");
@import url("../node_modules/ace-builds/css/theme/ambiance.css");
You can add two themes to your application. It doesn't affect the component.
Vue Applications
Add the following styles to the main.js file:
JavaScriptimport "ace-builds/css/ace.css";
import "ace-builds/css/theme/dreamweaver.css";
import "ace-builds/css/theme/ambiance.css";
You can add two themes to your application. It doesn't affect the component.
Dashboard Component for Blazor
For the Dashboard Component for Blazor, reference the following stylesheets (in the _Layout.cshtml file in a Blazor Server application or in the index.html file in a Blazor WebAssembly Application):
HTML<head>
<!-- ... -->
<!-- ace -->
<link href="_content/DevExpress.Blazor.Dashboard/ace.css" rel="stylesheet" />
<link href="_content/DevExpress.Blazor.Dashboard/ace-theme-dreamweaver.css" rel="stylesheet" />
<link href="_content/DevExpress.Blazor.Dashboard/ace-theme-ambiance.css" rel="stylesheet" />
<!-- /ace -->
<!-- ... -->
</head>
You can add two themes to your application. It doesn't affect the component.
How to Revert to Previous Behavior
You can't revert to the previous behavior.