Report designing actions are sent in an Ajax request to exchange data with the Web API service. You can handle post actions event to customize the Ajax requests.
AjaxBeforeLoadAjaxSuccessAjaxErrorThis event can be triggered before an Ajax request is sent to the Report Designer Web API service. It allows you to set additional headers, custom data in the Ajax request. The following code sample demonstrates adding custom authorization header and passing default parameter values to service.
Initialize the ajaxBeforeLoad event in the script and add the authorization token to the headers property
<bold-report-designer id="designer" service-url="/api/ReportingAPI" ajax-before-load="onAjaxRequest"></bold-report-designer>
<script type="text/javascript">
function onAjaxRequest(args) {
args.headers.push({ Key: 'Authorization', Value: btoa('guest', 'demo@123') });
}
</script>Get the custom header value from the HttpContext header collection using the key name specified at client-side.
private Microsoft.Extensions.Primitives.StringValues authenticationHeader;
public object PostDesignerAction(Dictionary<string, object> jsonResult)
{
if (jsonResult != null)
{
//Get client side custom ajax header and store in local variable
HttpContext.Request.Headers.TryGetValue("Authorization", out authenticationHeader);
//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.
Use the data property to set custom data to the server in the Ajax request. In the following code sample, custom data values are passed to the server-side.
<bold-report-designer id="designer" service-url="/api/ReportingAPI" ajax-before-load="onAjaxRequest"></bold-report-designer>
<script type="text/javascript">
function onAjaxRequest(args) {
//Passing custom data to server
var customerID = "CI0021";
args.data = customerID;
}
</script>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.
To perform custom action or show user defined message, use the ajaxSuccess event on the successful Ajax request.
<bold-report-designer id="designer" service-url="/api/ReportingAPI" ajax-before-load="onAjaxRequest" ajax-success="onAjaxSuccess"></bold-report-designer>
<script type="text/javascript">
function onAjaxRequest(args) {
args.headers.push({ Key: 'Authorization', Value: btoa('guest', 'demo@123') });
}
function onAjaxSuccess(args) {
//Perform your custom success message here
alert("Ajax request success!!!");
}
</script>The ajaxError event is called, if an error occurred with the request, you can display the customized error detail in the event method.
<bold-report-designer id="designer" service-url="/api/ReportingAPI" ajax-before-load="onAjaxRequest" ajax-error="onAjaxFailure"></bold-report-designer>
<script type="text/javascript">
function onAjaxRequest(args) {
args.headers.push({ Key: 'Authorization', Value: btoa('guest', 'demo@123') });
}
function onAjaxFailure(args) {
alert("Status: " + args.status + "\n" +
"Error: " + args.responseText);
}
</script>You can never have both an error and a success callback with a request.