Passing Parameters to Bold Reports Designer in an Angular Application

In Bold Reports, you can pass parameters from your Angular application to the Report Designer using the previewOptions property. This enables you to send predefined parameter values that will be used during report generation, enabling dynamic and customized report previews.

The following example demonstrates how to pass the SalesOrderNumber parameter with the value SO50758 in an Angular application to the Report Designer.

app.component.ts file:

export class AppComponent {
 public serviceUrl: string;
 public previewOptions: any;

 constructor() {
     this.serviceUrl = "https://demos.boldreports.com/services/api/ReportingAPI",
     this.previewOptions = {
       parameters: [
         {
           name: "SalesOrderNumber",
           labels: ["SO50758"],
           values: ["SO50758"],
           nullable: false
         }
       ]
     };
 }
}

Here’s how the app.component.html file looks:

<bold-reportdesigner
 id="reportDesigner_Control"
 [serviceUrl]="serviceUrl"
 [previewOptions]="previewOptions"
 style="position: absolute; height: 100%; width: 100%;">
</bold-reportdesigner>

Key Properties Explained:

• parameters: An array of objects defining parameter details:

  • name: The name of the parameter (e.g., SalesOrderNumber)

  • labels: Display label for the parameter.

  • values: Actual value used during report generation.

  • nullable: Indicates whether null values are allowed

• serviceUrl: Specifies the API endpoint for report processing.

• previewOptions: Contains the parameterDetails object to pass parameters to the Report Designer.

Snap Reference:

You can download a sample application with the SalesOrderNumber parameter configured from the link here.