Some test text!

Opening Documents

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.


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

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


Refactor this component to pass all props as mendixProps:

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} />;    


Refactor this component to pass all props as mendixProps:

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");


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

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(() => {        
            path: "/resources/lib",            
        }, viewerRef.current as HTMLDivElement).then(instance => {
            const { documentViewer } = instance.Core;            
    }, []);
    // load document coming from the URL attribute    
    useEffect(() => {        
        if(instance && 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.

Get the answers you need: Support

Upcoming Webinar: PDFTron SDK Tech Review | Nov 29, 2022 at 2 pm ET


The Platform


© 2022 PDFTron Systems Inc. All rights reserved.


Terms of Use