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

<property key="urlAttribute" type="attribute">
    <caption>URL (path to file)</caption>
    <description/>                
    <attributeTypes>                    
        <attributeType name="String"/>                
    </attributeTypes>
</property>

WebViewer.tsx

Refactor this component to pass all props as mendixProps:

JavaScript

import { Component, ReactNode, createElement } from "react";
import PDFViewer from "./components/PDFViewer";
import { WebViewerContainerProps } from "../typings/WebViewerProps";
import "./ui/WebViewer.css";

export default class WebViewer extends Component<WebViewerContainerProps> {    
    render(): ReactNode {        
        return <PDFViewer mendixProps={this.props} />;    
    }
}

WebViewer.editorPreview.tsx

Refactor this component to pass all props as mendixProps:

JavaScript

import { Component, ReactNode, createElement } from "react";
import PDFViewer from "./components/PDFViewer";
import { WebViewerPreviewProps } from "../typings/WebViewerProps";

declare function require(name: string): string;

export class preview extends Component<WebViewerPreviewProps> {    
    render(): ReactNode {        
        return <PDFViewer mendixProps={this.props}/>;    
    }
}

export function getPreviewCss(): string {    
    return require("./ui/WebViewer.css");
}

Components/PDFViewer.tsx

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

JavaScript (SDK v8.0+)

import { createElement, useRef, useEffect, useState } from "react";
import viewer, { WebViewerInstance } from "@pdftron/webviewer";

export interface InputProps {    
    mendixProps: any
}

const PDFViewer: React.FC<InputProps> = ({ mendixProps }) => {    
    const viewerRef = useRef<HTMLDivElement>(null);    
    const [instance, setInstance] = useState<null | WebViewerInstance>(null);

    useEffect(() => {        
        viewer({                
            path: "/resources/lib",            
        }, viewerRef.current as HTMLDivElement).then(instance => {
            const { documentViewer } = instance.Core;            
            setInstance(instance);               
        });    
    }, []);
    
    // load document coming from the URL attribute    
    useEffect(() => {        
        if(instance && mendixProps.urlAttribute.value !== '') {
            instance.UI.loadDocument(mendixProps.urlAttribute.value);
    }    }, [instance, mendixProps.urlAttribute]);

    return <div className="webviewer" ref={viewerRef}></div>;
};

export default PDFViewer;

JavaScript (SDK v7.0+)

import { createElement, useRef, useEffect, useState } from "react";
import viewer, { CoreControls, WebViewerInstance } from "@pdftron/webviewer";

export interface InputProps {    
    mendixProps: any
}

const PDFViewer: React.FC<InputProps> = ({ mendixProps }) => {    
    const viewerRef = useRef<HTMLDivElement>(null);    
    const [instance, setInstance] = useState<null | WebViewerInstance>(null);

    useEffect(() => {        
        viewer({                
            path: "/resources/lib",            
        }, viewerRef.current as HTMLDivElement).then(instance => {
            const { docViewer } = instance;            
            setInstance(instance);               
        });    
    }, []);
    
    // load document coming from the URL attribute    
    useEffect(() => {        
        if(instance && mendixProps.urlAttribute.value !== '') {
            instance.loadDocument(mendixProps.urlAttribute.value);
    }    }, [instance, mendixProps.urlAttribute]);

    return <div className="webviewer" ref={viewerRef}></div>;
};

export 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.