Handle post actions

To handle post actions in the Bold Reports^® Angular Report Designer, use the following events to customize the Ajax requests that the Report Designer sends to exchange data with the Web API service.

AjaxBeforeLoad
AjaxSuccess
AjaxError

AjaxBeforeLoad

The AjaxBeforeLoad event is triggered before an Ajax request is sent to the Report Designer Web API service. Use the event to set additional headers and custom data in the Ajax request. The following code sample demonstrates adding custom authorization header and passing default parameter values to service.

Add custom header in Ajax request

To add a custom header, initialize the ajaxBeforeLoad event of the Report Designer in the script and add the authorization token to the headers property.

<bold-reportdesigner id="designer"
    [serviceUrl] = "serviceUrl"
    style="position: absolute;height: 550px; width: 1250px;"
    (ajaxBeforeLoad) = "onAjaxRequest($event)">
</bold-reportdesigner>

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'reportdesignerapp';
  public serviceUrl: string;

    constructor() {
        this.serviceUrl = "https://demos.boldreports.com/services/api/ReportingAPI";
    }

    onAjaxRequest(event) {
         event.headers.push({ Key: 'Authorization', Value: 'demo@123' });
    }
}

Get the custom header value from the HttpContext header collection using the key name specified at client-side.

        string authenticationHeader;

        public object PostDesignerAction(Dictionary<string, object> jsonResult)
        {
            if (jsonResult != null)
            {
                //Get client side custom ajax header and store in local variable
                authenticationHeader = HttpContext.Current.Request.Headers["Authorization"];

                //Perform your custom validation here
                if (authenticationHeader == "")
                {
                    return new Exception("Authentication failed!!!");
                }
                else
                {
                    return ReportDesignerHelper.ProcessDesigner(jsonResult, this, null);
                }
            }

            return null;
        }

Perform your own action to validate the header values.

Pass custom data in Ajax request

Use the data property to send custom data from the Report Designer to the server in the Ajax request. In the following code sample, custom data values are passed to the server-side.

<bold-reportdesigner id="designer"
    [serviceUrl] = "serviceUrl"
    style="position: absolute;height: 550px; width: 1250px;"
    (ajaxBeforeLoad) = "onAjaxRequest($event)">
</bold-reportdesigner>

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'reportdesignerapp';
  public serviceUrl: string;

    constructor() {
        this.serviceUrl = "https://demos.boldreports.com/services/api/ReportingAPI";
    }

    onAjaxRequest(event) {
        //Passing custom data to server
        var customerID = "CI0021";
        event.data = customerID;
    }
}

The custom data values are stored in the customData header key, and you can store them in the local property. The following code sample demonstrates how to store the custom data values.

        string customerID = null;

        public object PostDesignerAction(Dictionary<string, object> jsonResult)
        {

            if (jsonResult != null)
            {
                if (jsonResult.ContainsKey("customData"))
                {
                    //Get client side custom data and store in local variable.
                    customerID = jsonResult["customData"].ToString();
                }
            }

            return ReportDesignerHelper.ProcessDesigner(jsonResult, this, null);
        }

Perform your own action to use the custom data values.

AjaxSuccess

To perform a custom action or show a user-defined message in the Report Designer after a successful Ajax request, use the ajaxSuccess event.

<bold-reportdesigner id="designer"
    [serviceUrl] = "serviceUrl"
    style="position: absolute;height: 550px; width: 1250px;"
    (ajaxSuccess) = "onAjaxSuccess($event)">
</bold-reportdesigner>

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'reportdesignerapp';
  public serviceUrl: string;

    constructor() {
        this.serviceUrl = "https://demos.boldreports.com/services/api/ReportingAPI";
    }

    onAjaxSuccess(event) {
        //Perform your custom success message here
        alert("Ajax request success!!!");
    }
}

AjaxError

The Report Designer calls the ajaxError event if an error occurs with the request. You can display the customized error detail in the event method.

<bold-reportdesigner id="designer"
    [serviceUrl] = "serviceUrl"
    style="position: absolute;height: 550px; width: 1250px;"
    (ajaxError) = "onAjaxFailure($event)">
</bold-reportdesigner>

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'reportdesignerapp';
  public serviceUrl: string;

    constructor() {
        this.serviceUrl = "https://demos.boldreports.com/services/api/ReportingAPI";
    }

    onAjaxFailure(event) {
        alert("Status: " + event.status + "\n" +
                    "Error: " + event.responseText);
    }
}

You can never have both an error and a success callback with a request.