Using Web Report Designer/Web Report Viewer in React, Angular or Vue.js

Knowledgebase English KB
, , ,
1

Introduction

Since both controls are available as Web Components, you are free to choose which frontend technology you use. Both can also be placed in a pure HTML page, for example.

Implementation

On the backend side ASP.NET is mandatory. Add a controller here, as described for example here. You can also use the examples provided as a guide.

On the frontend side you only need a script include, then the controls can be used anywhere in the HTML code. A simple example for the Web Report Designer for version 27 would look like this:

<html>
	<head>
		<title>WebReportDesigner</title>
		<script src='combit-webreportdesigner-27.0.min.js' />
	</head>
	<body>
		<ll-webreportdesigner backendurl="https://localhost:44382/WebReportDesigner" />
	</body>
</html>

For the Web Report Viewer accordingly like this:

<html>
	<head>
		<title>WebReportViewer</title>
		<script src='combit-webreportviewer-27.0.min.js' />
	</head>
	<body>
		<ll-webreportviewer backendUrl="https://localhost:44382/WebReportViewer" defaultProject="86786548-7D45-4C58-A405-494BD19B2A63" />
	</body>
</html>

This construct can be easily mapped in all frontend technologies.

Sample

As of version 28.001, samples for Angular, React and Vue.js are included in the product.

2 Likes