Section:

Open PDF and MS Office Files in Mendix

After following the getting started guide, you can add a flow that can prepopulate an attribute which can then be passed to the custom widget. The attribute can be a URL to access the file, or a token or any attribute of your choice.

Adding a custom attribute

Inside of the /CustomWidgets/WebViewer directory, open in it your code editor and change the following files.

WebViewer.xml

Add a new property inside of <propertyGroup caption="General"></propertyGroup>:

XML

1<property key="urlAttribute" type="attribute">
2    <caption>URL (path to file)</caption>
3    <description/>                
4    <attributeTypes>                    
5        <attributeType name="String"/>                
6    </attributeTypes>
7</property>

WebViewer.tsx

Refactor this component to pass all props as mendixProps:

JavaScript

1import { Component, ReactNode, createElement } from "react";
2import PDFViewer from "./components/PDFViewer";
3import { WebViewerContainerProps } from "../typings/WebViewerProps";
4import "./ui/WebViewer.css";
5
6export default class WebViewer extends Component<WebViewerContainerProps> {    
7    render(): ReactNode {        
8        return <PDFViewer mendixProps={this.props} />;    
9    }
10}

WebViewer.editorPreview.tsx

Refactor this component to pass all props as mendixProps:

JavaScript

1import { Component, ReactNode, createElement } from "react";
2import PDFViewer from "./components/PDFViewer";
3import { WebViewerPreviewProps } from "../typings/WebViewerProps";
4
5declare function require(name: string): string;
6
7export class preview extends Component<WebViewerPreviewProps> {    
8    render(): ReactNode {        
9        return <PDFViewer mendixProps={this.props}/>;    
10    }
11}
12
13export function getPreviewCss(): string {    
14    return require("./ui/WebViewer.css");
15}

Components/PDFViewer.tsx

Refactor this component to handle mendixProps and load the URL that got passed in:

1import { createElement, useRef, useEffect, useState } from "react";
2import viewer, { WebViewerInstance } from "@pdftron/webviewer";
3
4export interface InputProps {    
5    mendixProps: any
6}
7
8const PDFViewer: React.FC<InputProps> = ({ mendixProps }) => {    
9    const viewerRef = useRef<HTMLDivElement>(null);    
10    const [instance, setInstance] = useState<null | WebViewerInstance>(null);
11
12    useEffect(() => {        
13        viewer({                
14            path: "/resources/lib",            
15        }, viewerRef.current as HTMLDivElement).then(instance => {
16            const { documentViewer } = instance.Core;            
17            setInstance(instance);               
18        });    
19    }, []);
20    
21    // load document coming from the URL attribute    
22    useEffect(() => {        
23        if(instance && mendixProps.urlAttribute.value !== '') {
24            instance.UI.loadDocument(mendixProps.urlAttribute.value);
25    }    }, [instance, mendixProps.urlAttribute]);
26
27    return <div className="webviewer" ref={viewerRef}></div>;
28};
29
30export default PDFViewer;

useEffect listens for any of the changes in mendixProps.urlAttribute and sets the document based on its value. The urlAttribute can be populated using a flow. Do not forget to run npm run dev on the CustomWidgets/WebViewer directory in your terminal to build it and in Mendix Studio run the command to synchronize project directory under Project/Synchronise Project Directory or hitting F4. After that run the project and try it out.

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales