Verwendung von Web Report Designer/Web Report Viewer in React, Angular oder Vue.js

Einleitung

Da beide Controls als Web Components vorliegen, steht es Ihnen frei, welche Frontend-Technologie Sie verwenden, beide können z.B. auch in einer reinen HTML-Seite platziert werden.

Umsetzung

Auf der Backend-Seite wird zwingend ASP.NET vorausgesetzt. Fügen Sie hier einen Controller hinzu, wie es z.B. hier beschrieben ist. Sie können sich auch an den mitgelieferten Beispielen orientieren.

Auf der Frontend-Seite wird lediglich ein Script-Include benötigt, dann können die Controls an einer beliebigen Stelle im HTML-Code verwendet werden. Ein simples Beispiel für den Web Report Designer für Version 27 würde so aussehen:

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

Für den Web Report Viewer entsprechend so:

<html>
	<head>
		<title>WebReportViewer</title>
		<script src='combit-webreportviewer-27.0.min.js' />
	</head>
	<body>
		<ll-webreportviewer backendUrl="https://localhost:44382/WebReportViewer" defaultProject="2081F6C0-4C05-4BE7-9FC4-19EFCB078EF9" />
	</body>
</html>

Dieses Konstrukt lässt sich in allen Frontend-Technologien leicht abbilden.

Beispiel

Im Anhang findet sich ein sehr einfach gehaltenes Beispiel für ein Angular-Frontend und Version 27, das das Prinzip demonstriert. Ab Version 28 befindet sich ein Beispiel im Lieferumfang.

AngularSample.zip (4.7 MB)

© combit GmbH