How to use Online Designer with FR.Core in a single-page Vue.js application
In that article, we will look at the way to display the online report designer in an application written in the Vue.Js framework in conjunction with ASP .Net Core.
To create an application in such a bundle, we need to install Microsoft Visual Studio 2017, or the .Net Core 2.0 SDK, as well as the Node.Js software package.
1. Create an application Vue.js. To do this, run the windows command prompt. Check if you have a template installed to create this type of application. To do this, run the command:
dotnet new - install Microsoft.AspNetCore.SpaTemplates :: *
As a result, we will see the following list:
Now we move to the folder in which you want to create an application using the cd command. And create the application with the command:
dotnet new vue -o FRCoreVueOnlineDesigner
This command will generate us a ready demo application with whole necessary structure of files and folders.
After that, go to the FRCoreVueOnlineDesigner folder with cd and execute the command:
2. Open the created project in VisualStudio. Before you begin, first install the necessary NuGet packages. In the package manager, select the local storage - C: \ Program Files (x86) \ FastReports \ FastReport.Net \ Nugets. We install two packages from this repository: FastReport.Core and FastReport.Web.
Next, we enable the FastReport libraries in the configurator. Editing the Startup.cs file. Add the following to the Configure method:
In the wwwroot folder, create an App_Data directory and add report templates and xml database to it.
Also, in wwwroot we have to put a folder with an online designer. At this point, you should download it from the developer’s site. Please note that when configuring an online designer before building it, you should select in the Configuration section the value for the URLs API - FastReport.Core for Web. After downloading the archive with the designer, extract the contents to the wwwroot folder.
3. Programming the controller. The application already has two controllers - HomeController and SampleDataController. Let's use the second one and add our own methods to it:
The Designer method is designed to display an online designer. And the SaveDesignedReport method saves the modified report on the server.
4. Submissions. For each of the two methods added, it is necessary to create views of the same name:
Add the following code to the Design.cshtml file:
Add the code to the SaveDesignedReport.cshtml file:
5. Client programming. The ClientApp-> components folder contains components - the “pages” of our one-page application. Create your own component. Add a designer folder. Create an online_designer.vue.html file in it - page template:
There are three radio buttons in the template that define the name of the report. Another button launches the Clicked function, which should request the report designer from the server. Further, the code displays the contents of the variable designer. This variable will contain the result of a get request from the designer. At the bottom, we declared a script to process this template. It will be located in a separate file online_designer.ts:
The Clicked function performs a get request for the web method in the SampleData controller. The web method returns a representation in html format, which we write to the variable designer. The SetReportName function sets the variable to report - the name of the report. This variable is passed in the get request from the designer as a parameter.
Since the application is automatically generated here, there are demo pages. Let's remove them from the menu navmenu.vue.html:
And now we add our component to boot.ts:
We added a link to the component we created. It will be displayed immediately when the web application is launched, that is, it will be the home page. Run our application. Select a report using the radio button and press the Design button:
Open another report, go to the Report tab and click the Save button:
Thus, we learned how to display an online designer in a one-page application written with the help of the Vue.js framework.