How to use Online Designer in a knockout.js application
The knockout.js library was quite popular among web developers before the appearance of angular. Despite the obvious advantages of angular, knockout is still in demand. Many web applications are written on it. Some of them need reporting. Therefore, we will discuss in this article how to integrate the FastReport online report designer into the application, with the client part on the knockout, and the server part on the ASP.Net Core.
First of all, we need the Knockout application template for the dotnet platform. You must have the NET Core 2.0 SDK or MS Visual Studio 2017 installed. Open the Windows command prompt. Go to the directory where you plan to create the application. Enter the command:
dotnet new — install Microsoft.AspNetCore.SpaTemplates::*
As a result, we should see a list of available one-page application templates:
In this list we see knockout - it means you can create an application from a template. Enter the command:
dotnet new knockout –o KnockOnlineDesigner
This command creates a demo application with the prepared structure. After creating the application, you need to install the necessary packages. Therefore, go to the folder with the created application:
And install the packages:
Open the created project. Now you can run the application and see three demo pages. But our task is to create our own page with an online designer. First of all, you need to install the FastReport.Net packages in the Nuget package manager. Open the manager and configure the local package source - the Nuget folder in the FastReport.Net installation directory.
The FastReport.Core and FastReport.Web packages are installed, now you need to enable the use of FastReport in the application. Editing the Startup.cs file. Add a line to the Configure method:
Add the App_Data folder to the wwwroot folder. Put in it the xml database for reports:
Then we move to editing SampleDataController controller. We remove all the methods from it and add our own:
The Design method creates a web report object and loads a report template into it. Then, this web report is switched to the development mode, and in fact is transmitted to the online designer.
The SaveDesidnedReport method is needed to save the edited report on the server.
The Upload method is used to upload a report file to the server.
For Design and SaveDesignedReport methods, you need to create views. Right-click on the method signature and select Add view. To view Design.cshtml, change the code to:
And for SaveDesignedReport.cshtml change it to:
The ClientApp folder contains the application on knockout.js. Let's display our report designer right on the home page. Expand the ClientApp-> components-> home-page folder. Edit the home-page.html file:
Here we will display the open file dialog button. We transfer the uploaded file to the Upload function. Below, we display an online designer, obtained from the server.
Now change the script file home-page.ts:
The Upload method receives the file and sends it to the server. In turn, the controller on the server uploads the report file to the online designer and returns it to the client. In the Upload method, we write the server's response to the designer variable.
It remains to correct the site menu nav-menu.html. Remove unnecessary pages from it:
And also edit the app-root.ts file and exclude unnecessary components from it:
Run our demo app. Select the report file in frx format. The file will be uploaded to the server and transferred to the report designer:
This way you can edit report templates from your knockout application.