Integrate WebViewer into a Power Apps Component

1import { IInputs, IOutputs } from "./generated/ManifestTypes";
2import WebViewer from '@pdftron/webviewer'
3
4export class WebViewerControl implements ComponentFramework.StandardControl<IInputs, IOutputs> {
5
6    private _notifyOutputChanged: () => void;
7    private pdfURI = "";
8    private iframeWindow: Window;
9    private _context: ComponentFramework.Context<IInputs>;
10    private _container: HTMLDivElement;
11
12    constructor() {
13        // Empty constructor
14    }
15
16    /**
17     * Used to initialize the control instance. Controls can kick off remote server calls and other initialization actions here.
18     * Data-set values are not initialized here, use updateView.
19     * @param context The entire property bag available to control via Context Object; It contains values as set up by the customizer mapped to property names defined in the manifest, as well as utility functions.
20     * @param notifyOutputChanged A callback method to alert the framework that the control has new outputs ready to be retrieved asynchronously.
21     * @param state A piece of data that persists in one session for a single user. Can be set at any point in a controls life cycle by calling 'setControlState' in the Mode interface.
22     * @param container If a control is marked control-type='standard', it will receive an empty div element within which it can render its content.
23     */
24    public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary, container: HTMLDivElement): void {
25        // Add control initialization code
26        this._notifyOutputChanged = notifyOutputChanged;
27        this._context = context;
28
29        const viewerElement = document.createElement("div");
30        viewerElement.style.height = context.parameters.viewerheight.raw + "px";
31        viewerElement.style.width = context.parameters.viewerwidth.raw + "px";
32        this._container = viewerElement;
33        container.appendChild(this._container);
34
35        viewerElement.addEventListener('ready', () => {
36            this.iframeWindow = viewerElement.querySelector('iframe')!.contentWindow!;
37        })
38
39        WebViewer.Iframe({
40            path: 'http://localhost:3000/lib',
41            config: 'http://localhost:3000/config.js',
42            initialDoc: context.parameters.doc.raw!,
43        }, viewerElement)
44
45        window.addEventListener("message", (event: MessageEvent) => {
46            if (event.isTrusted && typeof event.data === 'object') {
47                switch (event.data.type) {
48                    case 'SAVE_DOCUMENT':
49                        this.handleDocSave(event.data.payload.file);
50                        break;
51                    default:
52                        break;
53                }
54            }
55        }, false);
56    }
57
58    private handleDocOpen(docUrl: string): void {
59        const payload = {
60            file: docUrl
61        };
62        this.iframeWindow.postMessage({ type: 'OPEN_DOCUMENT', payload }, '*');
63    }
64
65    private handleDocSave(docUrl: string): void {
66        this.pdfURI = docUrl;
67        this._notifyOutputChanged()
68    }
69
70    /**
71     * Called when any value in the property bag has changed. This includes field values, data-sets, global values such as container height and width, offline status, control metadata values such as label, visible, etc.
72     * @param context The entire property bag available to control via Context Object; It contains values as set up by the customizer mapped to names defined in the manifest, as well as utility functions
73     */
74    public updateView(context: ComponentFramework.Context<IInputs>): void {
75        this._container.style.height = context.parameters.viewerheight.raw + "px";
76        this._container.style.width = context.parameters.viewerwidth.raw + "px";
77        if (context.updatedProperties.indexOf("doc") > -1) {
78            this._context = context;
79            this.handleDocOpen(context.parameters.doc.raw!)
80        }
81    }
82
83    /**
84     * It is called by the framework prior to a control receiving new data.
85     * @returns an object based on nomenclature defined in manifest, expecting object[s] for property marked as “bound” or “output”
86     */
87    public getOutputs(): IOutputs {
88        const result = {
89            pdfdoc: this.pdfURI
90        };
91        return result;
92    }
93
94    /**
95     * Called when the control is to be removed from the DOM tree. Controls should use this call for cleanup.
96     * i.e. cancelling any pending remote calls, removing listeners, etc.
97     */
98    public destroy(): void {
99        // Add code to cleanup control if necessary
100    }
101}
102