What Changed
In v22.2 and earlier, Web Report Designer and Web Document Viewer used jQuery Ajax to send web requests, and form.submit
for export and print operations. In v23.1, the Fetch API is used for all type of requests, including export and print operations.
The Content-Disposition
header is now explicitly exposed.
Reasons for Change
In v22.2 and earlier, we used form.submit
for export and it wasn't possible to add custom headers for form.submit
. The use of the Fetch API enhances the usability and API of our component and includes a unified method to pass request headers from a client to a back-end server. This eliminates the need to write extra code for export and print operations when you need to process custom request headers.
Impact on Existing Apps
Starting with v23.1, Web Reporting Controls will automatically use Fetch, if you have not explicitly configured ajaxSetup.ajaxSettings
.
This change affects your application if you use the jQuery.ajaxSetup function or the ajaxSetup.sendRequest()
method and have not explicitly configured ajaxSetup.ajaxSettings
:
- If you use
ajaxSetup.sendRequest()
in your application, after the update you will get an error. - The request setting specified in the
jQuery.ajaxSetup
function is not used in reporting controls requests.
How to Update Existing Apps
If you use the jQuery.ajaxSetup function to configure the request settings, select one of the following options:
- Use
fetchSetup.fetchSettings
to configure Fetch requests. - Configure
ajaxSetup.ajaxSettings
to use jQuery Ajax in Web Reporting Controls (see How to Revert to Previous Behavior).
The following code snippets show how to configure Fetch requests if you previously used the jQuery.ajaxSetup function:
The jQuery.ajaxSetup
function with request headers:
CodejQuery.ajaxSetup({ headers: { Authorization : 'Bearer ' + token }});
The fetchSetup.fetchSettings
with request headers:
-
Modular approach:
Codeimport { fetchSetup } from '@devexpress/analytics-core/analytics-utils'; fetchSetup.fetchSettings = { headers: { Authorization : 'Bearer ' + token } };
-
Namespace approach:
CodeDevExpress.Analytics.Utils.fetchSetup.fetchSettings = { headers: { Authorization : 'Bearer ' + token } };
The following code snippets show how to to configure Fetch request options if you previously used ajaxSetup.ajaxSettings
:
The ajaxSetup.ajaxSettings
with the specified withCredentials
property:
Codeimport { ajaxSetup } from '@devexpress/analytics-core/analytics-utils';
ajaxSetup.ajaxSettings = {
xhrFields: {
withCredentials: true
}
};
The fetchSetup.fetchSettings
with the specified credentials
parameter (to configure Fetch request parameters, use the beforeSend
callback):
Codeimport { fetchSetup } from '@devexpress/analytics-core/analytics-utils';
fetchSetup.fetchSettings = {
headers: { 'test': 'msg' },
beforeSend: (requestParameters) => {
requestParameters.credentials = 'include';
}
};
Note. A Promise object is also accepted:
TypeScriptfetchSetup.fetchSettings = {
headers: { 'test1': 'test1HeaderValue' },
beforeSend: (requestParameters) => {
var promise = new Promise<void>((resolve, reject) => {
setTimeout(() => {
requestParameters.headers = requestParameters.headers || {} as any;
requestParameters.headers['test2'] = 'test2HeaderValue';
resolve();
}, 5000);
});
//requestParameters.credentials = 'include';
console.log('run 5 sec');
return promise;
}
}
How to Revert to Previous Behavior
If you want to continue to use jQuery Ajax in Web Reporting Controls, configure the ajaxSetup.ajaxSettings
settings:
- Modular approach:Code
import { ajaxSetup } from '@devexpress/analytics-core/analytics-utils'; ajaxSetup.ajaxSettings = { headers: { } };
- Namespace approach:Code
DevExpress.Analytics.Utils.ajaxSetup.ajaxSettings = { headers: { } };
You cannot register more than one type of remote service in your application, use either fetchSetup
or ajaxSetup
.