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

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

Attached is a very simple example of an Angular frontend for List & Label 27 that demonstrates the principle. As of version 28, an example is included.

AngularSample.zip (4.7 MB)

2 Likes

© combit GmbH