In this article we will discuss the features of using the embedded Designer component for creating reports and dashboards in Angular applications running on the .NET Core and ASP.NET MVC (.NET Framework 4.7.2) server-side platforms.

---

Introduction

The report and dashboard designer is designed with the specifics of the Angular framework in mind, supporting theming, interface localization, and a full set of events necessary for working with reporting components. The component is compatible with all current versions of the Angular framework (as of this writing, these are versions 16, 17, and 18). You can download the report designer here.

---

Getting started

First, install the npm package for the designer.

console

npm install stimulsoft-designer-angular

Additionally, for the server-side of the project, you need to install the NuGet package Stimulsoft.Dashboards.Angular.NetCore or Stimulsoft.Reports.Angular.NetCore.

console

dotnet add package Stimulsoft.Dashboards.Angular.NetCore
dotnet add package Stimulsoft.Reports.Angular.NetCore

---

Integration of the Angular component

After installing the packages, first, import the Stimulsoft components in the project file app.module.ts:

app.module.ts

...
	
import { StimulsoftDesignerModule } from 'stimulsoft-designer-angular';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...
    
  StimulsoftDesignerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Then, in the file app.component.html, define the parameters for the viewer and designer components.

app.component.html

<stimulsoft-designer-angular
  #designer
  [requestUrl]="'http://localhost:60801/api/designer'"
  [height]="'100%'"
  [width]="'100%'">
  Loading designer...
</stimulsoft-designer-angular>

After that, run the application.

---

Integration of the designer in an ASP.NET MVC application on .NET Framework 4.7.2

To integrate the report designer into an application, you need to import the scripts first:

using Stimulsoft.Report;
using Stimulsoft.Report.Mvc;
using Stimulsoft.Report.Web;

...

and initialize the designer:

...

[AllowCrossSiteJson]
public ActionResult Get()
{
	var requestParams = StiMvcDesigner.GetRequestParams();

	if (requestParams.Action == StiAction.Undefined)
	{
		var options = new StiMvcDesignerOptions();
		return StiMvcDesigner.GetAngularScriptsResult(requestParams, options);
	}

	if (requestParams.ComponentType == StiComponentType.Designer)
	{
		switch (requestParams.Action)
		{
			case StiAction.GetReport:
				return GetReport();

			case StiAction.SaveReport:
				return SaveReport();
		}
	}

	return StiMvcDesigner.ProcessRequestResult();
}
		
...

After that, load a report using the following code:

...

public ActionResult GetReport()
{
	var report = StiReport.CreateNewReport();
	var path = Server.MapPath("~/Reports/MasterDetail.mrt");
	report.Load(path);

	return StiMvcDesigner.GetReportResult(report);
}


...

and create a method for saving the report:

...

public ActionResult SaveReport()
{
	var report = StiMvcDesigner.GetReportObject();

	var path = Server.MapPath("~/Reports/MasterDetail.mrt");
	report.Save(path);

	return StiMvcDesigner.SaveReportResult();
}

...

You can download a sample here.

---

Integration of the designer into a .NET Core application

Here’s a step-by-step guide for integrating the report designer into Angular applications on a .NET Core server. In this sample, we will show you the use of report loading and saving events.

Let’s create a controller for the designer, describing the actions GetReport, SaveReport, and specifying special Get and Post actions.

DesignerController.cs

namespace Designer.Controllers
{
    [Produces("application/json")]
    [Route("api/designer")]
    public class DesignerController : Controller
    {
        static DesignerController()
        {
            // How to Activate
            //Stimulsoft.Base.StiLicense.Key = "6vJhGtLLLz2GNviWmUTrhSqnO...";
            //Stimulsoft.Base.StiLicense.LoadFromFile("license.key");
            //Stimulsoft.Base.StiLicense.LoadFromStream(stream);
        }

        [HttpGet]
        public IActionResult Get()
        {
            // Setting the required options on the server side
            var requestParams = StiAngularDesigner.GetRequestParams(this);
            if (requestParams.Action == StiAction.Undefined)
            {
                var options = new StiAngularDesignerOptions();
                options.Height = Unit.Percentage(100);
                return StiAngularDesigner.DesignerDataResult(requestParams, options);
            }

            return StiAngularDesigner.ProcessRequestResult(this);
        }

        [HttpPost]
        public IActionResult Post()
        {
            var requestParams = StiAngularDesigner.GetRequestParams(this);
            if (requestParams.ComponentType == StiComponentType.Designer)
            {
                switch (requestParams.Action)
                {
                    case StiAction.GetReport:
                        return GetReport();

                    case StiAction.SaveReport:
                        return SaveReport();
                }
            }

            return StiAngularDesigner.ProcessRequestResult(this);
        }

        public IActionResult GetReport()
        {
            var report = StiReport.CreateNewReport();
            var path = StiAngularHelper.MapPath(this, "Reports/HotelRevenue.mrt");
            report.Load(path);

            return StiAngularDesigner.GetReportResult(this, report);
        }

        public IActionResult SaveReport()
        {
            var report = StiAngularDesigner.GetReportObject(this);

            var path = StiAngularHelper.MapPath(this, "Reports/HotelRevenue.mrt");
            report.Save(path);

            return StiAngularDesigner.SaveReportResult(this);
        }
    }
}

You can download a sample here.