Breaking Change T1166126
Visible to All Users

Web Reporting - Export and print capabilities now utilize Fetch instead of jQuery Ajax

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:

Code
jQuery.ajaxSetup({ headers: { Authorization : 'Bearer ' + token }});

The fetchSetup.fetchSettings with request headers:

  • Modular approach:

    Code
    import { fetchSetup } from '@devexpress/analytics-core/analytics-utils'; fetchSetup.fetchSettings = { headers: { Authorization : 'Bearer ' + token } };
  • Namespace approach:

    Code
    DevExpress.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:

Code
import { 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):

Code
import { fetchSetup } from '@devexpress/analytics-core/analytics-utils'; fetchSetup.fetchSettings = { headers: { 'test': 'msg' }, beforeSend: (requestParameters) => { requestParameters.credentials = 'include'; } };

Note. A Promise object is also accepted:

TypeScript
fetchSetup.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.

Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.