Angular Designer - specify which report to load

[Antonin H.]

Good day, Stimulsoft novice here.

I am using:

• The Stimulsoft Designer npm package for Angular in my frontend app
• The Stimulsoft.Reports.Angular.NetCore for .NET 8 with my backend API

I have a specific use-case within an Angular application that I'm working on - I would like to use the designer without showing the viewer first and I need to specify which report (report template/.mrt) should be fetched from a file storage (e. g. local server storage) and displayed to the user when the designer is loaded. For this I need to pass some sort of report identification (e. g. a name or id) into the designer from outside.

In the viewer component for Angular I see that I might be able to do this via the "properties" input for the init action that I specify, but I have no idea how to do it in the designer. I also tried using the "postParametersFunction" parameter to specify the report at a later point during the designer/report template loading process, but the function seems to never get called. Below is a snippet of my front-end code where I try to add a report id parameter into post parameters and debug to check if the function got called.

Component template:

Code: Select all

<stimulsoft-designer-angular
  #designer
  [requestUrl]="'https://localhost:7400/StiDesigner'"
  [height]="'100vh'"
  [width]="'100vv'"
  [postParametersFunction]="getPostParameters"
  (designerLoaded)="
    this.designer.designerEl.nativeElement.style.height = '100%'">
</stimulsoft-designer-angular>

Component logic:

Code: Select all

import { Component, ElementRef, ViewChild } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { RoutesService } from '@dgc.web/ui';
import { DgcWebRoutes } from '../../../primitives/dgc-web-routes';
import { map } from 'rxjs';
import { StimulsoftDesignerComponent } from 'stimulsoft-designer-angular';

@Component({
  selector: 'dgc-report',
  templateUrl: './report-designer.component.html',
  styleUrls: ['./report-designer.component.scss'],
})
export class ReportDesignerComponent {
  @ViewChild('designer') stiDesigner: ElementRef<StimulsoftDesignerComponent> | undefined
  public reportId: string | null = null;

  constructor(
    private _route: ActivatedRoute,
    public router: Router,
    private _routerService: RoutesService<DgcWebRoutes>) {
    this._route.paramMap
      .pipe(map(params => params.get('id')))
      .subscribe(id => {this.reportId = id});
  }

  public getPostParameters(data: any): any {
    console.log("get post parameters executed");
    return { reportTemplateId: this.reportId };
  }
}

I would be really grateful for some help/direction on this, because without the ability to specify what report should be called from outside Stimulsoft, I'm not sure how to proceed.

[Lech Kulikowski]

Hello,

Please check the following article:
https://www.stimulsoft.com/en/documenta ... eports.htm

Thank you.

[Antonin H.]

Hello.
thank You for the swift response.

Unfortunately this article seems to only describe how to show reports in the Viewer and my question is specific to the Designer.
Even if my question was about the viewer, the report to be initially shown in the article provided is hardcoded on the backend.

I would like to know how (or if it's even possible) to pass information about which template should be loaded from outside the designer component (perhaps using some component input or post parameter that I'm missing, although I'm really not sure) or if there is maybe a differrent supported/intended way to pass the information to the appropriate ASP.NET Core backend controller.

I haven't found much documentation of the designer and the examples available on GitHub also do not seem to contain anything close to a solution of this specific issue.

[Vadim]

Hello

For Designer you can only send parameters through [requestUrl]="'http://localhost:60801/api/designer'?param1=1&par2=2"
Or you can use HttpInterceptor

[Antonin H.]

Hello,
in that case the query parameters seem like the most suitable solution and it works well.

Thank You

[Lech Kulikowski]

Hello,

You are welcome.