Save Annotations in Mendix

After following the getting started guide, you can add an attribute that will store the annotation data that can prepopulate an attribute which can then be passed to the custom widget. The attribute will be a text field for where you want to save annotations. The attribute length must be unlimited.

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="annotationAttribute" type="attribute">
    <caption>Annotation</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, { Core, 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);    
    const [annotationManager, setAnnotationManager] = useState<null |Core.AnnotationManager>(null);

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

    // save annotation data to the annotation attribute    
    useEffect(() => {        
        const updateAnnotation = async () => {
            if (annotationManager) {
                const xfdf = await annotationManager.exportAnnotations({ links: false, widgets: false });
                mendixProps.annotationAttribute.setValue(xfdf);
            }        
        }

        if(instance && annotationManager) {            
            instance.UI.setHeaderItems(header => {                
                header.push({                  
                    type: 'actionButton',                  
                    img: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"/></svg>',onClick: updateAnnotation                
                });           
            });       
        }    
    }, [instance, annotationManager]);

    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);    
    const [annotationManager, setAnnotationManager] = useState<null | CoreControls.AnnotationManager>(null);

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

    // save annotation data to the annotation attribute    
    useEffect(() => {        
        const updateAnnotation = async () => {
            if (annotationManager) {
                const xfdf = await annotationManager.exportAnnotations({ links: false, widgets: false });
                mendixProps.annotationAttribute.setValue(xfdf);
            }        
        }

        if(instance && annotationManager) {            
            instance.setHeaderItems(header => {                
                header.push({                  
                    type: 'actionButton',                  
                    img: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"/></svg>',onClick: updateAnnotation                
                });           
            });       
        }    
    }, [instance, annotationManager]);

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

export default PDFViewer;

The code snippet above adds a new save button that saves to an annotation attribute passed to the custom widget. 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.