Integrate WebViewer into Mendix

This is a sample of WebViewer integration into a Mendix low-code app.

WebViewer provides a slick out-of-the-box responsive UI that enables you to view, annotate and manipulate PDFs and other document types inside any web project.

Click the button below to view the full project in GitHub.

1import { Component, ReactNode, createElement } from "react";
2import PDFViewer from "./components/PDFViewer";
3
4import { WebViewerContainerProps } from "../typings/WebViewerProps";
5
6import "./ui/WebViewer.css";
7
8export default class WebViewer extends Component<WebViewerContainerProps> {
9 render(): ReactNode {
10 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
11 // @ts-ignore
12 const mx = window.mx;
13 const viewerProps = {
14 ...this.props,
15 annotationUser: this.props.annotationUser?.value,
16 isVisible: this.props.isVisible?.value,
17 mx
18 };
19 return <PDFViewer {...viewerProps} />;
20 }
21}
22

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales