How to Initialize Bold Report Designer with an Existing Report from the Server in Angular
When initializing the Bold Reports Designer, you can open an existing report from the server by utilizing the create API event and the openReport API method. This can also serve as an alternative solution for the Template report where you can open the previously created report design as a template report.
Follow the steps below to open the server report using the report path when opening the Report Designer:
- Create a function in the app.component.ts and bind it with the create API Event in the app.component.html file as in the following code sample.
app.component.html:
<bold-reportdesigner
id="reportDesigner_Control"
[serviceUrl]="serviceUrl"
[reportServerUrl]="reportServerUrl"
[serviceAuthorizationToken] = "serverServiceAuthorizationToken"
(create)="controlInitialized()"
style="position: absolute;height: 550px; width: 1250px;">
</bold-reportdesigner>
app.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
public serviceUrl: string;
public serverServiceAuthorizationToken: string;
public reportServerUrl: string;
constructor() {
this.reportServerUrl = 'https://on-premise-demo.boldreports.com/reporting/api/site/site1';
this.serviceUrl ='https://on-premise-demo.boldreports.com/reporting/reportservice/api/Designer';
this.serverServiceAuthorizationToken = 'bearer <server token>';
}
public controlInitialized() {
// Need to call the openReport API methode here.
}
}
Note: The controlInitialized() function was bound with create API.
- Use the openReport API method in the function along with the report path that was previously created, as shown in the following code sample.
app.component.ts:
public controlInitialized() {
let designerObject: any = $('#reportDesigner_Control').data('boldReportDesigner');
designerObject.openReport('/Sample Reports/Company Sales');
}
Note: In this example, “Sample Reports” is the category name and “Company Sales” is the report name that is passed in the openReport API method as part of the report path.
Note: In the app.component.ts file, utilize the ID “reportDesigner_Control” in the controlInitialized() function to access the Bold Reports Designer. Ensure that this ID matches exactly with the one used in the < bold-reportdesigner > tag in app.component.html.
- Then, when accessing the Bold Report Designer, the report that is bound to the specified path will open.
You can find the following help documentation on how to open an existing server report in Bold Reports Designer on various platforms:
See also:
