Recently, grape is doing technical support, and we have encountered new problems from customers.

Here’s the thing. This time the customer is using. Net project, it is too complicated to do BI large screen directly, so I want to directly integrate BI data visualization analysis of large screen.

So, this time, we will start with Wyn to show you how to integrate BI dashboard data visualization into a.NET environment.

Speaking of this, some students do not have the concept of BI dashboard data visualization large screen, we first introduce it to you.

BI Dashboard data visualization large screen

No matter what project you are carrying out now, you will encounter a lot of party A that needs a cool data kanban for data visualization and self-service data analysis.

This kanban is the large screen of BI dashboard data visualization.

How important is this kanban?

It is suitable for internal information sharing, external industry communication, and conference site display. At the same time, kanban requirements have become normalized. For Clients of Party A, the necessary function of project requirements is to support “visual large screen”. Therefore, BI visual dashboard design will appear in every information project we do now and in the future.

Here we simply stratify according to the effect and function of the large screen:

The first layer: the stack of simple visualization means, such as using Echarts.js or other chart libraries, to display static data in a visual style, forming a static adaptive data visualization “report”;

Layer 2: Realize real-time update of data, associate with real business data, and display business data in real time with visual charts instead of static data;

The third layer: realize self-service data analysis, including data modeling, data processing, visual display and self-service data analysis operations, is the real sense of business intelligence data analysis.

Therefore, to achieve BI large screen, the overall development workload is mainly determined according to our actual needs. This time, we will use Wyn Enterprise as an example to show you how to use. Net Core project to achieve BI visual application integration. Finally, the project can realize screen adaptation, multi-page dashboard, automatic data refresh, 3D animation effects and other effects, which can be directly applied to the scenes of smart park, intelligent workshop, health and medical treatment, electric energy, campus security, digital command center and so on.

Introduction to BI integration in.NET Core project

There are three main ways to integrate BI in.net Core projects. Here are some examples of the different ways to integrate BI.

Div integration

Div integration is mostly used when you want to integrate dashboards, reports, data sources, and data sets into a business system natively. The core of this integration approach is to take the document’s DIV element and its corresponding value and write it into your web code.

Pay attention to

Before DIV integration, you need to configure the Wyn system to allow cross-domain requests. Such as:

The sample code

Sample code for integration is shown below:

The following numbers in the figure are explained respectively:

(1) The actual domain name of the deployment system;

(2) Version number of the Dashboard plug-in in the system;

(3) User Token, please ensure that the Token used has sufficient permissions (such as viewing the dashboard, such as integration designer needs to create dashboard permissions).

(4) The ID of the dashboard for integrating a single dashboard document. If you integrate an empty designer, you don’t need it, just delete this line.

(5) Reference code for integration designer.

(6) Reference code for integrating a single dashboard document.

URL integration

The most commonly used integration method in.NET Core projects is URL integration. The Core of this integration method is to set a URL with a parameter (QueryString) as the target address of a menu link in the business system, or as the SRC attribute value of an IFrame element in the business system page.

The core of URL integration is to generate the complete URL of the integrated report or dashboard.

Take the dashboard for example:

(1) Open the dashboard in a new window

Select the dashboard and click the New Window button in the upper right corner of the page to open the dashboard in a new browser window.

(2) Copy the URL of the browser address bar

Copy and paste the DASHBOARD URL to the Notepad for later use.

(3) Obtain access token

Enter the system background management > Generate a token.

Input the token information and click the “Generate token” button to generate the token string of the user name. Click the Get token button on the right to copy the token.

There’s a caveat here

The user name used to generate the token should have view rights for the report or dashboard to be accessed.

For example, create a user named Guest for your project, create a role named “Integrated User”, and add the Guest user to the role. Then set the permissions for the report or dashboard to be integrated, allowing “integrated user” [read only].

(4) Paste the token just copied to the end of the URL in step (3) and use &token= to connect, resulting in the following URL string:

http://localhost:51980/dashboards/view/5d5cafe6e98abc00018ff4e5?theme=default&lng=zh-CN &token=0b77ebfe232bff06248ce245c24af6aa84010b5f747ef41e605b08ae310a6fed

(5) Use URL string with token

Set the URL string to the SRC attribute of an IFrame or the href attribute of the hyperlink in the business system page file.

Such as:

\< iframe src=" [http://localhost:51980/dashboards/view/5d5cafe6e98abc00018ff4e5?theme=default& lng=zh-CN](http://localhost:51980/dashboards/view/5d5cafe6e98abc00018ff4e5? theme=default& lng=zh-CN)& token=0b77ebfe232bff06248ce245c24af6aa84010b5f747ef41e605b08ae310a6fed" style=" height:90%; width:90%; border:none; background:grey; " /\>Copy the code

The effect is shown below:

If you want to open the dashboard content in a new browser window, simply set a hyperlink, href set to the URL above.

Such as:

<iframe src="http://localhost:51980/dashboards/view/5d5cafe6e98abc00018ff4e5? theme=default&lng=zh-CN&token=0b77ebfe232bff06248ce245c24af6aa84010b5f747ef41e605b08ae310a6fed" style="height:90%; width:90%; border:none; background:grey;" />Copy the code

API integration

This approach requires the BI system to support the GraphQL API, so that almost all interface operations can be completed by calling the API. For example, when the list of documents under a certain category is expanded in the portal page, the actual GraphQL API calls can be seen through the browser debug pane.

Operation method

For details about all API calls, please refer to:

wyn.grapecity.com.cn/WynApiDemo/

Example API call as shown below:

Unlike the REST API, the GraphQL API does not need to provide different urls for different object operations. Different objects of different operations, is through a unified URL (http://localhost:51980/api/graphql) call; The difference is that the data submitted is not the same.

To view the format and content of the submitted data, you can use the browser debugging function to view the Network interaction in the interface operation, and then the specific Headers.

The content returned by the API can be obtained by looking at the Response section of the network interaction.

In the browser open http://localhost:51980/graphiql page (note that the URL at the end of the graph and there is a letter I) between ql, may at any time debugging API, the following figure:

Now we’ll show you how to implement data visualization in an ASP.NET Core MVC project.

ASP.net Core MVC project integrates BI data visualization

After installing Wyn, use localhost:51980 to access the portal administration site.

The dashboard, designer, management center and data processing module used in the whole data visualization are all online B/S terminals, which can be directly installed by us.

Open a new ASP.NET MVC project in Visual Studio or add a new view or HTML file to an existing project

other

Above we introduced the ASP.net Core MVC project and. The integration approach in Net Core projects, but more advanced integration capabilities are needed to better solve problems in real projects.

Permission management in integration

BI dashboard involves the core business data information of enterprises, so the user authority is a key function, so the user authority management also needs different solutions to deal with, we take the most familiar security token as an example:

With fixed token integration, you view the report content as a fixed user.

If you want different users of the service system to view different report contents based on their data permissions, you need to log in as the current user of the service system, obtain different tokens, and then view the document contents.

User identity integration is the process of transferring the current login user of the business system to the BI system and logging in as the user.

There are two ways of user identity integration :(1) using URL parameters to pass user information; (2) Single sign-on integration. The former is easier, the latter safer.

QueryString

Passing user information directly using the QueryString method of the URL is another common feature that you might use.

The method is as follows:

(1) Define a hidden parameter when designing the report. For example, the parameter name is oauser. The purpose of setting parameter hiding is to prevent a user from viewing the report content by manually entering another user’s username.

(2) Add user identity parameters in the URL of the integrated report content.

Example:

& dp = {" oauser ": [" ZhangSan"]}.Copy the code

Like the other parameters, the content of this parameter needs to be URL-encoded, resulting in the following:

%dp=%7b%22oauser%22%3a%5b%22ZhangSan%22%5d%7d
Copy the code

Note:

(1) The parameter name (oauser) must be the same as the parameter name defined in report design and case sensitive.

(2) This method still uses fixed tokens for integration, that is, in the URL used for integration, the token parameter value of QueryString is still a fixed string.

Single sign-on integration

If the service system has higher security requirements, you can use the login API in the service system login screen to realize single sign-on integration and put the obtained token in the session variable.

When the reporting functionality needs to be integrated, the token is fetched from the session variable and concatenated in the integration URL. In this way, each user of the business system is a different token.

The user login information retrieved from the login screen of the service system is the user name and password entered by the user. Usually, the login API of BI system can be invoked by the user account of the business system. Only the account with the same user name and password in Wyn can be invoked.

To avoid creating multiple sets of account passwords for each user, we can also write custom security providers.

By writing a customized security provider, users of a service system can directly log in to a service system account to view the data within the scope of their authority when viewing report content.

Write at the end:

Whether it’s.net Core or. NET 5 or 6 of the whole project has a powerful server resources to support, suitable for large concurrent development, high performance business systems, if big BI visualization function, existing tools on the market is already very perfect, we are considering to add this project 【 appearance 】 function, may wish to consider quoting the ready-made tool, Focus development resources on the core business for efficient cross-platform project delivery.